首頁 > web前端 > html教學 > Bootstrap縮圖的詳細介紹

Bootstrap縮圖的詳細介紹

零下一度
發布: 2017-07-18 16:42:17
原創
1702 人瀏覽過

本章將解說 Bootstrap 縮圖。大多數網站都需要在網格中佈局圖像、影片、文字等。 Bootstrap 透過縮圖為此提供了一種簡單的方式。使用 Bootstrap 建立縮圖的步驟如下:

在影像周圍新增帶有 class .thumbnail 的 標籤。

這會加入四個像素的內邊距(padding)和一個灰色的邊框。

當滑鼠懸停在圖像上時,會動畫顯示出圖像的輪廓。

概述

  Boostrap 縮圖的預設設計只需最少的標籤就能展示帶有連結的圖片,透過「thumbnail」樣式配合bootstrap的網格系統來實現縮圖

  thumbnail中文翻譯是拇指指甲,確實有些像縮圖,中間是圖片,圖片周圍是一小圈空白,外面是邊框和圓角,下面是文字

.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-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div></div></div>
登入後複製


 

自訂內容

  在僅有縮圖的基礎上,新增了一個div名為「caption「的容器,在這個容器中放置其他內容,例如標題,文字描述,按鈕等待

.thumbnail .caption {
  padding: 9px;
  color: #333;
}
登入後複製
<div class="container"><div class="row"><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a><div class="caption"><h3>小火柴的蓝色理想</h3><p>好的代码像粥一样,都是用时间熬出来的</p><p><a href="##" class="btn btn-primary">确认</a><a href="##" class="btn btn-info">取消</a></p></div> </div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a><div class="caption"><h3>小火柴的蓝色理想</h3><p>好的代码像粥一样,都是用时间熬出来的</p><p><a href="##" class="btn btn-primary">确认</a><a href="##" class="btn btn-info">取消</a></p></div> </div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a><div class="caption"><h3>小火柴的蓝色理想</h3><p>好的代码像粥一样,都是用时间熬出来的</p><p><a href="##" class="btn btn-primary">确认</a><a href="##" class="btn btn-info">取消</a></p></div> </div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a><div class="caption"><h3>小火柴的蓝色理想</h3><p>好的代码像粥一样,都是用时间熬出来的</p><p><a href="##" class="btn btn-primary">确认</a><a href="##" class="btn btn-info">取消</a></p></div> </div>                </div></div>
登入後複製


## 

 

#

以上是Bootstrap縮圖的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板