Bootstrap 简明教程

Bootstrap - Display

本章讨论了 Bootstrap 的 display 属性。

This chapter discusses about the display property of the Bootstrap.

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

In Bootstrap, the display property is used to control the visibility and behavior of elements. It allows you to define how an element should be rendered and positioned within the document layout.

Notation

  1. Utility classes that are applicable to all breakpoints, ranging from xs to xxl, do not have any abbreviation for breakpoints.

  2. These classes are implemented from a min-width: 0; and beyond and not restricted by media query.

  3. The remaining breakpoints do contain an abbreviation for the breakpoint.

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

Following format is used in naming the display classes:

  1. .d-{value} for xs, such as .d-none.

  2. .d-{breakpoint}-{value} for sm, md, lg, xl and xxl, such as .d-lg-none sets display: none; on lg, xl, and xxl screens.

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

{value} can be one of the following:

  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 属性采取的部分值如下：

Some of the values display property take, are as follows:

  1. .d-none: This value hides the element completely, making it invisible and not taking up any space in the layout.

  2. .d-inline: This value makes the element behave like an inline element, allowing other elements to be displayed alongside it on the same line.

  3. .d-block: This value makes the element behave like a block-level element, causing it to start on a new line and take up the full available width.

  4. .d-inline-block: This value combines the characteristics of both inline and block elements. The element is displayed inline, allowing other elements to be displayed alongside it.

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

Let us see an example of .d-inline:

Example

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

You can edit and try running this code using the *Edit & Run *option.

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

Let us see an example of .d-block:

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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} 类之一。

In order to hide elements, use the .d-none class or one of the .d-{sm, md, lg, xl, xxl} classes.

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

Let us see an example of hiding the display on screens smaller than lg:

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

Note: Kindly resize the screen in order to see the changed effect.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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 值提供支持。

You can modify the display value of elements specifically for printing purposes using our print display utility classes. These classes offer support for the same display values as the responsive .d-* utilities.

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

Following are the list of utilities available for display in print:

  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 类。我们来看看一个示例：

display and print classes can be combined and used. Let us see an example:

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

Note: Kindly resize the screen in order to see the changed effect.

Example

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

You can edit and try running this code using the *Edit & Run *option.

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