排版

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
  1. <h1>h1. Bootstrap heading</h1>
  2. <h2>h2. Bootstrap heading</h2>
  3. <h3>h3. Bootstrap heading</h3>
  4. <h4>h4. Bootstrap heading</h4>
  5. <h5>h5. Bootstrap heading</h5>
  6. <h6>h6. Bootstrap heading</h6>

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

排版 - 图1

  1. <p class="h1">h1. Bootstrap heading</p>
  2. <p class="h2">h2. Bootstrap heading</p>
  3. <p class="h3">h3. Bootstrap heading</p>
  4. <p class="h4">h4. Bootstrap heading</p>
  5. <p class="h5">h5. Bootstrap heading</p>
  6. <p class="h6">h6. Bootstrap heading</p>

自定义标题备注

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

排版 - 图2

  1. <h3>
  2.   Fancy display heading
  3.   <small class="text-muted">With faded secondary text</small>
  4. </h3>

显式标题

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

排版 - 图3

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

Lead中心内容

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

排版 - 图4

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

文本内联元素

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

排版 - 图5

  1. <p>You can use the mark tag to <mark>highlight</mark> text.</p>
  2. <p><del>This line of text is meant to be treated as deleted text.</del></p>
  3. <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
  4. <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
  5. <p><u>This line of text will render as underlined</u></p>
  6. <p><small>This line of text is meant to be treated as fine print.</small></p>
  7. <p><strong>This line rendered as bold text.</strong></p>
  8. <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.

排版 - 图6

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

Blockquote 来源备注与引用

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

排版 - 图7

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

底部备注来源

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

排版 - 图8

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

对齐处理

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

排版 - 图9

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

排版 - 图10

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

列表

列表样式初始化

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

排版 - 图11

  1. <ul class="list-unstyled">
  2.   <li>Lorem ipsum dolor sit amet</li>
  3.   <li>Consectetur adipiscing elit</li>
  4.   <li>Integer molestie lorem at massa</li>
  5.   <li>Facilisis in pretium nisl aliquet</li>
  6.   <li>Nulla volutpat aliquam velit
  7.     <ul>
  8.       <li>Phasellus iaculis neque</li>
  9.       <li>Purus sodales ultricies</li>
  10.       <li>Vestibulum laoreet porttitor sem</li>
  11.       <li>Ac tristique libero volutpat at</li>
  12.     </ul>
  13.   </li>
  14.   <li>Faucibus porta lacus fringilla vel</li>
  15.   <li>Aenean sit amet erat nunc</li>
  16.   <li>Eget porttitor lorem</li>
  17. </ul>

分行或单行多列并排

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

排版 - 图12

  1. <ul class="list-inline">
  2.   <li class="list-inline">列表之一</li>
  3.   <li class="list-inline">列表之二</li>
  4.   <li class="list-inline">列表之三</li>
  5. </ul>

排版 - 图13

  1. <ul class="list-inline">
  2.   <li class="list-inline-item">列表之一</li>
  3.   <li class="list-inline-item">列表之二</li>
  4.   <li class="list-inline-item">列表之三</li>
  5. </ul>

dl表格式水平描述

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

排版 - 图14

  1. <dl class="row">
  2.   <dt class="col-sm-3">描述列表</dt>
  3.   <dd class="col-sm-9">一个关于描述列表的两端对齐</dd>
  5.   <dt class="col-sm-3">Euismod</dt>
  6.   <dd class="col-sm-9">
  7.     <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
  8.     <p>Donec id elit non mi porta gravida at eget metus.</p>
  9.   </dd>
  11.   <dt class="col-sm-3">Malesuada porta</dt>
  12.   <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
  14.   <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  15.   <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
  17.   <dt class="col-sm-3">Nesting</dt>
  18.   <dd class="col-sm-9">
  19.     <dl class="row">
  20.       <dt class="col-sm-4">Nested definition list</dt>
  21.       <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
  22.     </dl>
  23.   </dd>
  24. </dl>

响应式字体大小

Bootstrap v4.3附带启用响应字体大小的选项，允许文本在设备和视口大小之间更自然地缩放。 可以通过将 $enable-responsive-font-sizes Sass 变量更改为true并重新编译Bootstrap来启用RFS.

为了支持RFS,我们使用Sass mixin来替换我们正常的字体大小属性。 响应式字体大小将编译为font-size属性. 响应式字体大小将编译为 calc()函数，混合使用rem和视口单元以启用响应式缩放行为。 有关RFS及其配置的更多信息，请访问其GitHub 存储库.