Bootstrap學習之路（3）---列表組件

列表是幾乎所有網站都會用到的一個組件，正好bootstrap也給我們提供了這個組件的樣式，下面我給大家簡單介紹一下bootstrap中的列表組件的用法！

首先，重提一下引用bootstrap的核心文件的問題，以免有些剛入手的朋友忘了這個。

在頁面的開頭，先引用bootstrap的核心文件（css，js）等。

<!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- jQuery文件 -->
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- 下面這句話是為了讓網頁在手機端時禁止頁面縮放，達到最佳視覺效果，在PC端可以注釋掉 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

接下來說到bootstrap的列表組件了：

下面是一個最簡單的列表組，僅僅是一個帶有多個列表條目的無序列表，另外還需要設置適當的類。bootstrap給我們提供了一些預定義的樣式，你可以根據自身的需求通過 CSS 自己定制。

列表組的樣式類為：.list-group，列表中每列的樣式為：.list-group-item：

<ul class="list-group">
  <li class="list-group-item">微笑話列表項1</li>
  <li class="list-group-item">微笑話列表項2</li>
  <li class="list-group-item">微笑話列表項3</li>
  <li class="list-group-item">微笑話列表項4</li>
  <li class="list-group-item">微笑話列表項5</li>
</ul>

運行效果如下：

上面介紹的是bootstrap中最簡單的列表；

其實，用div+a標簽同樣也能夠實現上面列表的效果：

<div class="list-group">
  <a href="http://www.weixh.net" class="list-group-item active">微笑話1</a>
  <a href="#" class="list-group-item">微笑話2</a>
  <a href="#" class="list-group-item">微笑話3</a>
  <a href="#" class="list-group-item">微笑話4</a>
  <a href="#" class="list-group-item">微笑話5</a>
</div>

還是用ul、li 的樣式，運行效果如下：

同樣，bootstrap也給我們提供了幾種列表的樣式，如果大家覺得列表的樣式不是你喜歡的，你也可以重寫他的樣式，改成自己喜歡的：

<div class="list-group">
  <a href="http://www.weixh.net" class="list-group-item list-group-item-success active">微笑話1</a>
  <a href="#" class="list-group-item list-group-item-info">微笑話2</a>
  <a href="#" class="list-group-item list-group-item-warning">微笑話3</a>
  <a href="#" class="list-group-item list-group-item-danger">微笑話4</a>
  <a href="#" class="list-group-item" style="background:#F75000;">自己定義的樣式</a>
</div>

運行效果如下：

然后，我想給列表加上徽章：

<div class="list-group">
  <a href="http://www.weixh.net" class="list-group-item list-group-item-success active"><span class="badge">15</span>微笑話1</a>
  <a href="#" class="list-group-item list-group-item-info"><span class="badge">14</span>微笑話2</a>
  <a href="#" class="list-group-item list-group-item-warning"><span class="badge">18%</span>微笑話3</a>
  <a href="#" class="list-group-item list-group-item-danger"><span class="badge">100</span>微笑話4</a>
  <a href="#" class="list-group-item" style="background:#F75000;"><span class="badge">33</span>自己定義的樣式</a>
</div>

於是我得到了徽章：

定制內容
列表組中的每個元素都可以是任何 HTML 內容，甚至是像下面的帶鏈接的列表組。

<div class="list-group">
  <a href="http://www.weixh.net" class="list-group-item active">
  <h4 class="list-group-item-heading">這里可以放標題</h4>
    <p class="list-group-item-text">這里就是內容咯</p>
  </a>
  <a href="http://www.weixh.net" class="list-group-item">
  <h4 class="list-group-item-heading">這里可以放標題</h4>
    <p class="list-group-item-text">這里就是內容咯</p>
  </a>
  <a href="http://www.weixh.net" class="list-group-item">
  <h4 class="list-group-item-heading">這里可以放標題</h4>
    <p class="list-group-item-text">這里就是內容咯</p>
  </a>
  <a href="http://www.weixh.net" class="list-group-item">
  <h4 class="list-group-item-heading">這里可以放標題</h4>
    <p class="list-group-item-text">本文出自博客園-三卷天書</p>
  </a>
</div>

運行得出的結果：

是不是覺得不用自己寫CSS實在是太好了呢，好了，今天就跟大家啰嗦到這來，不理解或者不懂的可以回復提問，大家共同學習！

還有本人的小站《微笑話》手機版上線了，用bootstrap實現的頁面，大家可以去看看，地址是：www.weixh.net，手機訪問會自動跳轉到手機版的，給大家貼個效果圖

還有，如果轉載本文，需注明出處。