全面解析bootstrap格子布局

前端之家收集整理的这篇文章主要介绍了全面解析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都相对定位。

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-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,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程序设计有所帮助。

猜你在找的Bootstrap相关文章