列表类 - 前端学习教程_ 前端_前端开发

在HTML文档中提供了3种列表结构，分别是有序列表、无序列表和定义列表，这3种列表语法结构如下。

<!-- 无序列表 -->
<ul>
   <li>...</li>
   <li>...</li>
</ul>
<!-- 有序列表 -->
<ol>
   <li>...</li>
   <li>...</li>
</ol>
<!-- 定义列表 -->
<dl>
    <dt>...</dt>
   <dd>...</dd>
</dl>

Bootstrap对这3种列表默认形式进行了细微的改动，以达到风格统一、美观的目的，下面进行详细讲解。

1. 列表初始化

Bootstrap中无序列表和有序列表默认是带有项目符号的，但在实际开发中，为了方便使用，列表通常是不需要带有前面编号的。考虑到这种情况，Bootstrap中提供了.list-unstyled样式来对列表进行初始化，这样可以去除默认的列表样式风格。

接下来通过案例演示如何使用.list-unstyled样式来对列表进行初始化，如例7-1所示。

【例7-1】

创建C:\Bootstrap\chapter07\demo07.html文件，编写HTML代码，示例代码如下。

 1  <!DOCTYPE html>
 2  <html>
 3  <head>
 4   <meta charset="UTF-8">
 5   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 6  </head>
 7  <body>
 8   <!-- 无序列表去掉符号 -->
 9   <ul>
 10   <li>项目列表
 11    <ul class="list-unstyled">
 12     <li>不带项目符号</li>
 13     <li>不带项目符号</li>
 14    </ul>
 15   </li>
 16  </ul>
 17  <!-- 有序列表去掉序号 -->
 18  <ol>
 19   <li>项目列表
 20    <ol class="list-unstyled">
 21     <li>不带项目编号</li>
 22     <li>不带项目编号</li>
 23    </ol>
 24   </li>
 25  </ol>
 26 </body>
 27 </html>

保存上述代码，在浏览器中查看运行效果，如图1所示。

图1 列表初始化

2. 内联列表

Bootstrap中使用.list-inline结合.list-inline-item样式来实现多列并排列表，也就是说把垂直列表转换成水平列表，并且去掉项目符号，通常使用内联列表来制作水平导航。

接下来，在例7-2中使用无序列表来实现表格水平显示。

【例7-2】

创建C:\Bootstrap\chapter07\demo08.html文件，编写HTML代码，示例代码如下。

 1  <!DOCTYPE html>
 2  <html>
 3  <head>
 4   <meta charset="UTF-8">
 5   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 6  </head>
 7  <body>
 8   <ul class="list-inline">
 9    <li class="list-inline-item">首页</li>
 10   <li class="list-inline-item">我的</li>
 11   <li class="list-inline-item">帮助</li>
 12  </ul>
 13 </body>
 14 </html>

上述代码中，给<ul>添加样式.list-inline，同时需要给列表项设置.list-inline-item样式，设置完成后<li></li>之间的内容会变成横向排列。

保存上述代码，在浏览器中查看运行效果，如图2所示。

图2 内联列表

3. 定义列表水平显示

在Bootstrap中可以使用栅格系统的预定义类来对定义列表内容实现水平对齐效果，对于较长的内容可以使用.text-truncate省略溢出部分，并使用…省略号来代替。

接下来通过案例演示.text-truncate的使用，具体实现步骤如例7-3所示。

【例7-3】

创建C:\Bootstrap\chapter07\demo09.html文件，编写HTML代码，示例代码如下。

 1  <!DOCTYPE html>
 2  <html>
 3  <head>
 4   <meta charset="UTF-8">
 5   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 6  </head>
 7  <body>
 8   <div class="container">
 9    <dl class="row">
 10    <dt class="col-sm-4">我是列表标题部分</dt>
 11    <dd class="col-sm-8 text-truncate">我是用于描述列表标题内容，对列表标题部分进行介绍的</dd>
 12   </dl>
 13  </div>
 14 </body>
 15 </html>

上述代码中，第8行代码定义了.container布局容器，在<dl>上使用.row，并在其<dt> 和 <dd> 子级上使用网格列类来划分列。

保存上述代码，在浏览器中查看运行效果，如图3所示。

图3 水平排列