第五章之BootStrap 栅格系统


Posted in Javascript onApril 25, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.移动设备优先
2.布局容器
3.栅格系统

本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式、移动设备优先的流式栅格系统。

一.移动设备优先

在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。

//分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

二.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等属性的原因,这两种容器类不能相互嵌套。

//固定宽度
<div class="container">
...
</div> 
//100%宽度
<div class="container-fluid">
...
</div>

栅格系统中, 浏览器会随着屏幕的大小的增减自动分配最多12列。 通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下:

1.“行 (row) ” 必须包含在 .container (固定宽度) 或 .container-fluid (100%宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

2.通过“行(row)”在水平方向创建一组“列(column)”。

3.你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

4.类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。
Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

5.通过为 “列 (column) ” 设置 padding 属性, 从而创建列与列之间的间隔 (gutter) 。通过为 .row 元素设置负值

margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了 padding。

6.负值的 margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

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

8.如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column) ”所在的元素将被作为一个整体另起一行排列。

9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ,并且针对小屏幕设备覆盖栅格类。因此, 在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div> 
//创建最多 12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div> 
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
} 
//总列数都是 12,每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div>

栅格参数表

如上图所示,栅格系统最外层区分了四种宽度的浏览器:超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度为:自动、750px、970px 和 1170px。自动的意思为,如果你是手机屏幕,则全面独占一行显示。

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div> 
//有时我们可以设置列偏移,让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div> 
//也可以嵌套,嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div> 
//可以把两个列交换位置,push 向左移动,pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

以上所述是针对BootStrap 栅格系统 的相关资料,希望对大家有所帮助!

Javascript 相关文章推荐
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
angular.js分页代码的实例
Jul 27 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
详解Bootstrap插件
Apr 25 #Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 #Javascript
第六章之辅组类与响应式工具
Apr 25 #Javascript
第七章之菜单按钮图标组件
Apr 25 #Javascript
第九章之路径分页标签与徽章组件
Apr 25 #Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 #Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 #Javascript
You might like
PHP的一个基础知识 表单提交
2011/07/04 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
PyQT实现多窗口切换
2018/04/20 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
工商行政处罚决定书
2015/06/24 职场文书
羊脂球读书笔记
2015/06/30 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
导游词之包公祠
2019/11/25 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL