1、縮略圖

縮略圖在網(wǎng)站中最常用的地方就是產(chǎn)品列表頁(yè)面，一行顯示幾張圖片，有的在圖片底下（左側(cè)或右側(cè)）帶有標(biāo)題、描述等信息。Bootstrap框架將這一部獨(dú)立成一個(gè)模塊組件。并通過(guò)“thumbnail”樣式配合bootstrap的網(wǎng)格系統(tǒng)來(lái)實(shí)現(xiàn)?？梢詫a(chǎn)品列表頁(yè)變得更好看。

源碼文件：

☑ LESS版本：對(duì)應(yīng)文件thumbnails.less

☑ Sass版本：對(duì)應(yīng)文件_thumbnails.scss

☑ 編譯后版本：bootstrap.css文件第4402行～第4426行

使用方法：

通過(guò)“thumbnail”樣式配合bootstrap的網(wǎng)格系統(tǒng)來(lái)實(shí)現(xiàn)。

前面也說(shuō)過(guò)了，縮略圖的實(shí)現(xiàn)是配合網(wǎng)格系統(tǒng)一起使用，假設(shè)我們一個(gè)產(chǎn)品列表，如下圖所示：

先來(lái)看結(jié)構(gòu)：

<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-3">
  <a href="#" class="thumbnail">
  <img src="imgs/a.png" style="width: 100%; display: block;" alt="">
  </a>
 </div>
 …
 </div>
</div>

上面的結(jié)構(gòu)表示的是在寬屏幕（可視區(qū)域大于768px）的時(shí)候，一行顯示四個(gè)縮略圖(單擊全屏查看效果)：

在窄屏（可視區(qū)域小于768px）的時(shí)候，一行只顯示兩個(gè)縮略圖：

• col-xs-超小屏幕 手機(jī) (<768px),
• col-sm-小屏幕 平板 (≥768px),
• col-md-中等屏幕 桌面顯示器 (≥992px)

class="col-xs-6 col-md-3"這個(gè)是響應(yīng)式網(wǎng)格的語(yǔ)法， 你可以這樣認(rèn)為，當(dāng)屏幕為小屏幕(<768px)時(shí)自動(dòng)使用class="col-xs-6" 當(dāng)屏幕為中屏(>=768px)時(shí)自動(dòng)使用 class="col-md-3" BootStrap總共分為12列，上面的代碼表示在極小屏幕時(shí)每6份(占一半)，即6，中大屏幕是占3份。

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

布局實(shí)現(xiàn)的主要是依靠于Bootstrap框架的網(wǎng)格系統(tǒng)，而縮略圖對(duì)應(yīng)的樣式代碼：

/bootstrap.css文件第4402行～第4426行/

.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;
}

2、復(fù)雜縮略圖

上一小節(jié)，展示的僅只有縮略圖的一種使用方式，除了這種方式之外，還可以讓縮略圖配合標(biāo)題、描述內(nèi)容，按鈕等：

在僅有縮略圖的基礎(chǔ)上，添加了一個(gè)div名為“caption“的容器，在這個(gè)容器中放置其他內(nèi)容，比如說(shuō)標(biāo)題，文本描述，按鈕等：

<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-3">
  <a href="#" class="thumbnail">
  <img src="imgs/1.jpg" style="height: 180px; width: 100%; display: block;" alt="">
  </a>
  <div class="caption">
  <h3>Bootstrap框架系列教程</h3>
  <p>Bootstrap框架是一個(gè)優(yōu)秀的前端框，就算您是一位后端程序員或者你是一位不懂設(shè)計(jì)的前端人員，你也能依賴(lài)于Bootstrap制作做優(yōu)美的網(wǎng)站...</p>
  <p>
   <a href="##" class="btn btn-primary">開(kāi)始學(xué)習(xí)</a>
   <a href="##" class="btn btn-info">正在學(xué)習(xí)</a>
  </p>
  </div>
 </div>
 …
 </div>
</div>

效果如下：

3、警示框

在網(wǎng)站中，網(wǎng)頁(yè)總是需要和用戶(hù)一起做溝通與交流。特別是當(dāng)用戶(hù)操作上下文為用戶(hù)提供一些有效的警示框，比如說(shuō)告訴用戶(hù)操作成功、操作錯(cuò)誤、提示或者警告等。如下圖所示：

在Bootstrap框架有一個(gè)獨(dú)立的組件，實(shí)現(xiàn)上述的效果，這個(gè)組件被稱(chēng)為警示框。

源碼版本：

☑ LESS版本：對(duì)應(yīng)的源碼文件alerts.less

☑ Sass版本：對(duì)應(yīng)的源碼文件_alerts.scss

☑ 編譯后的版本：bootstrap.css文件第4427行～第4499行

4、默認(rèn)警示框

Bootstrap框架通過(guò)“alert“樣式來(lái)實(shí)現(xiàn)警示框效果。在默認(rèn)情況之下，提供了四種不同的警示框效果：

1）、成功警示框：告訴用用戶(hù)操作成功，在“alert”樣式基礎(chǔ)上追加“alert-success”樣式，具體呈現(xiàn)的是背景、邊框和文本都是綠色；

2）、信息警示框：給用戶(hù)提供提示信息，在“alert”樣式基礎(chǔ)上追加“alert-info”樣式，具體呈現(xiàn)的是背景、邊框和文本都是淺藍(lán)色；

3）、警告警示框：提示用戶(hù)小心操作（提供警告信息），在“alert”樣式基礎(chǔ)上追加“alert-warning”樣式，具體呈現(xiàn)的是背景、邊框、文本都是淺黃色；

4）、錯(cuò)誤警示框：提示用戶(hù)操作錯(cuò)誤，在“alert”樣式基礎(chǔ)上追加“alert-danger”樣式，具體呈現(xiàn)的是背景、邊框和文本都是淺紅色。

使用方法：

具體使用的時(shí)候，可以在類(lèi)名為“alert”的div容器里放置提示信息。實(shí)現(xiàn)不同類(lèi)型警示框，只需要在“alert”基礎(chǔ)上追加對(duì)應(yīng)的類(lèi)名，如下：

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">請(qǐng)輸入正確的密碼</div>
<div class="alert alert-warning" role="alert">您已操作失敗兩次，還有最后一次機(jī)會(huì)</div>
<div class="alert alert-danger" role="alert">對(duì)不起，您輸入的密碼有誤</div>

運(yùn)行效果如下：

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

其中“alert”樣式的源碼主要是設(shè)置了警示框的背景色、邊框、圓角和文字顏色。另外對(duì)其內(nèi)部幾個(gè)元素h4、p、ul和“.alert-link”做了樣式上的特殊處理：

/bootstrap.css文件第4427行～第4446行/

.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;
}

不同類(lèi)型的警示框，主要是通過(guò)“alert-success”、“alert-info”、“alert-warning”和“alert-danger”樣式來(lái)實(shí)現(xiàn)：

/bootstrap.css文件第4456行～第4499行/

.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;
}

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

大家在平時(shí)瀏覽網(wǎng)頁(yè)的時(shí)候，會(huì)發(fā)現(xiàn)一些警示框帶有關(guān)閉按鈕，用戶(hù)一點(diǎn)擊關(guān)閉按鈕就能自動(dòng)關(guān)閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具有這樣的功能。

使用方法：

只需要在默認(rèn)的警示框里面添加一個(gè)關(guān)閉按鈕。然后進(jìn)行三個(gè)步驟：

1）、需要在基本警示框“alert”的基礎(chǔ)上添加“alert-dismissable”樣式。

2）、在button標(biāo)簽中加入class="close"類(lèi)，實(shí)現(xiàn)警示框關(guān)閉按鈕的樣式。

3）、要確保關(guān)閉按鈕元素上設(shè)置了自定義屬性：“data-dismiss="alert"”（因?yàn)榭申P(guān)閉警示框需要借助于Javascript來(lái)檢測(cè)該屬性，從而控制警示框的關(guān)閉）。

具體使用如下：

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

運(yùn)行效果如下：

原理分析：

在樣式上，需要在基本警示框“alert”的基礎(chǔ)上添加“alert-dismissable”樣式，這樣就可以實(shí)現(xiàn)帶關(guān)閉功能的警示框。

/bootstrap.css文件第4447行～第4455行/

.alert-dismissable {
 padding-right: 35px;
}
.alert-dismissable .close {
 position: relative;
 top: -2px;
 right: -21px;
 color: inherit;
}

6、警示框的鏈接

有時(shí)候你可能想在警示框中加入鏈接地址，用來(lái)告訴用戶(hù)跳到某一個(gè)地方或新的頁(yè)面。而這個(gè)時(shí)候你又想讓用戶(hù)能明顯的看出來(lái)這是鏈接地址。在Bootstrap框架中對(duì)警示框里的鏈接樣式做了一個(gè)高亮顯示處理。為不同類(lèi)型的警示框內(nèi)的鏈接進(jìn)行了加粗處理，并且顏色相應(yīng)加深。

實(shí)現(xiàn)方法：

Bootstrap框架是通過(guò)給警示框加的鏈接添加一個(gè)名為“alert-link”的類(lèi)名，通過(guò)“alert-link”樣式給鏈接提供高亮顯示。

具體使用如下：

<div class="alert alert-warning" role="alert">
 <strong>Warning!</strong>
 忘記密碼？---><a href="##" class="alert-link">請(qǐng)點(diǎn)擊此處</a>
</div>
<div class="alert alert-danger" role="alert">
 <strong>Oh snap!</strong>
 密碼輸入錯(cuò)誤---><a href="##" class="alert-link">請(qǐng)點(diǎn)擊此處找回密碼。。</a>
</div>

運(yùn)行效果如下：

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

實(shí)現(xiàn)樣式如下：

/bootstrap.css文件第4437行～第4439行/

.alert .alert-link {
 font-weight: bold;
}

/不同類(lèi)型警示框中鏈接的文本顏色/

.alert-success .alert-link {
 color: #2b542c;
}
.alert-info .alert-link {
 color: #245269;
}
.alert-warning .alert-link {
 color: #66512c;
}
.alert-danger .alert-link {
 color: #843534;
}

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專(zhuān)題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論