」直接加入class即可。"/> 」直接加入class即可。">
首頁 >web前端 >Bootstrap教程 >bootstrap如何實現圓角
bootstrap實現圓角的方法:先開啟對應的程式碼檔案;然後將類別樣式「
”直接加入class即可。
推薦:《bootstrap教學》
本教學操作環境:windows10系統、bootstrap3.0版,該方法適用於所有品牌電腦。
Bootstrap實作圓角、圓形頭像和響應式圖片
Bootstrap提供了四種用於<img class="img-circle lazy" src="/static/imghwm/default1.png" data-src="img.jpg" alt="bootstrap如何實現圓角" >類別的樣式,分別是:
.img-rounded:圓角(IE8 不支援),加入border-radius:6px 來獲得圖片圓角;
<img class="img-circle lazy" src="/static/imghwm/default1.png" data-src="img.jpg" alt="bootstrap如何實現圓角" >效果如下:
img-responsive使得我們的圖片具有響應式的效果。所謂響應式,就是變化的,隨著某一個元素的變化而變化,進而達到自適應的效果。
<figure style="width: 150px;height: 150px;"> <figcaption>responsive(150*150)</figcaption> <img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="img.jpg" alt="头像"/> </figure> <figure style="width: 100px;height: 100px;"> <figcaption>responsive(100*100)</figcaption> <img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="img.jpg" alt="头像"/> </figure>在這裡我們沒有設定圖片的大小,但是設定了包裹他的元素figure 的大小,無論figure為150px*150px或100px*100px,圖片都能夠很好的擴展到父元素figure。
以上是bootstrap如何實現圓角的詳細內容。更多資訊請關注PHP中文網其他相關文章!