Bootstrap教程

容器：

1、流体容器 class=“container-fluid”

2、固定容器 class=“container”

阈值 width

大于等于1200（lg 大屏pc） 1170（1140+槽宽）

大于等于992小于1200（md 中屏pc） 970（940+槽宽）

大于等于768小于992（sm 平板） 750（720+槽宽）

小于768 （xs 移动手机） auto(相当于流体容器)

3、栅格系统 class=“row”

一行十二块，要合理拆分

4、源码分析

1. 栅格 grid.less 所有变量存储在 variables.less

        margin-right: auto;margin-left: auto;padding-left:  floor((@gutter / 2));  // 向下取整padding-right: ceil((@gutter / 2));   // 向上取整

2. 固定容器特定样式必须从小到大排，一次次覆盖顺序不可变

        @media (min-width: @screen-sm-min) {width: @container-sm;}@media (min-width: @screen-md-min) {width: @container-md;}@media (min-width: @screen-lg-min) {width: @container-lg;

3. 行

        margin-left:  ceil((@gutter / -2));  //-15pxmargin-right: floor((@gutter / -2));  //-15px

4. 列

运用less的递归：自己调用自己，变量数一样移动端最小的优先，如果定义里面有lg，md等，页面变小的话，lg不适用的话，会变成md适用，自动改成适用的。

    列的第一个混合：  .make-grid-columns() {.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,....col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position: relative;   // 用来列排序，后面改变了left和rightmin-height: 1px;padding-left: 15px;padding-right: 15px;}列第二步：.make-grid(@class) {//2.1.float-grid-columns(@class);* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{*     float: left;//2.2.loop-grid-columns(@grid-columns, @class, width);* .col-xs-12{*     width:12/12;* }* .col-xs-11{*     width:11/12;* }* ...* .col-xs-1{*     width:1/12;* } //2.2（width） 2.3（pull push） 2.4（offset）的入口.loop-grid-columns(@index, @class, @type) when (@index >= 0) {.calc-grid-column(@index, @class, @type);.loop-grid-columns((@index - 1), @class, @type);}//2.3(列排序).loop-grid-columns(@grid-columns, @class, pull);.loop-grid-columns(@grid-columns, @class, push);/*push                  pull:* .col-xs-push-12{         .col-xs-pull-12{*     left:12/12;              right:12/12;* }                        }* .col-xs-push-11{*     left:11/12;* }* ...                      ...* .col-xs-push-1{*     left:1/12;* }* .col-xs-push-0{           .col-xs-pull-0{*     left:auto;               right:auto;* }                         }* */    //2.4(列偏移).loop-grid-columns(@grid-columns, @class, offset);}* .col-xs-offset-12{*     margin-left:12/12;* }* .col-xs-offset-11{*     margin-left:11/12;* }* ...* .col-xs-offset-1{*     margin-left:1/12;* }* .col-xs-offset-0{*     margin-left:0;* }* */

5、栅格实例

响应式布局：一套代码布局，适用三个端，pc，平板，手机端

        <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

 <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0  col-sm-6 col-sm-pull-6">

每个行列顺序都要有，pull-0 都要留

        .clearfix {.clearfix();}

6、栅格盒模型设计的精妙之处

容器上两边具有15px的padding ：为了适应行开始设置的-15px的padding，-15px会比原来的大

行两边具有-15px的margin ：为了防止出现列里面再套行时所产生的槽宽不等现象

列两边具有15px的padding ：为了维护槽宽的规则，列两边必须有15px 的padding

7、Bootstrap实例

1.复制 bootstrap里面的入门的基本模板，构建初始页面

2.复制粘贴

3.有全局css样式、组件、还有 JavaScript插件，JavaScript插件里面有些可以单独设置参数

5. a 标签引用JavaScript

标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。

a中调用js函数的方法总结

- a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"
- a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"
- a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"
- a href="javascript:js_method();" rel="external nofollow" rel="external nofollow"

8、less 的补充复习

1.less的继承

#test{

&:extend(.father)

} 或者

#test:extend(.father){

} 建议用第一种

继承实质上将.father选择器和#test组合成一个选择器，声明块使用.father的

all:继承所有和.father相关的声明块

切记父类不能定义成混合（继承不灵活性能搞混合灵活性能低）

2. less 的避免编译：

~“不会被编译的内容”

变量在less中属于块级作用域，延迟加载

3.bootstrap栅格系统&源码分析

流体容器： width：auto auto跟100%的区别，如果加了padding会有点区别

固定容器：阈值 xs，sm，md，lg

行：两侧-15px margin

列：公共样式两侧有15px的padding 相对定位

：float width：1~12 left right ：0~12 0：auto

9、bootstrap定制化

办公自动化（Office Automation，简称OA）OA系统

to b to business to c to customer

B/S（browser/server） C/S(client/server)

不改源码，更改参数方法：

新建一个less文件，最后编译成css之后，引用该css文件

         @import  “../less/bootstrap.less”  // 引入源码文件@grid-gutter-width:200px    // 要修改的参数以及对应的值

jQuery四大特征： //1.链式调用 2.读写二合一 3.隐式迭代 4.编码函数化