Bootstrap4 文字排版

Bootstrap4 文字排版

---

Bootstrap 4 默认设置

Bootstrap 4 默认的 font-size 为 16px， line-height 为 1.5。

默认的 font-family 为 “Helvetica Neue”， Helvetica， Arial， sans-serif。

此外，所有的 <p> 元素 margin-top： 0 、 margin-bottom： 1rem （16px）。

---

<H1> - <H6>

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：

实例

< div class=“container”> <h1>h1 Bootstrap 标题 （2.5rem = 40px）</h1> <h2>h2 Bootstrap 标题 （2rem = 32px）</h2> <h3>h3 Bootstrap 标题 （1.75rem = 28px）</h3> <h4>h4 Bootstrap 标题 （1.5rem = 24px）</h4> <h5>h5 Bootstrap 标题 （1.25rem = 20px）</h5> <h6>h6 Bootstrap 标题 （1rem = 16px）</h6> </div>

显示标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式： .display-1， .display-2， .display-3， .display-4。

实例

< div class=“container”> <h1>Display 标题</h1> <p>Display 标题可以输出更大更粗的字体样式。</人> <h1 class=“display-1”>Display 1</h1> <h1 class=“display-2”>显示器 2</h1> <h1 class=“display-3”>显示器 3</h1> <h1 class=“display-4”>显示 4</h1> </div>

---

<小>

在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本：

实例

< div class=“container”> <h1>更小的文本标题</h1> <p>small 元素用于字号更小的颜色更浅的文本：</p> <h1>h1 标题 <small>副标题</small></h1> <h2>h2 标题 <small>副标题</small></h2> <h3>h3 标题 <small>副标题</small></h3> <h4>h4 标题 <small>副标题</small></h4> <h5>h5 标题 <small>副标题</small></h5> <h6>h6 标题 <small>副标题</小></h6> </div>

---

<标记>

Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距：

实例

< div class=“container”> <h1>高亮文本</h1> <p>使用 mark 元素来 <mark>高亮</mark> 文本。</人> </div>

---

<abbr>

Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框：

实例

< div class=“container”> <h1>缩写</h1> <p>abbr 元素用于标记缩写或首字母缩略词：</p> <p><abbr title=“世界卫生组织”>WHO</abbr>成立于 1948 年。</人> </div>

---

<块引用>

对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 ：

实例

< div class=“container”> <h1>Blockquotes</h1> <p>blockquote 元素用于呈现来自另一个来源的内容：</p> <blockquote class=“blockquote”> <p>50 年来，WWF 一直在保护自然的未来。世界自然基金会 （WWF） 是世界领先的自然保护组织，在 100 个国家/地区开展工作，并得到美国 120 万名成员和全球近 500 万名成员的支持。</p> <footer class=“blockquote-footer”>来自 WWF 的网站</footer></blockquote> </div>

---

<dl>

Bootstrap 4 定义 HTML <dl> 元素的样式如下：

实例

< div class=“container”> <h1>描述 lists</h1> <p>dl 元素表示描述 list：</p> <dl > <dt>Coffee</dt> <dd>- 黑热饮</dd> <dt>Milk</dt> <dd>-白冷饮</dd> </dl> </div>

---

<代码>

Bootstrap 4 定义 HTML <code> 元素的样式如下：

实例

< div class=“container”> <h1>代码片段</h1> <p>可以将一些代码元素放到 code 元素里面：</p> <p>以下HTML 元素： <code>span</code>， <code>section</code>， 和 <code>div</code> 用于定义部分文档内容。</人> </div>

<KBD>

Bootstrap 4 定义 HTML <kbd> 元素的样式如下：

实例

< div class=“container”> <h1>键盘输入</h1> <p>要指示通常通过键盘输入的输入，请使用 kbd 元素：</p> <p>使用 <kbd>ctrl + p</kbd> 打开“打印”对话框。</人> </div>

---

<pre>

Bootstrap 4 定义 HTML <pre> 元素的样式如下：

实例

< div class=“container”> <h1>多行代码</h1> <p>对于多行代码，请使用 pre element：</p> <pre> 元素中的 pre 文本 以固定宽度显示 字体，并且它会保留 空格和 换行符。</pre> </div>

---

更多排版类

下表提供了 Bootstrap4 更多排版类的实例：

类名	描述	实例
.font-weight-bold 字体粗细	加粗文本	尝试一下
.font-weight-normal （字体粗细正常）	普通文本	尝试一下
.font-weight-light	更细的文本	尝试一下
.font-italic 字体	斜体文本	尝试一下
。铅	让段落更突出	尝试一下
。小	指定更小文本 (为父元素的 85% )	尝试一下
.文本左	左对齐	尝试一下
.文本中心	居中	尝试一下
.文本右	右对齐	尝试一下
.text-对齐	设定文本对齐,段落中超出屏幕部分文字自动换行	尝试一下
.text-nowrap 格式	段落中超出屏幕部分不换行	尝试一下
.text-lowercase	设定文本小写	尝试一下
.text-uppercase	设定文本大写	尝试一下
.text-capitalize （文本大写）	设定单词首字母大写	尝试一下
。首字母缩略词	显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母	尝试一下
.list-无样式	移除默认的列表样式，列表项中左对齐 （ <ul> 和 <ol> 中）。这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)	尝试一下
.list-inline 格式	将所有列表项放置同一行	尝试一下
.pre-scrollable	使 <pre> 元素可滚动，代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条