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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 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
一段防盗连的PHP代码
2006/12/06 PHP
php的hash算法介绍
2014/02/13 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
详解django中使用定时任务的方法
2018/09/27 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
实例详解Python模块decimal
2019/06/26 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
英国现代绅士品牌:Hackett
2017/12/17 全球购物
How TDD works
2012/09/30 面试题
红领巾心向党广播稿
2014/01/19 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
让子弹飞观后感
2015/06/11 职场文书
国际贸易实训总结
2015/08/03 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python