标签ul是非常实用的,因为它:
可以在语义上表达一个列表
列表是可以嵌套的
比如这样的例子代码:
<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="#">«</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="#">»</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即可。
dropdown
组件dropdown就是一个菜单,它可以把一组相关的链接组织在一起。如下代码就构成了一个dropdown:
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action1</a></li>
<li><a href="#">Action2</a></li>
</ul>
</div>
你可以点击链接“Dropdown”切换下拉菜单的显示。dropdown由一个切换组件和一个实际的菜单构成。切换组件通过dropdown-toggle类指示a标签为切换组件、通过data-toggle指定切换操作类型为dropdown。类.dropdown-menu指定标签ul为下拉菜单内容。ul内的内容就是一个普通的ul列表。
组件dropdown在bootstrap内有着广泛的应用。它可以伴随button、navbar等组件一起做出复杂的交互效果。
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>
两者长得不太一样,但是功能是类似的。