排版

Bootstrap排版的文档和示例，包括全局设置、标题、正文列表等。

全局设置

Bootstrap定义了基本的全局显示、排版、以及链接样式，同时提供了一个通用文本样式示例。

使用本地字体堆栈，从而为每一个操作系统或设备上的 font-family渲染都得到最佳的体现（而不是强制多设备共享一套字体呈现标准）。
对于更具包容性和可访问的类型规模，我们假设浏览器默认根font-size（通常为16像素），而访客根据自身需要定义浏览器字体大小呈现，并不会影响网页表现。
Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.
使用code class="highlighter-rouge">$link-color 参数定义全局的a链接颜色和 :hover下划线颜色呈现。
使用 $body-bg 参数定义 <body>的 background-color 性性，默认认为白色 (#fff )。

这些定义可以在_reboot.scss找到，并根据需要自定义全局变量_variables.scss（确保 $font-size-base 使用 rem单位。

标题

兼容所有HTML标题集，涵括从 <h1> 到 <h6>,的六种标题展现。

标签	效果
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

CSS选择器也支持以.h1 -- .h6 方式引用，这样可以使字体样式呈现出标题效果，不同是引用.h1 -- .h6的文本段不会视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感-译者注），效果如下：

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

自定义标题备注

使用附带的实用类从Bootstrap 重新创建小的辅助标题文本，如下所示：

Fancy display heading With faded secondary text

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

显式标题

bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。如果你想要一个标题醒目，考虑使用显示标题——一种更大型、鲜明的标题样式，则可以用下面方法：

Display 1

Display 2

Display 3

Display 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Lead中心内容

通过应用 .lead样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。

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

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

文本内联元素

HTML5 文本元素的常用内联表现方法也适用于BootStrap4。

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>

.mark、.small类也可以应用相同的HTML标签<mark>、<mall>，这样还可以避免标签带来的任何不必要的语义含义。
虽然上面没有明确显示，但我们可以随意使用<b>>和<i>等HTML5标签，其中<b>旨在突出显示单词或短语、而不会增加重要性，<i>主要用于语音、技术术语等。

文本实用程序

使用Bootstrap提供的文本实用程序可更改文本对齐，变换，样式，权重和颜色。

abbr缩略语

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

Add .initialism to an abbreviation for a slightly smaller font-size.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

blockquote 来源备注与引用

引用文档中另一个来源的内容块，，请在一段HTML外面包裹 <blockquote class="blockquote">，作为引用。为了显示直接引用，我们推荐使用p作为子级包裹容器，这在 HTML 规范中也有多个变通方法，下面逐一讲解。

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

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

底部备注来源

<footer class="blockquote-footer"> 用于标识来源，一般用于页脚（所以有*-footer)，然后配合 <cite>使用。

爱上一个地方，就应该背上包去旅行，走得更远。

出自商务印书馆的《新华字典》

<blockquote class="blockquote">
  <p class="mb-0">爱上一个地方，就应该背上包去旅游，走得更远。</p>
  <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>

对齐处理

如果需要居中对齐或右对齐，使用.text-center、.text-right方法配合即可，如下两示例：

爱上一个地方，就应该背上包去旅行，走得更远。

出自商务印书馆的《新华字典》

<blockquote class="blockquote text-center">
  <p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
  <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>

爱上一个地方，就应该背上包去旅行，走得更远。

出自商务印书馆的《新华字典》

<blockquote class="blockquote text-right">
  <p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
  <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>

列表

列表样式初始化

在ul(或ol）上使用.list-unstyled可以删除列表项目上默认的list-style以及左外边距（只针对直接子元素），这只生效于在直接子列表项目上，不影响你嵌套的子列表。

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

分行或单行多列并排

使用.list-inline 、 .list-inline-item结合，可以实现列表逐行显示（默认不引用且无父元素影响也是逐行显示）、或单行并多列并排（遵循从左对右的原则、并清除margin方法）。

列表之一
列表之二
列表之三

<ul class="list-inline">
  <li class="list-inline">列表之一</li>
  <li class="list-inline">列表之二</li>
  <li class="list-inline">列表之三</li>
</ul>

列表之一
列表之二
列表之三

<ul class="list-inline">
  <li class="list-inline-item">列表之一</li>
  <li class="list-inline-item">列表之二</li>
  <li class="list-inline-item">列表之三</li>
</ul>

dl表格式水平描述

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

描述列表

一个关于描述列表的两端对齐

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.

Nesting

Nested definition list: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<dl class="row">
  <dt class="col-sm-3">描述列表</dt>
  <dd class="col-sm-9">一个关于描述列表的两端对齐</dd>

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

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

响应式排版

响应性排版是指通过简单地调整font-size一系列媒体查询中的根元素来缩放文本和组件。Bootstrap不会为您做这个，但是如果需要，它很容易添加。这是实践中的一个例子。选择font-size您想要的任何s和媒体查询。

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}