排版

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

全局设置

Bootstrap 设置基本的全局显示、排版和链接样式。当需要更多控制时，请查看文本实用程序类。

使用为每个操作系统和设备选择最佳字体的本机字体堆栈。font-family
对于更具包容性和可访问性的类型比例，我们假设浏览器默认根font-size（通常为 16 像素），因此访问者可以根据需要自定义浏览器默认值。
使用$font-family-base、$font-size-base和$line-height-base属性作为我们应用于<body>.
通过设置全局链接颜色$link-color并仅在上应用链接下划线:hover。
用于在(默认情况下)上$body-bg设置 a 。background-color<body>#fff

这些样式可以在中找到_reboot.scss，全局变量在中定义_variables.scss。确保设置$font-size-base在rem.

标题

所有 HTML 标题，<h1>通过<h6>，都可用。

标题	例子
`<h1></h1>`	h1。引导标题
`<h2></h2>`	h2。引导标题
`<h3></h3>`	h3。引导标题
`<h4></h4>`	h4。引导标题
`<h5></h5>`	h5。引导标题
`<h6></h6>`	h6. 引导标题

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

.h1through.h6类也可用，当您想匹配标题的字体样式但不能使用关联的 HTML 元素时。

h1。引导标题

h2。引导标题

h3。引导标题

h4。引导标题

h5。引导标题

h6. 引导标题

<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 3 重新创建小的二级标题文本。

带有褪色辅助文本的精美显示标题

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

显示标题

传统的标题元素旨在最适合您的页面内容。当您需要突出标题时，请考虑使用显示标题——一种更大、更自以为是的标题样式。

显示 1

显示 2

显示 3

显示 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。

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 元素的样式。

您可以使用标记标签强调文本。

~~这行文本将被视为已删除的文本。~~

~~这行文本将被视为不再准确。~~

这行文本被视为对文档的补充。

这行文本将呈现为下划线

这行文本应被视为精美印刷品。

此行呈现为粗体文本。

此行呈现为斜体文本。

<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类也可用于应用与标签相同的样式<mark>，<small>同时避免标签带来的任何不需要的语义含义。

<b>虽然上面没有显示，但请随意使用<i>HTML5。<b>旨在突出单词或短语而不传达额外的重要性，而<i>主要用于语音、技术术语等。

文本实用程序

使用我们的文本实用程序和颜色实用程序更改文本对齐、变换、样式、粗细和颜色。

缩写

<abbr>用于缩写和首字母缩略词的 HTML 元素的风格化实现，以在悬停时显示扩展版本。缩写具有默认下划线并获得帮助光标，以在悬停时和辅助技术用户提供额外的上下文。

添加.initialism一个略小的字体大小的缩写。

属性

HTML

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

块引用

用于引用文档中其他来源的内容块。环绕<blockquote class="blockquote">任何HTML作为引用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

<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">用于识别来源。将源作品的名称包装在<cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题中著名的人

<blockquote class="blockquote">
  <p class="mb-0">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>

结盟

根据需要使用文本实用程序来更改块引用的对齐方式。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题中著名的人

<blockquote class="blockquote text-center">
  <p class="mb-0">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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题中著名的人

<blockquote class="blockquote text-right">
  <p class="mb-0">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>

列表

无样式

删除list-style列表项的默认值和左边距（仅限直接子项）。这仅适用于直接子列表项，这意味着您还需要为任何嵌套列表添加类。

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
马萨的整数 molestie lorem
pretium nisl aliquet 的促进作用
Nulla volutpat aliquam velit
- 菜豆
- Purus sodales ultricies
- 前庭前庭端口扫描仪
- Ac tristique libero volutpat 在
Faucibus porta lacus fringilla vel
Aenean sat 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>

排队

删除列表的项目符号并使用margin两个类的组合应用一些光，.list-inline和.list-inline-item.

Lorem ipsum
菜豆
Nulla volutpat

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

描述列表对齐

使用我们网格系统的预定义类（或语义混合）水平对齐术语和描述。对于更长的术语，您可以选择添加一个.text-truncate类以使用省略号截断文本。

描述列表

描述列表非常适合定义术语。

欧伊斯莫德

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。

Donec id elit non mi porta gravida 在 eget metus。

马勒苏达门

Etiam porta sem malesuada magna mollis euismod。

被截断的术语被截断

Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。

嵌套

嵌套定义列表: Aenean posuere，tortor sed cursus feugiat，nunc augue blandit nunc。

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