bootstrap 随笔

1.响应式图像,给图片加上 class=img-responsive,

<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

这表明相关的图像呈现为 block。当您把元素的 display 属性设置为 block，以块级元素显示。

设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

---

2.容器（Container）

<div class="container">
    ...
</div>

---

3.Bootstrap 网格系统 row

必须在 contianer下,然后直接子元素是row,然后下面是 .col-xx-

超小设备	<768px	手机	.col-xs-
小设备	768px 起	平板电脑	.col-sm-
中设备	992px 起	台式电脑	.col-md-
大型设备	1200px 起	大台式电脑	.col-lg-