标题
1、在Bootstrap4中，主要对标题样式做了如下规定：
（1）重设上下外边距，margin-top值为0，margin-bottom:0.5rem。
（2）固定所有标题行高为line-height:1.2，font-weight:500。
（3）固定不同级别标题字体大小，一级为2.5rem，二级为2rem，三级为1.75rem，四级为1.5rem，五级为1.25rem，六级为1rem。
2、rem：
（1）em是相对长度单位。相对于当前对象内文本的字体尺寸。
（2）rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
（3）Bootstrap 4 默认的HTML font-size 为 16px
3、<h1>~<h6>标题描述具体如下表所示：
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
</body>
</html>结果图：
使用类名来实现标题效果：
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="h1">一级标题</div>
<div class="h2">二级标题</div>
<div class="h3">三级标题</div>
<div class="h4">四级标题</div>
<div class="h5">五级标题</div>
<div class="h6">六级标题</div>
</body>
</html>
结果图：
4、设置副标题
在Bootstrap中使用<small>标签来实现副标题效果。font-size是父元素的80%。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>一级标题<small>副标题</small></h1>
<h2>二级标题<small>副标题</small></h2>
<h3>三级标题<small>副标题</small></h3>
<h4>四级标题<small>副标题</small></h4>
<h5>五级标题<small>副标题</small></h5>
<h6>六级标题<small>副标题</small></h6>
</body>
</html>
结果图：
如果想要将传统的标题元素设计得更加美观、醒目，来迎合网页内容。这时可以使用Bootstrap中提供的一系列display类来设置标题样式。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<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>
</body>
</html>结果图：
段落
在Bootstrap 4中，段落标签<p>的样式如下：
p {
margin-top: 0;
margin-bottom: 1rem;
}
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h2>《江汉临眺》</h2>
<h3>王维</h3>
<p>楚塞三湘接，荆门九派通。</p>
<p>江流天地外，山色有无中。</p>
<p>郡邑浮前浦，波澜动远空。</p>
<p>襄阳好风日，留醉与山翁。</p>
</body>
</html>
结果图：
可以在段落元素上应用.lead类样式，主要作用是可以将段落突出显示，被突出的段落文本字体被放大。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h2>《江汉临眺》</h2>
<h3>王维</h3>
<p>楚塞三湘接，荆门九派通。</p>
<p>江流天地外，山色有无中。</p>
<p class="lead">郡邑浮前浦，波澜动远空。</p>
<p>襄阳好风日，留醉与山翁。</p>
</body>
</html>结果图：
强调：
HTML5定义了若干个标签强调的标签，有<mark>、<del>、<s>、<ins>、<u>、<strong>、<em>等，在Bootstrap4中同样也可以使用，用来为元素添加强调样式
<b>和<strong>默认情况下是加粗字体。前者是给其包裹的文本设置为bold粗体效果。而后者表示加强字符的语气，使用bold粗体来起到强调的作用。
<del>和<s>都可以实现删除效果，但是<del>更具有语义化，能更形象的描述删除意思。
<strong>和<em>具有强调作用，有利于SEO。
<ins>和<u>都可以实现下画线效果，但是前者通常与<del>一起使用。用来定义已经被插入文档中的文本，而后者表示为文本添加下划线。
<footer>和<cite>通常表示所包含的文本对某个参考文献的引用，区别在于后者引用的文本将以斜体显示。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p>使用mark标记<mark>高亮</mark>的文本</p>
<p><del>使用del标记,此行文本应视为已删除的文本</del></p>
<p><s>使用s标记,此行文本已被视为不在准确</s></p>
<p><ins>使用ins标记,此行文本应被视为文档的补充。</ins></p>
<p><u>使用u标记,此行文本应带有下划线</u></p>
<p><strong>使用strong标记,此行以粗体显示。</strong></p>
<p><em>使用em标记,此行以斜体显示。</em></p>
</body>
</html>结果图：
缩略语：
缩略语是指在页面中使用缩写的形式表示，当鼠标指针悬停在缩写词上时会显示全部的内容，HTML5提供的<abbr>标签用来实现缩略语。为了突出显示缩略语，可以为<abbr>标签添加.initialism类，.initialism类使字体大小缩小10%，并设置字母全部大写。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr>称为超文本标记语言，是一种标识性的语言
。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的资源连接为一个逻辑整体。</p>
</body>
</html>
结果图：
引用
如果需要在文档中引用其他来源的内容块时，可以引用块标签<blockqupte>。在引用块中，还可以嵌入<cite>、<footer>标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<blockquote class="blockquote">
<p>天空没有翅膀的痕迹,而我已经飞过,思念是翅膀飞过的痕迹。人生的意义不在于留下什么,只要你经历过,就是最大的美好,
这不是无能,而是一种超然。</p>
<footer class="blockquote-footer text-right">泰戈尔<cite>《流萤集》</cite></footer>
</blockquote>
</div>
</body>
</html>
结果图：
