跳到主要内容

Bootstrap4 文字排版

Bootstrap4 默认设置​

Bootstrap4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

此外，所有的元素margin-top: 0、margin-bottom: 1rem(16px)。

<h1> - <h6>​

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

h.html
<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>
示例效果
D:/lectcode/bootstrap4/h.html

h1 Bootstrap 标题 (2.5rem = 40px)

h2 Bootstrap 标题 (2rem = 32px)

h3 Bootstrap 标题 (1.75rem = 28px)

h4 Bootstrap 标题 (1.5rem = 24px)

h5 Bootstrap 标题 (1.25rem = 20px)
h6 Bootstrap 标题 (1rem = 16px)

display​

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

display.html
<div class="container">
    <h1>Display 标题</h1>
    <p>Display 标题可以输出更大更粗的字体样式。</p>
    <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>
</div>
示例效果
D:/lectcode/bootstrap4/display.html

Display 标题

Display 标题可以输出更大更粗的字体样式。

Display 1

Display 2

Display 3

Display 4

<small>​

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

small.html
<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>副标题</small></h6>
</div>
示例效果
D:/lectcode/bootstrap4/small.html

更小文本标题

small 元素用于字号更小的颜色更浅的文本:

h1 标题 副标题

h2 标题 副标题

h3 标题 副标题

h4 标题 副标题

h5 标题 副标题
h6 标题 副标题

<mark>​

Bootstrap4 定义<mark>为黄色背景及有一定的内边距:

mark.html
<div class="container">
    <h1>高亮文本</h1>
    <p>使用 mark 元素来
        <mark>高亮</mark>
        文本。
    </p>
</div>
示例效果
D:/lectcode/bootstrap4/mark.html

高亮文本

使用 mark 元素来高亮文本。

<abbr>​

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

abbr.html
<div class="container">
    <h1>Abbreviations</h1>
    <p>The abbr element is used to mark up an abbreviation or acronym:</p>
    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
示例效果
D:/lectcode/bootstrap4/abbr.html

Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.

<blockquote>​

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

blockquote 示例
blockquote.html
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
</head>
<body>
<style>
.blockquote{
    margin-bottom: 1rem;
    font-size: 1.25rem;
    }

blockquote{
    margin: 0 0 1rem;
    }

.blockquote-footer {
    display: block;
    font-size: 80%;
    color: #6c757d;
    }

.blockquote-footer::before {
    content: "\2014\00A0";
    }
</style>
<div>
    <h1>引用</h1>
    <p>blockquote 元素用于呈现来自其他来源的内容:</p>
    <blockquote class="blockquote">
        <p>web即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、
            全球性的、动态交互的、跨平台的分布式图形信息系统</p>
        <footer class="blockquote-footer">来自百度知道</footer>
    </blockquote>
</div>
</body>
</html>

<dl>​

Bootstrap4 定义 HTML<dl> 元素的样式如下:

dl.html
<div class="container">
    <h1>Description Lists</h1>
    <p>The dl element indicates a description list:</p>
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>
</div>
示例效果
D:/lectcode/bootstrap4/dl.html

Description Lists

The dl element indicates a description list:

Coffee
- black hot drink
Milk
- white cold drink

<code>​

Bootstrap4 定义 HTML<code> 元素的样式如下:

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

<kbd>​

Bootstrap4 定义 HTML<kbd> 元素的样式如下:

kbd.html
<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
示例效果
D:/lectcode/bootstrap4/kbd.html

Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p to open the Print dialog box.

<pre> title="pre.html"​

Bootstrap4 定义 HTML <pre> 元素的样式如下:

<div class="container">
  <h1>Multiple Code Lines</h1>
  <p>For multiple lines of code, use the pre element:</p>
  <pre>
    Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks.
  </pre>
</div>

更多排版类​

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

类名描述
.font-weight-bold加粗文本
.font-weight-normal普通文本
.font-weight-light更细的文本
.font-italic斜体文本
.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将所有列表项放置同一行
.pre-scrollable使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条