Bootstrap實現(xiàn)圓角、圓形頭像和響應式圖片
Bootstrap提供了四種用于<img>類的樣式，分別是：
.img-rounded：圓角 (IE8 不支持)，添加 border-radius:6px 來獲得圖片圓角；
.img-circle：圓形 (IE8 不支持)，添加 border-radius:50% 來讓整個圖片變成圓形。
.img-thumbnail：縮略圖功能，添加一些內(nèi)邊距（padding）和一個灰色的邊框。
.img-responsive：圖片響應式 (將很好地擴展到父元素)。
使用：
將類樣式直接添加到class中即可：
<img class="img-circle" src="img.jpg" alt="頭像"/>
效果如下：
從圖中可以看到使用各種樣式得到的效果，處理起圖片來非常的簡單方便。有時候根據(jù)需要，比如我們需要用一個具有內(nèi)邊距和灰色邊框的圓形頭像時，可以將circle和thumbnail兩個樣式疊加使用，效果如上圖circle thumbnail所示。
img-responsive使得我們的圖片具有響應式的效果。所謂響應式，就是變化的，隨著某一個元素的變化而變化，從而實現(xiàn)自適應的效果。
上圖中的responsive兩個圖片代碼如下：
<figure style="width: 150px;height: 150px;"> <figcaption>responsive(150*150)</figcaption> <img class="img-responsive " src="img.jpg" alt="頭像"/> </figure> <figure style="width: 100px;height: 100px;"> <figcaption>responsive(100*100)</figcaption> <img class="img-responsive " src="img.jpg" alt="頭像"/> </figure>
在這里我們沒有設置圖片的大小，但是設置了包裹他的元素figure 的大小，無論figure為150px*150px或者100px*100px，圖片都能夠很好的擴展到父元素figure。
本文參考來自：http://www.runoob.com/bootstrap/bootstrap-images.html
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在ES6之前我們都使用單引號或者雙引號來包裹字符串,當我們想要在字符串中加入變量時,不能直接寫在字符串里,而是需要通過字符串拼接的方式來往字符串中加入變量,這篇文章主要給大家介紹了關于JavaScript模板字符串用法的相關資料,需要的朋友可以參考下2022-11-11
基于bootstrap寫的一點localStorage本地儲存
這篇文章主要介紹了基于bootstrap寫的一點localStorage本地儲存,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了JS中frameset框架彈出層實例代碼 的相關資料,需要的朋友可以參考下2016-04-04
javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了原生js canvas實現(xiàn)鼠標跟隨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
探索JavaScript函數(shù)的無限可能(函數(shù)基本概念)
JavaScript中的函數(shù)是一種重要的編程概念，它允許我們封裝可重用的代碼塊，并在需要時進行調(diào)用，本文將深入介紹JavaScript函數(shù)的各個方面，包括函數(shù)定義和調(diào)用、參數(shù)和返回值、作用域和閉包、高階函數(shù)以及常見的函數(shù)應用場景，感興趣的朋友一起看看吧2023-08-08
javascript html5搖一搖功能的實現(xiàn)
這篇文章主要為大家詳細介紹了javascript html5搖一搖功能的實現(xiàn)過程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
其實javascript本身是具有原生拖放功能的，但是由于兼容性問題，以及功能實現(xiàn)的方式，用的不是很廣泛。javascript動畫廣泛使用的還是模擬拖拽。本文將詳細介紹javascript的模擬拖拽，有需要的可以參考借鑒。2016-09-09
這篇文章主要為大家詳細介紹了微信小程序頁面生命周期的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
在網(wǎng)頁中JS函數(shù)自動執(zhí)行常用三種方法，下面為大家詳細介紹下JS取request值以及自動執(zhí)行使用,需要的朋友可以參考下2014-02-02