全面解析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 相关文章推荐
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
javascript 实现 原路返回
Jan 21 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
大学生先进事迹材料
2014/02/16 职场文书
给校长的一封建议书
2014/03/12 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
环保项目建议书
2014/08/26 职场文书
管理人员岗位职责
2015/02/14 职场文书
健康教育主题班会
2015/08/14 职场文书