Bootstrap5 版式设计（Typography）

半兽人 发表于: 2020-07-27   最后更新时间: 2023-06-12 18:21:03  
{{totalSubscript}} 订阅， 5,273 游览

全局设置

Bootstrap设置了基本的全局版式和链接的样式。当需要更多的控制时，请查看文本实用类。

  • 使用本地字体堆栈，为每个操作系统和设备选择最佳的font-family。
  • 对于更具包容性和可访问性的类型比例，我们假定浏览器使用默认的根字体大小（通常为16px），以便访问者可以根据需要自定义其浏览器默认设置。
  • 使用$font-family-base、$font-size-base和$line-height-base属性作为我们应用于<body>的排版基础。
  • 通过$link-color设置全局链接的颜色，并且只在:hover上应用链接下划线。
  • 使用$body-bg为<body>设置背景色（默认为#fff）。

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

标题

所有HTML标题，<h1>到<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>

在线运行

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

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

在线运行

显示标题

传统的标题元素被设计为在你的页面内容中发挥最佳效果。当你需要一个突出的标题时，可以考虑使用 display heading -- 一个更大、更有观点的标题样式。

<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-sizes Sass 映射和$display-font-weight和$display-line-height这两个变量配置的。

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

$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lead

通过添加.Lead使一个段落与众不同。

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

在线运行

Inline text elements

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

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

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

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

文本实用工具

用我们的文本实用程序和颜色实用程序改变文本对齐方式、变换、样式、重量、线高、装饰和颜色。

缩写（Abbreviations）

HTML的<abbr>元素的风格化实现，用于缩写和缩略语，在悬停时显示扩展版本。缩写有一个默认的下划线，并获得一个帮助光标，以便在悬停时向辅助技术的用户提供额外的背景。

在缩写中加入.initialism，以获得稍小的字体大小。

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

在线运行

块引用（Blockquotes）

用于文档中引用其他来源的内容块。通过<blockquote class="blockquote">使用。

<blockquote class="blockquote">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

在线运行

命名一个来源（Naming a source）

HTML规范要求，区块引号的署名要放在<blockquote>的外面。当提供署名时，将你的<blockquote>包裹在<figure>中，并使用<figcaption>或带有.blockquote-footer类的块级元素（如<p>）。请确保用<cite>来包装源作品的名称。

<figure>
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

在线运行

队列（Alignment）

根据需要使用文本工具来改变你的分块引语的排列。

<figure class="text-center">
  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

在线运行

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

在线运行

Lists

Unstyled

移除默认的list-style和列表项的左边距（仅适用于直系子项）。这只适用于直系子列表项，这意味着你也需要为任何嵌套列表添加该类。

<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

删除列表的项目符号并应用一些轻微的margin，结合两个类，.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类，用省略号来截断文本。

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

在线运行

bootstrap5
更新于 2023-06-12
半兽人

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题，也可以与我们一起分享文章。