第五章之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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
详谈javascript中的cookie
Jun 03 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 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 ftp文件上传函数(基础版)
2010/06/03 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
Python计算一个文件里字数的方法
2015/06/15 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
python 重命名轴索引的方法
2018/11/10 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
师生聚会感言
2014/01/26 职场文书
学校标语大全
2014/06/19 职场文书