bootstrap_栅格系统_响应式工具_源码分析

-----------------------------------------------------------------------------
margin 为负

使盒子重叠
等高等高布局双飞翼布局
盒子往一边推或者拉

-----------------------------------------------------------------------------
bootstrap 应用层 UI 库，出色的栅格系统，无可比拟

learn it 然后脱离 bootstrap 封装自己单独的栅格系统

注意： jQuery 版本问题，怪异盒子模型，以及样式覆盖问题！！！

https://v3.bootcss.com

css3 媒体查询

加了 only 以后，IE就会忽略不支持的媒体查询

css2 媒体选择器

让 link 在特定的 media 满足的情况下生效

2x 图， 3x 图

使在不同设备完美显示图片的前提下，节约带宽

-webkit-min-device-pixel-ratio: 2
https://m.you.163.com 网易严选
完美理想视口

        <meta name="viewport" content="width=device-width,
                                       initial-scale=1.0,
                                       user-scalable=no,
                                       minimum-scale=1.0,
                                       maximum-scale=1.0">

container 固定容器 : width>1200 让 div 固定宽度 1170，居中
响应式重叠: 元素另起一行的方式
列偏移 margin 为负
列排序 push 或者 pull
辅助类 :

情景颜色

快速浮动

字体图标 :

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

不失真，矢量性

空间小

兼容性强

导航条消除圆角加一个类固定在头部
定制变量值，设置主题颜色等等

-----------------------------------------------------------------------------
animation.css 动画效果库

https://daneden.github.io/animate.css

-----------------------------------------------------------------------------
bootstrap-3.3.7/

dist/
css/

bootstrap.css 必用

bootstrap.css.map 表现了 min 版本的变量对应等等

bootstrap.min.css 压缩版

fonts/

几种字体必用

bootstrap.js

bootstrap.min.js

npm.js

less/ 开发进度源码
mixin/

grid.less

grid-framework.less

grid.less

variables.less 变量定义

栅格系统源码分析

容器：两边拥有槽宽一半的 padding 15px

行：两边拥有槽宽一半的 margin 负15px

列：两边拥有槽宽一半的 padding 15px

为了维护槽宽的规则

列两边必须的拥有槽宽一半的 padding 15px

为了能距离列包裹行

行两边必须拥有槽宽一半的 margin 负15px

为了能使容器完整的包裹住行

容器两边必须拥有槽宽一半的 padding 15px

-----------------------------------------------------------------------------

variables.less

        @grid-columns:              12;    // 列数
        @grid-gutter-width:         30px;    // 槽宽
        
        @screen-sm:                  768px;
        @screen-sm-min:              @screen-sm;
        
        @screen-md:                  992px;
        @screen-md-min:              @screen-md;
        
        @screen-lg:                  1200px;
        @screen-lg-min:              @screen-lg;
        
        @screen-xs-max:              (@screen-sm-min - 1);    767
        @screen-sm-max:              (@screen-md-min - 1);    991
        @screen-md-max:              (@screen-lg-min - 1);    1023

-----------------------------------------------------------------------------

grid.less 入口

        // 包含 container 固定容器这样可以直接用的类
        .container {
            .container-fixed();    // 1. 调用一个混合 mixin
            
            // (超小屏时，宽度 auto 仍然有槽宽)
            
            @media (min-width: @screen-sm-min) {
                width: @container-sm;    // 固定宽 750    
            }
            @media (min-width: @screen-md-min) {
                width: @container-md;    // 固定宽 970
            }
            @media (min-width: @screen-lg-min) {
                width: @container-lg;    // 固定宽 1170
            }
        }
        
        // 流体容器
        .container-fluid {
            .container-fixed();
        }
        
        .row {
            .make-row();    // 设置行 槽宽 的样式
        }
        
        .make-grid-columns();    // 设置列的公共样式
        
        // 3. 设置 特定列 的样式
        .make-grid(xs);
        @media (min-width: @screen-sm-min) {
            .make-grid(sm);
        }
        @media (min-width: @screen-md-min) {
            .make-grid(md);
        }
        @media (min-width: @screen-lg-min) {
            .make-grid(lg);
        }

-----------------------------------------------------------------------------

mixins/

grid.less

            // 2. 固定容器、流体容器公共样式
            .container-fixed(@gutter: @grid-gutter-width) {
                // 盒子水平居中
                margin-right: auto;
                margin-left: auto;
                
                // 设置所有容器左右 padding 15
                padding-left:  floor((@gutter / 2));
                padding-right: ceil((@gutter / 2));
                
                // 容器自动清除浮动    继承了 .clearfix 这个类
                &:extend(.clearfix all);
            }
            
            .make-row(@gutter: @grid-gutter-width) {
                
                // 面试题： margin 为负的地方 加一个padding15 又推回去15 意义在于始终让 容器内容 间距，边距为15px

                margin-left:  ceil((@gutter / -2));
                margin-right: floor((@gutter / -2));
                &:extend(.clearfix all);
            }

-----------------------------------------------------------------------------

grid-framework.less

            .make-grid-columns() {
                // 一个参数
                .col(@index) {
                    //     ~"不编译内容"
                    //     ~".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1";
                    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
                    
                    // 再调用, 传参 .col(2, ~".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1")
                    .col((@index + 1), @item);
                }
                                          // 2 < 12 所以进行调用, 递归调用，直到 @index = 13
                .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}");
                }
                
                //    13     12列 选择器
                .col(@index, @list) when (@index > @grid-columns) {
                    @{list} {
                        position: relative;    // 每列都相对定位， 作为定位父元素
                        
                        min-height: 1px;    // 最小高度 1px
                        
                        // 左右 padding 15px
                        padding-left:  ceil((@grid-gutter-width / 2));
                        padding-right: floor((@grid-gutter-width / 2));
                    }
                }
                
                .col(1);    // 入口
            }
            
            // 让 12 列 浮动
            .float-grid-columns(@class) {
                .col(@index) {
                    @item: ~".col-@{class}-@{index}";
                    .col((@index + 1), @item);    // 从 12 到 1 设置 样式
                }
                
                .col(@index, @list) when (@index =< @grid-columns) {
                    @item: ~".col-@{class}-@{index}";
                    .col((@index + 1), ~"@{list}, @{item}");
                }
                
                .col(@index, @list) when (@index > @grid-columns) {
                    @{list} {
                        float: left;    // 让 特定的列 浮动
                    }
                }
                
                .col(1);    // 入口
            }
            
            // 循环 设置列的样式
            //                    12   啥屏幕   样式
            .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
                .calc-grid-column(@index, @class, @type);
                
                .loop-grid-columns((@index - 1), @class, @type);
            }
            
            // 设置 特定列 的样式
            .make-grid(@class) {
                .float-grid-columns(@class);    // ① 让 12列 浮动
                                                  // xs
                //                      12        啥屏幕   样式
                .loop-grid-columns(@grid-columns, @class, width);    // ② 设置 width 的百分比
                .loop-grid-columns(@grid-columns, @class, pull);    // ③ pull 列排序 设置 left
                .loop-grid-columns(@grid-columns, @class, push);    // ④ push 列排序 设置 right
                .loop-grid-columns(@grid-columns, @class, offset);    // ⑤ 列偏移 设置 margin-left
            }
            
            //                  12   啥屏幕   width
            .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
              // .col-xs-12 { width: percentage(12/12) }
              // .col-xs-11 { width: percentage(11/12) }
              //    ... ...
              // .col-xs-1 { width: percentage(1/12) }
                .col-@{class}-@{index} {
                    width: percentage((@index / @grid-columns));
                }
            }
            
            // pull 列排序 设置 left
            .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
                // .col-xs-push-12 { left: percentage(100%) }
                // .col-xs-push-11 { left: percentage(11/12) }
                //         ... ...
                // .col-xs-push-1 { left: percentage(1/12) }
                .col-@{class}-push-@{index} {
                    left: percentage((@index / @grid-columns));
                }
            }
            
            // pull 列排序 设置 left
            .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
                // .col-xs-push-0 { left: auto }
                .col-@{class}-push-0 {
                    left: auto;
                }
            }
            
            // push 列排序 设置 right
            .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
                // .col-xs-pull-12 { right: percentage(100%) }
                // .col-xs-pull-11 { right: percentage(11/12) }
                //         ... ...
                // .col-xs-pull-1 { right: percentage(1/12) }
                .col-@{class}-pull-@{index} {
                    right: percentage((@index / @grid-columns));
                }
            }
            
            // push 列排序 设置 right
            .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
                // .col-xs-pull-0 { right: auto }
                .col-@{class}-pull-0 {
                    right: auto;
                }
            }
            
            // 列偏移 设置 margin-left
            .calc-grid-column(@index, @class, @type) when (@type = offset) {
                // .col-xs-offset-12 { margin-left: percentage(100%) }
                // .col-xs-offset-11 { margin-left: percentage(11/12) }
                // .col-xs-offset-1 { margin-left: percentage(1/12) }
                // .col-xs-offset-0 { margin-left: 0 }
                .col-@{class}-offset-@{index} {
                    margin-left: percentage((@index / @grid-columns));
                }
            }

-----------------------------------------------------------------------------

响应式工具源码分析

responsive-utilities.less

            @-ms-viewport {
                width: device-width;
            }
            
            .visible-xs,
            .visible-sm,
            .visible-md,
            .visible-lg {
                .responsive-invisibility();    // 1. visible 首先全部 display: none !important;
            }
            
            .visible-xs-block,
            .visible-xs-inline,
            .visible-xs-inline-block,
            .visible-sm-block,
            .visible-sm-inline,
            .visible-sm-inline-block,
            .visible-md-block,
            .visible-md-inline,
            .visible-md-inline-block,
            .visible-lg-block,
            .visible-lg-inline,
            .visible-lg-inline-block {
                display: none !important;
            }

            .visible-xs {
                @media (max-width: @screen-xs-max) {
                    .responsive-visibility();    // 2. visible 再显示
                }
            }
            
            .hidden-xs {
                @media (max-width: @screen-xs-max) {
                    .responsive-invisibility();    // hidden 直接 display: none !important;
                }
            }

-----------------------------------------------------------------------------

mixins/

responsive-visibility.less

        .responsive-visibility() {
            display: block !important;    // 默认 block 显示
            
            // 兼容性 老的表格布局
            table&  { display: table !important; }
            tr&     { display: table-row !important; }
            th&,
            td&     { display: table-cell !important; }
        }

        .responsive-invisibility() {
            display: none !important;
        }

抽出 bootstrap 的栅格系统，引入项目

代码结构
diyGridSystem.less

@import "./diyGridSystem/mixins/grid";
@import "./diyGridSystem/mixins/grid-framework";

@import "./diyGridSystem/variables";
@import "./diyGridSystem/grid";

grid.less

.container {/**** 固定容器 ****/
    .container-fixed();

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

    box-sizing: border-box;
}

.container-fluid {/**** 流体容器 ****/
    .container-fixed();

    box-sizing: border-box;
}

.row {
    /**** 给 行 设置样式 ****/
    .make-row();

    box-sizing: border-box;
}

.make-grid-columns();    /**** 给 列 设置公共样式 ****/

/**** 给 特定列 设置样式 ****/
.make-grid(xs);

@media (min-width: @screen-sm-min) {
    .make-grid(sm);
}

@media (min-width: @screen-md-min) {
    .make-grid(md);
}

@media (min-width: @screen-lg-min) {
    .make-grid(lg);
}

variables.less
直接拷贝官网源码即可
mixins/
grid.less

/**** 给 固定容器 设置样式 ****/
.container-fixed(@gutter: @grid-gutter-width) {
    /**** 居中 ****/
    margin-right: auto;
    margin-left: auto;    

    /**** 固定容器 左右 padding 15px ****/
    padding-left:  floor((@gutter / 2));
    padding-right: ceil((@gutter / 2));
  
    /**** 清除浮动 ****/
    .clearfix()
}/**** 给 行 设置样式 ****/
.make-row(@gutter: @grid-gutter-width) {/**** 左右拉 -15px    使 内容 始终保持边界、间隔 为 15px ****/
    margin-left:  ceil((@gutter / -2));
    margin-right: floor((@gutter / -2));/**** 清除浮动 ****/
    .clearfix()
}/**** 定义mixin: 清除浮动 ****/
.clearfix() {
    &:before,
    &:after {
        content: " ";    // 1
        display: table;    // 2
    }
    &:after {
        clear: both;
    }
}

grid-framework.less

/**** 给 12-1 列设置公共样式 ****/
.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;    /**** 每列都开启 相对定位 ****/
            
            /**** 最小高度为 1 ****/
            min-height: 1px;
            
            /**** 列 左右 padding 15px ****/
            padding-left:  ceil((@grid-gutter-width / 2));
            padding-right: floor((@grid-gutter-width / 2));
            box-sizing: border-box;
        }
    }
    
    .col(1);
}

/**** 给特定列设置样式 ****/
.make-grid(@class) {
    .float-grid-columns(@class);    /**** 每列 开启 左浮动 ****/
    .loop-grid-columns(@grid-columns, @class, width);    /**** 设置每列的 width ****/
    .loop-grid-columns(@grid-columns, @class, pull);    /**** 列排序: 设置每列的 left ****/
    .loop-grid-columns(@grid-columns, @class, push);    /**** 列排序: 设置每列的 right ****/
    .loop-grid-columns(@grid-columns, @class, offset);    /**** 列偏移: 设置每列的 margin-left ****/
}

/**** 循环给 每个列 设置样式 ****/
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
    .calc-grid-column(@index, @class, @type);
    
    .loop-grid-columns((@index - 1), @class, @type);
}

/**** 每列 开启 左浮动 ****/
.float-grid-columns(@class) {
    .col(@index) {
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), @item);
    }
    
    .col(@index, @list) when (@index =< @grid-columns) {
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
    }
    
    .col(@index, @list) when (@index > @grid-columns) {
        @{list} {
            float: left;
        }
    }
    
    .col(1);
}

/**** 设置每列的 width ****/
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
    .col-@{class}-@{index} {
        width: percentage((@index / @grid-columns));
    }
}

/**** 列排序: 设置每列的 left ****/
.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;
    }
}

/**** 列排序: 设置每列的 right ****/
.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;
    }
}

/**** 列偏移: 设置每列的 margin-left ****/
.calc-grid-column(@index, @class, @type) when (@type = offset) {
    .col-@{class}-offset-@{index} {
        margin-left: percentage((@index / @grid-columns));
    }
}

posted @ 2018-12-01 13:45 耶梦加德阅读(355) 评论(0) 编辑收藏举报

刷新页面返回顶部

我即狂澜，且力不可挽

bootstrap_栅格系统_响应式工具_源码分析

公告