zoukankan html css js c++ java

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

Bootstrap笔记
- 源码分析部分
  - 外部容器
  - 栅格系统(盒模型)设计的精妙之处

Bootstrap笔记

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

知识点扫盲

padding 在 auto 与 100%中的状况:

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

容器

液体容器

// clearfix清除浮动
 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-768px){
    width : auto;
}

//当大于768px 小于992时,设置页面宽度为750px
@media (min-768px){
    width : 750px;
}

//当大于992px 小于1200时,设置页面宽度为970px
@media (min-992px){
    width : 970px;
}

//当大于1200px,设置页面宽度为1170px
@media (min-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- @screen-sm-min ==> max- 768px  ==> 手机移动端
    // 手机移动端
    @media (max- 768px){
         auto;
    }
    //平板
    @media (min- 768px) {
         750px;    // 720px+槽宽(30px)
    }
    //普通显示器
    @media (min- 992px) {
         970px;    // 940px+槽宽(30px)
    }
    //大屏显示器
    @media (min- 1200px) {
         1170px;    // 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清除浮动
     auto;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;

    //当小于768时,设置页面宽度为auto
    @media (max-768px){
        width : auto;
    }

    //当大于768px 小于992时,设置页面宽度为750px
    @media (min-768px){
        width : 750px;
    }

    //当大于992px 小于1200时,设置页面宽度为970px
    @media (min-992px){
        width : 970px;
    }
    
    //当大于1200px,设置页面宽度为1170px
    @media (min-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{
     12/12 %;
}
.col-xs-11{
     11/12 %;
}
.col-xs-10{
     10/12 %;
}
...
.col-xs-1{
     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} {
             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%
     100% 
-->

// 不同种类下不同格子的宽度
 格子占列的大小/列的总大小*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来抵消列自身的槽宽

查看全文

相关阅读:
虚拟机环境
 R语言里一些画图程序不能在循环里正常保存的解决办法
 python 图片处理（更新）
服务器跑代码小tips
[论文笔记] ：Temporal Graph Networks for Deep Learning on Dynamic Graphs
[论文笔记] Detecting early-warning signals for sudden deterioration of complex diseases by dynamical network biomarkers
堆和优先队列的写法
 [论文笔记] ：Detection for disease tipping points by landscape dynamic network biomarkers
Computational Physics
WCSPH实现方法

原文地址：https://www.cnblogs.com/fitzlovecode/p/learn_bootstrap.html