下载掌阅APP，畅读海量书库
立即打开
Bootstrap提供了一些排版样式，包括标题、地址、列表等。而要添加使用这些样式，只需在元素中添加对应的类名即可。下面做具体讲解。
Bootstrap中定义了所有HTML标题（<h1>～<h6>）的样式。除了设置各级标签的字号，Bootstrap还设置了标题的底部外边距（margin-top）、行高（line-height）、字体粗细（为500），具体标题样式如图2-1所示。在添加标题样式时，可以直接使用对应的标题标签，也可以在文字标签中添加类名，如<h1>、<h2>等。
标题样式
图2-1 Bootstrap中的标题样式
【例2-1】使用Bootstrap各级标题样式添加古诗《游子吟》。在HTML5文件中引入Bootstrap文件，然后依次添加一级标题～六级标题，具体代码如下：
<h1>慈母手中线，</h1> <h2>游子身上衣。</h2> <h3>临行密密缝，</h3> <h4>意恐迟迟归。</h4> <h5>谁言寸草心，</h5> <h6>报得三春晖。</h6>
上面代码的实现效果如图2-2所示。
图2-2 标题样式
图2-2所示效果是通过直接添加标题标签实现的，而通过在文字标签中添加标题类名，也可以实现同样的效果，例如下面的代码也可以实现图2-2所示的效果。
<p class="h1">慈母手中线，</p> <p class="h2">游子身上衣。</p> <p class="h3">临行密密缝，</p> <p class="h4">意恐迟迟归。</p> <p class="h5">谁言寸草心，</p> <p class="h6">报得三春晖。</p>
Bootstrap还提供了副标题样式。添加副标题时，读者需要使用<small>标签将副标题内容括起来，或者为标签设置类名.small。
【例2-2】使用Bootstrap实现网购商城中好店推荐页面。实现时，读者可以直接在标题标签中添加<small>标签。具体代码如下：
<h3>每日好店<small class="text-info">发现深藏的好店</small></h3> <div class="clearfix"> <h4 class="float-left w-50">吃货推荐<small class="text-info">暂无店铺评价</small></h4> <h4 class="float-left w-50">爱家一族<small class="text-info">暂无店铺评价</small></h4> </div> <img src="images/1.png" alt="">
上述代码的运行效果如图2-3所示。
图2-3 添加副标题
上述方法是通过<small>标签添加的副标题，读者也可以通过其他内联标签添加内联标题，然后在标签中设置类名.small。例如下面代码也可以实现图2-3所示的效果。
【例2-3】通过设置class属性的值来实现图2-3所示效果。具体代码如下：
<h3>每日好店<small class="text-info">发现深藏的好店</small></h3> <div class="clearfix"> <h4 class="float-left w-50">吃货推荐<span class="small text-info">暂无店铺评价</span></h4> <h4 class="float-left w-50">爱家一族<span class="small text-info">暂无店铺评价</span></h4> </div> <img src="images/1.png" alt="">
例2-2和例2-3中，为了设置副标题的颜色，还添加了类名.text-info。关于类名，后面小节有具体介绍。
显式标题的文字字号比标题的文字字号更大。显式标题一共分为4个等级，其类名分别为display-1、display-2、display-3、display-4，其字体大小分别为6rem、5.5rem、4.5rem和3.5rem，其实现的文字样式如图2-4所示。
图2-4 各级显式标题的实现样式
Bootstrap提供了多种标题文本的样式，在添加强调文本时，需要为文本设置类名.lead。强调文本预置的文本大小为1.25rem，文字粗细为300。具体样式如图2-5所示。
添加强调文本
图2-5 强调文本的样式
【例2-4】使用Bootstrap实现《零基础学HTML5+CSS3》的图书简介。新建一个HTML5文件，在该文件中引入Bootstrap文件，然后在<body>标签中添加强调文本的样式。具体代码如下：
<img src="images/2.jpg" alt="" class="float-left" width="200"> <div class="float-left w-75"> <h2>零基础学HTML5+CSS3</h2> <p class="lead">《零基础学HTML5+CSS3》是针对零基础编程学习者全新研发的HTML5+CSS3入门教程。本书通过通俗的语言、流行有趣的实例，详细地介绍使用HTML5+CSS3进行程序开发需要掌握的知识和技术。全书共分20章，包括HTML基础、文本、图像和超链接、CSS3概述、CSS3高级应用、多媒体、HTML5特性、离线Web应用程序、响应式网页设计，以及51购商城等。书中所有知识都结合具体示例进行讲解，并给出设计的程序代码的详细注释，可以使读者轻松领会网页设计的精髓，快速提高开发技能。</p> </div>
上面代码的运行效果如图2-6所示。
图2-6 为段落添加强调文本
HTML有一些添加文本样式的内联元素，例如<strong>、<em>和<del>等，使用这些元素可以自动为文本添加一些样式，例如加粗、斜体和删除线等。Bootstrap中亦是如此，并且Bootstrap还对这些元素的样式进行了优化。当用户需要使用这些样式时，直接添加标签即可。
【例2-5】使用Bootstrap制作明日学院联系页面。实现时，需要在HTML文件中引入Bootstrap文件，然后添加明日学院的Logo图片、联系方式等。关键代码如下：
<style type="text/css">
body {
background: url("images/5.jpg") no-repeat;
}
</style>
<img src="images/3.png" alt="" class="img-fluid">
<div>
<div>
<strong>工作时间：周一至周五 08:30—17:00<br></strong>
<em>客服E-mail：mingrisoft@******</em>
</div>
<br>
<div>
<small>公司地址：吉林省长春市南关区财富领域<br></small>
<em>邮政编码：130000</em>
</div>
</div>
<img src="images/4.png" alt="" class="img-fluid">
上面代码的效果如图2-7所示。
图2-7 文本内联元素应用实例效果
该例中通过为<img>标签设置类名.img-fluid来实现图片随浏览器的显示尺寸自动缩放。关于图片的样式，后面小节有具体介绍。
Bootstrap中通过添加类名可以设置强调文本的对齐方式。设置文本的对齐方式时，其可选的类名如下所示。
·.text-left：设置文字水平向左对齐。
·.text-center：设置文字水平居中对齐。
·.text-right：设置文字水平向右对齐。
·.text-justify：设置文字两端对齐。
【例2-6】使用Bootstrap实现支付宝蚂蚁森林模块中消息公告的效果。实现时，需要在HTML文件中引入Bootstrap文件，然后添加文字内容，并且通过<style>标签为网页自定义背景样式。具体代码如下：
<style type="text/css">
body {
background: url("images/6.jpg") no-repeat;
}
</style>
<div class="pt-5">
<br>
<p class="text-left">木木对你说：你这偷能量贼</p>
<p class="text-center"> 木木开启了森林防护罩</p>
<p class="text-right"> 阿呆获得森林环卫的称号</p>
</div>
该例的运行效果如图2-8所示。
图2-8 蚂蚁森林消息公告效果
当然，Bootstrap还可以通过一些颜色来实现强调文本的效果，并且Bootstrap也提供了一些类名来设置文字的颜色。具体可见例2-7。
具体预设的文字颜色属性值如下。
·.text-primary：设置文字颜色为#007bff。
·.text-secondary：设置文字颜色为#6c757d。
·.text-success：设置文字颜色为#28a745。
·.text-danger：设置文字颜色为#dc3545。
·.text-warning：设置文字颜色为#ffc107。
·.text-info：设置文字颜色为#17a2b8。
·.text-light：设置文字颜色为#f8f9fa。
·.text-dark：设置文字颜色为#343a40。
·.text-white：设置文字颜色为#fff（白色）。
·.text–black-50：设置文字颜色为rgba(0,0,0,0.5)。
·.text–white-50：设置文字颜色为rgba(255,255,255,0.5)。
·.text–muted：设置文字颜色为#6c757d。
·.text–body：设置文字颜色为#212529。
【例2-7】使用Bootstrap制作拼多多中获取水滴的页面。实现时，需要在HTML文件中引入Bootstrap文件，然后添加文字内容，并且通过<style>标签为网页自定义背景样式。具体代码如下：
<style type="text/css">
body{
background: url("images/7.jpg") no-repeat;
}
</style>
<div class="pt-4 mt-5 text-center">
<p><strong>添加3名好友</strong></p>
<p class="text-danger">未领取</p>
</div>
<div class="mt-5 text-center">
<p class="mb-1 pt-3"><strong>每日免费领水</strong></p>
<p class="text-muted">奖励10～20g,剩余2次</p>
</div>
<div class="mt-5 text-center">
<p class="mb-1 pt-3"><strong>浏览商品1分钟</strong></p>
<p class="text-primary">奖励20g,剩余2次</p>
</div>
<div class="mt-5 text-center">
<p class="mb-1 pt-3"><strong>收集水滴雨</strong></p>
<p class="text-success">已完成</p>
</div>
<div class="mt-5 text-center">
<p class="mb-1 pt-3"><strong>三日水滴礼包</strong></p>
<p class="text-warning">还差一天</p>
</div>
<div class="mt-5 text-center">
<p class="mb-1 pt-3"><strong>拼单领水滴</strong></p>
<p class="text-info">去拼单</p>
</div>
上述代码的运行效果如图2-9所示。
图2-9 使用文字颜色强调文本
HTML中使用<abbr>标签可以添加缩略语。Bootstrap中该标签的使用语法与HTML5中的相同，具体使用语法如下：
缩略语样式
<abbr title="World Wide Web">WWW</abbr>
上述语法中，WWW为网页中显示的内容，而title属性的值为“WWW”的完整内容，当鼠标指针悬停在上面时会显示完整的文本。例如，图2-10所示就是Bootstrap中缩略语的样式。
图2-10 缩略语样式
【例2-8】使用Bootstrap制作百度中搜索“零基础学Python”的结果页面。实现时，需要在HTML文件中引入Bootstrap文件，然后添加文字内容。具体代码如下：
<abbr title="零基础学Python，有它就够了"> <span class="text-danger">零基础学Python</span> <span class="text-primary">_百度百科</span> </abbr><br> <img src="images/8.png" alt="">
具体代码的实现效果如图2-11所示。
图2-11 Bootstrap中缩略语样式
Bootstrap还提供了一个.initialism，可将文字大小设置为原文字的90%，并且若文字中含有英文字母，则英文字母全部转换为大写字母。
【例2-9】使用Bootstrap的.initialism实现《零基础学Python》的图书介绍。实现时，需要在HTML文件中引入Bootstrap文件，然后添加文字内容。具体代码如下：
<img src="images/9.png" class="float-left img-fluid w-25">
<div class="float-left w-75">
<abbr title="零基础学Python，有它就够了" class="text-primary initialism">零基础学Python</abbr>
<p>
零基础学Python是针对零基础编程学习者研发的Python入门教程，从初学者角度出发，通过通俗易懂的语言、流行有趣的实例，详细地介绍使用IDLE及Python框架进行程序管理的知识和技术。
</p>
</div>
具体实现效果如图2-12所示。
图2-12 实现《零基础学Python》的图书介绍
Bootstrap中可以通过<address>标签来添加地址（邮箱地址等），读者也可以用它来为网页添加联系信息。并且在Bootstrap中，<address>清除了斜体样式，设置了底部的外边距为1rem，默认其显示方式display为block，所以读者需要用<br>标签来使封闭的地址文本换行。例如，图2-13所示就是Bootstrap中地址的表现样式。
地址样式
图2-13 Bootstrap中的地址样式
【例2-10】使用Bootstrap制作明日学院的联系方式页面。具体代码如下：
<style type="text/css">
.bg{
background: url("images/12.png") ; /*自定义背景样式*/
}
</style>
<div class="bg text-center">
<img src="images/3.png" alt=""><br>
<img src="images/10.jpg" alt="" width="150" class="mt-5">
<address class="mt-3 pb-5 mb-0"> <!--mt-3，pb-5，mb-0分别设置上外边距为1rem、上内边距为3rem、底部外边距为0rem-->
客服热线：400675****<br><br>
邮箱地址：mingrisoft@******<br><br>
</address>
</div>
上述代码的运行效果如图2-14所示。
图2-14 明日学院的联系方式页面
HTML通过<blockquote>标签来标记长的引用，默认的<blockquote>引用块的外边距margin为1rem 40px。Bootstrap中重置了该标签的外边距，设置其外边距margin的值为1rem，使其与其他元素更加一致，具体效果如图2-15所示。
引用样式
图2-15 引用样式
【例2-11】使用Bootstrap实现在网页中显示2018年和2019年上映的电影中的一些经典台词及其出处。具体代码如下：
<style type="text/css">
body{
background: url("images/bg.png") no-repeat;
}
</style>
<body>
<blockquote class="blockquote">
<p class="text-left">失败是迷雾，穿过它，我们就可以瞥见光明。</p>
<footer class="text-right">——<cite title="复仇者联盟">《复仇者联盟》</cite> </footer>
</blockquote>
<blockquote class="blockquote">
<p class="text-left">金钱是冰冷的，爱人的手是温暖的。</p>
<footer class="text-right">——<cite title="西虹市首富">《西虹市首富》</cite> </footer>
</blockquote>
<!--此处省略相似代码-->
</body>
在浏览器中运行例2-11，运行效果如图2-16所示。
图2-16 用Bootstrap实现电影中的经典台词显示
HTML含有有序列表、无序列表和定义列表。Bootstrap同样支持这3种列表，并且Bootstrap提供了一些列表的样式。用户要使用这些样式时，仅需为列表添加相应的类名即可。
列表样式
如果没有为列表添加预定样式的类名，并且没有自定义列表样式，那么浏览器中显示的将是默认的列表样式。例如，图2-17所示就是Bootstrap中有序列表的样式。
图2-17 默认的列表样式
在使用列表时，我们时常会需要清除列表的默认样式。要清除列表的样式，用户仅需在列表中添加类名.list-unstyled即可。
【例2-12】消除默认列表样式，制作售后服务卡片中五星好评部分内容。关键代码如下：
<style type="text/css">
.appraise {
background: url("images/15.jpg") no-repeat;
width: 937px;
height: 402px;
padding: 220px 140px 0 0;
}
</style>
<div class="appraise">
<ul class="list-unstyled float-right">
<li>宝贝描述相符： <img src="images/13.png" alt=""> <i mg src="images/13.png" alt=""> <img src="images/13.png" alt=""> <img src="im ages/13.png" alt=""> <img src="images/13 .png" alt="">
</li>
<li>卖家服务态度： <img src="images/13.png" alt=""> <i mg src="images/13.png" alt=""> <img src="images/13.png" alt=""> <img src="im ages/13.png" alt=""> <img src="images/13 .png" alt="">
</li>
<li>卖家发货速度： <img src="images/13.png" alt=""> <i mg src="images/13.png" alt=""> <img src="images/13.png" alt=""> <img src="im ages/13.png" alt=""> <img src="images/13 .png" alt="">
</li>
<li>物流发货速度： <img src="images/13.png" alt=""> <i mg src="images/13.png" alt=""> <img src="images/13.png" alt=""> <img src="im ages/13.png" alt=""> <img src="images/13 .png" alt="">
</li>
</ul>
</div>
上述代码清除了列表的默认样式，具体运行效果如图2-18所示。
图2-18 Bootstrap清除列表的默认样式
Bootstrap还提供了内联列表的样式，应用内联列表样式能使各列表项在同一行显示。设置内联列表样式时，仅需在列表标签中添加类名.list-inline，并且为各列表项添加类名.list-inline-item即可。
【例2-13】使用Bootstrap制作明日学院官网首页的导航页面。关键代码如下：
<!--bg-dark设置列表的背景为黑色；text-white设置文字为白色，m-0设置外边距为0rem，pl-5设置向左的内边距为3rem--> <ul class="list-inline bg-dark text-white m-0 pl-5"> <li class="list-inline-item p-2">首页</li> <li class="list-inline-item p-2">课程</li> <li class="list-inline-item p-2">读书</li> <li class="list-inline-item p-2">社区</li> <li class="list-inline-item p-2">服务中心</li> <li class="list-inline-item p-2">App下载</li> </ul> <img src="images/20.jpg"alt="" class="img-fluid">
编写完代码后，在浏览器中运行本例，具体运行效果如图2-19所示。
图2-19 Bootstrap内联列表
Bootstrap同样支持定义列表，并且Bootstrap设置定义列表的顶部外边距为0rem，底部外边距为1rem。
【例2-14】使用Bootstrap制作旅游网站中的景点介绍页面。实现时，需要添加4个定义列表，然后为定义列表添加类名为float-left，使定义列表向左浮动。关键代码如下：
<style type="text/css">
dl>:last-child,.color{
color:#ff6701;
}
dl{
padding: 10px;
border: 1px solid transparent;
}
dl:hover{
border-color: #ff6701;
}
</style>
<body>
<h2 class="color">特权日<span class="text-muted lead">意想不到的惊喜优惠整月 high不停</span></h2>
<div class="appraise">
<dl class="float-left">
<dt><img src="images/16.jpg" alt=""> </dt>
<dd><a href="#">长春伪满皇宫博物院</a></dd>
<dd class="initialism">主体部分以中和门为界，分为内廷和外廷两……</dd>
<dd><span class="initialism">特权价¥</span>67</dd>
</dl>
<dl class="float-left">
<dt><img src="images/17.jpg" alt=""> </dt>
<dd><a href="#">魔界风景区</a></dd>
<dd class="initialism">长白山魔界在长白山脚下，南边有一条河……</dd>
<dd><span class="initialism">特权价¥</span>90</dd>
</dl>
<dl class="float-left">
<dt><img src="images/18.jpg" alt=""> </dt>
<dd><a href="#">长影世纪城</a></dd>
<dd class="initialism">国内著名的电影主题公园</dd>
<dd><span class="initialism">特权价¥</span>199</dd>
</dl>
<dl class="float-left">
<dt><img src="images/19.jpg" alt=""> </dt>
<dd><a href="#">世界雕塑公园</a></dd>
<dd class="initialism">长春世界雕塑公园是国家4A级景区，是国家……</dd>
<dd><span class="initialism">特权价¥</span>68</dd>
</dl>
</div>
</body>
编写完代码后，在浏览器中运行本例，运行效果如图2-20所示。
图2-20 Bootstrap定义列表的使用
Bootstrap中如果要设置水平的定义列表样式，可以通过添加类名.col-*来实现。关于.col-*的具体讲解可参照网格系统的知识，这里主要讲解使用Bootstrap实现水平定义列表的方法。
【例2-15】使用Bootstrap制作支付宝中查询快递信息的页面。实现时，需要在定义列表标签<dl>中设置类名.row，然后为<dt>标签和<dd>标签设置类名为.col-*。具体代码如下：
<img src="images/21.jpg"alt="" class="img-fluid"> <dl class="row m-0 pl-4"> <dt class="col-3"><img src="images/22.jpg" alt=""/> </dt> <dd class="col-9"><h4>运输中</h4><p class="lead initialism">查|圆通快递：78****************263</p> </dd> </dl> <dl class="row m-0 pl-4"> <dt class="col-3"><img src="images/22.jpg" alt=""/> </dt> <dd class="col-9"><h4>运输中</h4><p class="lead initialism">淘宝|已离开[台州市]，正在发往吉林长春分拨中心</p> </dd> </dl>
上述代码添加了水平定义列表，具体运行效果如图2-21所示。
图2-21 Bootstrap中的水平定义列表
若设置一行中仅显示一个<dl>列表，则需要保证<dl>列表的子标签中.col-*的数字之和小于12。具体原因及.row等类名的含义可参照网格布局部分的内容。