Bootstrap入门书籍之(三)栅格系统


Posted in Javascript onFebruary 17, 2016

实现原理

栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说:

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

我们来理解一下这一段话,可以发现其中最重要的部分就是 移动设备优先 ,那么什么是移动设备优先呢?

Bootstrap的基础CSS代码 默认从小屏幕设备 (比如移动设备、平板电脑)开始,然后使用 媒体查询扩展到大屏幕设备 (比如笔记本电脑、台式电脑)上的组件和网格。

有着如下策略:

内容:决定什么是最重要的。
布局:优先设计更小的宽度。
渐进增强:随着屏幕大小增加而添加元素。

工作原理

数据行( .row )必须包含在容器 .container (固定宽度)或 .container-fluid (100%宽度)中,以便为其赋予合适的排列(aligment)和内填充(padding)。如:

<div class="container"><!-- 水平居中,两边有margin,最小屏幕时,充满父元素 -->
<div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
<div class="row"></div>
</div>

在数据行( .row )中可以添加列(column),但列数之和不能超过平分的总列数(在超过时,多余部分会换行显示),默认12。(使用Less或者Sass可以进行自定义设置)如:

<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6"></div>
<div class="col-md-4"></div>

页面上的 具体内容 应当放置于列(column)内,并且 只有列 (column)可以作为数据行 .row 容器的 直接子元素 。

预定义的网格类,比如 .row 和 .col-xs-4 ,可用于快速创建网格布局。

栅格系统中的列是通过指定 1到12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

注意事项:

正如上面在注释部分所展现的一样的 .container (固定宽度)是固定宽度的布局方式。通过查看源码,在查看 .container 类的时候我们会发现,它的宽度是响应式的:(如下)

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/*........*/

从上面的css代码可以看到,该类默认为整个父元素的宽度(最小屏幕),但是在大屏幕下有着不同的宽度,并且在不同宽度下左右margin会同时增加或减少(水平居中)。

.container-fluid 类就和 .container 的默认情况一样,为100%宽度。 (CSS代码一样)

除此之外

从源码中我们还可以发现,除了有左右margin外,还可以看到该类是有着左右填充(padding)存在的。

如果我们继续查看源码,可以发现数据行 .row 中的每一个列也有着左右填充(padding)的存在,如下:

.col-md-1, .col-lg-12 /*......*/{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

看到这里,大家应该都能想到会有什么样的情况出现!我们在第一个和最后一个列因为 双填充 的存在, 实际上对于内容的隔离 已经到了 30px 。我们需要怎么消除影响呢?

Bootstrap是通过 .rows 上的外边距(margin)取负 margin-left: -15px;margin-right: -15px; ,表示第一列和最后一列的行偏移,用来抵消第一个列的左内距和最后一列的右内距。

基本用法

bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm、col-md、col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm是small的缩写,xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。

Bootstrap入门书籍之(三)栅格系统 

通过源码可以发现,如下:

.col-md-1/*......*/{ float: left;}/*所有的列都是默认向左浮动的*/
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.66666667%;
}
/*.....*/
.col-md-12 {
width: 100%;
}

从这些CSS代码也就不难发现,Bootstrap中每一列所占的宽度,以及为何在列数设置超过12时,超过部分会换行显示了。

在下面所有的示例中每一列的背景颜色与边框的效果由如下CSS代码控制:

[class *= col-]{
background-color: #eee;
border: 1px solid #ccc;
}

基础

那么我们就来看看一些示例吧,下面这种方式是最基本的用法:

<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</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-2">.col-md-2</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>

实现的效果如下:

Bootstrap入门书籍之(三)栅格系统 

Bootstrap作为一个响应式框架当然不会只有那么简单的功能,我们继续往下走吧!

列偏移

在某些情况下,我们不希望相邻的列紧靠在一起,如果你希望不通过额外的margin或其他的手段来实现的话,Bootstrap内置为我们提供了列偏移(offset),这一系列的类来帮助我们实现想要的效果。

只需要给需要偏移的列元素上添加类名 col-md-offset-* ( 星号代表要偏移的列组合数 ),那么具有这个类名的列就会向右偏移。

这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如:在列元素中添加 .col-md-offset-6 类将 .col-md-6 元素向右侧偏移了6个列(column)的宽度。

现在我们的代码是这样的:

<div class="container">
<div class="row">
<div class="col-md-2 ">col-md-8 </div>
<div class="col-md-3 col-md-offset-2">col-md-4 col-md-offset-2</div>
<div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
</div>
<p><br></p>
<div class="row">
<div class="col-md-4 ">col-md-4 </div>
<div class="col-md-3 col-md-offset-4">col-md-3 col-md-offset-4</div>
<div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>
</div>
</div>

可以实现的效果如下:

Bootstrap入门书籍之(三)栅格系统 

从实现的效果我们就能发现一些东西,注意 第二段的显示效果与代码 ,从那里我们可以发现:使用 col-md-offset-* 对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示。

其实原因也很简单:因为该类是对于列设置 margin-left ,并且我们在上面的源码展示中,也可以看有每一列都有着 float:left 的属性,从这些地方我们就不难发现在(偏移+列宽)超过12时,为何会换行显示了

列排序

列排序其实就是改变列的方向(顺序),就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (和上面一样,星号代表移动的列组合数)。

Bootstrap仅通过设置left和right来实现定位效果。通过查看源码,我们可以看到基本设置比较简单,如下:

.col-md-pull-12 {
right: 100%;
}
/*...*/
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}

还是继续看看我们的实际效果吧!代码如下

<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4 col-md-push-8 </div>
<div class="col-md-8 col-md-pull-4">.col-md-8 col-md-pull-4 </div>
</div>
<div class="row">
<div class="col-md-4 ">.col-md-4 默认</div>
<div class="col-md-8 ">.col-md-8 默认</div>
</div>
</div>

Bootstrap入门书籍之(三)栅格系统 

我们可以发现列的位置已经发生了改变

列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行( .row )容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器( .row ),宽度为100%时,就是当前外部列的宽度。(其实就是在列中嵌套多个列,下面会有实际效果展示)

注意:被嵌套的行( .row )所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列 -_- )。

我们现在有这样一个需求:

创建一个8-4列网格。(备注:以中屏md(970px)为例)。
在第一个8列网格中插入8-4列网格。
在第二个4列网格中插入9-3列网格。

效果如下:

Bootstrap入门书籍之(三)栅格系统 

该如何实现呢?

<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
<div class="col-md-4">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-9">col-md-9</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>
</div>
</div>

是不是很简单呢?当然为了完全实现和效果图一样的展示,我们还需要对CSS进行一些添加:

[class *= col-] [class *= col-] {
background-color: #f36;
border:1px dashed #fff;
color: #fff;
}

以上所述是小编给大家分享的Bootstrap入门书籍之(三)栅格系统,希望对大家有所帮助!

Javascript 相关文章推荐
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
javascript中scrollTop详解
Apr 13 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
js实现select下拉框选择
Jan 11 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
Bootstrap入门书籍之(一)排版
Feb 17 #Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 #Javascript
分享自己用JS做的扫雷小游戏
Feb 17 #Javascript
javascript瀑布流布局实现方法详解
Feb 17 #Javascript
给angular加上动画效遇到的问题总结
Feb 17 #Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 #Javascript
jQuery实现伪分页的方法分享
Feb 17 #Javascript
You might like
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
电子信息工程专业推荐信
2014/02/14 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
代办委托书怎样写
2014/04/08 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
星级党支部申报材料
2014/05/31 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
运动会200米广播稿
2015/08/19 职场文书
德劲DE1105机评
2022/04/05 无线电
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang