全面解析bootstrap格子布局


Posted in Javascript onMay 22, 2016

一、源码文件

_grid.scss:格子系统类文件
Mixins/_grid.scss:支持格子系统实现的mixin集合
Mixins/_grid-framework.scss:格子系统实现的核心mixin

二、支持的功能

1. 实现按百分比布局

2. 实现格子的定位

3. 实现格子的嵌套

4. 如果只使用格子系统,可以只编码bootstrap-grid.scss文件

三、实现原理

1、 按百分比布局,主要思考的问题如何在不同的设备上平均分配的宽度,bootstrap只是用了简单的百分比,在任何尺寸设备下都是使用相同的百分比。

2、 格子的定位:解决了格子向左移动、向右移动、以格子向右偏移几个单元格的能力

3、 格子的嵌套:实现了格子内容再嵌套格子布局系统。

四、源码分析

1、_grid.scss:格子系统生成的主类,引用了mixins/_grid.scss、mixins/_grid-framework.scss、variables.scss类中的变量及相关方法。
首先:定义两个容器类

     a) container:格子容器,根据不同设备定义不同的宽度,不会充满全屏;

     b) continaer-fluid:格子容器,在任何支持下都会充满全屏
container和container-fluid都使用了make-container(mixins/_grid.scss),make-container只实现了居中、左右内边距、清除浮动等控制;其中container根据不同设备定义了容器的宽度

然后:定义row(行):
调用了make-row(mixins/_grids.scss)实现清除浮动、左右外边距的定义,在4.0中,如果开启了flex布局的支持,就设定容器的display为flex和flex-wrap为wrap,并去掉清浮动。

再则:直接调用make-grid-columns(mixins/_grid-framework.scss)实现单元格的建立

    a) make-grid-columns:单元格生成的入口方法,传递所能支持的格子总数、外边距宽度、所支持的几种尺寸

    b) make-grid-columns引用了mixins/_grid.scss中的许多方法:

    a) 用到了map的map-key函数,用于遍历一个map的key集合;

用到了@extend函数,用于继承,实现所有col左浮动,以及所有col都相对定位。

@for $i from 1 through $columns {
   .col-#{$breakpoint}-#{$i} {
    @extend %grid-column; //extend是继承,将此合并为一个样式集合
    //.col-xs-1,col-xs-2{ positiona:relative; .... }
   }
  }

a) Make-col-span函数,实现col宽度的计算

b) 调用mixins/_grid.scss中的make-col-modifier方法,实现push、pull、offset的样式的生成:

i. Push:向右推几个格子,用的是left

ii. Pull:向左推几个格子,用的是right

iii. Offset:利用的是margin-left实现,向右推向个百分比。

@mixin make-col-offset($size, $columns: $grid-columns) {
 margin-left: percentage($size / $columns);
}

@mixin make-col-push($size, $columns: $grid-columns) {
 left: if($size > 0, percentage($size / $columns), auto);
}

@mixin make-col-pull($size, $columns: $grid-columns) {
 right: if($size > 0, percentage($size / $columns), auto);
}

@mixin make-col-modifier($type, $size, $columns) {
 // Work around the lack of dynamic mixin @include support 
 @if $type == push {
  @include make-col-push($size, $columns);
 } @else if $type == pull {
  @include make-col-pull($size, $columns);
 } @else if $type == offset {
  @include make-col-offset($size, $columns);
 }
}

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 #Javascript
基于Bootstrap实现图片轮播效果
May 22 #Javascript
基于Vue.js的表格分页组件
May 22 #Javascript
js正则表达式replace替换变量方法
May 21 #Javascript
深入解析JavaScript中的立即执行函数
May 21 #Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 #Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 #Javascript
You might like
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python中IPYTHON入门实例
2015/05/11 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python 中random模块的常用方法总结
2017/07/08 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
用python实现名片管理系统
2020/06/18 Python
python 爬取小说并下载的示例
2020/12/07 Python
用python制作个视频下载器
2021/02/01 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
Java servlet面试题
2012/03/04 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
九一八事变演讲稿
2014/09/05 职场文书