Bootstrap 简明教程

Bootstrap - Display

本章讨论了 Bootstrap 的 display 属性。

在 Bootstrap 中， display 属性用于控制元素的可见性和行为。该属性可定义在文档布局中应如何呈现和放置元素。

Notation

  1. 适用于所有断点的实用工具类，范围从 xs 到 xxl ，没有断点的任何缩写。

  2. 这些类从 min-width: 0; 及更高版本中实施，不受媒体查询限制。

  3. 其余断点包含断点的缩写。

命名 display 类时使用以下格式：

  1. .d-{value} 的 xs ，例如 .d-none 。

  2. .d-{breakpoint}-{value} 的 sm, md, lg, xl 和 xxl ，例如 .d-lg-none 在 lg, xl, 和 xxl 屏幕上设置 display: none; 。

{value} 可以为以下值之一：

  1. none

  2. inline

  3. inline-block

  4. block

  5. grid

  6. inline-grid

  7. table

  8. table-cell

  9. table-row

  10. flex

  11. inline-flex

display 属性采取的部分值如下：

  1. .d-none ：此值完全隐藏元素，使其不可见且不占用布局中的任何空间。

  2. .d-inline ：此值使元素表现得像一个内联元素，允许其他元素与其并排显示在同一行上。

  3. .d-block ：此值使元素表现得像一个块级元素，导致它从新行开始并占用完全可用的宽度。

  4. .d-inline-block ：此值结合了内联和块元素的特征。元素内联显示，允许其他元素与其并排显示。

我们来看看 .d-inline 的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 的示例：

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>

Hide elements

为了隐藏元素，使用 .d-none 类或 .d-{sm, md, lg, xl, xxl} 类之一。

我们来看看在小于 lg 的屏幕上隐藏显示的示例：

Note: 请调整屏幕大小以查看更改后的效果。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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 in print

你可以使用我们的打印展示实用程序类来专门修改元素的 display 值以达到打印目的。这些类对与响应式 .d- * 实用程序相同的 display 值提供支持。

以下是 display 可用的用于打印的实用程序列表：

  1. .d-print-none

  2. .d-print-inline

  3. .d-print-inline-block

  4. .d-print-block

  5. .d-print-grid

  6. .d-print-inline-grid

  7. .d-print-table

  8. .d-print-table-row

  9. .d-print-table-cell

  10. .d-print-flex

  11. .d-print-inline-flex

可以组合并使用 display 和 print 类。我们来看看一个示例：

Note: 请调整屏幕大小以查看更改后的效果。

Example

你可以编辑并尝试运行此代码，使用 编辑和运行 选项。

<!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>