第五章之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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
Angular2自定义分页组件
Apr 19 Javascript
深入理解node.js之path模块
May 03 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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 SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
javascript radio 联动效果
2009/03/04 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
Python中文竖排显示的方法
2015/07/28 Python
Python匹配中文的正则表达式
2016/05/11 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python多进程并行代码实例
2019/09/30 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Python descriptor(描述符)的实现
2020/11/15 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
如何写好建议书
2014/03/13 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
公司人力资源管理制度
2015/08/05 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫