边框

使用 Border 工具类迅速设计一个元素的 border 和边框 border-radius。可用于图像、按钮、或任何其它元素。

Border

将 border 类添加到一个元素中,以便移除所有 border 或部分 border。

增加

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

减少

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

边框颜色

使用基于主题颜色构建的工具更改边框颜色。

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

圆角边框

只需要使用这个类就可以让默认的直角边框变成圆角边框。

Example rounded image Example top rounded image Example right rounded image Example bottom rounded image Example left rounded image Completely round image Example non-rounded image (overrides rounding applied elsewhere)
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">

Clearfix

通过添加clearfix工具,可以快速轻松地清除容器中的浮动内容。

通过对父元素增加 .clearfix)(清除浮动)以方便的清除 float (浮动)。也可以做为 Sass mixin 使用。

<div class="clearfix">...</div>
// Mixin itself
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// Usage as a mixin
.element {
  @include clearfix;
}

以下示例显示了如何使用clearfix。 不使用clearfix,外层div将不会包裹按钮而导致布局损坏。

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>

关闭图标

使用一般的关闭图标类,关闭 modals 元件和 alerts 元件之类的内容。.

请务必为屏幕阅读器添加文本,我們可以使用 aria-label 标签属性。

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

颜色

借助一些颜色工具让颜色的表达更具有意义。同时也支持有 hover 状态的链接样式。

Color

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

上下文文本也提供 hover 和 focus 状态,对于链接类型也同时能顺利运行注意 .text-white and .text-muted 类没有链接样式。

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

背景颜色

与上下文文本颜色类相似,可轻易将背景颜色加到元素中。链接元素将会在 hover 上变暗,就像文字类型一样。背景色 不要设置 color 样式,应尽可能使用 .text-* 工具。

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

背景渐变

$enable-gradients 设置为true时,你将可以使用 .bg-gradient- 的工具。默认情况下, By default, $enable-gradients 是停用的,下面的例子是故意显示错误的。这是为了在你开始使用 Bootstrap 时更容易进行自定义。了解我们的 Sass 选项启用这些 Class 和更多。

.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

处理例外情况

有时候上下文文本并无法应用在其他的选取器,解决方案是元素的外层补上一个<div> 在应用该类。

传达辅助技术的意义

使用颜色添加含义仅提供视觉指示,这些指示不会传达给辅助技术的用户 - 例如屏幕阅读器。 确保颜色表示的信息从内容本身(例如可见文本)中显而易见,或者通过其他方式包含,例如隐藏在其中的附加文本 .sr-only 类。

Display 属性

Display 工具可快速且包含响应式的切换元件的显示与否,我们的 Display 工具包含许多常用的值,另外在打印时也能使用。

如何运作

使用 display 的工具类来改变 display 属性,我们故意只支持 display 所有可能的一个子集,可以依据需求将这些 Class 调整出各种效果。

符号

Display 工具可以应用在所有中断点,从 xsxl,都在其中,而这些是从最小宽度 min-width: 0; 开始运用,因此预设不受 media query 限制,然而其余的断点都包含缩写。

因此,这些 Class 使用以下格式来命名:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.

值可以替換成以下:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

这些 media queries 会设置大于中断点,举例来说: .d-lg-nonelgxl 屏幕上設置.d-lg-none

实例

d-inline
d-inline
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
d-block d-block
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

隐藏元素

为了更快地进行移动设备开发,请使用响应式显示类来按设备显示和隐藏元素。 避免创建相同站点的完全不同版本,而是相应地为每个屏幕大小隐藏元素

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

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

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block
hide on screens wider than lg
hide on screens smaller than lg
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

显示在打印中

可以在打印时通过 display 工具改变 display 的值。一样包含 display 的各种.d-*工具。

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

可以组合打印和显示类。

Screen Only (Hide on print only)
Print Only (Hide on screen only)
Hide up to large on screen, but always show on print
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

嵌入功能

通过创建可在任何设备上缩放的固有比率,根据父级的宽度嵌入响应式视频或幻灯片.

关于

将这些规则直接应用到 <iframe>, <embed>, <video>, and <object> 元素;当需要这些样式对应属性时可加入 .embed-responsive-item

小技巧 你不需要将 frameborder="0" 加在你的 <iframe>中,因为我们已经为你覆盖了该属性。

实例

<iframe> 的父元素使用 .embed-responsive 以加入响应式设计。请注意,<iframe> 中的 .embed-responsive-item 并非必须,但我们建议采用它。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

宽高比

可以使用修饰符类自定义宽高比。

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Flex

flexbox 工具的套件包管理网格栏的排版、对齐和特定尺寸。对于更复杂的表现则需要自订 CSS。

启用 flex

使用 display 通用类别来创建一个 flexbox 容器,并将 直属内元素 转换为 flex 属性。增加额外的 flex 属性,也能够进一步修改 flex 容器和属性。

I'm a flexbox container!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

.d-flex.d-inline-flex 也存在响应式设计。

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

方向

透过通用类别来设定 flex 容器与内层 flex 的方向,在大多的情况下你可以忽略水平的 class,因为浏览器预设值是 row. 不过有些特定情境下需要设定这个值(比如在响应式环境下)。

使用 .flex-row 来设定水平的方向(浏览器预设值),或者使用 .flex-row-reverse 来作水平方向的反转。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

使用 .flex-column 设置垂直方向,或使用 .flex-column-reverse 作垂直方向的反转。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

flex-direction 的响应式属性。

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

调整内容

使用 flexbox 容器上的 justify-content 通用类别改变 flex 物件在主轴上的对齐(x轴开始,如果 flex-direction: column 则为 y 轴)。从 start 浏览器预设)。 end, center, between, 或 around 中选择。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

justify-content 的响应式属性。

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

对齐项目

在 flexbox 容器上使用 align-items 工具改变横轴上 flex 物件的对齐(y 轴开始,如果 flex-direction: column 则为 x 轴)。从 start, end, center, baseline, 或 stretch (浏览器预设) 中选择。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

align-items 包含的响应式属性。

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

自身对齐

使用 flexbox 物件上的 align-self 通用类别单独改变在横轴上的对齐(y 轴开始,如果 flex-direction: column 则为 x 轴)。与 align-items 相同的选项中选择: align-items: start, end, center, baseline, 或 stretch (浏览器预设)。

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

align-self 的响应式属性。

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

填满

在相邻元素上使用 .flex-fill 来强制它们在相同的宽度上分配所有可用的水平空间。对于等宽导览特别有用。

Flex item
Flex item
Flex item
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

flex-fill 同样包含响应式的组合。

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

伸缩值

使用 .flex-grow-* 通用类别来切换项目弹性增长以填充可用空间。在下面的范例中, .flex-grow-1 元素使用它可以使用的所有可用空间,同时允许剩余的两个 flex 物件保留必要的空间。

Flex item
Flex item
Third flex item
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

如果需要,使用 .flex-shrink-* 工具来切换调整项目的尺寸。 在下面的示例中,第二个带有 .flex-shrink-1 的弹性项目被强制将其内容包装到一个新行,“收缩”以允许更多空间用于上一个具有 .w-100 的弹性项目。

Flex item
Flex item
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

flex-growflex-shrink 也具备响应式设计。

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1

自动的边距

当你将 flex 对齐与 auto margin 混在一起的时候,flexbox 也能正常的运行。下面的范例是透过自动 margin 来控制 flex 物件的三个案例:预设(无 margin),向右推两个项目(.mr-auto),并向左推两个项目(.ml-auto)。

不幸的是,IE10 和 IE11 在父层 justify-content value. 值并没有正确的表现,可以在搜索这个问题来了解更多细节。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

搭配 align-items

混合以下属性 align-items, flex-direction: column, 和 margin-top: automargin-bottom: auto,会将一个 flex 物件移动到容器的顶部或底部。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Wrap (Flex 的 Wrap 属性)

改变 flex 物件在 flex 容器中的 Wrap。可设置 .flex-nowrap, .flex-wrap, .flex-wrap-reverse 这些属性。

Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap-reverse">
  ...
</div>

flex-wrap 也包含响应式属性。

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

排序

使用 order 通用类别改变特定 flex 物件的 显示 排序。我们仅提供将一个物件排在第一个或最后一个,以及重置使用 DOM 次序。由于 order 只能使用整数值(例如,5),对需要的任何额外值需要自定义 CSS。

First flex item
Second flex item
Third flex item
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

order 也包含响应式设计。

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

对齐内容

使用 flexbox 容器上的 align-content 工具将 flex 物件于横轴上一起对齐。从 start 浏览器预设), end, center, between, around, or stretch 中选择。为了呈现这通用类别的效果,我们加入了 flex-wrap: wrap 及增加了flex项的数量。

注意!此特性对于单行的 flex 无作用。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-between flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-around flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-stretch flex-wrap">...</div>

align-content 也包含响应式设计。

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch

浮动(float)

使用我们的响应式浮动工具,可以在任何断点上切换浮动任何元素。

概览

这些工具向左或向右浮动元素,可以根据当前 viewport 大小禁用浮动 CSS float 。增加属性 !important 可以以避免例外情况。 它们使用与我们的网格系统相同的 viewport 断点。 请注意,浮动工具对 flex 没有影响。

用类切换浮动属性:

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Mixins

或者通过Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

响应

每种情况也存在反应性变化float 值。

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Float left on viewports sized XL (extra-large) or wider

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

以下是所有支持类:

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none

图像替换

使用图像替换类交换背景图像的文本。

警告

text-hide() 自v4.1起,class和mixin已被弃用。 它将在v5中完全删除。

利用.text-hideclass或mixin以帮助用背景图像替换元素的文本内容。

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  @include text-hide;
}

使用 .text-hide 类来保持标题标签的可访问性和SEO优势,但是想要利用 background-image 而不是文字。

Bootstrap

<h1 class="text-hide" style="background-image: url('http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>

内容溢出

使用本工具来处理内容溢出

overflow 工具提供了两个值用于处理内容溢出,这不是基于响应式设计的。

这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。 此内容将垂直滚动。
这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

使用Sass变量,您可以通过更改 _variables.scss 中的 $overflows 变量来自定义内容溢出工具。

位置(position)

使用这些工具快速配置元素的位置。

通用属性

快速增加定位的类不包含响应式设计。

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

固定在顶部

将一个元素置于可视区的顶部,从边到边。必要时你需要增加额外的 CSS。

<div class="fixed-top">...</div>

固定在底部

一个元素置于可视区的底部,从边到边。必要时你需要增加额外的 CSS。

<div class="fixed-bottom">...</div>

粘性置顶

使用 .sticky-top 类可以让一个元素粘性置顶,它采用了 position: sticky 属性,不过这一属性目前不是所有浏览器都支持。

扩展阅读:关于 position: sticky 的具体说明(中文,来源:cnblog)

IE11 和 IE10 会把 position: sticky 作为 position: relative 因此,我们将样式包装在 @supports 查询中,将 position: sticky 制为只能正确呈现它的浏览器。

<div class="sticky-top">...</div>

屏幕阅读器

使用screenreader工具隐藏除屏幕阅读器之外的所有设备上的元素。

透过 .sr-only将一个元素对所有设备隐藏,除了屏幕阅读器,只有屏幕阅读器可以读取到 .sr-only 中的内容。 将 .sr-only.sr-only with .sr-only-focusable 结合,以便在其被 focused 时再次显示该元素(例如通过键盘使用)。也可以用作 Sass mixins。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}

阴影

使用 box-shadow 工具为元素添加或删除阴影。

实例

虽然在 Bootstrap 中默认禁用组件上的阴影,但可以通过启用 $enable-shadows,你也可以用我们的快速添加或删除阴影 box-shadow 工具类。 包括支持 .shadow-none 等三种不同预设的阴影效果(可通过变量调整)。

No shadow
Small shadow
Regular shadow
Larger shadow
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

大小尺寸

使用我们的宽度和高度工具轻松地将元素设置为宽或高(相对于其父元素)。

宽度和高度工具可以从 $sizes_variables.scss 的 Sass map 产生。预设包含 25%, 50%, 75%, 100%, 和 auto 做为预设。按你的需求调整这些值,可产生不同的属性

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

你也可以使用 max-width: 100%; and max-height: 100%; 这些工具。

Max-width 100%
<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
Max-height 100%
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>

间隔

Bootstrap 包括各种简写响应式 margin、padding 的通用类别,可用来修改一个元素的外观。

如何运作

赋予一个缩写 class 使 marginpadding 值在一个元素上或其中一个边缘上 (包含响应式)。包含支援单一个边缘属性或全部边缘、垂直边缘、水平边缘上。 Class 来自于 Sass map,范围从 .25rem3rem.

符号

适用于所有断点的间距工具 xsxl,它们没有断点缩写。 这是因为应用了这些类 min-width: 0 并且因此不受媒体查询的约束。 但是,其余断点确实包含断点缩写。

对于 xs,使用固定格式{property}{sides}-{size} 命名这些 Class,对于 sm, md, lg, 和xl。使用格式{property}{sides}-{breakpoint}-{size}

属性 设定:

  • m 这个 class 会设定 margin
  • p 这个 class 会设定 padding

边缘 设定:

  • t 这个 class 会设定 margin-toppadding-top
  • b 这个 class 会设定 margin-bottompadding-bottom
  • l 这个 class 会设定 margin-leftpadding-left
  • r 这个 class 会设定 margin-rightpadding-right
  • x 这个 class 会设定 both *-left*-right
  • y 这个 class 会设定 both *-top*-bottom
  • 空白 - 如果边缘 class 未加入则会设定 marginpadding 在元素的四个边缘。

尺寸 设定:

  • 0 - 这个 class 会设定 marginpadding 样式值为 0
  • 1 - (预设时) 这个 class 会设定 marginpadding$spacer * .25
  • 2 - (预设时) 这个 class 会设定 marginpadding$spacer * .5
  • 3 - (预设时) 这个 class 会设定 marginpadding$spacer
  • 4 - (预设时) 这个 class 会设定 marginpadding$spacer * 1.5
  • 5 - (预设时) 这个 class 会设定 marginpadding$spacer * 3
  • auto 这个 class 会设定 the margin to auto

(你也可以对 $spacers Sass 图形变量。)

实例

以下是这些 class 的一些代表性范例:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

水平居中

此外,Bootstrap 也包括一个 .mx-auto,用于固定宽度盒模型的水平置中,是具有 display: blockwidth 集合的内容,并将水平 margin 设置为 auto.

Centered element
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

文本

一般文字工具来控制对齐、围绕、字体粗细、和其它属性的文档范例。

文字对齐

使用文本对齐类轻松地将文本与组件对齐。

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

对于左对齐,右对齐和中心对齐,可以使用与网格系统相同的 viewport 宽度断点的响应类。

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

换行和内容溢出处理

使用 .text-nowrap 可以让文本不换行。

This text should overflow the parent.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

对于更长的内容,你可以增加一个 .text-truncate ,可以截掉多余内容 。行内元素需要额外使用 display: inline-block or display: block 来确保正常的显示效果。

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.
<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

文字变换

使用 Class 将元件中的文字内容转大写。

Lowercased text.

Uppercased text.

CapiTaliZed text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

注意 text-capitalize 仅改变每一个词的第一个字母,而其它字母的大小写不受影响

字体粗细和斜体

改变文字内容的粗细或斜体。

Bold text.

Normal weight text.

Light weight text.

Italic text.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

等宽字体

使用 .text-monospace 可将字体改为等宽字体。

This is in monospace

<p class="text-monospace">This is in monospace</p>

垂直对齐

改变 inline、inline-block、inline-table、和 table 元素的垂直对齐。

使用 vertical-alignment 通用类别改变元素的对齐。请注意,垂直对齐仅影响 inline、inline-block、inline-table、和 table 元素。

依需求从 .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top 中选择。

搭配 inline 元素:

baseline top middle bottom text-top text-bottom
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

搭配 table cell 元素:

baseline top middle bottom text-top text-bottom
<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

可见性

通过可见性工具控制可见性,不会影响物件的实际空间。

使用可见性通用类别设置元素的 visibility。这不会改变 display 值,并且有助于对大部分使用者隐藏内容,但是在屏幕阅读器仍然保存它们。

依需求使用 .visible.invisible

<div class="visible">...</div>
<div class="invisible">...</div>
// Class
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// Usage as a mixin
.element {
  @include invisible(visible);
}
.element {
  @include invisible(hidden);
}