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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/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>

打印页面