从源码上分析bootstrap的grid system

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看103 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 103|回复: 1
收起左侧

从源码上分析bootstrap的grid system

[复制链接]
瑶池 发表于 2016-7-23 19:19:01 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑

1、概述

bootstrap的grid system由3部分组成:

  • container
  • row
  • columns


container有2种。container: 固定宽度且水平居中; container-fluid: 满屏。

row占满整个container, 一行可以包括12个column。

column有4种类型:lg, md, sm, xs,分别对应着4种设备屏幕大小。

learn more

从源码上分析bootstrap的grid system

从源码上分析bootstrap的grid system - 敏捷大拇指 - 从源码上分析bootstrap的grid system





2、准备

首先,我们先用bower来安装bootstrap-sass, 我们从bootstrap的sass源码来分析。

[Bash shell] 纯文本查看 复制代码
bower install bootstrap-sass --save


grid system主要涉及3个文件。_grid.scss, mixin/_grid.scss, mixin/_gridframework.scss。




3、分析



3.1、container

[CSS] 纯文本查看 复制代码
.container {
  @include container-fixed;

  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }
  // more
}


@include引入了一个mixin: container-fixed, 他设置了margin-left和margin-right都为auto。

然后通过media query来设定不同的width。

这样的话,就可以使得.container水平居中了。

$screen-sm-min4种设备屏幕大小的breakpoint之一(可以在_variables.scss)找到。

[CSS] 纯文本查看 复制代码
$screen-xs: 480px !default; // 手机
$screen-sm: 768px !default; // 平板
$screen-md: 992 !default;  // 桌面计算机
$screen-lg: 1200 !default;




3.2、row

[CSS] 纯文本查看 复制代码
.row {
  @include make-row;
}

@mixin make-row($gutter: $grid-gutter-width) {
  margin-left:  ($gutter / -2);
}


make-row设置了margin-left/right为负值,这样就可以把row的width变大。



3.3、Columns


3.3.1、创建column的公共样式

[CSS] 纯文本查看 复制代码
@include make-grid-columns;


[CSS] 纯文本查看 复制代码
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    padding-left:  ($grid-gutter-width / 2);
    padding-right: ($grid-gutter-width / 2);
  }
}

//上面的scss会编译成下面的css:
.col-[xs,sm,md,lg]-[1-9] {
    position: realative;
    padding-left: 15px;
}


#{$i}的作用是把$i字符串转换成变量。doc

在for循环中,为什么不从1开始呢?
因为$list每次循环后都要加上原来的$list(也就是+=),并且$list的初始值不能为空,所以他的初始值就是1(col-sm-1)。

position: relative在这里的作用是什么呢?


在下面,我们会讲到每个column都有一个width, 他的值是percentage的。根据doc,百分比是相对于该元素的containning block.

但我觉得他的作用是为了他的children(position: absolute)可以更好的定位。


3.3.2、创建column的float的属性

[CSS] 纯文本查看 复制代码
// 创建xs columns
@include make-grid(xs);

// 给column设置float属性
@mixin make-grid($class) {
  @include float-grid-columns($class);
}

// 这个跟上面的make-grid-columns差不多
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}


这里我有个疑问:既然float-grid-columns的作用是让每种column都浮动。那么他为什么不写在make-grid-columns里面呢?那里不是都写column的公共样式吗?



3.3.3、创建column的width

[CSS] 纯文本查看 复制代码
@mixin make-grid($class) {
  // 传了个width参数
  @include loop-grid-columns($grid-columns, $class, width);
}

// 起到一个循环的作用
@mixin loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $class, $type);
  }
}

@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      width: percentage(($index / $grid-columns));
    }
  }


当我没设置box-sizing: border-box的时候,12个column不会刚好占满的一行。

因为有padding, margin的存在。

但如果设置之后,margin就属于width了。这样就刚刚好。

这个也是bootstrap grid system能够平均分成12列的原因。


3.3.4、创建column的push

他会设置column的左边和他的containning block的距离

[CSS] 纯文本查看 复制代码
// 如果index不为0,如2。所以left: 2 / 12.
@if ($type == push) and ($index > 0) {
  .col-#{$class}-push-#{$index} {
    left: percentage(($index / $grid-columns));
  }
}
@if ($type == push) and ($index == 0) {
    .col-#{$class}-push-0 {
      left: auto;
    }
}



3.3.5、创建column的offset

这个也会使得column偏移。那他和上面的push有什么不同呢?

[CSS] 纯文本查看 复制代码
@if ($type == offset) {
  .col-#{$class}-offset-#{$index} {
    margin-left: percentage(($index / $grid-columns));
  }
}


因为offset设置的是margin-left,所以他是占据空间的。

[HTML] 纯文本查看 复制代码
// #column2在这里会挤压到另一行
<div class="col-lg-2 col-lg-offset-10" id="column1"></div>
<div class="col-lg-4" id="column2"></div>


[CSS] 纯文本查看 复制代码
// #column2不会被挤压到另一行
<div class="col-lg-2 col-lg-push-10" id="column1"></div>
<div class="col-lg-4" id="column2"></div>





4、总结

  • 利用box-sizing: border-box来平均分成12列
  • 利用sass来迅速开发
  • 利用media query来做响应式





作者:DrakeLeung

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 推送上首页了~分享到朋友圈微博QQ空间吧~.

查看全部评分

攻城狮 发表于 2016-7-25 04:39:10 | 显示全部楼层
期待Swift在后台摆平CSS,类似SCSS那样
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
关闭

站长推荐 上一条 /3 下一条

热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表