Bootstrap 网格系统布局详解


Posted in Javascript onMarch 19, 2017

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

一、什么是网格(Grid)?

在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

一句话概括:网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。

二、什么是Bootstrap网格系统(Grid System)?

Bootstrap 包含了一个 响应式的、移动设备优先的、不固定的网格系统 ,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

Bootstrap 网格系统布局详解 

三、网格系统工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

•行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

•使用行row来创建列的水平组。

•内容应该放置在列内, 且唯有列可以是行的直接子元素 。

•预定义的网格类,比如 .row 和 .col-xs-4 ,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

•列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。

•网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。

下面是 Bootstrap 基本的网格结构:

<div class="container">
 <div class="row">
 <div class="col-*-*"></div>
 <div class="col-*-*"></div> 
 </div>
 <div class="row">...</div>
</div>
<div class="container">
...
</div>

注意:列 <div class="col-*-*"></div> 必须放在 <div class="row"> 行元素下,且行元素里边只能包含列子元素,不能跟其他的子标签元素,否则,布局样式会乱掉。

四、布局实战

代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 布局偏移列-@corwien</title>
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin:50px;background:gray;">
<div class="container" style="background:white;">
 <div class="row" >
 <div class="col-md-8 col-md-offset-1"> 
 <div style="background:pink; height:50px;">区块一 (col-md-8 col-md-offset-1)</div>
 </div>
 <div class="col-md-3">
  <div style="background:orange; height:50px;">区块二 (col-md-3)</div>
 </div>
 <div class="col-md-8 col-md-offset-1">
  <div style="background:green; height:50px;">区块三 (col-md-8 col-md-offset-1)</div>
 </div>
 <div class="col-md-4">
  <div style="background:red; height:50px;">区块四 (col-md-4)</div>
 </div>
 <div class="col-md-12">
 <div style="background:yellow; height:50px;">区块五(col-md-12)</div>
 </div>
 <div class="col-md-3">
 <div style="background:purple; height:50px;">区块六(col-md-3)</div>
 </div>
 <div class="col-md-6">
 <div style="background:beige; height:50px;">区块七(col-md-6)</div>
 </div>
 <div class="col-md-3">
 <div style="background:olive; height:50px;">区块八(col-md-3)</div>
 </div>
 </div>
</div>
</body>
</html>

Bootstrap 网格系统布局详解 

说明:灰色区域为body, 白色区域内为container容器。

注意:这里要特别注意区块一、区块二为在同一行,而区块三、和区块四在不同行,为什么呢?因为列元素为行内元素,如果一行没有够12列,则下边的区块元素会和它上边的区块列加起来小于或等于12,则会排在同一行,如果加起来大于12,则会排在下一列,如区块一和区块二两个列加起来等于12,则刚好能排在同一行,而区块三、四两个列加起来为13,超过一行最大显示列数12,自然就排在另一行了。

以上所述是小编给大家介绍的Bootstrap 网格系统布局,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 #Javascript
JSONP基础知识详解
Mar 19 #Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 #Javascript
js实现旋转木马效果
Mar 17 #Javascript
jQuery实现验证码功能
Mar 17 #Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 #Javascript
node操作mysql数据库实例详解
Mar 17 #Javascript
You might like
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
初识Node.js
2015/03/20 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python中logging库的使用总结
2017/10/18 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Opencv求取连通区域重心实例
2020/06/04 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
抽象类和接口的区别
2012/09/19 面试题
科级干部考察材料
2014/02/15 职场文书
《母鸡》教学反思
2014/02/25 职场文书
新员工考核评语
2014/12/31 职场文书
司考复习计划
2015/01/19 职场文书
教师节感谢信
2015/01/22 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
golang为什么要统一错误处理
2022/04/03 Golang