文本类

1.文本辅助类

于Bootstrap3中定义，Bootstrap4依旧可用

用于展示不同的文本颜色，如果文本是连接鼠标移动到文本上会变暗

类	源码
.text-muted	color: #6c757d (一种灰色)
.text-primary	color: #007bff (一种舒适的蓝色)
.text-success	color: #28a745 (一种成功的绿色)
.text-info	color: #17a2b8 (一种浅海洋绿——蓝)
.text-warning	color: #ffc107 (一种危险的黄色)
.text-danger	color: #dc3545 (一种危险的红色)

2.文字排版

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

默认的 font-family 为 "Helvetica Neue"

此外，所有的 <p> 元素 margin-top:0 ; margin-bottom:1rem

<h1>——<h6>

元素	样式(font-size)
h1	2.5rem
h2	2rem
h3	1.75rem
h4	1.5rem
h5	1.25rem
h6	1rem

Display 标题类

Bootstrap 还提供了4个Display类来控制标题的样式

用法——<h1 class="display-1">

四个Display类都有样式：font-weight: 300; line-height: 1.2

类名	font-size
.display-1	6rem
.display-2	5.5rem
.display-3	4.5rem
.display-4	3.5rem

<small> 标签

在Bootstrap 4 中 HTML <small> 标签 如其标签名，用于创建更小的文本

.small,small{
	font-size: 80%;
	font-weight: 400
}

<mark> 标签

Bootstrap 4 使用 <mark> 标签 来使得文本高亮且有一定内边距

.mark,mark{
	padding: .2em;
	backgrouond-color: #fcf8e3
}

<abbr> 标签

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

abbr[data-original-title],
abbr[title] {
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
	cursor: help;
	border-bottom: 0;
	-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
}
abbr[title]::after {
	content: "(" attr(title) ")"
}

<blockquote>

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

blockquote{
	margin: 0 0 1rem
}
.blockquote{
	margin-bottom: 1rem;
	font-size: 1.25rem
}
.blockquote-footer{
	display: block;
	font-size: 80%;
	color: #6c757d
}
.blockquote-footer::before{
	content: "\2014\00A0"
}

blockquote{
    border: 1px solid #adb5db;
    page-break-inside: avoid;
    /* 设置在表格元素内部避免进行分页的分页行为 */
}

<dl> <code> <kbd> <pre>

dl{
    margin-top: 0;
    margin-bottom: 1rem
}

code{
	font-size: 87.5%;
	color: #e83e8c;
	word-wrap: break-work
}

kbd{
    padding: .2rem .4rem;
    font-size: 87.5%;
    color: #fff;
    background-color: #212529;
    border-radius: .2rem
}
kbd kbd {
	padding: 0;
	font-size: 100%;
	font-weight: 700
}

pre {
	margin-top: 0;
	margin-bottom: 1rem;
	overflow: auto;
	-ms-overflow-style: scrollbar
}
pre {
	display: block;
	font-size: 87.5%;
	color: #212529
}

更多排版类

类名	描述	核心样式
.font-weight-bold	加粗文本	font-weight: 700
.font-weight-normal	普通文本	font-weight: 400
.font-weight-light	更细的文本	font-weight: 300
.font-italic	斜体文本	font-style: italic
.lead	让段落更突出	font-size: 1.25rem; font-weight: 300
.small	更小文本	font-size: 80%; font-weight: 400
.text-left	左对齐	text-align: left
.text-center	居中	text-align: center
.text-right	右对齐	text-align: right
.text-justify	设定文本对齐，段落中超出屏幕部分自动换行	text-align: justify
.text-norwap	段落中超出屏幕部分不换行	white-space: nowrap
.text-lowercase	文本小写	text-transform: lowercase
.text-uppercase	文本大写	text-transform: uppercase
.text-capitalize	首字母大写	text-transform: capitalize
.initialism	显示在<abbr>元素中的文本以小号字体展示，且可以将小写字母转换为大写字母	font-size: 90%; text-transform: uppercase
.list-unstyled	移除默认的列表样式，列表项中左对齐。	padding-left: 0; list-style: none
.list-inline	将所有列表项放置同一行	padding-left: 0; list-style: none
.pre-scrollable	是<pre>元素可滚动，代码块区域最大高度340px；一旦超出会有Y轴滚动条	max-height: 340px; overflow-y: scroll