BootStrap笔记-文字排版
Posted IT1995
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BootStrap笔记-文字排版相关的知识，希望对你有一定的参考价值。
如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CN_TEST1</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- bootstrap css核心文件-->
<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!-- bootstrap使用到了jquery，需要提前引用-->
<script src="js/jquery-3.5.1.min.js"></script>
<!-- 弹窗、提示、下拉菜单-->
<script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!-- bootstrap核心文件-->
<script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background: orangered">
<h1>H1标题</h1>
<p>PPPPPPPPPPPPPPppppppppppppppp<mark>高亮</mark>ppp</p>
<h1 class="display-1">display-1<small>副标题</small></h1>
<h1 class="display-2">display-2<small>副标题</small></h1>
<h1 class="display-3">display-3<small>副标题</small></h1>
<h1 class="display-4">display-4<small>副标题</small></h1>
<p>ppppppppppppppppp<abbr title="Hello">虚线</abbr>ppppppppppppppppppppppp</p>
<br/>
<br/>
<blockquote class="blockquote">
<p>pppppppppppppppppppppppppppppppppppppppppp</p>
</blockquote>
</div>
<br/>
<br/>
<div class="container-fluid">
<h1>引用</h1>
<p>p数据</p>
<blockquote class="blockquote">
<p>引用数据XXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</blockquote>
</div>
<div class="container-fluid">
<h1>Definition Lists</h1>
<p>定义列表</p>
<dl>
<dt>Item</dt>
<dd>没用的Item</dd>
<dt>Item</dt>
<dd>有用的Item</dd>
</dl>
</div>
<div class="container-fluid">
<h1>代码片段</h1>
<p>如下</p>
<p>关键子<code>if</code>, <code>else</code></p>
</div>
<div class="container-fluid">
<h1>用户输入</h1>
<p>按键<kbd>ctrl + p</kbd></p>
</div>
<div class="container-fluid">
<h1>预定义格式文本</h1>
<pre>
Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World
Hello World Hello World Hello World Hello World Hello World
</pre>
</div>
</body>
</html>运行截图如下：
解释下：
①blockquote为一大块引用复述，可用于xxx说的话；
②dl为Definition Lists，定义列，他有2个小弟，一个是dt（Definition Term）一个是dd（Definition Description）；
③code为Code Fragemet，代码片段；
④kbd为User Input，也可以叫keyboard，按键相关的；
⑤pre为proformatted Text，格式化文本。
以上是关于BootStrap笔记-文字排版的主要内容，如果未能解决你的问题，请参考以下文章