Bootstrap - 顯示

本章討論 Bootstrap 的display屬性。

在 Bootstrap 中，display屬性用於控制元素的可見性和行為。它允許您定義元素應如何在文件佈局中呈現和定位。

表示法

適用於所有斷點（從xs到xxl）的實用程式類沒有斷點的縮寫。
這些類從min-width: 0;及以上實現，不受媒體查詢限制。
其餘斷點包含斷點的縮寫。

以下格式用於命名display類

.d-{value} 用於xs，例如.d-none。
.d-{breakpoint}-{value} 用於sm, md, lg, xl 和 xxl，例如.d-lg-none 在lg, xl, 和 xxl 螢幕上設定display: none;。

{value} 可以是以下之一

none
inline
inline-block
block
grid
inline-grid
table
table-cell
table-row
flex
inline-flex

display屬性的一些值如下所示

.d-none：此值完全隱藏元素，使其不可見且在佈局中不佔用任何空間。
.d-inline：此值使元素的行為類似於內聯元素，允許其他元素在同一行與其一起顯示。
.d-block：此值使元素的行為類似於塊級元素，使其在新行開始並佔用所有可用寬度。
.d-inline-block：此值結合了內聯和塊元素的特性。元素以內聯方式顯示，允許其他元素與其一起顯示。

讓我們來看一個.d-inline的例子

示例

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

<!DOCTYPE html>
<html>
    <head>
       <title>Bootstrap - Display</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 m-3 p-5">
        <div class="d-inline m-2 p-4 text-bg-success">d-inline - success</div>
        <div class="d-inline p-4 text-bg-warning">d-inline - warning</div>
      </div>
    </body>
</html>

讓我們來看一個.d-block的例子

示例

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

<!DOCTYPE html>
<html>
    <head>
       <title>Bootstrap - Display</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">
        <h4>Display - block</h4>
        <span class="d-block p-4 text-bg-info">d-block used for info</span>
        <span class="d-block p-4 text-bg-primary">d-block used for primary</span>
      </div>
    </body>
</html>

隱藏元素

為了隱藏元素，請使用.d-none類或其中一個.d-{sm, md, lg, xl, xxl}類。

螢幕尺寸	類
在所有螢幕上隱藏	.d-none
僅在 xs 上隱藏	.d-none 和 .d-sm-block
僅在 sm 上隱藏	.d-sm-none 和 .d-md-block
僅在 md 上隱藏	.d-md-none 和 .d-lg-block
僅在 lg 上隱藏	.d-lg-none 和 .d-xl-block
僅在 xl 上隱藏	.d-xl-none 和 .d-xxl-block
僅在 xxl 上隱藏	.d-xxl-none
在所有螢幕上可見	.d-block
在 xs 上可見	.d-block 和 .d-sm-none
在 sm 上可見	.d-none .d-sm-block .d-md-none
在 md 上可見	.d-none .d-md-block .d-lg-none
在 lg 上可見	.d-none .d-lg-block .d-xl-none
在 xl 上可見	.d-none .d-xl-block .d-xxl-none
在 xxl 上可見	.d-none .d-xxl-block

讓我們來看一個在小於lg的螢幕上隱藏顯示的示例

注意：請調整螢幕大小以檢視更改後的效果。

示例

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Display</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">
     <h4>Hide - display</h4>
     <!--Hide display on smaller than lg-->
     <div class="d-lg-none bg-warning">Hide on lg (large) and wider screens</div>
     <div class="d-none d-lg-block bg-info">Visible on screens smaller than xl (extra-large)</div>
    </div>
  </body>
</html>

列印時顯示

您可以使用我們的列印顯示實用程式類修改元素的display值，以專門用於列印目的。這些類為與響應式.d-*實用程式相同的display值提供支援。

以下是列印時顯示可用的實用程式列表

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

display和print類可以組合使用。讓我們來看一個例子

注意：請調整螢幕大小以檢視更改後的效果。

示例

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Display</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 m-3 p-3">
     <h4>Print - display</h4>
     <!--display on print and hide on screen-->
     <div class="d-none d-print-block bg-primary-subtle p-3">Hide on screen and display on print only</div>
     <!--display on screen and hide on print-->
     <div class="d-print-none bg-warning p-3">Hide on print and display on screen only</div>
     <!--display upto large screen and show always on print-->
     <div class="d-none d-lg-block d-print-inline bg-danger-subtle p-3">Always display on print and hide up to large screen</div>
    </div>
  </body>
</html>

列印頁面