看完我的笔记不懂也会懂----bootstrap

目录

• Bootstrap笔记
  • 知识点扫盲
  • 容器
  • 栅格系统
  • 源码分析部分
    • 外部容器
    • 栅格系统(盒模型)设计的精妙之处

Bootstrap笔记

写在开始： 由于我对AngulaJS的学习只是一个最浅显的过程,所以看完后你大概只能学会如何简单的使用AngularJs，所以我对我的标题党行为道歉啦,嘿嘿

知识点扫盲

padding 在 width:auto 与 width:100%中的状况:

• 在width: auto;中加padding会在width的 里面加 (在盒子里面)
• 在width: 100%;中加padding会在width的 外面加 最后有可能超出外部容器

容器

1. 液体容器

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

2. 固定容器

   1. 阈值

      1. 当大于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;
         }
         

      2. 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)
             }
         }
         

   栅格系统

   1. 代码示例 ======> 使用栅格的方式

      <!-- 外部有容器包裹 -->
      <!-- 可以是液体容器也可以是固定容器 -->
      <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>
      

   源码分析部分

   外部容器

   1. 流体容器最后总样式

      // clearfix清除浮动
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
      

   2. 固定容器最后总样式

          // 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;
          }
          ```  
      
      

   3. 行

      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));
      }
      

   4. 列

      1. 第一步：所做工作:

         .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. 第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);
                 }
             }
         }
         

      3. 栅格系统最终样式总结

      // ================    栅格容器  =====================
      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的值根据格子占列的大小
      
      

栅格系统(盒模型)设计的精妙之处

1. 外部容器(液体容器、固定容器)两边具有padding: 15px
2. 行 两边具有margin: -15px
3. 列 两边具有padding: 15px

---

1. 为了美观而必须有槽宽
   • 列两边就必须具有padding: 15px
2. 为了里面能继续嵌套行
   • 行两边就必须有margin: -15px来抵消列自身的槽宽

---