Bootstrap5 文字排版

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

全局设置

Bootstrap设置基本的全局显示,版式和链接样式。

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

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


标题

Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。请看下面的实例:

<div class="container">
  <h1>h1 Bootstrap 标题</h1>
  <h2>h2 Bootstrap 标题</h2>
  <h3>h3 Bootstrap 标题</h3>
  <h4>h4 Bootstrap 标题</h4>
  <h5>h5 Bootstrap 标题</h5>
  <h6>h6 Bootstrap 标题</h6>
</div>

你也可以使用 .h1 到 .h6 类来设置元素的样式:

<div class="container">
  <p class="h1">h1 Bootstrap 标题</p>
  <p class="h2">h2 Bootstrap 标题</p>
  <p class="h3">h3 Bootstrap 标题</p>
  <p class="h4">h4 Bootstrap 标题 </p>
  <p class="h5">h5 Bootstrap 标题</p>
  <p class="h6">h6 Bootstrap 标题</p>
</div>

自定义标题

使用包含的实用程序类从bootstrap3重新创建小的辅助标题文本。

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

Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

<div class="container">
  <h1>Display 标题</h1>
  <p>Display 标题可以输出更大更粗的字体样式。</p>
  <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>
</div>

显示标题通过$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">
  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> 代表旁注和小字体,如版权和法律文本。
  • <s> 表示不再相关或不再准确的元素。
  • <u> 表示内联文本的范围,该范围应以指示其具有非文本注释的方式呈现。

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

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

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

<small>

在 Bootstrap 5 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:

<div class="container">
  <h1>更小文本标题</h1>
  <p>small 元素用于字号更小的颜色更浅的文本:</p>       
  <h1>h1 标题 <small>副标题</small></h1>
  <h2>h2 标题 <small>副标题</small></h2>
  <h3>h3 标题 <small>副标题</small></h3>
  <h4>h4 标题 <small>副标题</small></h4>
  <h5>h5 标题 <small>副标题</small></h5>
  <h6>h6 标题 <small>副标题</small></h6>
</div>

<mark>

Bootstrap 5 定义 <mark> 标签及 .mark 类为黄色背景及有一定的内边距:

<div class="container">
  <h1>高亮文本</h1>    
  <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
</div>

缩略语 <abbr>

Bootstrap 5 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

块引用 <blockquote>

对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 :

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>

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

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

<dl>

Bootstrap 5 定义 HTML <dl> 元素的样式如下:

<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

<code>

Bootstrap 5 定义 HTML <code> 元素的样式如下:

<div class="container">
  <h1>代码片段</h1>
  <p>可以将一些代码元素放到 code 元素里面:</p>
  <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>

<kbd>

Bootstrap 5 定义 HTML <kbd> 元素的样式如下:

<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<pre>

Bootstrap 5 定义 HTML <pre> 元素的样式如下:

<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

列表

无样式

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

内联

删除一个列表的项目符号,并结合.list-inline 和 .list-inline-item这两个类来应用一些浅色 margin

说明列表对齐

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

<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>
<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中,我们默认启用了响应字体大小,允许文本在设备和视口大小之间更自然地缩放。查看RFS页面以了解其工作原理。


更多排版类

下表提供了 Bootstrap5 更多排版类的实例:

类名 描述 实例
.lead 让段落更突出 试一试
.small 指定更小文本 (为父元素的 85% ) 试一试
.text-start 左对齐 试一试
.text-center 居中 试一试
.text-end 右对齐 试一试
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 试一试
.text-nowrap 段落中超出屏幕部分不换行 试一试
.text-lowercase 设定文本小写 试一试
.text-uppercase 设定文本大写 试一试
.text-capitalize 设定单词首字母大写 试一试
.initialism 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 试一试
.list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) 试一试
.list-inline 将所有列表项放置同一行 试一试