bootstrap 入门

响应式布局

• 概念：对不同屏幕尺寸做出响应，并进行相应布局
• 原理：使用媒体查询设置不同的断点，进行不同css布局响应
• 优点：一个网站可以兼容多种终端，不需要重复开发
• 缺点：工作量大、代码累赘、加载时间长、效率低、冗余代码较多
• 适用场景：结构比较简单，展示型网站
• 不适用场景：交互较多，功能性的网站不适用

容器

1.流体容器

• width: auto // 注意 auto 和 100% 的区别
• 两侧15px padding

2.固定容器

屏幕大小 (设置断点)	width
xs（小于768px）	width：auto
sm（大于等于768px）	width：720+槽宽(15px + 15px)
md（大于等于992px）	width：940+槽宽(15px + 15px)
lg（大于等于1200）	width：1140+槽宽(15px + 15px)

两侧15px padding

3.栅格系统

• 栅格是响应式布局的一种实现方式
• 将页面栅格化
• 一般将水平划分为12列，根据媒体查询监听缩放，决定元素占用几列
• container提供容器
• row是为了清除浮动，至于为什么要清楚浮动和怎样清楚浮动，可以参考这里：链接
• 实现方式：
  1. 利用float：left属性，控制子元素的浮动、挤压、排列。
  2. 利用flex布局，实现主轴wrap挤压换行排列

//示例调用代码
<div class="container">
    <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">2</div>
        <div class="col-1">3</div>
        <div class="col-1">4</div>
        <div class="col-1">5</div>
        <div class="col-1">6</div>
        <div class="col-1">7</div>
        <div class="col-1">8</div>
        <div class="col-1">9</div>
        <div class="col-1">10</div>
        <div class="col-1">11</div>
        <div class="col-1">12</div>
    </div>
</div>

a.行

​ 两侧 -15px margin

b.列

​ 公共样式
​ 两侧有 15px 的padding
​ 相对定位
​ float

​ width
​ 1~12

​ 列排序：

​ left (push)
​ right (pull)
​ 0~12
​ 0：auto

​ 列偏移:
​ margin-left (offset)
​ 0~12

注意：阈值上样式的设置不能跳跃

栅格源码分析

1.流体容器&固定容器 公共样式

margin-right: auto;
margin-left: auto;
padding-left:  15px;
padding-right: 15px;	

​

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:  -15px;
margin-right: -15px;

4.列

/*
.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;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
.make-grid(xs)--->
*/

float-grid-columns(@class);

/*
* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
    *     float: left;
    * }
.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;
    * } 
*/

.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;
    * }                         }
*/

.loop-grid-columns(@grid-columns, @class, offset);

响应式工具

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  .responsive-invisibility();
}
...

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

容器两边具有15px的padding 、
行 两边具有-15px的margin
列 两边具有15px的padding
​

为了维护槽宽的规则，
列两边必须得要15px的padding

为了能使列嵌套行
行两边必须要有-15px的margin

为了让容器可以包裹住行
容器两边必须要有15px的padding

less的继承

#test{
    &:extend(.father)
}
#test:extend(.father){
}

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

all: 继承所有和.father相关的声明块
切记父类不能定义成混合（继承的灵活性能高，混合灵活性能低）

less的避免编译

​ ~"不会被编译的内容"
​ 变量在less中属于块级作用域，延迟加载

bootstrap实例