Bootstrap - 圖片

上一頁
下一頁

本章將討論 Bootstrap 提供的各種用於支援圖片的類。圖片在吸引網站訪問者的注意力方面起著至關重要的作用。除了使內容更有趣和引人入勝外，圖片還有助於規劃任何網站的內容策略。

響應式圖片

可以使用類.img-fluid使 Bootstrap 中的圖片具有響應性。此類將max-width: 100%;和height: auto;應用於圖片，以便它隨著父容器寬度進行縮放。響應式圖片會根據螢幕尺寸自動調整大小。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Responsive Image</h2>
        <img src="/bootstrap/images/tutimg.png" class="img-fluid" alt="Responsive Image">
       </div>
     </body>
</html>

縮圖圖片

要將圖片顯示為帶有邊框和一些填充的縮圖，請在image元素上使用類.img-thumbnail。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Thumbnail Image</h2>
        <img src="/bootstrap/images/scenery.jpg" class="img-thumbnail" alt="Thumbnail Image">
       </div>
     </body>
</html>

帶有圓角的圖片

要將圖片顯示為帶有圓角，請在image元素上使用類 .rounded。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Image with rounded corners</h2>
        <img src="/bootstrap/images/scenery2.jpg" class="rounded" alt="Image with rounded corners">
       </div>
     </body>
</html>

圖片對齊

新增到網頁的圖片可以根據我們的選擇進行對齊，可以是左對齊、右對齊或居中對齊。為了將圖片

  • 左對齊，使用類 .float-start

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap - Images</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <div class="container mt-3 p-2">
      <h2 class="text-start">Image aligned to left</h2>
      <img src="/bootstrap/images/scenery3.jpg" class="float-start" alt="Left aligned Image">
     </div>
   </body>
</html>
  • 右對齊，使用類 .float-end

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
   <head>
   <title>Bootstrap - Images</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-3 p-2">
   <h2 class="text-center">Image aligned to right</h2>
   <img src="/bootstrap/images/tutimg.png" class="float-end" alt="Right aligned Image">
  </div>
</body>
</html>
  • 居中對齊，使用實用工具類 .mx-auto (margin:auto) 和.d-block (display:block)

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Images</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
     <h2 class="text-center">Image aligned to centre</h2>
     <img src="/bootstrap/images/profile.jpg" width="500" height="500" class="mx-auto d-block" alt="Centre aligned Image">
    </div>
  </body>
</html>

圖片元素 (Picture)

當在<picture>元素/標籤下為特定圖片<img>元素使用多個<source>元素時，我們必須將.img-*類新增到<img>元素，而不是<picture>元素/標籤。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
     <head>
          <title>Bootstrap - Images</title>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      </head>
     <body>
       <h1>Use of Picture tag</h1>
       <picture>
         <img class="img-fluid img-thumbnail" alt="alt text for all sources" src="/bootstrap/images/tutimg.png">
       </picture>
     </body>
</html>
列印頁面
上一頁
下一頁
廣告