bootstrap css样式（一）

基本的全局显示
使用 body {margin: 0;} 来移除 body 的边距

---

网格系统
1、添加<div class="container">...</div> 元素，确保居中和最大宽度。
2、一旦添加了容器，接下来需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md-6"></div>。
3、网格中的每一行是由 12 个单元组成的，您可以使用这些单元定义列的尺寸。但要确保总和总是 12。
比如<div class="col-md-3"></div>和 <div class="col-md-9"></div> 3+9=12
或 <div class="col-md-7"></div> 和<div class="col-md-5"></div>7+5=12。

---

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

通过添加 class =”img-responsive”可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

这个class包含这些属性：

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

（1）把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下可以为其设置宽度和高度。
（2）设置 height:auto，相关元素的高度取决于浏览器。
（3）设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

---

媒体查询
超小设备（手机，小于 768px）： Bootstrap 中默认情况下没有媒体查询
小型设备（平板电脑，768px 起） ：@media (min-width: @screen-sm-min) { … }
中型设备（台式电脑，992px 起）：@media (min-width: @screen-md-min) { … }
大型设备（大台式电脑，1200px 起）：@media (min-width: @screen-lg-min) { … }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }

-	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

如下：
适应手机、平板电脑、台式电脑
（1）在手机上，它将是左边 25% 右边 75% 的布局（sm）
（2）在平板电脑上，它将是 50%/50% 的布局。（md）
（3）在大型视口的设备上，它将是 33%/66% 的布局。（lg）

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>