欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析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框架將這部分獨(dú)立成一個模塊組件，通過類名.thumbnail配合bootstrap的網(wǎng)格系統(tǒng)來實(shí)現(xiàn)。下面是bootstrap縮略圖組件不同版本的源碼文件：

LESS : tbumbnails.less

SASS : _tbumbnails.scss

實(shí)現(xiàn)原理：

布局的實(shí)現(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è)計(jì)視圖查看

在僅有縮略圖的基礎(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樣式來實(shí)現(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)操作失敗兩次，還有最后一次機(jī)會</div>
<div class="alert alert-danger" role="alert">對不起，你的密碼輸入有誤！</div>

可關(guān)閉的警示框

1、在默認(rèn)的警示框的容器上追加一個.alert-dismissable類名

2、在button標(biāo)簽中添加.close，實(shí)現(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">&times;</button>
恭喜你操作成功！
</div>
<div class="alert alert-info alert-dismissable"role="alert">
<button class="close" type="button" data-dismiss="alert">&times;</button>
請輸入正確的密碼
</div>
<div class="alert alert-warning alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">&times;</button>
你已經(jīng)操作失敗兩次，還有最后一次機(jī)會
</div>
<div class="alert alert-danger alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">&times;</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)文章

最新評論