首頁 >web前端 >Bootstrap教程 >bootstrap怎麼實現圓角

bootstrap怎麼實現圓角

(*-*)浩
(*-*)浩原創
2019-07-11 09:58:254316瀏覽

Bootstrap提供了四種用於<img alt="bootstrap怎麼實現圓角" >類別的樣式,分別是:

bootstrap怎麼實現圓角

# #.img-rounded:圓角(IE8 不支援),加入border-radius:6px 來獲得圖片圓角;(建議學習:Bootstrap影片教學

. img-circle:圓形(IE8 不支援),增加border-radius:50% 來讓整個圖片變成圓形。

.img-thumbnail:縮圖功能,加入一些內邊距(padding)和一個灰色的邊框。

.img-responsive:圖片響應式 (將很好地擴展到父元素)。

使用:

將類別樣式直接加入class即可:

<img  alt="bootstrap怎麼實現圓角" >
效果如下:

bootstrap怎麼實現圓角

從圖中可以看到使用各種樣式得到的效果,處理起圖片來非常的簡單方便。

更多Bootstrap相關技術文章,請造訪

Bootstrap教學欄位進行學習!

以上是bootstrap怎麼實現圓角的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn