bootstrap-15

縮略圖：縮略圖在網站中最經常使用的地方就是產品列表頁面，一行顯示幾張圖片，有的在圖片底下（左側或者右側）帶有標題、描述信息。Bootstrap框架將這一部獨立成一個模塊組件，並經過thumbnail樣式配合Bootstrap的網格系統來實現：

　　除了這種方式以外，還能夠讓縮略圖配合標題、描述內容、按鈕等：

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一個優秀的前端框，就算您是一位後端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap製做作優美的網站...</p>
                <p>
                    <a href="##" class="btn btn-primary">開始學習</a>
                    <a href="##" class="btn btn-info">正在學習</a>
                </p>
            </div>
        </div>
    …
    </div>
</div>

　　

警示框：

　　1.成功警示框：告訴用戶操做成功，在alert樣式的基礎上追加alert-success樣式，具體呈現的是背景、邊框和文本都是綠色；

　　2.信息警示框:給用戶提供提示信息，在alert樣式的基礎上追加alert-info樣式，具體呈現的是背景、邊框和文本都是淺藍色；

　　3.警告警示框：提示用戶當心操做，在alert樣式基礎上追加alert-warning樣式，具體呈現的是背景、邊框和文本都是淺黃色；

　　4.錯誤警示框：提示用戶操做錯誤，在alert樣式基礎上追加alert-danger樣式，具體呈現的是背景、邊框和文本都是淺紅色。

 

　　使用方法：

　　　　具體使用的時候，能夠在類名爲「alert」的div容器裏放置提示信息。實現不一樣類型警示框，只須要在「alert」基礎上追加對應的類名，以下：

<div class="alert alert-success" role="alert">恭喜您操做成功！</div>
<div class="alert alert-info" role="alert">請輸入正確的密碼</div>
<div class="alert alert-warning" role="alert">您已操做失敗兩次，還有最後一次機會</div>
<div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>

　　

警示框----可關閉的警示框

　　使用方法：只須要在默認的警示框裏面添加一個關閉按鈕，而後進行三個步驟：

　　1.須要在警示框alert的基礎上添加「alert-dismissable」樣式；

　　2.在button標籤上加上class= "close"類，實現警示框關閉按鈕的樣式；

　　3.要確保關閉按鈕元素上設置了自定義屬性，「data-dismiss= 'alert'」(由於可關閉警示框要藉助js來檢測該屬性，從而控制警示框的關閉)。

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">×</button>
    恭喜您操做成功！
</div>

　　

警示框----警示框的連接

　　有時候，你可能想在警示框中加入連接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候你又想讓用戶能明顯的看出來這是連接地址。在Bootstrap框架中對警示框裏的連接樣式作了一個高亮顯示處理。爲不一樣類型的警示框內的連接進行了加粗處理，而且顏色相應加深。

　　實現方法：Bootstrap框架是經過給警示框加的連接添加一個名爲alert-link的類名，經過這個樣式給連接提供高亮顯示。

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="alert-link">this important alert message</a>
    .
</div>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong>
     This 
     <a href="#" class="alert-link">alert needs your attention</a>
     , but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong>
     Better check yourself, you're 
     <a href="#" class="alert-link">not looking too good</a>
     .
</div>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong>
    <a href="#" class="alert-link">Change a few things up</a>
     and try submitting again.
</div>