Bootstrap - 显示

本章讨论Bootstrap 的显示属性。

在Bootstrap中，display属性用于控制元素的可见性和Behave。它允许您定义元素在文档布局中的呈现和定位方式。

符号

  • 适用于所有断点（从xs到xxl ）的实用程序类没有任何断点缩写。

  • 这些类是从min-width: 0 实现的；并且不受媒体查询的限制。

  • 其余断点确实包含断点的缩写。

以下格式用于命名显示类：

  • .d-{value}代表xs，例如.d-none。

  • .d-{breakpoint}-{value}用于sm、md、lg、xl和xxl，如.d-lg-none设置display: none; 在LG、XL和XXL屏幕上。

{value}可以是以下之一：

  • 没有任何

  • 排队

  • 内联块

  • 堵塞

  • 网格

  • 内联网格

  • 桌子

  • 表格单元格

  • 表格行

  • 柔性

  • 内联柔性

显示属性取的一些值如下：

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

  • .d-inline：该值使元素的Behave类似于内联元素，允许其他元素与它一起显示在同一行上。

  • .d-block：此值使元素的Behave类似于块级元素，导致它从新行开始并占据全部可用宽度。

  • .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-无
仅在 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-无
全部可见 .d-块
在 xs 上可见 .d-block 和 .d-sm-none
在 sm 上可见 .d-无 .d-sm-块 .d-md-无
MD 上可见 .d-无 .d-md-块 .d-lg-无
在lg上可见 .d-无 .d-lg-块 .d-xl-无
在 xl 上可见 .d-无 .d-xl-块 .d-xxl-无
在 xxl 上可见 .d-无 .d-xxl-块

让我们看一个在小于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>

打印显示

您可以使用我们的打印显示实用程序类修改专门用于打印目的的元素的显示值。这些类提供与响应式.d-*实用程序相同的显示值的支持。

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

  • .d-打印-无

  • .d-内联打印

  • .d-打印内联块

  • .d-打印块

  • .d-打印网格

  • .d-打印内联网格

  • .d-打印表

  • .d-打印表行

  • .d-打印表格单元格

  • .d-print-flex

  • .d-print-inline-flex

显示类和打印类可以组合使用。让我们看一个例子：

注意：请调整屏幕大小才能看到更改后的效果。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

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