淺析Bootstrap縮略圖組件與警示框組件

2019-11-20 10:11:25

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

Bootstrap簡介

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

縮略圖組件

縮略圖在網(wǎng)站中最常用的就是產(chǎn)品列表頁面，一行顯示幾張圖片，有的在圖片底下帶有標題、描述內(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)容，如：標題，文本描述，按鈕等

<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>這里是圖文標題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>這里是圖文標題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>這里是圖文標題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>這里是圖文標題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)警示框效果，在默認情況下，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、在默認的警示框的容器上追加一個.alert-dismissable類名

2、在button標簽中添加.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>