起始模板

确保你的网页是建立在最新的设计和开发标准之上的

  • 使用HTML5文档类型，没有它，你就会看到一些并不完整的样式。只有把它包含进去才不会造成显著的问题。
  • 强制Internet Explorer使用最新的渲染模式
  • 为了确保所有的设备的渲染和触摸效果，必须使用视口meta标签
  • 默认样式已经将全局box-sizing的值改成了，border-box（原本值是content-box）。这就保证了padding不会影响一个元素的最后计算宽度 
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    ...
  </body>
</html>

支持的浏览器

支持所有的主流浏览器和平台的最新的、稳定的版本。 在 Windows 中, 支持 Internet Explorer 9以上版本

Internet Explorer 9

Internet Explorer 9也是支持的。然而，你需要知道，有一些CSS3属性和HTML5元素不被完全支持。

功能 状态
border-radius圆角边框 支持
box-shadow盒阴影 支持
transform变形 支持, 带-ms前缀
transition过渡 不支持
placeholder占位符 不支持
display:flex弹性盒子 不支持

图标字体

使用.aid .aid-*修饰图标，使用icon-gradient-*表示渐变， 
        
              <div class="row">
      <div class="col">
        <i class="text-42 aid aid-owl"></i>
      </div>
      <div class="col">
        <i class="text-42 aid aid-music-circle"></i>
      </div>
      <div class="col">
        <i class="text-42 aid aid-snowman"></i>
      </div>
      <div class="col">
        <i class="text-42 aid aid-airplane"></i>
      </div>
      <div class="col">
        <i class="text-42 aid aid-camera"></i>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <i class="text-42 aid aid-kickstarter icon-gradient-primary"></i>
      </div>
      <div class="col">
        <i class="text-42 aid aid-qqchat icon-gradient-success"></i>
      </div>
      <div class="col">
        <i class="text-42 aid aid-puzzle icon-gradient-info"></i>
      </div>
      <div class="col">
        <i class="text-42 aid aid-qrcode icon-gradient-warning"></i>
      </div>
      <div class="col">
        <i class="text-42 aid aid-evernote icon-gradient-danger"></i>
      </div>
    </div>

自定义选项

变量 值 Description
$spacer 1rem （默认）, 或者任何大于0的值 为间隔工具指定默认的间隔值
$enable-flex true 或 false （默认） 给display: flex交换float和display: table样式。
$enable-rounded true （默认） or false 为各种组件启用预定义的border-radius样式。
$enable-shadows true 或 false （默认） 为各种组件启用预定义的box-shadow样式。
$enable-gradients true 或 false （默认） 通过background-image为各种组件启用预定义的渐变
$enable-transitions true （默认） 或 false 为各种组件启用预定义的transition（过渡）
$enable-hover-media-query true 或 false （默认） …

颜色

主色

主色是用于主题的颜色，以及主操作元素的颜色，如primary按钮的颜色，如果不支持渐变的浏览器则表现为下面一行的颜色

  • .bg-gradient-cyan

  • .bg-gradient-green-dark

  • .bg-gradient-pink

  • .bg-gradient-plum

  • .bg-gradient-green-light

  • .bg-gradient-orange

辅助色

辅助色是具有代表性的颜色，常用于信息提示，比如成功、警告和失败。

  • .bg-primary

  • .bg-warning

  • .bg-success

  • .bg-danger

  • .bg-info

中性色

中性色常用于文本、背景、边框、阴影等，可以体现出页面的层次结构

  • 背景色

  • 背景色

  • 背景色，分割线

  • 边框颜色

  • disabled颜色，输入框图标颜色

  • 文字颜色

  • 文字颜色，正文颜色

  • 文字颜色

  • 背景色深色

布局

Containers

窗口是最基本的布局元素。在使用网格系统中它是必不可少的。选择一个响应式的、固定宽度的容器（意味着它的max-width在每个节点都会改变），或者选择一个流式宽度的窗口（意味着任何时候它的宽度总是100%）

虽然容器可以被嵌套，但是大多数布局并不需要一个嵌套的容器。

<div class="container">
  <!-- Content here -->
</div>

为一个全宽度容器使用.container-fluid类，在视口中扩展到整个宽度。

<div class="container-fluid">
  ...
</div>

响应式的分界点

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

网格系统

工作机制

  • 总共有三个主要的组件：容器、行和列。
  • 容器——.container实现固定的宽度，.container-fluid实现全宽度，会将你的页面的内容居中，帮助你对齐网格系统。
  • 行是列的横向组合，确保适当地排列你的列。
  • 内容必须放置在列中，而且只有列可以是行的直接子元素。
  • 列类表明你想要占用的列的数量，每行最多可用12列。所以如果你想用三个等宽列，你可以使用.col-sm-4。
  • 列的width是用百分比设置的。所以它们总是是流式的，而且尺寸与父元素相关。
  • 列拥有水平的padding，以创建列与列之间的间隙。
  • 总共有五个网格等级，每个响应式分界点隔出一个等级：特小，小，中，大，特大。
  • 网格等级基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（比如，.col-sm-4应用到小、中、大、特大设备）

网格选项

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Responsive classes

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

col
col
col
col
col-8
col-4
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Small and match

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Mix and match

只要使用一个.col-md-*网格类集合，你就可以创建一个基本的网格系统，在移动设备以及特小屏或者小屏的平板设备上纵向排布，而在桌面（中屏）设备上横向排布。请把网格列放在任何.row中。

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

自动列布局

等宽

1 of 2
1 of 2
1 of 3
1 of 3
1 of 3 
<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

设置一列宽度

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3 
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3 
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

多行等宽

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.

col
col
col
col
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Alignment

Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns 
<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
One of three columns
One of three columns
One of three columns 
<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns 
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

No gutters

.no-gutters清除.row中的margin值和列中的水平padding

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

列包裹

如果一行中放置了超过12列格，每一组超出的列，将成为一个单元，包裹入一个新行。

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

响应式列重置

有了那四个可用的网格层级，你可能会遇到那种问题，就是在一个特定的分界点上，多列会显示得不太正确，因为列与列不等高。为了解决这个问题，可以组合使用一个.clearfix以及响应式工具类。

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix hidden-sm-up"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

为了能让列在响应式分界点上显示正确，你可能还必须添加重置位移、推、拉等。在网格示例中可以看到实例。

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

位移列

使用.offset-md-*类可以把列往右移。这个类根据*数增加了一个列的左边距。比如说，.offset-md-4把.col-md-4往右移了四列格。

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

列排序

使用.push-md-*以及.pull-md-*修正类，可以轻松改变内建网格列的顺序。

.col-md-9 .push-md-3
.col-md-3 .pull-md-9
<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

嵌套列

只要在一个已经存在的.col-sm-*列中添加一个新的.row以及一系列.col-sm-*，就可以使用默认的网格嵌套你的内容。嵌套的列可以包含若干个列，最多不超过12个列格（不需要把12个列格全占用完）

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

排版

注意点

  • 更新一些浏览器默认值，使用rem代替em用于指定可缩放的组件的间隙。
  • 避免使用margin-top。使用它，垂直外边距可以崩溃，导致意想不到的结果。更重要的是，一个单一方向的margin是一个简单的构思模型。
  • 为了易于跨设备缩放，块元素必须使用rem作为margin的单位。
  • 保持font相关属性最小的声明，尽可能地使用inherit。

页面默认值

更新了<html>和<body>元素，提供更好的页宽默认值。具体来说，是：

  • 全局性地将每一个元素的box-sizing属性——包括*:before和*:after——都设置为border-box。这样确保了声明的宽度不会因为border或padding而超过。
  • 针对通过媒体查询的易响应型缩放，<html>上面声明了一个基本的font-size: 16px，而且 <body>上面声明了一个font-size:1rem。
  • <body>还设置了一个全局性的font-family以及line-height，之后一些表单元素继承了它，以防止字体大小矛盾。
  • 为了安全，<body>有一个网页背景色background-color声明，默认为#fff。

全局设置

  • 利用background-color: #fff;把网页背景色设置为白色。
  • 使用$font-family-base、$font-size-base以及$line-height-base属性作为排布基础。
  • 通过$link-color设置全局链接样式，并让链接只在鼠标悬停:hover状态下才出现下划线。

标题

所有的HTML标题，从<h1>到<h6>都是可用的，.h1到.h6也是可用的，用于需要匹配标题的样式，但是依然希望文本在行内显示的场合。

h1. Bootstrap heading

 Semibold 36px

h2. Bootstrap heading

 Semibold 30px

h3. Bootstrap heading

 Semibold 24px

h4. Bootstrap heading

 Semibold 18px
h5. Bootstrap heading
 Semibold 14px
h6. Bootstrap heading
 Semibold 12px

显示标题

如果你想要一个标题醒目，考虑使用显示标题——一种更大型、鲜明的标题样式。

Display 4

Display 3

Display 2

Display 1

文本

为了适应更多场景，扩展了文本的尺寸

font-size:12px;line-height:18px
font-size:14px;line-height:21px
font-size:16px;line-height:24px
font-size:18px;line-height:26px
font-size:20px;line-height:28px
font-size:24px;line-height:30px
font-size:30px;line-height:38px
font-size:36px;line-height:42px
font-size:42px;line-height:50px
font-size:50px;line-height:58px
font-size:58px;line-height:68px
font-size:80px;line-height:94px
font-size:100px;line-height:118px

页面主体

中心内容

通过添加 .lead 类可以让段落突出显示。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

内联文本元素

常见的内联HTML5元素的样式。

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

虽然上面没有演示，你可以在HTML5中随便使用<b>和<i>。<b>意思是高亮词或者词组，而不传达附加的重要性；而 <i>常用于语音、技术术语等等。

引用

在你的文档中引用其他来源的内容。

默认样式的引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多种引用样式

对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。

命名来源

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title 
<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

另一种展示风格

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote blockquote-reverse">
  ...
</blockquote>

列表

所有的列表——<ul>、<ol>以及 <dl>——移除了它们的外边距margin-top，并设置了margin-bottom: 1rem。嵌套的列表没有margin-bottom。

无序列表

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

有序列表

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

无样式列表

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">
                        ...</li>
</ul>

描述

为了得到更简单的样式、清晰的等级以及更好的间距，描述列表<dl>有了一个更新的margin值。 <dd>的margin-left被重置为0，添加了margin-bottom: .5rem。<dt>的字体是粗体。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述

使用我们的网格系统的预定义类（或者说语义化mixins），可以水平对齐条目和描述。对于较长的条目，你可以视情况添加一个.text-truncate类，从而用省略号截断文本。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>

代码

内联代码

For example, <code> should be wrapped as inline. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

预格式化文本

或者说，代码块，使用<pre>的多行代码文本。再一次提醒，请勿忘转义代码中的所有尖括号，以实现正确的渲染。你可以视情况添加.pre-scrollable类，它将设置最大高度为350像素，并提供一个纵向滚动条。 

<p>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

图片

响应式图片

在Bootstrap中，给图片应用.img-fluid类以及max-width: 100%、height:auto;样式，使其具有响应性，并根据父元素的大小缩放。

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">

SVG图片以及 IE 9-10

在IE9和IE10浏览器中，带着.img-fluid类的SVG图片是尺寸不均称的。为了修正它，在必要的地方添加width: 100% \9属性。

图片形状

向一个<img>元素添加类，轻松地在项目中样式化图片。

200x200 200x200 200x200 
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="img-thumbnail">

对齐图片

使用浮动助手类或者文本对齐类可以实现图片对齐。一个简单的居中类也可以用在block块级图片上。

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" style="display: block;" alt="...">
200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

图文框

如果你需要显示的内容包括了一个图片和一个可选的标题，请考虑使用<figure>。

.figure , .figure-img ， .figure-caption 类， 为HTML5 的<figure> and <figcaption> 元素提供了一个基准样式. figures中的图片没有明确的尺寸, 添加 .img-fluid 类在<img> 标签上来保证响应式.

400x300
A caption for the above image.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

组件

查看组件

实用工具类

边框

使用边框工具类快速设置 border 和radius

边框

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

边框圆角

75x75 75x75 75x75 75x75 75x75 75x75 75x75 
<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 清除浮动.

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

// Usage as a mixin
.element {
  @include clearfix;
}
<div class="bg-info clearfix">
  <button class="btn btn-secondary float-left">Example Button floated left</button>
  <button class="btn btn-secondary float-right">Example Button floated right</button>
</div>

上下文语境字色和底色

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum.
Cras mattis consectetur purus sit amet fermentum.
<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
<div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>

Display属性

通用display属性值

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

运用于响应式.

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

弹性盒子-Flexbox

快速实现布局, 对齐, 网格列的尺寸, 导航, 组件, 以及更多的需要响应式flexbox工具类的套件。

使用flex

在直接子元素 外包裹一个使用.d-flex 的容器.

I'm a flexbox container!
<div class="d-flex p-2">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d-inline-flex p-2">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

Direction

使用 .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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Justify content

在flexbox里使用 justify-content 工具类设置水平对齐。 值有 start (browser default), end, center, between, or 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>

Align items

在flexbox里使用 align-items 工具类设置垂直对齐。 值有 start, end, center, baseline, or stretch (browser default).

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 self

在flexbox里使用 align-self 工具类设置单个子元素的垂直对齐。 值有 align-items: start, end, center, baseline, or stretch (browser default).

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>

Auto margins

With justify-content

混合使用justify-content with margin-right: auto or margin-left: auto.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex justify-content-start">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

With align-items

混合使用于 align-items,margin-top: auto or margin-bottom: auto.

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

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

Wrap

flex容器中子元素的换行方式..flex-nowrap,.flex-wrap, .flex-wrap-reverse.

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

Order

First flex item
Second flex item
Third flex item
<div class="d-flex flex-nowrap">
  <div class="order-last p-2">First flex item</div>
  <div class="p-2">Second flex item</div>
  <div class="order-first p-2">Third flex item</div>
</div>
  • .order-first
  • .order-last
  • .order-0
  • .order-sm-first
  • .order-sm-last
  • .order-sm-0
  • .order-md-first
  • .order-md-last
  • .order-md-0
  • .order-lg-first
  • .order-lg-last
  • .order-lg-0
  • .order-xl-first
  • .order-xl-last
  • .order-xl-0

Align content

Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.

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>

图片替换

利用.text-hide类或者mixin可以帮助用一个背景图片替换一个元素的文本内容。

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

Position

Fixed top

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

Fixed bottom

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

Sticky top

固定在视窗顶部. The .sticky-top utility uses CSS’s position: sticky, 不是所有浏览器都支持.

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

响应式嵌入

创建一个可以适应任何设备的尺寸的内在的比率，允许浏览器基于容器块的宽度确定视频或幻灯片的大小。

规则可以直接应用在<iframe>、<embed>、<video>和<object>元素上。如果你想要为别的属性匹配样式，视情况添加一个明确的后代类.embed-responsive-item。

编辑建议！你不需要在<iframe>中包含frameborder="0"，因为我们已经为你覆盖掉它了。

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

Aspect ratios can be customized with modifier classes.

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

Responsive floats

These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.

Two similar non-responsive Sass mixins (float-left and float-right) are also available.

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

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

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

屏幕阅读器

使用.sr-only可以对所有的设备隐藏某个元素，除了在屏幕阅读器里。组合使用.sr-only以及.sr-only-focusable可以让元素获得焦点时再次显示元素（即，键盘的用户用Tab键使它获得焦点）。它也可以用作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;
}

尺寸-Sizing

按百分比设置宽度和高度

支持25%, 50%, 75%, and 100%.

Width 25%
Width 50%
Width 75%
Width 100%
<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>
Height 25%
Height 50%
Height 75%
Height 100% 
<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>

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

Max-width = 100% [1000%x100] 
<img class="mw-100" src="..." 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>

间距-Spacing

用缩写的类向一个元素或者它的边的子集分配margin或者padding属性。包括支持单个属性、所有属性，以及垂直或水平属性。所有的类都使用全局默认的长度倍数范围：.25rem至.3rem。

使用

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
.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;
}

水平居中

块状元素（display: block ）且有固定宽度（ width）的容器使用.mx-auto 来设置内容水平居中

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

排版

文本对齐

使用文本对齐类，可以方便地将文本重新对齐。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

文本换行与溢出

使用 .text-nowrap 防止文本换行

Curabitur blandit tempus ardua ridiculus sed magna.
50x50 
<div class="row">
  <div class="col-1 text-nowrap">
    Curabitur blandit tempus ardua ridiculus sed magna.
  </div>
  <div class="col-11">
    <img src="..." alt="An image to show the text doesn't wrap">
  </div>
</div>

使用.text-truncate 来用...表示溢出

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

文本转换

使用文字大小写设定类，可以转换文本大小写。

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>

粗体和斜体

Bold text.

Normal weight text.

Italic text.

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

垂直对齐

使用vertical-alignment 设置元素垂直对齐. 请注意vertical-align 只效于 inline, inline-block, inline-table, and table cell elements.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

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>

With table cells:

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>

不可见的内容

.invisible类仅仅能够改变元素的可见性，意味着它的display没有被修改，而且这个元素仍然可以影响文档流。

<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);
}

隐藏内容

用[hidden]属性可以隐藏任何HTML元素。因为IE9-10并不原生支持[hidden]，所以在我们的CSS中对它声明了display: none来绕过这个问题。

<input type="text" hidden>