淺析Bootstrap縮略圖組件與警示框組件
更新時間：2016年04月29日 09:41:31 作者：洛水三千
縮略圖在網(wǎng)站中最常用的就是產(chǎn)品列表頁面，一行顯示幾張圖片，有的在圖片底下帶有標(biāo)題、描述內(nèi)容、按鈕等信息。本文給大家介紹Bootstrap縮略圖組件與警示框組件，感興趣的朋友一起學(xué)習(xí)吧
Bootstrap簡介
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。
縮略圖組件
縮略圖在網(wǎng)站中最常用的就是產(chǎn)品列表頁面，一行顯示幾張圖片，有的在圖片底下帶有標(biāo)題、描述內(nèi)容、按鈕等信息。
bootstrap框架將這部分獨立成一個模塊組件，通過類名.thumbnail配合bootstrap的網(wǎng)格系統(tǒng)來實現(xiàn)。下面是bootstrap縮略圖組件不同版本的源碼文件：
LESS : tbumbnails.less
SASS : _tbumbnails.scss
實現(xiàn)原理：
布局的實現(xiàn)主要依靠于bootstrap框架的網(wǎng)格系統(tǒng)，下面是縮略圖對應(yīng)的樣式
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #428bca;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
來看一個例子：
<div class="container"> <div class="row"> <div class="col-md-3"> <a herf="#" class="thumbnail"> <img src="img/1.jpg" style="height:180px;width:100%;display: block"> </a> </div> <div class="col-md-3"> <a herf="#" class="thumbnail"> <img src="img/2.jpg" style="height:180px;width:100%;display: block"> </a> </div> <div class="col-md-3"> <a herf="#" class="thumbnail"> <img src="img/3.jpg" style="height:180px;width:100%;display: block"> </a> </div> <div class="col-md-3"> <a herf="#" class="thumbnail" > <img src="img/4.jpg" style="height:180px;width:100%;display: block"> </a> </div> </div> </div>
效果如下：
可以用火狐響應(yīng)式設(shè)計視圖查看
在僅有縮略圖的基礎(chǔ)上，添加一個類名為.caption的div容器，在這個容器中放置其他內(nèi)容，如：標(biāo)題，文本描述，按鈕等
<div class="container"> <div class="row"> <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="img/1.jpg" style="height:180px;width:100%;display: block"> </a> <div class="caption"> <h3>這里是圖文標(biāo)題1111</h3> <p>這里是描述內(nèi)容這里是描述內(nèi)容這里是描述內(nèi)容這里是描述內(nèi)容這里是描述內(nèi)容這里是描述內(nèi)容這里是描述內(nèi)容</p> <a href="#" class="btn btn-primary">開始學(xué)習(xí)</a> <a href="#" class="btn btn-info">正在學(xué)習(xí)</a> </div> </div> <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="img/2.jpg" style="height:180px;width:100%;display: block"> </a> <div class="caption"> <h3>這里是圖文標(biāo)題2222</h3> <p>這里是描述內(nèi)容2222這里是描述內(nèi)容22222這里是描述內(nèi)容22222這里是描述內(nèi)容222這里是描述內(nèi)容2222</p> <a href="#" class="btn btn-primary">開始學(xué)習(xí)</a> <a href="#" class="btn btn-info">正在學(xué)習(xí)</a> </div> </div> <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="img/3.jpg" style="height:180px;width:100%;display: block"> </a> <div class="caption"> <h3>這里是圖文標(biāo)題3333</h3> <p>這里是描述內(nèi)容3333這里是描述內(nèi)容3333這里是描述內(nèi)容33333這里是描述內(nèi)容222這里是描述內(nèi)容3333</p> <a href="#" class="btn btn-primary">開始學(xué)習(xí)</a> <a href="#" class="btn btn-info">正在學(xué)習(xí)</a> </div> </div> <div class="col-md-3"> <a href="#" class="thumbnail"> <img src="img/4.jpg" style="height:180px;width:100%;display: block"> </a> <div class="caption"> <h3>這里是圖文標(biāo)題4444</h3> <p>這里是描述內(nèi)容4444這里是描述內(nèi)容4444這里是描述內(nèi)容4444這里是描述內(nèi)容4444這里是描述內(nèi)容4444</p> <a href="#" class="btn btn-primary">開始學(xué)習(xí)</a> <a href="#" class="btn btn-info">正在學(xué)習(xí)</a> </div> </div> </div> </div>
警示框組件
bootstrap框架通過.alert樣式來實現(xiàn)警示框效果，在默認(rèn)情況下，bootstrap提供了四種不同的警示框效果：
1、成功警示框：提示用戶操作成功，在.alert的基礎(chǔ)上追加.alert-success樣式；
2、信息警告框：給用戶提供提示信息，在.alert的基礎(chǔ)上追加.alert-info樣式；
3、警告警示框：提供警告信息，在.alert的基礎(chǔ)上追加.alert-warning樣式；
4、錯誤警示框：提示用戶操作錯誤，在.alert的基礎(chǔ)上追加.alert-danger樣式；
其中，.alert樣式主要設(shè)置了警示框的背景色、邊框，圓角，文字顏色，此外還對h4、p、ul及.alert-link做了樣式上的處理，下面是css源碼：
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-warning hr {
border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}
例如：
<div class="alert alert-success" role="alert">恭喜你操作成功！</div> <div class="alert alert-info" role="alert">請輸入正確的密碼</div> <div class="alert alert-warning" role="alert">你已經(jīng)操作失敗兩次，還有最后一次機會</div> <div class="alert alert-danger" role="alert">對不起，你的密碼輸入有誤！</div>
可關(guān)閉的警示框
1、在默認(rèn)的警示框的容器上追加一個.alert-dismissable類名
2、在button標(biāo)簽中添加.close，實現(xiàn)警告框的關(guān)閉按鈕
3、確保關(guān)閉按鈕元素上設(shè)置了自定義屬性data-dismiss=”alert“（關(guān)閉警示框需要通過js來檢測該屬性，從而控制警示框的關(guān)閉）
例子：
<div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 恭喜你操作成功！ </div> <div class="alert alert-info alert-dismissable"role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 請輸入正確的密碼 </div> <div class="alert alert-warning alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 你已經(jīng)操作失敗兩次，還有最后一次機會 </div> <div class="alert alert-danger alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 對不起，你的密碼輸入有誤！ </div>
警示框的鏈接
有時候需要在警示框中加入鏈接，告訴用戶跳轉(zhuǎn)到新的頁面，bootstrap框架中對警示框的鏈接做了高亮處理。給警告框加的鏈接添加一個為.alert-link的類名，下面是alert-link的css樣式
.alert .alert-link {
font-weight: bold;
}
/*不同類型警示框中鏈接的文本顏色*/
.alert-success .alert-link {
color: #2b542c;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger .alert-link {
color: #843534;
}
例子：
<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>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a> </div> <div class="alert alert-warning " role="alert"> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a> </div> <div class="alert alert-danger" role="alert"> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a> </div>
關(guān)于本文給大家介紹的Bootstrap縮略圖組件與警示框組件的相關(guān)知識就給大家介紹這么多，希望對大家有所幫助！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)表格信息增添與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
下面小編就為大家?guī)硪黄猨s實現(xiàn)StringBuffer的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
本文主要介紹了js實現(xiàn)簡單的獲取驗證碼按鈕加效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了QML實現(xiàn)圓環(huán)顏色選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要向大家推薦了一個原生js模擬淘寶購物車項目實戰(zhàn)，包括商品的單選、全選、刪除、修改數(shù)量、價格計算、數(shù)目計算、預(yù)覽等功能的實現(xiàn)，感興趣的小伙伴們可以參考一下2015-11-11
Javascript中void是一個操作符，該操作符指定要計算一個表達(dá)式但是不返回值，有不了解的朋友可以參考下本文2013-11-11
javascript 實現(xiàn)子父窗體互相傳值的簡單實例
本篇文章主要是對javascript 實現(xiàn)子父窗體互相傳值的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JS實現(xiàn)上傳圖片的三種方法并實現(xiàn)預(yù)覽圖片功能
在用戶注冊頁面，需要用戶在本地選擇一張圖片作為頭像，并同時預(yù)覽，實現(xiàn)思路有兩種，具體實現(xiàn)方法和實例代碼大家參考下本文2017-07-07
這篇文章主要介紹了javascript實現(xiàn)下拉提示選擇框的相關(guān)資料,需要的朋友可以參考下2015-12-12
js 如何打印預(yù)覽，實局部打印頁面很簡單。就是把你需要打印的部分做一個起始標(biāo)記，下面有個示例大大家不妨參考下2014-07-07