2.1.6 列表样式
1. 默认的列表样式
HTML含有有序列表、无序列表和定义列表。Bootstrap同样支持这3种列表，并且Bootstrap提供了一些列表的样式。用户要使用这些样式时，仅需为列表添加相应的类名即可。
列表样式
如果没有为列表添加预定样式的类名，并且没有自定义列表样式，那么浏览器中显示的将是默认的列表样式。例如，图2-17所示就是Bootstrap中有序列表的样式。
图2-17 默认的列表样式
2. 清除列表的样式
在使用列表时，我们时常会需要清除列表的默认样式。要清除列表的样式，用户仅需在列表中添加类名.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清除列表的默认样式
3. 内联列表样式
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内联列表
4. 定义列表样式
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定义列表的使用
5. 水平的定义列表
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等类名的含义可参照网格布局部分的内容。