• 排版
    • 全局设置
    • 标题
      • 自定义标题备注
    • 显式标题
    • Lead中心内容
    • 文本内联元素
    • 文本实用程序
    • Abbr缩略语
    • Blockquote 来源备注与引用
      • 底部备注来源
      • 对齐处理
    • 列表
      • 列表样式初始化
      • 分行或单行多列并排
      • dl表格式水平描述
    • 响应式字体大小

    排版

    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 存储库.