Bootstrap - 比例

上一頁
下一頁

本章討論縱橫比。在 Bootstrap 中，縱橫比用於保持響應式元素（例如影像或影片）相對於其父容器的比例。它使用.ratio類以及表示所需縱橫比的修飾符類來指定。


  • 要管理外部內容（如<iframe>、<embed>、<video>和<object>）的縱橫比，請使用ratio-*類。

  • 比例輔助程式也可以用於標準 HTML 子元素，例如<div>或<img>。

  • 樣式直接從父.ratio類應用到子元素。

  • 縱橫比修飾符類中的*可以替換為：

    • ratio-21x9：建立一個具有 21:9 縱橫比的響應式元素

    • ratio-16x9：建立一個具有 16:9 縱橫比的響應式元素

    • ratio-4x3：建立一個具有 4:3 縱橫比的響應式元素

    • ratio-1x1：建立一個具有 1:1 縱橫比的響應式元素

這是一個關於如何在<iframe>元素中使用縱橫比的示例。這裡我們使用的是 16x9 縱橫比

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Ratio</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>
        <h2 class="text-success text-center">
            Aspect Ratio 16x9
        </h2>
        <hr>
        <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/4PWVFBiFVVU"
                    title="YouTube video" allowfullscreen>
            </iframe>
        </div>
    </body>
</html>

這是一個關於如何在<iframe>元素中使用縱橫比的示例。這裡我們使用的是 21x9 縱橫比

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Ratio</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>
        <h2 class="text-success text-center">
            Aspect Ratio - 21x9
        </h2>
        <hr>
        <div class="ratio ratio-21x9">
            <iframe src="https://www.youtube.com/embed/4PWVFBiFVVU"
                    title="YouTube video" allowfullscreen>
            </iframe>
        </div>
    </body>
</html>

自定義比例

在 Bootstrap 中，自定義比例允許您使用 CSS 和 JavaScript 的組合為響應式元素定義您自己的縱橫比。

如果您有一個內建縱橫比修飾符類未涵蓋的特定縱橫比，這將非常有用。以下示例透過在.ratio上設定--bs-aspect-ratio: 50%來演示。

示例

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

<!DOCTYPE html>
<html lang="en">

  <head>
      <title>Bootstrap - Helper - Ratio</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 class="text-success text-center">
		  Ratio
	  </h1>
	  <hr>
      <div class="text-center">
        <h2 class="text-success">Bootstrap 5 Custom ratios</h2>
      </div>
      <br>
      <div class="ratio" style="--bs-aspect-ratio: 10%;">
        <div class="bg-success"><h1>success</h1></div>
      </div>
      <div class="ratio" style="--bs-aspect-ratio: 30%;">
      <div class="bg-secondary"><h1>secondary</h1></div>
    </div>
  </body>
</html>
列印頁面
上一頁
下一頁
廣告