Bootstrap實(shí)現(xiàn)圓角、圓形頭像和響應(yīng)式圖片
Bootstrap提供了四種用于<img>類的樣式,分別是:
.img-rounded:圓角 (IE8 不支持),添加 border-radius:6px 來獲得圖片圓角;
.img-circle:圓形 (IE8 不支持),添加 border-radius:50% 來讓整個圖片變成圓形。
.img-thumbnail:縮略圖功能,添加一些內(nèi)邊距(padding)和一個灰色的邊框。
.img-responsive:圖片響應(yīng)式 (將很好地擴(kuò)展到父元素)。
使用:
將類樣式直接添加到class中即可:
<img class="img-circle" src="img.jpg" alt="頭像"/>
效果如下:
從圖中可以看到使用各種樣式得到的效果,處理起圖片來非常的簡單方便。有時候根據(jù)需要,比如我們需要用一個具有內(nèi)邊距和灰色邊框的圓形頭像時,可以將circle和thumbnail兩個樣式疊加使用,效果如上圖circle thumbnail所示。
img-responsive使得我們的圖片具有響應(yīng)式的效果。所謂響應(yīng)式,就是變化的,隨著某一個元素的變化而變化,從而實(shí)現(xiàn)自適應(yīng)的效果。
上圖中的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>
在這里我們沒有設(shè)置圖片的大小,但是設(shè)置了包裹他的元素figure 的大小,無論figure為150px*150px或者100px*100px,圖片都能夠很好的擴(kuò)展到父元素figure。
本文參考來自:http://www.runoob.com/bootstrap/bootstrap-images.html
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果(在小屏幕、手機(jī)屏幕瀏覽時自動折疊隱藏)
- 20分鐘成功編寫bootstrap響應(yīng)式頁面 就這么簡單
- Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版
- 談一談bootstrap響應(yīng)式布局
- BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- 利用ASP.NET MVC和Bootstrap快速搭建響應(yīng)式個人博客站(一)
- bootstrap響應(yīng)式工具使用詳解
相關(guān)文章
基于bootstrap寫的一點(diǎn)localStorage本地儲存
這篇文章主要介紹了基于bootstrap寫的一點(diǎn)localStorage本地儲存,需要的朋友可以參考下2017-11-11javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12原生js canvas實(shí)現(xiàn)鼠標(biāo)跟隨效果
這篇文章主要為大家詳細(xì)介紹了原生js canvas實(shí)現(xiàn)鼠標(biāo)跟隨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08探索JavaScript函數(shù)的無限可能(函數(shù)基本概念)
JavaScript中的函數(shù)是一種重要的編程概念,它允許我們封裝可重用的代碼塊,并在需要時進(jìn)行調(diào)用,本文將深入介紹JavaScript函數(shù)的各個方面,包括函數(shù)定義和調(diào)用、參數(shù)和返回值、作用域和閉包、高階函數(shù)以及常見的函數(shù)應(yīng)用場景,感興趣的朋友一起看看吧2023-08-08javascript html5搖一搖功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript html5搖一搖功能的實(shí)現(xiàn)過程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-04-04