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 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JavaScript中this详解
Sep 01 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
用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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
javascript的BOM
2016/05/03 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
Vue中props的使用详解
2018/06/15 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python中模块查找的原理与方法详解
2017/08/11 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python实现自动登录
2018/09/17 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
关于Python错误重试方法总结
2021/01/03 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
中学校庆方案
2014/03/17 职场文书
《老山界》教学反思
2014/04/08 职场文书
环保倡议书500字
2014/05/15 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL