第五章之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 相关文章推荐
node.js中的path.normalize方法使用说明
Dec 08 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
Vue生命周期示例详解
Apr 12 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
详解如何使用Node.js实现热重载页面
May 06 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类常量用法实例分析
2015/07/09 PHP
nginx下安装php7+php5
2016/07/31 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
建筑学推荐信
2013/11/03 职场文书
初一体育教学反思
2014/01/29 职场文书
企业公益活动策划方案
2014/08/24 职场文书
教师节横幅标语
2014/10/08 职场文书
党校毕业个人总结
2015/02/28 职场文书
医德医风自我评价2015
2015/03/03 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
python urllib库的使用详解
2021/04/13 Python
Python一行代码实现自动发邮件功能
2021/05/30 Python
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL