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)); //-15px
margin-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和right
min-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插件里面有些可以单独设置参数
4.
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.编码函数化
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
