Bootstrap网格系统

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

Bootstrap网格系统

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



1、什么是Bootstrap

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架,它包括HTML、CSS、JS等。它是由Twitter开发,现在成为Github上最为流行的前端开发框架。它提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或视窗尺寸增加,系统会自动分为最多12列。

Bootstrap网格系统

Bootstrap网格系统 - 敏捷大拇指 - Bootstrap网格系统


栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。Bootstrap栅格系统的工作原理如下:

  • 行(row)必须包含在.container(固定宽度)或.container-fluid(100% 宽度)中,以便为其赋予合适的排列(alignment)和内补(padding)。
  • 通过行(row)在水平方向创建一组列(column)。
  • 你的内容应当放置于列(column)内,并且,只有列(column)可以作为行(row)的直接子元素。
  • 类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为列(column)设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin 从而抵消掉为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。
  • 如果一行(row)中包含了的列(column)大于12,多余的列(column)所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。因此,在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。因此,在元素上应用任何.col-lg-*不存在,也影响大屏幕设备。





2、实例

下图是一个栅格系统,共有四行。我们可以使用bootstrap的grid-system容易的实现。

Bootstrap网格系统

Bootstrap网格系统 - 敏捷大拇指 - Bootstrap网格系统


代码如下:

[HTML] 纯文本查看 复制代码
<div class="container-fluid">
    
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
</div>


在这段代码中,我们使用.col-md-*栅格类,就可以创建一个基本的栅格系统。由于该例中使用的是.col-md-*,所以最佳的体验状态是在中等屏幕设备上, 它显示为水平排列的多个列,所有列必须放在.row之中。使用.container-fluid是为了是该栅格系统占100%宽度。如果你想浏览更多的例子,请访问bootstrap官网。




3、Bootstrap实现栅格系统原理

Bootstrap是基于Less构建的,但是同时还提供了一套Sass版本。本文就是通过分析Sass代码来了解Bootstrap是如何实现栅格系统的。Bootstrap Sass版本的github地址为:https://github.com/twbs/bootstrap-sass。但是为了更加方便的理解,我将Bootstrap Sass中关于栅格系统的代码单独提取出来,创建了Bootstrap-grid-sass工程,github地址为:https://github.com/simonwoo/bootstrap-grid-sass。通过分析该项目中的代码,你可以更好的理解栅格系统的工作原理。

该工程的项目结构为:

[td]
路径描述
src关于bootstrap栅格系统的源代码
release编译出来的css代码
gruntfile定义编译sass到css的任务
example例子


src中共包括以下文件:

  • _variables.scss定义栅格系统用到的变量,如各种设备的尺寸大小
  • _grid.scss定义了.container, .container-fluid, .row等样式
  • _config.scss配置文件,可以在该文件中自定义栅格系统列的数目,以及列与列之间的间距
  • mixin目录, 定义了一系列生成栅格系统相关的mixin和一个清除浮动的clearfix的mixin


通过改变_config.scss中的$grid-columns和$grid-gutter-width数值,来自定义你自己的栅格系统,例如,如果你觉得默认的12列系统不能满足需求,你可以定义24列系统等。然后在根目录中,使用grunt sass:dev命令,可以自动将scss源代码编译成css,放在release目录中。




4、参考






作者:simon_woo

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

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

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

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

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

评分

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

查看全部评分

apper 发表于 2016-7-25 17:56:16 | 显示全部楼层
早就知道了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

分享扩散

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

合作伙伴

Swift小苹果

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