排版

Bootstrap 排版功能,包括全局设置,标题,正文,列表等。

全局设定

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

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

标题

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

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 的 Class,因为当你想匹配某一标题的字体样式,但不能直接使用 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>

超大标题

传统的标题元素旨在最好地处理页面内容。 当你需要更突出标题时,请考虑使用超大标题 - 更大,更醒目。

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 来添加引言内容(字体比标题小一些)。

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类也可用于应用与<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>

引用

用于引用文档中其他来源的内容块。 将任何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"> 里添加需要署名的内容。 并在 <cite> 里添加作者。

我们中国的最伟大最永久,而且最普遍的“艺术”是男人扮女人。

来自 鲁迅
<blockquote class="blockquote">
  <p class="mb-0">我们中国的最伟大最永久,而且最普遍的“艺术”是男人扮女人。</p>
  <footer class="blockquote-footer">来自 <cite title="Source Title">鲁迅</cite></footer>
</blockquote>

对齐

根据需要使用文本工具来更改 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>

列表

无特效列表

删除列表项上的默认列表样式和左边距(仅限直接子项)。 仅适用于直接子列表项,这意味着你还需要为任何嵌套列表添加类。

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

行内列表

删除列表的项目符号并使用两个类的组合应用一些微小的边距,使用 .list-inline.list-inline-item 来实现。

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

响应式排版设计

响应式排版是指通过简单地在一系列媒体查询中调整根元素的 font-size 来缩放文本和组件。 Bootstrap 不会为你执行此操作,但如果你需要,它可以很容易地添加。

这是一个例子。 根据你希望的任何字体大小和媒体查询进行调整。

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