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是为了清除浮动，至于为什么要清楚浮动和怎样清楚浮动，可以参考这里：链接
- 实现方式：
- 利用float：left属性，控制子元素的浮动、挤压、排列。
- 利用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中属于块级作用域，延迟加载
