Question

标签 ul 是非常实用的，因为它：

1. 可以在语义上表达一个列表
2. 列表是可以嵌套的

比如这样的例子代码：

<ul >
  <li>Item1</li>
  <li>Item2
    <ul>
      <li>Item2.1</li>
      <li>Item2.2</li>
    </ul>
  </li>
  <li>Item3</li>
</ul>

至于外观，默认的看来确实只能做简单的排版。然而，bootstrap 大量采用 ul，赋予它新的外观和操作，基于此标签，可以做成 list，listgroup、dropdown 等通用组件。

list

我们常常需要把默认纵向显示的 ul，改成横向显示，以便作为菜单、导航的 UI 基础。只需要.list-inline 即可做到：

<ul class="list-inline">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

list-group

可以通过加上边线，让列表变得更漂亮。需要的就是添加.list-group 到 ul 类内，添加 list-group-item 到 li 类内：

<ul class="list-group">
    <li class="list-group-item">Item1</li>
    <li class="list-group-item">Item2</li>        
    <li class="list-group-item">Item3</li>
</ul>

此时出现的组件被称为 list-group。此组件也可以加入上下文类：

<ul class="list-group">
    <li class="list-group-item list-group-item-success">Item1</li>
    <li class="list-group-item list-group-item-info">Item2</li>        
    <li class="list-group-item list-group-item-warning">Item3</li>
</ul>

breadcrumb

标签 ul 内的 li 列表，按照次序也可以提现层次关系。给它应用.breadcrumb，体现出页面导航的层次关系。

<ul class="breadcrumb">
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 2</a></li>
    <li class="active">Level 3</li>
</ul>

pagination

分页提供多页的内容访问方式。依然使用标签 ul，并内嵌 li 表示页面数字。应用.pagination 可以显示出：

<ul class="pagination pagination-sm">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

每个 li 标签上可以应用.disabled、active，从而激活某个 li 项目或者使之不可操作。 可以使用.pagination-lg、.pagination-sm 调整分页组件的大小。

pager

作为对 pagination 的一个变化，你可能只是想要显示向前翻页和向后翻页，那么使用.pager:

<ul class="pager">
    <li class="previous"><a href="#">Previous</a></li>
    <li class="next"><a href="#">Next</a></li>
</ul>

此时两个 li 显示分别为左右对齐。如果想要中对齐，只要去掉.previous、.next 即可。

nav

还可以对 ul 扩展，让它成为导航组件。导航组件有两种，分别是 tabs、pills。

使用如下代码创建一个 tab 导航：

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">About</a></li>
</ul>

把 nav-tabs 改成 nav-pills，就是 pills 导航：

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">About</a></li>
</ul>

两者长得不太一样，但是功能是类似的。