全面解析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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
layui使用templet格式化表格数据的方法
Sep 16 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
PHP网站提速三大“软”招
2006/10/09 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
JQuery基础语法小结
2015/02/27 Javascript
javascript中this的四种用法
2015/05/11 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
python网络爬虫采集联想词示例
2014/02/11 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python队列queue模块详解
2018/04/27 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python实现的config文件读写功能示例
2019/09/24 Python
深入了解python列表(LIST)
2020/06/08 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
美德好少年主要事迹
2014/01/29 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技