Bootstrap网格系统 学习笔记
简单网格
先上代码再解释
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: #FFFF00">
<p>第一块区域</p>
</div>
<div class="col-md-6" style="background-color: #99fF66">
<p>第一块区域</p>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
CSS和JS的引用
- Bootstrap需要引用
bootstrap.min.css这个样式表，jquery.min.js，bootstrap.min.js。 - jquery的引用要放在bootstrap的引用的前面。
- 可以不用下载这些文档，直接使用百度CDN上公开的类库入口来实现上述代码,，这样仅凭一个记事本类软件就能实现。
例如bootstrap.min.css利用连接 http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css；
jquery利用连接 http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js
bootstrap.min.js利用连接 http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js
BootStrap网格系统的工作原理
- 行必须放置在
.container class内， 以便获得适当的对齐和内边距。
代码的第一个<div>的类设置为container的目的就是为此，并且代码中的div.row也必须放在div.container中就是为了获得对齐和内边距。 - 使用行来创建列的水平组，内容应该放在列内，且唯有列可以是行的直接子元素
- 预定义的网格类（比较简单）是通过
.row和.col-xs-4之类的代码来快速实现的。col-xs-4表示创建一个横跨四格的列（一共是12列）
这里xs的含义是超小型设备；如果换成.col-sm-4则表示在小型平板电脑上的四格宽度的列；md代表中型设备；lg表示台式机之类的大型设备
详细请见表格：
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） |
|---|---|---|---|
| 网格行为 | 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 | ||
| 最大容器宽度 | None (auto) | 750px | 970px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- |
| 列数量和 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px |
| 间隙宽度 | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes |
- 网格系统是通过想要横跨的12个可用的列来实现的。各列的总和不用等于12，但是如果想做一个对齐的效果，则要将
col横跨的列数达到12个。如果要创建三个相等的列则要使用三个.col-sm-4
BootStrap的响应式
如果要让这个实例同时支持大型设备，小型设备和中型设备则须这样定义列的代码
<div class="col-sm-3 col-md-6 col-lg-4">
...
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
...
</div>
这样在手机上，它将左边25% 右边75%的布局，在平板电脑上是50%/50%的布局。在大型视口的设备上，它将是33%/66%的布局。
偏移列
如果我们就想错落有致按照自己喜欢的方法摆放列的，就要用到偏移列的。使用 .col-md-offset-* 类。这些类就会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11,大家可以尝试下面的代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #00FFFF">
</div>
<div class="col-md-2 col-md-offset-3" style="height: 100px;background-color: #33FF99">
</div>
<div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #66FF66">
</div>
<div class="col-md-2 col-md-offset-3" style="height: 100px;background-color: #99FF33">
</div>
<div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #FFFF00">
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
嵌套列
在内容中可以嵌套默认的网格，也很简单，就是在一个div.col-md-*添加一个新的div.row，并在row中添加新的col就OK了。同样的，小盒子的列数也不能超过12
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="height: 100px;background-color: #330033">
</div>
<div class="col-md-6" style="height: 100px;background-color: #3399FF">
</div>
</div>
<div class="row">
<div class="col-md-6" style="height: 100px;background-color: #99FF33">
</div>
<div class="col-md-6" style="height: 100px;background-color: #99FFCC">
<div class="row">
<div class="col-md-6" style="height: 50px;background-color: #330033">
</div>
<div class="col-md-6" style="height: 50px;background-color: #99FF33">
</div>
</div>
<div class="row">
<div class="col-md-6" style="height: 50px;background-color: #99FFCC">
</div>
<div class="col-md-6" style="height: 50px;background-color: #3399FF">
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
列排序
列排序可以允许我们以一种顺序编写列，以另一种顺序显示列。这就可以让我们用脚本来让列进行动态的移动。
.col-md-push-*和.col-md-pull-*来改变内置网格的顺序。其中*的范围是从1-11；
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div id="left" class="col-md-6" style="height: 100px;background-color: #FF3333;color:white;">
我是第一个
</div>
<div id="right" class="col-md-6" style="height: 100px;background-color: #3333CC;color:white">
我是第二个
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#left").click(function(){
$(this).addClass("col-md-push-6");
$("#right").addClass("col-md-pull-6");
})
})
</script>>
</body>
</html>