bootstrap_ref_css_text

Bootstrap 5 CSS 排版参考

Bootstrap 的默认排版设置

Bootstrap 5 设置了一个全局默认的 font-size 为 1rem (浏览器默认通常是 16px)，以及一个 line-height (行高) 为 1.5。

这些默认设置应用于 <body> 元素和所有段落 ()。

此外，所有  元素默认都有 margin-bottom: 1rem。

默认字体栈优先使用系统字体，以获得更好的性能和原生感觉：system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"。

HTML 标题和 Display 标题

所有 HTML 标题，从 <h1> 到 <h6>，都可以使用并由 Bootstrap 进行了样式设置。也提供了 .h1 到 .h6 类，当你想匹配标题的字体样式但无法使用关联的 HTML 元素时可以使用它们。

元素/类描述示例

<h1> - <h6> or .h1 - .h6 标准 HTML 标题。字体大小默认是响应式的。 <h1>h1. Bootstrap heading</h1>

 (within headings) 在任何标题中创建更浅的辅助文本。 <h3>Fancy display heading With faded secondary text</h3>

Display Headings (.display-1 to .display-6) 用于更大、更具表现力的标题样式。 <h1 class="display-1">Display 1</h1>

.lead 使段落突出显示。 This is a lead paragraph. It stands out from regular paragraphs.

行内文本元素和工具类

Bootstrap 为常用的 HTML5 行内元素设置了样式，并提供了用于进一步文本样式设置的工具类。

元素/类描述示例

 or .mark 突出显示文本（默认黄色背景）。 You can use the mark tag to highlight text.

<del> 表示已删除文本（删除线）。 <del>This line of text is meant to be treated as deleted text.</del>

<s> 表示不再相关的文本（删除线）。 <s>This line of text is meant to be treated as no longer accurate.</s>

<ins> 表示插入文本（下划线）。 <ins>This line of text is meant to be treated as an addition to the document.</ins>

 表示带下划线的文本。 This line of text will render as underlined.

.small or  表示更小的文本（设置为父元素大小的 85%）。 This line of text is meant to be treated as fine print.

** or  表示粗体文本。 **rendered as bold text**

 or  表示斜体文本。 rendered as italicized text

.text-start (replaces .text-left) 表示左对齐文本（遵守 LTR/RTL）。 Start aligned text on all viewport sizes.

.text-center 表示居中文本。 Center aligned text on all viewport sizes.

.text-end (replaces .text-right) 表示右对齐文本（遵守 LTR/RTL）。 End aligned text on all viewport sizes.

.text-sm-start, .text-md-center, etc. 用于不同断点的响应式文本对齐。 End aligned text on viewports SM (small) or wider.

.text-justify (Use with caution) 表示两端对齐文本。两端对齐有时会影响可读性。 Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.

.text-wrap / .text-nowrap 控制文本换行。 <div class="badge bg-primary text-wrap" style="width: 6rem;">This text should wrap.</div> This text should not wrap.

.text-break 防止长字符串通过插入 word-wrap: break-word 和 word-break: break-word 来破坏布局。 mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

.text-lowercase 将文本转换为小写。 Lowercased text.

.text-uppercase 将文本转换为大写。 Uppercased text.

.text-capitalize 将文本转换为首字母大写。 CapiTaliZed text.

.fs-1 to .fs-6 字体大小工具类，类似于标题大小，但可以应用于任何元素。 .fs-1 text

.fw-bold, .fw-bolder, .fw-normal, .fw-light, .fw-lighter 字体粗细工具类。 Bold text.

.fst-italic, .fst-normal 字体样式工具类。 Italic text.

.lh-1, .lh-sm, .lh-base, .lh-lg 行高工具类。 This is text with a small line height.

.text-muted 表示柔和文本（通常为灰色）。 Muted text with a faded look.

.text-reset 重置文本或链接元素的颜色，继承其父元素的颜色。 Muted text with a <a href="#" class="text-reset">reset link</a>.

.text-decoration-none, .text-decoration-underline, .text-decoration-line-through 文本装饰工具类。 <a href="#" class="text-decoration-none">Non-underlined link</a>

缩写、地址和块引用

元素/类描述示例

<abbr> <abbr> 元素表示缩写或首字母缩略词。添加 title 属性可在悬停时显示完整展开形式。Bootstrap 为其提供了细微的点状下边框和帮助光标。 <abbr title="attribute">attr</abbr><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> (with .initialism for slightly smaller text)

.initialism 以略小的字体大小显示 <abbr> 元素内的文本。 See <abbr> example.

<address> 显示联系信息。通过以   结尾的行来保留格式。 `

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

<blockquote> 表示引自其他来源的内容块。将引用内容包装在 <blockquote class="blockquote"> 中。 `

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

.blockquote-footer 用于标识来源。将来源作品包装在 <cite> 中。 See <blockquote> example.

Alignment for Blockquotes 在 <blockquote> 或 <figure> 上使用文本工具类，例如 .text-center 或 .text-end。 `

...

列表

元素/类描述示例

<ul> 表示无序列表（项目符号）。 <ul><li>Item 1</li><li>Item 2</li></ul>

<ol> 表示有序列表（编号）。 <ol><li>Item 1</li><li>Item 2</li></ol>

.list-unstyled 移除列表项的默认 list-style 和左外边距（适用于 <ul> 和 <ol>）。此 class 仅应用于直接子列表项。 <ul class="list-unstyled"><li>Item 1</li><li>Nested:<ul><li>Sub-item (styled)</li></ul></li></ul>

.list-inline 将所有列表项放在一行。配合在 <li> 元素上使用 .list-inline-item。 <ul class="list-inline"><li class="list-inline-item">Item 1</li><li class="list-inline-item">Item 2</li></ul>

<dl>, <dt>, <dd> (Description Lists) 表示定义列表。Bootstrap 为其设置了一些外边距样式。 <dl><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd></dl>

Horizontal Description Lists (using Grid) 较旧的 .dl-horizontal class 已弃用。使用 Bootstrap 的网格系统（或其他工具类）创建水平 <dl>。 `

Term: Definition for the term.
Truncated term is truncated: This can be useful when space is limited.

实际应用：排版是基础。可将其用于构建文章、产品描述和任何文本内容。常见障碍：过度样式化。从语义化的 HTML 开始，然后使用 Bootstrap 类进行增强。资源：Bootstrap 官方排版文档：https://getbootstrap.com/docs/5.3/content/typography/

代码块和变量

元素/类描述示例

<code> 表示行内代码片段。用 <code> 包装行内代码。 For example, <code><section></code> should be wrapped as inline.

<kbd> 表示通常通过键盘输入的用户输入。 To switch directories, type <kbd>cd</kbd> followed by the directory name. For saving, press <kbd><kbd>ctrl</kbd> + <kbd>s</kbd></kbd>

<pre> 表示多行代码。转义代码中的尖括号以正确渲染。 <pre>Sample text here...</pre>

.pre-scrollable 使 <pre> 元素在其内容超过 340px 的最大高度时可滚动。 <pre class="pre-scrollable"></pre>

<samp> 表示计算机程序的示例输出。 <samp>This text is meant to be treated as sample output from a computer program.</samp>

<var> 表示数学表达式或编程上下文中的变量。 <var>y</var> = <var>m</var><var>x</var> + <var>b</var>