摘要：栅格系统中的列是通过指定到的值来表示其跨越的范围。实例下图是一个栅格系统，共有四行。然后在根目录中，使用命令，可以自动将源代码编译成，放在目录中。
什么是Bootstrap
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，它包括HTML,CSS,JS等。它是由Twitter开发，现在成为Github上最为流行的前端开发框架。它提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视窗尺寸增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（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-*不存在，也影响大屏幕设备。
实例下图是一个栅格系统，共有四行。我们可以使用bootstrap的grid-system容易的实现。
代码如下：
.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-8.col-md-4.col-md-4.col-md-4.col-md-4.col-md-6.col-md-6
在这段代码中，我们使用.col-md-*栅格类，就可以创建一个基本的栅格系统。由于该例中使用的是.col-md-*，所以最佳的体验状态是在中等屏幕设备上, 它显示为水平排列的多个列，所有列必须放在.row之中。使用.container-fluid是为了是该栅格系统占100%宽度。如果你想浏览更多的例子，请访问bootstrap官网。
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。通过分析该项目中的代码，你可以更好的理解栅格系统的工作原理。
该工程的项目结构为：
| 路径 | 描述 |
|---|---|
| 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目录中。
参考Bootstrap中文站: http://v3.bootcss.com
Bootstrap Sass项目Github地址: https://github.com/twbs/bootstrap-sass
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115321.html
摘要：提供了一套响应式移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多列。三网格系统工作原理网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了网格系统是如何工作的行必须放置在内，以便获得适当的对齐和内边距。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统(Grid System)，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为...
摘要：提供了一套响应式移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多列。三网格系统工作原理网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了网格系统是如何工作的行必须放置在内，以便获得适当的对齐和内边距。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统(Grid System)，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为...
摘要：为了防止这种情况，给提供的最小高度并使它们浮动。基本网格准备好了一些额外的列内容样式使我们的网格系统响应调整我们的网格以实现移动布局非常简单。注意本指南只是创建自己响应式网格系统的起点。 此文翻译自 Creating Your Own CSS Grid System | Jan，英文不好如有错误 ✖ ，请指正。 CSS 网格已经存在很长时间了。它们通常捆绑在 Bootstrap 等框架...
阅读 1964·2021-09-04 16:45
阅读 749·2019-08-30 15:44
阅读 896·2019-08-30 13:07
阅读 458·2019-08-29 16:06
阅读 1378·2019-08-29 13:43
阅读 1270·2019-08-26 17:00
阅读 1527·2019-08-26 13:51
阅读 2297·2019-08-26 11:48
