页面排版 - 标题
- 标题
页面排版 - 页面主体
- 页面主体
- 尝试一下 bootstrap 中排版样式的效果
页面排版 - 缩略语
- 尝试一下 Bootstrap 中的缩略语
页面排版 - 引用文本
- 引用文本
- 尝试一下 bootstrap 中的引用文本
页面排版 - 列表排版
- 列表排版
- 下面是移除默认样式的列表代码，你也可以在编辑器中尝试一下其他列表排版样式
代码

页面排版 - 标题

标题

Bootstrap 对 HTML 标题 (h1 ~ h6) 进行了 CSS 样式的重构，并且还支持普通内联元素定义 class= (.h1 ~ .h6) 来实现相同的功能。

内联元素使用标题字体：

<span class="h1">Bootstrap</span>

注：使用 Bootstrap 后，网页的字体颜色、字体样式、行高均被固定了，保证其统一。不使用 Bootstrap 时，字体样式会根据系统内置的首选字体决定。

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题,如下所示：

<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>

下表列出了一些内联文本元素：
02-排版样式 - 图3

【多选题】【多选】bootstrap 中关于 h 标签

h1 small

以下说法正确的是

表示副标题
最大
用法错误
最大

页面排版 - 页面主体

页面主体

Bootstrap 将页面主体设置默认为：
font-size:14px；
line-height:20px

标签行高:10px
颜色:#333；

通过添加 .lead 类可以让段落突出显示：

<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p class="text-left">Bootstrap 框架</p>
<p class="text-justify">Bootstrap 框架</p>

注：> text-left：向左对齐 > text-right：向右对齐 > text-center：居中对齐 > text-justify：两端对齐>

我们还可以通过以下类来设置英文文本大小写，实例如下：

<p class="text-lowercase">小写hello WORLD</p>
<p class="text-uppercase">大写hello WORLD</p>
<p class="text-capitalize">首字母大写hello WORLD</p>

尝试一下 bootstrap 中排版样式的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 排版样式 </title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--标题-->
<h1>h1标题</h1>
<h6>h6标题</h6>

<!--页面主体-->
<p>Bootstrap 框架</p>
<p class="lead">段落突出</p>
<p class="text-left"><mark>左对齐-标记文本</mark></p>
<p class="text-center"><strong><s><em>居中对齐-加粗-无用-倾斜的文本</em></s></strong></p>
<p class="text-right">右对齐</p>
<p class="text-uppercase">English text capitalization</p>


</body>
</html>

页面排版 - 缩略语

缩略语：当我们把鼠标悬停在缩略语上可看到完整的内容。
这里是一个缩略语的例子：

<abbr title="World Wide Web">WWW</abbr>

鼠标放到 www 上面时会变成带有“问号”的指针，并会显示 title 中的内容。

在中添加一个 .initialism 类可以让 font-size 变得稍微小些。
代码：

<abbr title="World Wide Web" class="initialism">WWW</abbr>

【填空题】当鼠标悬停在缩略语 “boot” 上时就会显示完整内容 “Bootstrap”,请将以下代码补充完整
boot

尝试一下 Bootstrap 中的缩略语

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 缩略语 </title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <abbr title="World Wide Web">WWW</abbr>
    <abbr title="World Wide Web" class="initialism">WWW</abbr>
</div>
</body>
</html>

页面排版 - 引用文本

引用文本

我们将任何 HTML 元素包裹在

中即可表现为引用样式。

以

标签为例，将文本设置为引用的代码如下：

<blockquote>
    <p>Bootstrap 框架 - AI悦创 </p>
</blockquote>

运行结果：

添加.blockquote-reverse 类可以让引用内容呈现右对齐。
代码：

<blockquote class="blockquote-reverse">
    <p>Bootstrap 框架 - AI悦创 </p>
</blockquote>

运行结果：

尝试一下 bootstrap 中的引用文本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 引用文本 </title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote>
    <p>AI悦创 </p>
</blockquote>
<blockquote class="blockquote-reverse">
    <p>AI悦创 </p>
</blockquote>
</body>
</html>

页面排版 - 列表排版

列表排版

下表列出了一些与列表有关的排版类:

我们以水平排列描述列表为例来学习一下列表排版。

每个列表项可以包含
和
元素。
代表定义术语，
是
的描述。
.dl-horizontal 可以让
内的短语及其描述排在一行。

具体实例如下：

<dl class="dl-horizontal">
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
</dl>