BootStrap浅析

标签：

BootStrap

- 框架的目的：为了更容易的完成网页的开发
- 在线网站：v3.bootcss.com

- 栅格式布局法
- 是基于Jquery的
- 不是固定的960宽，自己设置的宽然后软件会自动计算
- 只有12列
- 主要用在，没有设计经验又想开发网页的时候。在像素级还原方面不是很好用。

- 自带响应式
- 手机一般不会有横向导航条，被换成了一个按钮，点击后显示导航。
- 导入文件，一般提供一个文件提供了了2个。一般用都用带MIN的。没带min的是方便看。
- 功能一样，没差别。
- 带min，把代码里面的换行空格取消了，减少文件大小，提升加载速度。没带MIN和平时用的没什么差别。

- 有一个js.2个css是必须导入的。
- 还有一句兼容IE的话要加入： （但不是加了就一定没兼容）
- 兼容浏览器的文件一定要放在hesd中。
- 一句要做移动端的时候要加入：
- 禁用响应式：
- 固定页面宽度。在class="container"（系统自带的。容器）中
#####width:1000px ！important;//这个最高级。会覆盖系统设置的。
- 默认的container是不用设置宽度的。因为是响应式，宽度会变动。

- 国内很少弄的有响应式，一般一个pc端一个移动端，分开做。

- 用bootstrap做网页，先设置row（行）、class="row header",调用的时候.header{...}
- row必须写在container中。
- 列(col)

> <div class="container">
> <div class="row header"第一行
> <div class="col-xs-1 c1"></div>//调用: .c1{...}
> <div class="col-xs-1 col-xs-push-6 c2"></div>//push方法，推后6个
> <div class="col-xs-11 c3"></div>//哪个xs表示超小屏幕。9表示占9格。
> </div>
<div class="row">//要进入第2行
<div class="col-xs-6 c4">//占6格。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="row">//要进入第3行
<div class="col-xs-6 c6">//占6格。</div>
</div>
</div>

- 为不同的屏幕设置列：
- xs：超小屏幕（<768）手机
- sm：小屏幕（768-900）平板
- md:中等屏幕（900-）一般电脑
- lg：超大屏幕（>1200）

- 推动：
- push-数字：推几格，不会影响别的
- pull-数字：拉几格，不会影响别的
- offset-数字：推几个，会影响后面的被也推动。

- container不能嵌套，row能嵌套。
- 设置的col-.... 这样的格子不能用maigin来移动位置等来居中。但是里面套用的东西可以用margin,padding来。比如上面的lu,li
- 这个软件的间距都是30px

- ps的插件：GuideGuide

负边距
圣杯布局（在负边距的理念之上的。）
960栅格式
12列（960的宽划为12格。每个格子与格子的间距20px,每格60--3、6、3...）
16列（每格40----）
24列（间距：10px,每格30-----）

BootStrap浅析

标签：

原文地址：http://www.cnblogs.com/Rt-long/p/4865782.html