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

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

列表是幾乎所有網站都會用到的一個組件，正好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"/>View Code

接下來說到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，手機訪問會自動跳轉到手機版的，給大家貼個

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

統計學中bootstrap的具體含義，中文名字，用法舉例

自舉(bootstrap)

自助法(Bootstrap Method)是Efron(1979)於Annals of Statistics所發表的一個辦法，是近代統計發展上極重要的一個裡程碑，而在執行上常需藉助於現代快速的電腦。
舉例來說，當用樣本平均來估算母群體期望值時，為對此一估算的誤差有所瞭解，我們常用信賴區間(confidence interval)的辦法來做推估，此時得對樣本平均的sampling distribution有所瞭解。在基本統計教本上，當樣本所來自的母群體，可用常態分配描述時，其sampling distribution可或為常態分配或為t分配。但當樣本所來自的母群體，不宜用常態分配描述時，我們或用電腦類比或用漸進分析的辦法加以克服。當對母群體的瞭解不夠深時，漸進分析的辦法是較有效方法，故中央極限定理(Central Limit Theorem)，Edgeworth Expansion (small sample theory)等辦法及其可行性及限制等於文獻中廣被
探討，人們雖不全然喜歡這些辦法，但也找不出更理性的方法來取代漸進分析的辦法。
而自助法確是一個相當具說服力的方法，更提供了統計工作者另一個尋找sampling distribution 的辦法，故在近年來於文獻中廣被探討。

www.math.ntu.edu.tw/~hchen/Teach/readme.html
 
bootstrap該怎學習，一般按什步驟，我看到它的網站感覺有點亂，還有很多相關的開源架構？

建議一般先學會排版布局吧。這個是最最有用的。從最基本的bootstrap架構開始學習。首頁上的其他一些都是擴充性的架構可以先不學。等完全瞭解了bootstrap基本的一些排版布局以及樣式，學習其他的也就不難了。其實bootstrap學習起來還是很簡單的吧。布局的話就是百分比布局和柵欄式布局為主。其他的類似 按鈕 .btn 報錯提示 .alert-block 都是利用了組合式的class如 。.btn .btn-success就是綠色按鈕。.btn+尾碼（其實就是一個色系）。個人任為bootstrap最強大的一點就是組合式class，隨心搭配。從排版布局到css最後到bootstrap.js（個人認為使用的幾率不大，相容性和實用性並不是最好。js初學者用用很不錯。常用的也就那幾個，畢竟萬惡的ie在國內還是根深蒂固的）按照這個步驟看完，再自己做一些小的demo很快上手的。祝你學習順利。