排版
Bootstrap 排版的文档和示例,包括全局设置、标题、正文、列表等。
全局设置
Bootstrap 设置基本的全局显示、排版和链接样式。当需要更多控制时,请查看文本实用程序类。
- 使用为每个操作系统和设备选择最佳的本机字体堆栈。
font-family
- 为了获得更具包容性和可访问性的字体比例,我们使用浏览器的默认根
font-size
(通常为 16 像素),以便访问者可以根据需要自定义他们的浏览器默认值。 - 使用
$font-family-base
、$font-size-base
和$line-height-base
属性作为我们应用于<body>
. - 通过 设置全局链接颜色
$link-color
。 - 用于在(默认情况下)上
$body-bg
设置 a 。background-color
<body>
#fff
这些样式可以在 中找到_reboot.scss
,全局变量在 中定义_variables.scss
。确保设置$font-size-base
在rem
.
标题
所有 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>
.h1
through.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>
显示标题
传统的标题元素旨在在您的页面内容中发挥最佳作用。当您需要突出标题时,请考虑使用显示标题- 一种更大、稍微更自以为是的标题样式。
<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
。
这是一个引导段落。它从常规段落中脱颖而出。
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</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>
文本实用程序
使用我们的文本实用程序和颜色实用程序更改文本对齐、转换、样式、粗细、行高、装饰和颜色。
缩略语
<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 作为引号。
一个众所周知的引用,包含在 blockquote 元素中。
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
命名来源
HTML 规范要求将 blockquote 属性放在<blockquote>
. 在提供属性时,将您的包裹<blockquote>
在 a 中<figure>
,并在类中使用 a<figcaption>
或块级元素(例如,<p>
).blockquote-footer
。请务必将源作品的名称也包含<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
列表项的默认和左边距(仅限直接子项)。这仅适用于直接子列表项,这意味着您还需要为任何嵌套列表添加类。
- 这是一个列表。
- 它看起来完全没有风格。
- 从结构上讲,它仍然是一个列表。
- 但是,此样式仅适用于直接子元素。
- 嵌套列表:
- 不受这种风格的影响
- 仍然会显示子弹
- 并有适当的左边距
- 这在某些情况下可能仍然派上用场。
<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>
排队
删除列表的项目符号并使用margin
两个类的组合应用一些光,.list-inline
和.list-inline-item
。
- 这是一个列表项。
- 还有一个。
- 但它们是内联显示的。
<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
类以使用省略号截断文本。
- 说明列表
- 描述列表非常适合定义术语。
- 学期
-
术语的定义。
还有一些占位符定义文本。
- 另一个术语
- 这个定义很短,所以没有多余的段落或任何东西。
- 截断的术语被截断
- 这在空间紧张时很有用。在末尾添加一个省略号。
- 嵌套
-
- 嵌套定义列表
- 我听说你喜欢定义列表。让我在您的定义列表中放入一个定义列表。
<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 页面以了解其工作原理。
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: null;
此处和Reboot中涵盖的各种排版元素也有专用变量。
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: var(--#{$prefix}secondary-color);
$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;
$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-bg: $yellow-100;
混入
没有专门用于排版的 mixin,但 Bootstrap 确实使用响应式字体大小调整 (RFS)。