目录
- Bootstrap网格系统 学习笔记
- 简单网格
- 偏移列
- 嵌套列
- 列排序
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.jsBootStrap网格系统的工作原理
- 行必须放置在
.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>
![python django框架怎么爬虫步骤_[Python爬虫]---Django视频教程](http://pic.xiahunao.cn/python django框架怎么爬虫步骤_[Python爬虫]---Django视频教程)
