Bootstrap CSS佈局之影象

NO IMAGE

本文大家分享了Bootstrap CSS佈局之影象,供大家參考,具體內容如下

img-rounded、img-circle、img-thumbnail(縮放圖模式)


//原始碼
img {
vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
//縮圖模式
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

Bootstrap CSS佈局之按鈕Bootstrap CSS佈局之表單Bootstrap CSS佈局之表格Bootstrap CSS佈局之程式碼Bootstrap CSS佈局之列表Bootstrap每天必學之柵格系統(佈局)bootstrap佈局中input輸入框右側圖示點選功能值得分享的最全面Bootstrap快速人門案例值得分享和收藏的Bootstrap學習教程