看完我的笔记不懂也会懂----bootstrap
Bootstrap笔记
写在开始： 由于我对AngulaJS的学习只是一个最浅显的过程,所以看完后你大概只能学会如何简单的使用AngularJs，所以我对我的标题党行为道歉啦,嘿嘿
知识点扫盲
padding 在 width:auto 与 width:100%中的状况:
- 在width: auto;中加padding会在width的 里面加 (在盒子里面)
- 在width: 100%;中加padding会在width的 外面加 最后有可能超出外部容器
容器
-
液体容器
-
// clearfix清除浮动 width: auto; box-sizing: border-box; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto;Less源代码
// 让液体容器清除浮动 .container-fluid:before, .container-fluid:after{ content: " "; display: table; } .container:after{ clear: both; } // 液体容器总代码 .container-fluid{ margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
-
-
固定容器
- 阈值
-
当大于1200px时,设置页面宽度为1170px
// 此处为clearfix清除浮动的样式 // 此处为容器公共样式 box-sizing: border-box; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; //当小于768时,设置页面宽度为auto @media (max-width:768px){ width : auto; } //当大于768px 小于992时,设置页面宽度为750px @media (min-width:768px){ width : 750px; } //当大于992px 小于1200时,设置页面宽度为970px @media (min-width:992px){ width : 970px; } //当大于1200px,设置页面宽度为1170px @media (min-width:1200px){ width : 1170px; } -
Less源代码
// 让固定容器清除浮动 .container:before, .container:after{ content: " "; display: table; } .container:after{ clear: both; } // 固定容器总代码 .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; // 用于媒体查询(响应式)的阈值 移动设备优先 顺序不能打乱! //max-width: @screen-sm-min ==> max-width: 768px ==> 手机移动端 // 手机移动端 @media (max-width: 768px){ width: auto; } //平板 @media (min-width: 768px) { width: 750px; //width: 720px+槽宽(30px) } //普通显示器 @media (min-width: 992px) { width: 970px; //width: 940px+槽宽(30px) } //大屏显示器 @media (min-width: 1200px) { width: 1170px; //width: 1140px+槽宽(30px) } }
-
栅格系统
-
代码示例 ======> 使用栅格的方式
<!-- 外部有容器包裹 --> <!-- 可以是液体容器也可以是固定容器 --> <div class="container"> <!-- 容器里面先定义行 --> <div class="row"> <!-- 12列占满固定容器 --> <!-- 默认为12列 --> <div class="col-lg-10">col-lg-10</div> <div class="col-lg-2">col-lg-2</div> </div> </div>
源码分析部分
外部容器
-
流体容器最后总样式
// clearfix清除浮动 box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; -
固定容器最后总样式
// clearfix清除浮动 width: auto; box-sizing: border-box; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; //当小于768时,设置页面宽度为auto @media (max-width:768px){ width : auto; } //当大于768px 小于992时,设置页面宽度为750px @media (min-width:768px){ width : 750px; } //当大于992px 小于1200时,设置页面宽度为970px @media (min-width:992px){ width : 970px; } //当大于1200px,设置页面宽度为1170px @media (min-width:1200px){ width : 1170px; } ``` -
行
margin-left: -15px; margin-right: -15px;less源代码
.row { .make-row(); } .make-row(@gutter: @grid-gutter-width) { margin-left: ceil((@gutter / -2)); margin-right: floor((@gutter / -2)); } -
列
-
第一步：所做工作:
.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; }less源代码
// 所有尺寸的网格列（宽度1至12）的通用样式 .make-grid-columns() { .col(@index) { // 初始化 @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); } //递归函数 .col(@index, @list) when (@index =< @grid-columns) { @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { @{list} { position: relative; // 防止列在空时塌陷(至少保持有1px的高度) min-height: 1px; // 给予内边距用于排版 padding-left: 15px; padding-right: 15px; } } .col(1); // 启动程序(递归) }上述代码的js实现
var gc = 12; var item = []; //执行一个函数 mgc(); function mgc(){ //这个函数里面 调用一个函数 col(1); //启动递归整体 function col(index){ //里面的函数 再次调用一个函数 var str = 'col-xs-' + index; item.push(str); index++; col2(index,item); function col2(index, item){ //当index > gc时,结束递归输出item结果 if (index > gc){ console.log(item); } //当index <= gc时, 递归调用 再次调用这个函数 if (index <= gc){ var str = 'col-xs-' + index; item.push(str); index++; col2(index,item); //递归调用 } } } } -
第2.1步：所做工作:
.col-xs-1, .col-xs-2, .col-xs-3, ... .col-xs-12{ float: left; }less源代码
.make-grid(@class) { .float-grid-columns(@class) { .col(@index) { @item: ~".col-@{class}-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< 12) { @item: ~".col-@{class}-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > 12) { @{list} { float: left; } } .col(1); // 启动递归 } }第2.2步：所做工作:
//指定 不同类型 下 列不同大小 栅格的宽度 .col-xs-12{ width: 12/12 %; } .col-xs-11{ width: 11/12 %; } .col-xs-10{ width: 10/12 %; } ... .col-xs-1{ width: 1/12 %; }less源代码
.make-grid(@class) { // LESS中的基本循环 .loop-grid-columns(@index, @class, @type) when (@index >= 0){ //当@index>=0时 .calc-grid-column(@index, @class, @type); //执行width混合 //下一次递归迭代 .loop-grid-columns((@index - 1), @class, @type); } // width时候执行这个混合 .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { .col-@{class}-@{index} { width: percentage((@index / @grid-columns)); } } }第2.3步：所做工作:
// 栅格 列排序 // push .col-xs-push-12{ left: 12/12 %; } .col-xs-push-11{ left: 11/12 %; } .col-xs-push-10{ left: 10/12 %; } ... .col-xs-push-1{ left: 1/12 %; } .col-xs-push-0{ left: auto; } // pull .col-xs-pull-12{ right: 12/12 %; } .col-xs-pull-11{ right: 11/12 %; } .col-xs-pull-10{ right: 10/12 %; } ... .col-xs-pull-1{ right: 1/12 %; } .col-xs-pull-0{ right: auto; }less源代码
.make-grid(@class) { .loop-grid-columns(@grid-columns, @class, push); .loop-grid-columns(@grid-columns, @class, pull); // LESS中的基本循环 .loop-grid-columns(@index, @class, @type) when (@index >= 0){ //当@index>=0时 .calc-grid-column(@index, @class, @type); //执行混合 //下一次递归迭代 .loop-grid-columns((@index - 1), @class, @type); } //=============这些都是混合的定义，用于供上面的 .loop-grid-columns 调用 // push时候执行这个混合 .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { .col-@{class}-push-@{index} { left: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { .col-@{class}-push-0 { left: auto; } } // pull时候执行这个混合 .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { .col-@{class}-pull-@{index} { right: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { .col-@{class}-pull-0 { right: auto; } } }第2.4步：所做工作:
// 栅格 列偏移(offset) // offset .col-xs-offset-12{ margin-left: 12/12 %; } .col-xs-offset-11{ margin-left: 11/12 %; } .col-xs-offset-10{ margin-left: 10/12 %; } ... .col-xs-offset-1{ margin-left: 1/12 %; } .col-xs-offset-0{ margin-left: 0; }less源代码
.make-grid(@class) { .loop-grid-columns(@grid-columns, @class, offset); // LESS中的基本循环 .loop-grid-columns(@index, @class, @type) when (@index >= 0){ //当@index>=0时 .calc-grid-column(@index, @class, @type); //执行混合 //下一次递归迭代 .loop-grid-columns((@index - 1), @class, @type); } // offset时候执行这个混合 .calc-grid-column(@index, @class, @type) when (@type = offset) { .col-@{class}-offset-@{index} { margin-left: percentage((@index / @grid-columns); } } } -
栅格系统最终样式总结
// ================ 栅格容器 ===================== box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; // ================ 栅格行 ===================== margin-left: -15px; margin-right: -15px; // ================ 栅格格子 ===================== // 这是所有格子都有的样式 position: relative; min-height: 1px; //限制最小高度 padding-left: 15px; //用于文字的排版美观性 padding-right: 15px; //用于文字的排版美观性 //格子的宽度 <!-- 例子:xs下一个占12列的格子 列的默认总宽度为12 12/12*100% width: 100% --> // 不同种类下不同格子的宽度 width: 格子占列的大小/列的总大小*100% //width的值根据格子占列的大小 //如果格子需要右移 使用push left: auto //left的值根据格子占列的大小 0的时候为auto //如果格子需要左移 使用pull right: auto //right的值根据格子占列的大小 0的时候为auto //如果格子需要做偏移(这会影响其他格子的排列) 使用offset margin-left: 100% //auto的值根据格子占列的大小 -
- 阈值
栅格系统(盒模型)设计的精妙之处
- 外部容器(液体容器、固定容器)两边具有padding: 15px
- 行 两边具有margin: -15px
- 列 两边具有padding: 15px
- 为了美观而必须有槽宽
- 列两边就必须具有padding: 15px
- 为了里面能继续嵌套行
- 行两边就必须有margin: -15px来抵消列自身的槽宽
