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 (https://github.com/sass/sass/issues/626)
  @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);
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的python

python数据可视化之画箱形图

最近接到锅让画几个数据图。其实第一反应是用origin来画图,但问了一圈周围没有用Origin画过箱形图的,有些问题无法解决又百度不到。但好在略懂一点pytho...

2.5K00
来自专栏yang0range

Android硬件加速原理和简介

原理:使用PNG图片(BitmaoDrable)解码PNG图片生成Bitmap,传到底层,有GPU渲染图片解码,消耗CPU运算资源,Bitmap占内存大,绘制慢...

41850
来自专栏Coco的专栏

不受控制的 position:fixed

31140
来自专栏hbbliyong

代码创建 WPF 旋转、翻转动画(汇总)

先建立一个button <Button Width="80" Height="60" Content="旋转" Name="trans" Cl...

34640
来自专栏DannyHoo的专栏

新浪微博项目笔记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

20310
来自专栏数据小魔方

半圆型动态仪表盘风格图表

今天跟大家分享一款半圆型动态仪表盘风格图表!真的可以动起来哦! ▼ 下午在浏览论坛的时候,刚好看到秋叶老师的一个图表教程,风格是半圆型饼图,用VBA控制。 ? ...

40860
来自专栏木头编程 - moTzxx

HTML 图片映射<map>标签整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

28940
来自专栏Golang语言社区

Golang-实现图片缩放

package main import ( "fmt" "graphics" "image" "image/png" ...

49240
来自专栏Grace development

PHP GD库解析一张简单图片并输出

17400
来自专栏企鹅号快讯

CSS样式基础

定义 :全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。...

22880

扫码关注云+社区

领取腾讯云代金券