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)。
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的示例：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1> <h2>h2 Bootstrap 标题 (2rem = 32px)</h2> <h2>h2 Bootstrap 标题 (1.75rem = 28px)</h2> <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4> <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5> <h6>h6 Bootstrap 标题 (1rem = 16px)</h6> </div> </body> </html>测试看看 ‹/›
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <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> </body> </html>测试看看 ‹/›
在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>更小文本标题</h1> <p>small 元素用于字号更小的颜色更浅的文本:</p> <h1>h1 标题 <small>副标题</small></h1> <h2>h2 标题 <small>副标题</small></h2> <h2>h2 标题 <small>副标题</small></h2> <h4>h4 标题 <small>副标题</small></h4> <h5>h5 标题 <small>副标题</small></h5> <h6>h6 标题 <small>副标题</small></h6> </div> </body> </html>测试看看 ‹/›
Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>高亮文本</h1> <p>使用 mark 元素来 <mark>高亮</mark> 文本。</p> </div> </body> </html>测试看看 ‹/›
Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Abbreviations</h1> <p>abbr元素用于标记缩写或首字母缩写:</p> <p><abbr title="World Health Organization">WHO</abbr>成立于1948年.</p> </div> </body> </html>测试看看 ‹/›
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 :
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Blockquotes</h1> <p>blockquote元素用于呈现其他来源的内容:</p> <blockquote class="blockquote"> <p>50年来，世界自然基金会一直在保护自然的未来。 世界自然基金会(WWF)是世界领先的自然保护组织，在100个国家/地区开展工作， 得到了美国120万会员和全球近500万会员的支持。</p> <footer class="blockquote-footer">From WWF's website</footer> </blockquote> </div> </body> </html>测试看看 ‹/›
Bootstrap 4 定义 HTML <dl> 元素的样式如下:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>描述列表</h1> <p>dl元素表示描述列表:</p> <dl> <dt>咖啡</dt> <dd>- 黑热饮</dd> <dt>牛奶</dt> <dd>- 白冷饮</dd> </dl> </div> </body> </html>测试看看 ‹/›
Bootstrap 4 定义 HTML <code> 元素的样式如下:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>代码片段</h1> <p>可以将一些代码元素放到 code 元素里面:</p> <p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p> </div> </body> </html>测试看看 ‹/›
Bootstrap 4 定义 HTML <kbd> 元素的样式如下:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>键盘输入</h1> <p>要指示通常通过键盘输入的输入，请使用kbd元素:</p> <p>使用<kbd>ctrl + p</kbd>打开“打印”对话框.</p> </div> </body> </html>测试看看 ‹/›
Bootstrap 4 定义 HTML <pre> 元素的样式如下:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>多行代码</h1> <p>对于多行代码，使用pre元素:</p> <pre> 前置元素中的文本 以固定宽度显示 字体，并保留 空间和 换行符。 </pre> </div> </body> </html>测试看看 ‹/›
下表提供了 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轴出现滚动条 | 尝试一下 |