direktori cari
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
watak

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

共同的display价值

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

  • .d-none

  • .d-inline

  • .d-inline-block

  • .d-block

  • .d-table

  • .d-table-cell

  • .d-flex

  • .d-inline-flex

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

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


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


<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应用于元素

Artikel sebelumnya: Artikel seterusnya: