排版(Typography)

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

全局设置

Bootstrap设置基本的全局显示,版式和链接样式。 当需要更多控制时,请查看textual utility classes.

  • 使用 native font stack,为每个操作系统选择最佳的“字体家族” 和设备。
  • 为使包容性和访问性更好,我们假定浏览器的默认根目录为`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

标题

从<h1>到<h6>的所有HTML标题均可用。

Heading Example

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

也可以使用.h1至.h6类,适用于想要匹配标题的字体样式但不能使用关联的HTML元素的情况。

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

Fancy display heading With faded secondary text

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

显示标题

传统的标题元素旨在最有效地处理您页面内容的内容。 当您需要一个标题来突出显示时,请考虑使用显示标题-更大,更自觉的标题样式。 请记住,这些标题默认情况下不响应,但是可以启用 responsive font sizes

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

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类也可用于应用与和``相同的样式,同时避免标签会带来任何不必要的语义影响。

尽管上面没有显示,但可以在HTML5中随意使用<b><i>。 “ ”旨在突出显示单词或短语,而不传达其他重要性,而“ ”主要用于语音,技术术语等。

文本工具

Change text alignment, transform, style, weight, and color with our text utilities and color utilities.

缩略语

HTML的元素的样式化实现,用于缩写和首字母缩写,以显示悬停时的扩展版本。 缩写带有默认下划线,并获得帮助光标,以提供有关悬停和辅助技术用户的其他上下文。

在缩写中添加.initialism,以减小字体大小。

attr

HTML

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

块引用

用于引用文档中其他来源的内容块。 在任何HTML周围将<blockquote class="blockquote">括起来.

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”>以标识源。 将源作品的名称包装在`中。

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

Someone famous in Source Title
<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 posuere erat a ante.

Someone famous in Source Title
<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 posuere erat a ante.

Someone famous in Source Title
<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>

列表(Lists)

无样式

删除默认的“列表样式”和列表项的左边距(仅适用于直接子级)。 这仅适用于直接子级列表项,这意味着您还需要为所有嵌套列表添加类。

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

排队(Inline)

删除列表的项目符号,并结合使用.list-inline和.list-inline-item这两个类,使用少量的“ margin”。

  • Lorem ipsum
  • Phasellus iaculis
  • 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类以使用省略号截断文本。

Description lists
A description list is perfect for defining terms.
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">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>

响应式字体大小

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

为了支持<abbr title =“ Responsive font size”> RFS </ abbr>,我们使用Sass mixin替换了常规的font-size属性。 响应字体大小将被混合到rem和视口单元的calc()函数中,以启用响应缩放行为。 有关<abbr title =“响应字体大小”> RFS </ abbr>及其配置的更多信息,请访问其GitHub repository