list

标签ul是非常实用的,因为它:

  1. 可以在语义上表达一个列表

  2. 列表是可以嵌套的

比如这样的例子代码:

  • Item1

  • Item2

    • Item2.1

    • Item2.2

  • Item3

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

list

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

  • Item1

  • Item2

  • Item3

list-group

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

  • Item1

  • Item2

  • Item3

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

  • Item1

  • Item2

  • Item3

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

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

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

pager

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

此时两个li显示分别为左右对齐。如果想要中对齐,只要去掉.previous、.next即可。 ## nav 还可以对ul扩展,让它成为导航组件。导航组件有两种,分别是tabs、pills。 使用如下代码创建一个tab导航:

把nav-tabs改成nav-pills,就是pills导航:

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

Last updated