Bootstrap(2)

Bootstrap（栅格系统，布局容器）

1、栅格系统：

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

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

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

//分别为：定义窗口屏幕宽度和设备一致初始缩放比例最大缩放比例禁止用户缩放

2、布局容器：

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

固定宽度：

// 最大为 1170px

//100%宽度

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

1) 行必须包含在 .container或.container-fluid中，方便给合适的排列aligment和內补padding

2) 通过行在水平方向创建一组列col

3) 内容放在列内，并且只有列可以作为行的直接子元素

4) 类似.row和.col-xs-4的这种预定义的类，可以用来快速创建栅格布局

5) 通过为列设置padding属性，从而创建列于列之间的间隔gutter，通过为 .row元素设置负值 margin 从而抵消为 .container 元素设置的 padding，间接为行包含的列抵消掉了padding

6) 在栅格列中的内容排成一行

7)如果一行中包含的列大于12，多余的列所在的元素将被作为一个整体另起一行来排列

8)栅格系统中的列是通过指定1到12的值来表示其跨域的范围，例如三个等宽的列可以使用三个 .col-xs-4来创建

9)栅格类使用与屏幕宽度大于或者等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类，因此在元素上应用任何 .col-md-* 栅格类使用于与屏幕宽度大于或者等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备

3、响应式布局：

4、栅格参数：

栅格系统最外层区分了四种宽度的浏览器：超小屏（<768px），小屏（>=768px），中屏（>=992px），大屏（>=1200px）。而内层，container容器的自适应宽度为：自动750px，970px，1170px，自动的意思为：如果你是手机屏幕，则全面独占一行显示

3个常用的技术点：

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

2）嵌套：嵌套遵循把父亲当作12份

3）移动：push，向右移动

pull，向左移动

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

5、辅助类：

----情景文本颜色

.text-muted 柔和灰

.text-primary 主要蓝

.text-success 成功绿

.text-info 信息蓝

.text-warning 警告黄

.text-danger 危险红

<p class=’text-muted ’>我是柔和灰</p>

----情景背景颜色

.bg-primary 主要蓝

.bg-success 成功绿

.bg-info 信息蓝

.bg-warning 警告黄

.bg-danger 危险红

----关闭按钮

以前的关闭按钮我们内容总是用X 表示,这样展示出来的效果其实不好因为x这个字母在不同的设备下渲染的效果不一样,bootstrap给我们提供了一个用 &timers; 表示

<button class=’close’> &timers;</button> // .cose表示真正的关闭按钮(做了效果)

----三角符号

----快速浮动

// 底层就是float,只不过使用了!important加强了优先级

----清除浮动

// 这个div只需要放在需要清理浮动的区块的前面即可(比我们自己写的兼容性好)

----块级居中

//就是设置了margin:x auto,并且设置了display:block

----显示和隐藏

<div class='hidden'>你看不见我</div>

6、响应式工具：

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

<div class=’visible-xs-block’>超小屏的时候显示成区块</div>

<div class=’visible-md-inline’>中屏的时候显示成内联</div>

<div class=’hidden-xs’>用超小屏看就不到我的容颜勒</div>

相关推荐