在 GitHub 上查看

排版

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

全局设置

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

  • 使用 原生字体堆栈，为每个操作系统和设备选择最佳的 font-family。
  • 为了获得更具包容性和可访问性的字体比例，我们使用浏览器的默认根 font-size（通常为 16px），以便访问者可以根据需要自定义其浏览器默认设置。
  • 使用 $font-family-base、$font-size-base 和 $line-height-base 属性作为应用于 <body> 的排版基础。
  • 通过 $link-color 设置全局链接颜色，并且仅在 :hover 时应用链接下划线。
  • 使用 $body-bg 在 <body> 上设置 background-color（默认值为 #fff）。

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

标题

所有 HTML 标题，从 <h1> 到 <h6>，都可用。

标题 示例
<h1></h1> h1. Bootstrap 标题
<h2></h2> h2. Bootstrap 标题
<h3></h3> h3. Bootstrap 标题
<h4></h4> h4. Bootstrap 标题
<h5></h5> h5. Bootstrap 标题
<h6></h6> h6. Bootstrap 标题 
<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>

当你想匹配标题的字体样式，但无法使用关联的 HTML 元素时，也可以使用 .h1 到 .h6 类。

h1. Bootstrap 标题

h2. Bootstrap 标题

h3. Bootstrap 标题

h4. Bootstrap 标题

h5. Bootstrap 标题

h6. Bootstrap 标题

<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 使段落脱颖而出。

这是一个导语段落。它与普通段落不同。 

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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> 相同的样式，同时避免标签会带来的任何不需要的语义含义。

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

文本实用工具

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

缩写

HTML 的 <abbr> 元素的样式化实现，用于缩写和首字母缩略词，可在悬停时显示扩展版本。缩写默认带下划线，并在悬停时获得帮助光标，以便为辅助技术的用户提供更多信息。

为缩写添加 .initialism 以获得稍小的字体大小。

attr

HTML

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

引用块

用于在文档中引用来自其他来源的内容块。将 <blockquote class="blockquote"> 包裹在任何 HTML 上作为引用。

一个众所周知的引用，包含在引用块元素中。

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

命名来源

添加 <footer class="blockquote-footer"> 以识别来源。将来源作品的名称包裹在 <cite> 中。

一个众所周知的引用，包含在引用块元素中。

某位名人，出自 来源标题
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

对齐

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

一个众所周知的引用，包含在引用块元素中。

某位名人，出自 来源标题
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

一个众所周知的引用，包含在引用块元素中。

某位名人，出自 来源标题
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

列表

无样式

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

  • 这是一个列表。
  • 它看起来完全没有样式。
  • 从结构上来说，它仍然是一个列表。
  • 但是，此样式仅适用于直接子元素。
  • 嵌套列表
    • 不受此样式影响
    • 仍然会显示项目符号
    • 并有适当的左外边距
  • 在某些情况下，这仍然可能派上用场。
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

内联

移除列表的项目符号并应用一些浅色 margin，方法是结合使用两个类：.list-inline 和 .list-inline-item。

  • 这是一个列表项。
  • 还有另一个。
  • 但它们以内联方式显示。
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

描述列表对齐

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

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

术语的定义。

以及一些占位符定义文本。

另一个术语
此定义很短，因此没有额外的段落或任何内容。
截断的术语已截断
当空间紧张时，这很有用。在结尾处添加省略号。
嵌套
嵌套定义列表
听说你喜欢定义列表。让我在你的定义列表中放一个定义列表。
<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">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

响应式字体大小

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

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