Bootstrap 文字排版
Bootstrap 默认设置
Bootstrap 的全局默认字体大小为 14px,行高为 1.428。
这适用于 <body>
元素和所有段落(<p>
)。
此外,所有 <p>
元素的底边距都等于其计算行高的一半(默认为10px)。
Bootstrap 与 浏览器默认设置
在本章中,我们将介绍一些HTML元素,Bootstrap 对这些元素的样式与浏览器默认值略有不同。
<h1> - <h6>
默认情况下,Bootstrap 将按以下方式设置 HTML 标题 (<h1>
到 <h6>
) 的样式:
实例
h1 Bootstrap 标题(36 像素)
h2 Bootstrap 标题(30 像素)
h3 Bootstrap 标题(24 像素)
h4 Bootstrap 标题(18 像素)
h5 Bootstrap 标题(14 像素)
h6 Bootstrap 标题(12 像素)
<small>
在 Bootstrap 中 HTML <small>
元素用于创建字号更小的颜色更浅的文本:
<mark>
Bootstrap 定义 HTML <mark>
为黄色背景及有一定的内边距:
<abbr>
Bootstrap 定义 HTML <abbr>
元素的样式为显示在文本底部的一条虚线边框:
<blockquote>
Bootstrap 将按以下方式设置 HTML <blockquote>
元素的样式:
要在右侧显示,请使用 .blockquote-reverse
类:
<dl>
Bootstrap 定义 HTML <dl>
元素的样式如下:
<code>
Bootstrap 定义 HTML <code>
元素的样式如下:
<kbd>
Bootstrap 定义 HTML <kbd>
元素的样式如下:
<pre>
Bootstrap 定义 HTML <pre>
元素的样式如下:
实例
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
文本颜色和背景色
Bootstrap 提供了一些有代表意义的颜色类,文本颜色的类是:.text-muted
,
.text-primary
, .text-success
, .text-info
,
.text-warning
, 和 .text-danger
:
背景颜色的类是:.bg-primary
,
.bg-success
, .bg-info
, .bg-warning
, 和 .bg-danger
:
更多排版类
下表提供了 Bootstrap 更多排版类的实例:
类 | 描述 | 实例 |
---|---|---|
.lead |
使段落突出显示 | 测试一下 |
.small |
设定小文本 (设置为父文本的 85% 大小) | 测试一下 |
.text-left |
设定文本左对齐 | 测试一下 |
.text-center |
设定文本居中对齐 | 测试一下 |
.text-right |
设定文本右对齐 | 测试一下 |
.text-justify |
设定文本对齐,段落中超出屏幕部分文字自动换行 | 测试一下 |
.text-nowrap |
段落中超出屏幕部分不换行 | 测试一下 |
.text-lowercase |
设定文本小写 | 测试一下 |
.text-uppercase |
设定文本大写 | 测试一下 |
.text-capitalize |
设定单词首字母大写 | 测试一下 |
.initialism |
显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 |
测试一下 |
.list-unstyled |
移除默认的列表样式,列表项中左对齐 (<ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) |
测试一下 |
.list-inline |
将所有列表项放置同一行 | 测试一下 |
.dl-horizontal |
将<dl> 元素中的术语(<dt> )和描述(<dd> )并排排列。开始时与默认值类似,但当浏览器窗口扩展时,它将并排排列 |
测试一下 |
.pre-scrollable |
使 <pre> 元素可滚动 |
测试一下 |
完整 Bootstrap 文字排版参考
有关文字排版的完整参考,请访问我们的 Bootstrap 文字排版参考。
还可以查看我们的 Bootstrap 助手类参考 以了解有关上下文类的更多信息。