非常教程

Bootstrap 4参考手册

实用工具 | Utilities

显示属性 | Display property

通过我们的显示实用程序快速响应地切换组件的显示值。包括对一些更常见的值的支持,以及一些额外功能,用于控制打印时的显示。

共同的display价值

display属性接受了一些值,我们用实用程序类支持其中的许多值。我们故意不提供每个价值作为实用工具,所以我们支持:

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-table
  • .d-table-cell
  • .d-flex
  • .d-inline-flex

通过将任何类应用到您选择的元素来使用它们。例如,下面介绍如何使用内联,块或内联块实用程序(同样适用于其他类)。

打开getbootstrap.com上的示例

<div class="d-inline bg-success">d-inline</div>
<div class="d-inline bg-success">d-inline</div>

打开getbootstrap.com上的示例

<span class="d-block bg-primary">d-block</span>

打开getbootstrap.com上的示例

<div class="d-inline-block bg-warning">d-inline-block</div>
<div class="d-inline-block bg-warning">d-inline-block</div>

对于上面提到的每一个实用程序也都有响应变化。

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-table
  • .d-table-cell
  • .d-flex
  • .d-inline-flex
  • .d-sm-none
  • .d-sm-inline
  • .d-sm-inline-block
  • .d-sm-block
  • .d-sm-table
  • .d-sm-table-cell
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-none
  • .d-md-inline
  • .d-md-inline-block
  • .d-md-block
  • .d-md-table
  • .d-md-table-cell
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-none
  • .d-lg-inline
  • .d-lg-inline-block
  • .d-lg-block
  • .d-lg-table
  • .d-lg-table-cell
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-none
  • .d-xl-inline
  • .d-xl-inline-block
  • .d-xl-block
  • .d-xl-table
  • .d-xl-table-cell
  • .d-xl-flex
  • .d-xl-inline-flex

隐藏元素

为了加速移动设备的开发,请使用响应式显示类来显示和隐藏设备中的元素。避免创建完全不同的同一站点版本,而是针对每个屏幕大小响应地隐藏元素。

要隐藏元素,只需使用.d-none类或其中一个.d-{sm,md,lg,xl}-none类来响应任何屏幕变化。

要仅在给定的屏幕大小间隔上显示元素,可以组合一个.d-*-none类的.d-*-*类,例如.d-none.d-md-block.d-xl-none将隐藏除中型和大型设备外的所有屏幕大小的元素。

屏幕尺寸

类别

隐藏在所有

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

显示打印

display使用我们的打印显示实用程序进行打印时更改元素的值。

类别

打印样式

.d-print-block

打印时应用display:block到元素

.d-print-inline

打印时应用display:内联到元素

.d-print-inline-block

打印时应用display:inline-block到元素

.d-print-none

打印时,将元素display:none应用于元素

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

主页 https://getbootstrap.com/
源码 https://github.com/twbs/bootstrap
版本 4
发布版本 4.0.0-beta.2

Bootstrap 4目录

1.快速开始 | Getting started
2.组件·信息提示框 | Alerts
3.组件·徽章 | Badges
4.组件·面包屑导航 | Breadcrumb
5.组件·按钮组 | Button group
6.组件·按钮 | Buttons
7.组件·卡片 | Cards
8.组件·轮播 | Carousel
9.组件·折叠 | Collapse
10.组件·下拉菜单 | Dropdowns
11.组件·表单 | Forms
12.组件·输入框组 | Input group
13.组件·大屏幕 | Jumbotron
14.组件·列表组 | List group
15.组件·模态框 | Modal
16.组件·导航栏 | Navbar
17.组件·导航 | Navs
18.组件·分页 | Pagination
19.组件·弹出框 | Popovers
20.组件·进度条 | Progress
21.组件·滚动监听 | Scrollspy
22.组件·提示工具 | Tooltips
23.内容 | Content
24.布局 | Layout
25.迁移 | Migration
26.实用工具 | Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex(弹性)布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航(Breadcrumb)