Source

排版

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

全局设置

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

  • 使用为每个操作系统和设备选择最佳字体的本机字体堆栈。font-family
  • 对于更具包容性和可访问性的类型比例,我们假设浏览器默认根font-size(通常为 16 像素),因此访问者可以根据需要自定义浏览器默认值。
  • 使用$font-family-base$font-size-base$line-height-base属性作为我们应用于<body>.
  • 通过设置全局链接颜色$link-color并仅在 上应用链接下划线:hover
  • 用于在(默认情况下)上$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. 引导标题

<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

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

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

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

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

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

这行文本将呈现为下划线

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

此行呈现为粗体文本。

此行呈现为斜体文本。

<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>同时避免标签带来的任何不需要的语义含义。

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

文本实用程序

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

缩写

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

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

属性

HTML

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

块引用

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题 中著名的人
<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 pouere 表示赌注。

源标题 中著名的人
<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 pouere 表示赌注。

源标题 中著名的人
<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>

列表

无样式

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 马萨的整数 molestie lorem
  • pretium nisl aliquet 的促进作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口扫描仪
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat 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>

排队

删除列表的项目符号并使用margin两个类的组合应用一些光,.list-inline.list-inline-item.

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

描述列表
描述列表非常适合定义术语。
欧伊斯莫德

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。

Donec id elit non mi porta gravida 在 eget metus。

马勒苏达门
Etiam porta sem malesuada magna mollis euismod。
被截断的术语被截断
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。
嵌套
嵌套定义列表
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 不会为您执行此操作,但如果您需要,添加它相当容易。

这是实践中的一个例子。font-size选择您希望的任何s 和媒体查询。

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