title: bootstrap之栅格系统date: 2016-06-06 22:37:43tags:
- bootstrap 基础- bootstrap 栅格
接着之前的bootstrap基础部分继续，今天这里主要是关于bootstrap中栅格系统，其实bootstrap主要是应用与响应式的，说到响应式大家都会想到媒体查询@media:没错这里的关键点那就是媒体查询@media（废话不多说了，直接进入正题）；
媒体查询 阈值（注意：例子中阈值都为默认值）首先我们要知道bootstrap为我们提供了一套完整的流体栅格系统，而且随这屏幕或者视扣尺寸的增加，系统会制动分成最多12列 记住最多12列，当然有人会问多出了怎么办？别急下面且看我给您慢慢道来： 首先了解一下bootstrap媒体查询的阈值来跟我念 yu值 第三声 ，不是阀(fa)值，哈哈哈~~~,
/* 小屏幕（平板，大于等于 768px） */@media (min-width: @screen-sm-min) { ... }/* 中等屏幕（桌面显示器，大于等于 992px） */@media (min-width: @screen-md-min) { ... }/* 大屏幕（大桌面显示器，大于等于 1200px） */@media (min-width: @screen-lg-min) { ... } 上面的这些值得范围我们都是可以修改的，当这个范围达不到我们的需求时我们自己可以通过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) { ... } 下面是一些详细的参数 （这里就偷一下懒，刷了张图）
Mou icon
实际例子：
呈现的效果就是当视口大于等于992px时就会水平排列，这里大家稍微注意一下就是所有"列"必须放在 .row内，向下面这样：
.col-md-1{ background-color: #f1f1f1; border:1px solid #1a2b3c;}.col-md-4{ background-color: #f1f1f1; border:1px solid #1a2b3c;}.col-md-6{ background-color: #f1f1f1; border:1px solid #1a2b3c;}.col-md-8{ background-color: #f1f1f1; border:1px solid #1a2b3c;}
.col-md-1
查看更多关于bootstrap之栅格系统_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did115101