跳到主要内容 跳到文档导航
Check
in English

排版

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

全局设置

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

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

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

标题

所有 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. 引导标题

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

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

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

显示标题

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

显示 1
显示 2
显示 3
显示 4
显示 5
显示 6
<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

显示标题通过$display-font-sizesSass 映射和两个变量$display-font-weight$display-line-height.

显示标题可通过两个变量$display-font-family$display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

带领

通过添加使段落脱颖而出.lead

这是一个引导段落。它从常规段落中脱颖而出。

html
<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

内联文本元素

常用内联 HTML5 元素的样式。

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

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

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

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

这行文本将呈现为下划线。

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

此行呈现为粗体文本。

此行呈现为斜体文本。

html
<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>代表旁注和小字,如版权和法律文本。
  • <s>表示不再相关或不再准确的元素。
  • <u>表示一段内联文本,应该以表明它具有非文本注释的方式呈现。

如果要设置文本样式,则应改用以下类:

  • .mark将应用与 相同的样式<mark>
  • .small将应用与 相同的样式<small>
  • .text-decoration-underline将应用与 相同的样式<u>
  • .text-decoration-line-through将应用与 相同的样式<s>

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

文本实用程序

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

缩写

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

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

属性

HTML

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

块引用

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

众所周知的引用,包含在 blockquote 元素中。

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

命名源

HTML 规范要求将块引用属性放在<blockquote>. 提供属性时,将您的内容包装<blockquote>在 a 中<figure>并在类中使用 a<figcaption>或块级元素(例如<p>.blockquote-footer。确保也包含源作品的名称<cite>

众所周知的引用,包含在 blockquote 元素中。

html
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

结盟

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

众所周知的引用,包含在 blockquote 元素中。

html
<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

众所周知的引用,包含在 blockquote 元素中。

html
<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

列表

无样式

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

  • 这是一个列表。
  • 它看起来完全没有样式。
  • 从结构上讲,它仍然是一个列表。
  • 但是,此样式仅适用于直接子元素。
  • 嵌套列表:
    • 不受这种风格的影响
    • 仍会显示子弹
    • 并有适当的左边距
  • 在某些情况下,这可能仍然派上用场。
html
<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.

  • 这是一个列表项。
  • 还有一个。
  • 但它们是内联显示的。
html
<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类以使用省略号截断文本。

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

术语的定义。

还有一些占位符定义文本。

另一个术语
这个定义很短,所以没有多余的段落或任何东西。
被截断的术语被截断
这在空间紧张时很有用。在末尾添加一个省略号。
嵌套
嵌套定义列表
我听说你喜欢定义列表。让我在你的定义列表中放一个定义列表。
html
<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>

响应式字体大小

在 Bootstrap 5 中,我们默认启用了响应式字体大小,允许文本更自然地跨设备和视口大小缩放。查看RFS 页面以了解其工作原理。

萨斯

变量

标题有一些用于大小和间距的专用变量。

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

此处和Reboot中介绍的其他排版元素也有专用变量。

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

混合

没有专门用于排版的 mixin,但 Bootstrap 确实使用了响应式字体大小 (RFS)