一.響應式圖片 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>

當頁面縮放時：