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

显示标题

传统的标题元素被设计成在页面内容的核心部分发挥最佳效果。当你需要一个突出的标题时,可以考虑使用一个 display heading—— 一个更大的,稍微有点固执己见的标题样式。请记住,这些标题在默认情况下是不响应的,但是可以启用 响应字体大小

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.

This is a lead paragraph. It stands out from regular paragraphs.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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>

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

A well-known quote, contained in a blockquote element.

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

命名源

添加一个 <footer class="blockquote-footer"> 来标识源。将源作品的名称包装在<cite>中。

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
<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的对齐方式。

>A well-known quote, contained in a blockquote element.

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

A well-known quote, contained in a blockquote element.

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

列表

Unstyled

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

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
<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>

内联

删除列表的项目符号,并结合两个类.list-inline.list-inline-item 来 淡化margin , 。

  • This is a list item.
  • And another one.
  • But they're displayed inline.
<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>

描述列表对齐

通过使用我们的网格系统预定义的类(或语义混合)水平对齐术语和描述。对于较长的术语,您可以选择添加一个 .text-truncate 类来截断带有省略号的文本。

Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.
<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附带了启用响应字体大小的选项,允许文本在设备和视口大小之间更自然地缩放。通过将$enable-responsive-font-sizes Sass 变量更改为true并重新编译Bootstrap,可以启用 RFS

为了支持 RFS,我们使用Sass mixin来替换普通的 font-size 属性。响应字体大小将被编译成 calc() 函数,并混合使用 rem 和viewport单位来启用响应缩放行为。关于RFS及其配置的更多信息可以在其 GitHub repository中找到。