Bootstrap（2）

栅格系统

栅格系统（grid systems），也被翻译为“网络系统”，运用固定的格子设计版面布局，其风格工整简洁。

网页栅格系统：以规则的网络阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性，而且对于前端开发来说，网页将更加的灵活与规范。

在 h5的项目中，我们做移动端的项目，有一份非常重要的 meta ，用于设置屏幕和设备等一款及时运行用户缩放以及缩放比例的问题：

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
// 分别为：定义窗口 屏幕宽度和设备一致 初始缩放比例 最大缩放比例 禁止用户缩放

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者 .container-fluid 容器，由于 padding等属性的原因，这两种容器不能互相嵌套。

固定宽度：

// 最大为 1170px
<div class=’container’></div>
//100%宽度
<div class=’container-fluid’></div>

栅格系统中，浏览器随着屏幕的大小的增减自动分配最多12列，通过一系列行（row）和列（column）的组合来创建页面布局，工作原理如下：

• 行必须包含在 .container或.container-fluid中，方便给合适的排列aligment和內补padding
• 通过行在水平方向创建一组列col
• 内容放在列内，并且只有列可以作为行的直接子元素
• 类似.row和.col-xs-4的这种预定义的类，可以用来快速创建栅格布局
• 通过为列设置padding属性，从而创建列于列之间的间隔gutter，通过为 .row元素设置负值 margin 从而抵消为 .container 元素设置的 padding，间接为行包含的列抵消掉了padding
• 在栅格列中的内容排成一行
• 如果一行中包含的列大于12，多余的列所在的元素将被作为一个整体另起一行来排列
• 栅格系统中的列是通过指定1到12的值来表示其跨域的范围，例如三个等宽的列可以使用三个 .col-xs-4来创建
• 栅格类使用与屏幕宽度大于或者等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类，因此在元素上应用任何 .col-md-* 栅格类使用于与屏幕宽度大于或者等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备

1）响应式布局

2）栅格参数

栅格系统最外层区分了四种宽度的浏览器：

• 超小屏（<768px）
• 小屏（>=768px）
• 中屏（>=992px）
• 大屏（>=1200px）

而内层，container容器的自适应宽度为：自动750px，970px，1170px，自动的意思为：如果你是手机屏幕，则全面独占一行显示

3个常用的技术点：

• 列偏移：假设一行两列分别占有5，6，有让中间保持空隙，向两边靠：

• 嵌套：嵌套遵循把父亲当作12份
• 移动：push，向右移动

pull，向左移动

例如：不同屏幕大小，盒子所占份数

3）辅助类

----情景文本颜色
<p class=’text-muted’>我是柔和灰</p>
.text-muted 柔和灰
.text-primary 主要蓝
.text-success 成功绿
.text-info 信息蓝
.text-warning 警告黄
.text-danger 危险红


----情景背景颜色
.bg-primary 主要蓝
.bg-success  成功绿
.bg-info 信息蓝
.bg-warning  警告黄
.bg-danger 危险红

----关闭按钮
以前的关闭按钮我们内容总是用X 表示,这样展示出来的效果其实不好因为x这个字母在不同的设备下渲染的效果不一样,bootstrap给我们提供了一个用 &timers; 表示
<button class=’close’> &timers;</button> // .cose表示真正的关闭按钮(做了效果)

----三角符号
<span class=’caret’></span> 

----快速浮动
<div class=’pull-left’>左边</div>
<div class=’pull-right’>右边</div>
// 底层就是float,只不过使用了!important加强了优先级

----清除浮动
<div class=’clearfix’><div>
// 这个div只需要放在需要清理浮动的区块的前面即可(比我们自己写的兼容性好)
<div class="pull-right" style='width:100px; height:100px; background:red;'>1</div>
<div class='clearfix'></div>
<div style='width:100px; background-color:blue'>2</div> 

----块级居中
<div class=’center-block’>居中</div>
//就是设置了margin:x auto,并且设置了display:block 

----显示和隐藏
<div class=’show’>显示</div>
<div class='hidden'>你看不见我</div>

4）响应式工具

在媒体查询时，针对不同屏幕大小，有时需要显示和隐藏部分内容，响应式工具提供了下面的一些解决方案：

<div class=’visible-xs-block’>超小屏的时候显示成区块</div>
<div class=’visible-md-inline’>中屏的时候显示成内联</div>
<div class=’hidden-xs’>用超小屏看就不到我的容颜勒</div>