全面解析bootstrap格子布局

 更新时间:2016年05月22日 08:59:00   作者:小龙女先生   我要评论
这篇文章全面的为大家解析了bootstrap格子布局的相关资料,感兴趣的朋友可以参考一下

一、源码文件

_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 监听textarea中按键事件

    JavaScript 监听textarea中按键事件

    不同的浏览器中的事件监听机制是不同的,以onKeyPress事件为例。
    2009-10-10
  • 原生js实现回复评论功能

    原生js实现回复评论功能

    本文主要分享了原生js实现回复评论功能的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 使用script的src实现跨域和类似ajax效果

    使用script的src实现跨域和类似ajax效果

    在解决js的跨域问题的时候, 有多种方式, 其中有一种是利用script标签的src属性,因为这个属性是不受域名限制的,我们可以直接让src的这个链接指向跨域网站的一个接口, 这个接口返回的是js代码或者json格式数据, 从而实现跨域获取数据。
    2014-11-11
  • boostrap模态框二次弹出清空原有内容的方法

    boostrap模态框二次弹出清空原有内容的方法

    今天小编就为大家分享一篇boostrap模态框二次弹出清空原有内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • js实现同一页面可多次调用的图片幻灯切换效果

    js实现同一页面可多次调用的图片幻灯切换效果

    这篇文章主要介绍了js实现同一页面可多次调用的图片幻灯切换效果,可实现在同一页面中多次调用幻灯切换效果,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • js计算文本框输入的字符数

    js计算文本框输入的字符数

    这篇文章主要介绍了js计算文本框输入的字符数,具有一定的参考价值,感兴趣的朋友可以参考一下
    2015-10-10
  • JS验证全角与半角及相互转化的介绍

    JS验证全角与半角及相互转化的介绍

    全角:是一种电脑字符,是指一个全角字符占用两个标准字符(或两个半角字符)的位置。全角占两个字节。半角:是指一个字符占用一个标准的字符位置。半角占一个字节。接下来通过本文给大家介绍JS验证全角与半角及相互转化的知识,需要的朋友参考下吧
    2017-05-05
  • javascript 词法作用域和闭包分析说明

    javascript 词法作用域和闭包分析说明

    以下上是我在学习和使用了JS一段时间后,为了更深入的了解它, 也为了更好的把握对它的应用, 从而在对闭包的学习过程中,自己对于词法作用域的一些理解和总结
    2010-08-08
  • 微信小程序云开发(金沙国际官网)详解

    微信小程序云开发(金沙国际官网)详解

    使用云开发开发微信小程序、小游戏,无需搭建服务器,这篇文章主要为大家详细介绍了微信小程序云开发金沙国际官网,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 通过js动态操作table(新增,删除相关列信息)

    通过js动态操作table(新增,删除相关列信息)

    通过js动态操作table(新增,删除相关列信息)的实现代码,需要的朋友可以参考下
    2012-05-05

最新评论