Bootstrap - 圖片

本章討論 Bootstrap 的圖片元件。如果需要展示內容，例如可能帶有可選標題的圖片，請考慮使用<figure>元素。

<figure> 元素用於在文件中標記照片或圖片，而<figcaption> 用於定義該照片的標題。
.figure 類用於為圖片、影片或其他媒體物件建立響應式容器。
它提供了一種方法來包裝媒體內容以及可選的標題和其他相關元素。
類.figure, .figure-img 和 .figure-caption 為<figure> 和 <figcaption> 提供了基礎樣式。
為了使圖片具有響應性，請將.img-fluid 類新增到您的<img> 中；因為圖片在 figure 中沒有明確的尺寸。

讓我們來看一個.figure 類的例子

示例

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

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Figures</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">
        <h4>Figures</h4><br>
        <figure class="figure">
          <img src="/bootstrap/images/scenery.jpg" class="figure-img img-fluid rounded" alt="Image in Figure">
          <figcaption class="figure-caption">A caption for the responsive image.</figcaption>
        </figure>
    </body>
</html>

可以使用文字實用工具類更改標題的對齊方式，例如.text-start, .text-center 或 .text-end。

讓我們來看一個更改標題對齊方式的例子

示例

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

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap - Figures</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">
        <h4>Figure caption alignment</h4><br>
        <figure class="figure">
          <img src="/bootstrap/images/tutimg.png" class="figure-img img-fluid rounded" alt="Image in Figure">
          <figcaption class="figure-caption text-center">Responsive image</figcaption>
        </figure>
    </body>
</html>

列印頁面