布局容器
.container类（常用）
固定宽度并支持响应式布局的容器（两侧留白）
.container-fluid
占据100%宽度
如下：
注解：在bootstrap中样式多仅指定宽度，高度自定义
栅格网格系统
栅格网格系统概述
什么是栅格网格，就是将界面分成几行几列，那么就可以规定某元素占几行几列来确定其位置
而bootstrap的栅格网格系统，将容器分为12列（自定义高度），并通过一系列的行（row）和列（column)的组合对页面布局，结合媒体查询，根据不同设备，创建分界点阈值实现响应式界面布局
栅格参数
布局顺序
- 布局：container
- 行：row
- 列
- xs(xsmall phones)：超小屏（自动）
- sm(small phones)：小屏（750px）
- md(middle desktops):中屏（970px）
- lg(larger desktops):大屏（1170）
- （.row）放在（.container）内，以便为其赋予合适的对齐方式和内距
- ( .col)放在(.row)中，只有列才能作为行元素的直接子元素
- 列数之和超12，将自动换行
- 内容放在列容器内
<div class="container">
<!-- 行容器 -->
<div class="row">
<!-- 列容器 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 -->
<div class="col-md-4" >4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
列组合
- 列组合:列总数和不能超过12,否则会换行
<!-- 列组合 列总数=12 -->
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-4">4</div>
<div class="col-md-5">5</div>
</div>
列偏移
列偏移:控制列之间的距离+列前缀 col-md-offset-数值,
注意保证列组合(包括偏移量)的总数不超过12,超过将在下一行偏移
<!--列偏移 总数=12=1+1+1+8+1-->
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1 col-md-offset-8">1</div>
<div class="col-md-1">1</div>
</div>
当然，列偏移的基本单位是列，需要更细微的调整还是需要通过外边距。
列排序
列排序：使列向左/右浮动，添加类名
左：col-md-push-数值
右：col-md-pull-数值
<div class="row">
<div class="col-md-1">1</div>
<!-- 向右边移动 4列-->
<div class="col-md-1 col-md-push-4">1</div>
<!-- 向左移动1列 -->
<div class="col-md-1 col-md-pull-1">1</div>
<div class="col-md-1">1</div>
</div>
列嵌套
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-4">6-2</div>
<div class="col-md-4">6-2</div>
<div class="col-md-4">6-2</div>
</div>
</div>
<div class="col-md-6">6</div>
</div>
演示与代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h4>原始div布局:</h4>
<div style="background-color: greenyellow;">4列</div>
<div style="background-color: gray;">8列</div>
<hr>
<h4>栅格网格布局:</h4>
<!--
1.列组合:列总数和不能超过12,否则会换行
2.列偏移:控制列之间的距离+列前缀 col-md-offset-数值,
注意保证列组合(包括偏移量)的总数不超过12,超过将在下一行偏移
3.列排序：使列向左/右浮动，添加类名,如果移动的位置存在元素,将会覆盖
左：col-md-push-数值
右：col-md-pull-数值
4.列嵌套:bootstrap支持列嵌套
即在列中嵌套一个多个行容器,将一列在分为12小列
-->
<!-- 布局容器 -->
<div class="container">
<!-- 行容器 -->
<div class="row">
<!-- 列容器 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 -->
<div class="col-md-4" style="background-color: greenyellow;">4列</div>
<div class="col-md-8" style="background-color: grey;">8列</div>
</div>
<h5>列组合 总数=12:</h5>
<!-- 列组合=12 -->
<div class="row">
<div class="col-md-3" style="background-color: indianred;">3</div>
<div class="col-md-4" style="background-color: lightblue;">4</div>
<div class="col-md-5" style="background-color: lightseagreen;">5</div>
</div>
<!-- 列组合 总数>12 直接换行() -->
<h5>列组合 总数>12:</h5>
<div class="row">
<div class="col-md-4" style="background-color: lightseagreen;">6</div>
<div class="col-md-4" style="background-color:maroon;">6</div>
<div class="col-md-5" style="background-color:midnightblue;">6</div>
</div>
<h5>列偏移 总数<=12</h5>
<div class="row">
<div class="col-md-1" style="background-color: indianred;">1</div>
<div class="col-md-1" style="background-color: lightblue;">1</div>
<div class="col-md-1 col-md-offset-8" style="background-color: lightseagreen;">1</div>
<div class="col-md-1" style="background-color: rgb(7, 3, 61);">1</div>
</div>
<h5>列偏移 总数>12</h5>
<div class="row">
<div class="col-md-1" style="background-color: indianred;">1</div>
<div class="col-md-1" style="background-color: lightblue;">1</div>
<div class="col-md-1" style="background-color: lightseagreen;">1</div>
<div class="col-md-1 col-md-offset-9" style="background-color: rgb(7, 3, 61);">1</div>
</div>
<h5>列排序</h5>
<div class="row">
<div class="col-md-1" style="background-color: midnightblue;">1</div>
<!-- 向右边移动 4列-->
<div class="col-md-1 col-md-push-4" style="background-color: navajowhite;">1</div>
<!-- 向左移动1列 -->
<div class="col-md-1 col-md-pull-1" style="background-color: olivedrab;">1</div>
<div class="col-md-1" style="background-color: orchid;">1</div>
</div>
<h5>列嵌套</h5>
<div class="row">
<div class="col-md-6" style="background-color: orchid;">
<div class="row">
<div class="col-md-4" style="background-color: peru;">套娃1</div>
<div class="col-md-4" style="background-color: red;">套娃2</div>
<div class="col-md-3" style="background-color: seagreen;">套娃3</div>
</div>
</div>
<div class="col-md-6" style="background-color: palegoldenrod;">6</div>
</div>
</div>
</body>
</html>