bootstrap – 基於ul的擴充套件 list + listgroup + dropdown

1000copy發表於2016-08-30
boot套件

標籤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即可。

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>

兩者長得不太一樣，但是功能是類似的。

相關文章