Bootstrap 3 基礎css樣式——圖片以及容器
阿新 • • 發佈:2018-12-26
一.響應式圖片 img-responsive類
先看一下img-responsive類包含了哪些東西
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
display: block; 把圖片變為塊級元素
height: auto; 相關元素的高取決於瀏覽器
max-width: 100%; 最大寬度為圖片寬度
舉個例子:
<div style="width:1000px; height:400px; border:1px black solid;"> <img src="images/img2.jpg" class="img-responsive"> </div>
這張圖片的寬度為860px,div寬度為1000px
如果把div寬度改為600px
<div style="width:600px; height:400px; border:1px black solid;">
<img src="images/img2.jpg" class="img-responsive">
</div>
如果想要讓使用了 .img-responsive 類的圖片水平居中,請使用 .center-block 類,不要用 .text-center。
<div style="width:1000px; height:400px; border:1px black solid;"> <img src="images/img2.jpg" class="img-responsive center-block"> </div>
二.佈局容器 container、container-fluid
container類 用於固定寬度並支援響應式佈局的容器,container 的左右外邊距
交由瀏覽器決定
0-768px以上寬度container為100%
768-992px以上寬度container為750px
992-1200px以上寬度container為970px
1200px以上寬度container為1170px
container類是非常有用的,它等價於建立了一個具有靜態寬度並且margin值為auto的一個居中的div框
container-fluid 用於 100% 寬度,佔據全部視口(viewport)的容器
<div style="border:1px blue solid; height:320px;" class="container-fluid">
<div style="border:1px red solid; height:320px;" class="container">
<img src="images/img2.jpg" class="img-responsive center-block">
</div>
</div>
當頁面縮放時: