Bootstrap CSS 文字排版参考

Bootstrap 的默认设置

Bootstrap 的全局默认字体大小为 14px,行高为 1.428。

这适用于 <body> 和所有段落。

此外,所有 <p> 元素的底边距都等于其计算行高的一半(默认为 10px)。


文字排版

下面的元素是 HTML 元素,通过 Bootstrap 设置的样式与浏览器默认设置的样式略有不同。

点击 "试一试" 按钮查看实例以了解结果/差异。

下面的样式类用于进一步设置元素的样式。

元素/样式类描述实例
<h1> - <h6>

.h1 - .h6
h1 - h6 标题试一试
<small>在任何标题中创建次要的辅助文本

Heading (辅助文本)

试一试
.small指示较小的文本(设置为父文本大小的 85%): 较小文本试一试
.lead使文本突出: 突出文本试一试
<mark>
or
.mark
高亮文本: 高亮文本试一试
<del>表示删除的文本: 删除的文本试一试
<s>表示不再相关的文本: 不相关的文本试一试
<ins>表示插入的文本: 插入的文本试一试
<u>表示下划线文本: 下划线文本试一试
<strong>表示加粗的文本: 加粗的文本试一试
<em>表示斜体文本: 斜体文本试一试
.text-left指示左对齐的文本试一试
.text-center指示居中对齐的文本试一试
.text-right指示右对齐的文本试一试
.text-justify表示对齐的文本试一试
.text-nowrap表示不换行的文本试一试
.text-lowercase表示小写文本: LOWERCASED TEXT试一试
.text-uppercase表示大写文本: uppercased text试一试
.text-capitalize表示首字母大写文本: capitalized text试一试
<abbr><abbr> 元素表示缩写或首字母缩写。带有 title 属性的缩写有一个虚线下边框,并在鼠标悬浮时有一个帮助光标,为鼠标悬浮提供了额外的上下文。试一试
.initialism以略小的字体显示 <abbr> 元素内的文本试一试
<address>提供联系信息试一试
<blockquote>表示来自另一个源的文字引用试一试
.blockquote-reverse表示包含右对齐内容的文字引用试一试
<ul>表示无序列表试一试
<ol>表示有序列表试一试
.list-unstyled删除列表项的默认列表样式和左边距(适用于 <ul> 和 <ol>)。此类仅适用于直系子列表项(若要从任何嵌套列表中删除默认列表样式,请将此类也应用于任何嵌套列表)试一试
.list-inline将所有列表项放在一行上试一试
<dl>指示列表的一个描述试一试
.dl-horizontal将 <dl> 元素中的术语和描述并排排列。开始时与默认值类似,但当浏览器窗口扩展时,它将并排排列试一试

代码

元素/样式类描述示例
<var>表示 变量: x = ab + y试一试
<kbd>表示通常通过键盘输入的输入: CTRL + P试一试
<pre>指示多行代码试一试
<pre class="pre-scrollable">使用滚动条指示多行代码试一试
<samp>指示计算机程序的样本输出: Sample output试一试
<code>指示内联代码段: span, div试一试