排版(Typography)
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
。
标题
所有 HTML 标题(<h1>
至<h6>
)均可用。
Heading | Example |
---|---|
<h1></h1> |
h1. Bootstrap heading |
<h2></h2> |
h2. Bootstrap heading |
<h3></h3> |
h3. Bootstrap heading |
<h4></h4> |
h4. Bootstrap heading |
<h5></h5> |
h5. Bootstrap heading |
<h6></h6> |
h6. Bootstrap heading |
<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 元素时使用。
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<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 中的小二级标题文本。
Fancy display heading With faded secondary text
<h3>
Fancy display heading
<small class="text-body-secondary">With faded secondary text</small>
</h3>
显示标题
传统的标题元素最适合放在页面内容的主要部分。当你需要一个突出的标题时,可以考虑使用显示标题–一种更大、更有主见的标题样式。
<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-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
使段落更加突出。
This is a lead paragraph. It stands out from regular paragraphs.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
内联文本元素
常见内联 HTML5 元素的样式。
您可以使用标记标记高亮文本。
这行文字应视为删除文字。
这一行文字被视为不再准确。
这行文字应视为文件的补充。
这行文本将显示为带下划线。
这行文字应被视为精美的印刷体。
该行显示为粗体文字。
该行显示为斜体文本。
<p>您可以使用标记标记<mark>高亮</mark>文本。</p>
<p><del>这行文字应视为删除文字。</del></p>
<p><s>这一行文字被视为不再准确。</s></p>
<p><ins>这行文字应视为文件的补充。</ins></p>
<p><u>这行文本将显示为带下划线。</u></p>
<p><small>这行文字应被视为精美的印刷体。</small></p>
<p><strong>该行显示为粗体文字。</strong></p>
<p><em>该行显示为斜体文本。</em></p>
请注意,这些标记应该用于语义目的:
<mark>
代表标注或突出显示的文本,用于参考或记事。<small>
代表旁注和小字,如版权和法律文本。<s>
代表不再相关或不再准确的元素。<u>
代表一个内联文本跨度,其呈现方式应表明该跨度具有非文本注释。
如果您想为文本添加样式,应使用以下类来代替:
.mark
将应用于与<mark>
相同的样式。.small
将应用于与<small>
相同的样式。.text-decoration-underline
将应用于与<u>
相同的样式。.text-decoration-line-through
将应用于与<s>
相同的样式。
虽然上面没有显示,但是可以在HTML5中随意使用 <b>
和 <i>
用来突出单词或短语而不传达额外的重要性,而<i>
主要用于语音、技术术语等。
文本通用类
使用我们的文本通用类和颜色通用类更改文本对齐、转换、样式、权重、行高、装饰和颜色,文本通用类 和 颜色通用类.
缩写
用于缩写和首字母缩略词的 HTML<abbr>
元素的风格化实现,可在悬停时显示扩展版本。缩写具有默认下划线,并可获得帮助光标,以便在悬停时为辅助技术用户提供更多上下文。
在缩写中添加.initialism
,使字体略小。
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
块引用
用于在文档中引用其他来源的内容块。将 <blockquote class=“blockquote”>
包绕任何 HTML 作为引用。
A well-known quote, contained in a blockquote element.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
引用来源
HTML 规范要求将blockquote署名放在<blockquote>
之外。提供署名时,请将<blockquote>
包在<figure>
中,并使用<figcaption>
或带有.blockquote-footer
类的块级元素(如<p>
)。请务必将源文件的名称也用 <cite>
包起来。
<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>
对齐
根据需要使用文本通用类来更改引文块的对齐方式。
<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>
<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
和左侧边距(仅限直接子列表)。这只适用于直接子列表项,这意味着您还需要为任何嵌套列表添加该类。
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
- Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- This may still come in handy in some situations.
<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>
内联
使用两个类.list-inline
和.list-inline-item
的组合,移除列表的小标题并应用一些浅色margin
。
- This is a list item.
- And another one.
- But they're displayed inline.
<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
类,用省略号截断文本。
- Description lists
- A description list is perfect for defining terms.
- Term
-
Definition for the term.
And some more placeholder definition text.
- Another term
- This definition is short, so no extra paragraphs or anything.
- Truncated term is truncated
- This can be useful when space is tight. Adds an ellipsis at the end.
- Nesting
-
- Nested definition list
- I heard you like definition lists. Let me put a definition list inside your definition list.
<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 页面 ,了解其工作原理。
CSS
Sass 变量
标题的大小和间距有一些专用变量。
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: inherit;
此处和 Reboot中涉及的其他排版元素也有专用变量。
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
// fusv-disable
$text-muted: var(--#{$prefix}secondary-color); // Deprecated in 5.3.0
// fusv-enable
$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: var(--#{$prefix}border-width);
$hr-opacity: .25;
$vr-border-width: var(--#{$prefix}border-width);
$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-color: $body-color;
$mark-bg: $yellow-100;
Sass mixins
虽然没有专门用于排版的混合插件,但 Bootstrap 确实使用了 响应字体大小 (RFS)。