Bootstrap的栅格布局
认识Bootstrap栅格布局
Bootstrap3.0抛弃了原有的以PC为核心的设计思维，完全内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义Class，还有强大的mixin用于生成更具语义的布局。
整个系统通过一系列的行（row）和列（column）的组合创建页面布局，它的工作原理：
- 行（row）必须包含在.container中，以便为其赋予合适的排列（alignment）和内补（padding）
- 使用行（row）在水平方向创建一组列
- 网页内容应当放置于列（col）内，且只有列（col）可以作为行（row）的直接子元素
- 类似.row、.col-xs-4这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局
- 通过设置padding从而创建列（col）之间的间隔（gutter）。然后通过为第一列和最后一列设置同样负值的margin从而抵消掉padding的影响
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围
下面看一个布局的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap栅格布局的简单案例</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-xs-3" style="background-color: antiquewhite;">列宽4列</div>
<div class="col-xs-3" style="background-color: aqua;">列宽4列</div>
<div class="col-xs-3" style="background-color: blue;">列宽4列</div>
<div class="col-xs-3" style="background-color: chartreuse;">列宽4列</div>
</div>
<div class="row">
<div class="col-xs-6" style="background-color: coral;">列宽6列</div>
<div class="col-xs-6" style="background-color: crimson;">列宽6列</div>
</div>
</body>
</html>
注意：
- 所有的列所跨越的栅格数之和最多是12
- .row定义栅格行容器，没有定义宽度，所以其宽度就由内部栅格的总列宽决定
- 对于需要占据整个浏览器视口的页面，需要将内容区域包裹在一个容器元素内，并且赋予padding: 0 15px;，目的是抵消掉为.row所设置的margin: 0 -15px;，否则，页面将会左右超出视口15px，页面底部呈现横向滚动条。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>占据整个视口</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <div style="padding: 15px;"> <div class="row"> <div class="col-xs-3" style="background-color: red;">列表宽3列</div> <div class="col-xs-3" style="background-color: rosybrown;">列表宽3列</div> <div class="col-xs-3" style="background-color: salmon;">列表宽3列</div> <div class="col-xs-3" style="background-color: skyblue;">列表宽3列</div> </div> <div class="row"> <div class="col-xs-6" style="background-color: springgreen;">列表宽6列</div> <div class="col-xs-6" style="background-color: tomato;">列表宽6列</div> </div> </div> </body> </html>
Bootstrap响应设备类型
Bootstrap3.0通过媒体查询技术实现对不同设备的灵活支持，从而废除了Bootstrap2.0的固定布局系统。Bootstrap栅格系统设备与布局关系：
| 超小屏幕设备 手机 （< 768px） | 小屏幕设备 平板 （>= 768px） | 中等屏幕设备 桌面 （>= 992px） | 大屏幕设备 桌面 （>= 1200px） | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，超过这些临界值的时候就会变成水平排列 | ||
| 最大.container宽度 | None（自动） | 750px | 970px | 1170px |
| class前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数 | 12 | |||
| 最大列宽 | 自动 | 60px | 78px | 95px |
| 槽宽 | 允许 | |||
| 偏移（Offsets） | 允许 | |||
| 列排序 | 允许 | |||
Bootstrap设备优化栅格
在Bootstrap3.0栅格系统中，class在宽度大于或等于临界值的设备上起作用，并且将覆盖掉对小屏幕设备的class。因此，对任何一个元素应用任何.col-md-类样式，如果没有设置.col-lg类样式，将不仅作用于中等尺寸的屏幕，还将作用于大屏幕设备。Bootstrap3.0遵循设备优先的原则来确定当前结构的布局效果，因此我们可以在相同的结构中设置不同的设备类型，以实现在不同的设备呈现不同的布局效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备优先</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row > div{
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body class="contaniner">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="visible-lg">col-lg-2</div>
<div class="visible-md">col-md-4</div>
<div class="visible-sm">col-sm-6</div>
<div class="visible-xs">col-xs-12</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="visible-lg">col-lg-2</div>
<div class="visible-md">col-md-4</div>
<div class="visible-sm">col-sm-6</div>
<div class="visible-xs">col-xs-12</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="visible-lg">col-lg-2</div>
<div class="visible-md">col-md-4</div>
<div class="visible-sm">col-sm-6</div>
<div class="visible-xs">col-xs-12</div>
</div>
</div>
</body>
</html>
Bootstrap固定栅格和流式栅格
默认情况下，Bootstrap2.0没有启用响应式布局，如果加入响应式布局CSS文件（bootstrap-responsive.css），栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方法堆叠。
Bootstra3.0将bootstrap-responsive.css合并到bootstrap.css中，实现在默认状态下支持响应式布局，.container将根据设备类型宽度调整自身宽度。在流式栅格布局中，与固定栅格布局不同，每列的宽度依然按照百分比来计算宽度，但流式外框.container-fluid不再声明宽度，确保整个布局满屏显示，下面是使用.container和.container-fluid设计固定栅格布局和流式栅格布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定栅格和流式栅格</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row > div{
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<h3>固定栅格</h3>
<div class="container">
<div class="row">
<div class="col-xs-6">列宽6</div>
<div class="col-xs-6">列宽6</div>
</div>
</div>
<h3>流式栅格</h3>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">列宽6</div>
<div class="col-xs-6">列宽6</div>
</div>
</div>
</body>
</html>
Bootstrap栅格堆叠和水平排列
堆叠和水平排列是Bootstrap3.0栅格系统中列的两种基本布局形式，比如使用一组.col-md栅格class创建一个基本的栅格系统，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠和水平</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row > div{
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
在手机和平板设备上显示为堆叠布局，即在超小屏幕和小屏幕上呈现栅格堆叠显示，在桌面以及以上屏幕上栅格变为水平排列。针对平板电脑，也希望像在小屏幕上一样水平显示，则可以使用.col-sm设计各列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠和水平</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row > div{
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>
如果希望在任何设备上都是水平排列在一起，则可以使用.col-xs：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠和水平</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row > div{
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
</body>
</html>
在上面的案例的基础上，如果通过使用.col-sm-* class可以创建更加富有动态和强大的布局。但是在很多情况下，多列布局各列的高度并非都是一致的，如果为其中的一列增加更多的内容，同时删除演示代码中的固定高度的声明，结果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度不一致</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row > div{
border : 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-2">列宽2格
<p>这里是一长段代码</p>
</div>
<div class="col-xs-2">列宽2格</div>
<div class="col-xs-2">列宽2格</div>
<div class="col-xs-2">列宽2格</div>
<div class="col-xs-2">列宽2格</div>
<div class="col-xs-2">列宽2格</div>
</div>
</div>
</body>
</html>
即便给出更少的col栅格，也不免会碰到一些问题，例如在某些临界值的时候，某些列可能会出现比别的列高地情况，为了解决这个问题，可以使用.clearfix和响应式工具class：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度不一致</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row > div{
border : 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-2">列宽2格
<p>这里是一长段代码</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-2">列宽2格</div>
<div class="col-xs-2">列宽2格</div>
<div class="col-xs-2">列宽2格</div>
<div class="col-xs-2">列宽2格</div>
<div class="col-xs-2">列宽2格</div>
</div>
</div>
</body>
</html>
列偏移
使用offset系列类可以将列偏移到右侧，这些class通过使用* 选择器将所有列增加了列的左侧margin。例如：.col-md-offset-4将.col-md设备下的列向右移动了4个列的宽度。offset通过margin-left实现，因此会对右侧列产生影响。offset也会占据布局空间，一次使用设计列偏移时，必须把offset偏移宽度与col宽度进行合并计算，确保每个row中的列宽和偏移宽度之和等于或小于12格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列偏移</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.row > div{
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-6 col-xs-offset-2"></div>
</div>
<div class="row">
<div class="col-xs-3 col-xs-offset-3"></div>
<div class="col-xs-3 col-xs-offset-3"></div>
</div>
</div>
</body>
</html>
列嵌套
Bootstrap支持列嵌套，对于栅格系统中多层布局提供了简单的实现方式。用户只需要在嵌套的col内部新加入一行row，在row内继续使用栅格系统即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-9">
<div class="col-xs-3">左侧</div>
<div class="col-xs-9">中间</div>
</div>
<div class="col-xs-3">右侧</div>
</div>
</div>
</body>
</html>
因为是嵌套，所以是在col内加入row，row内继续进行多列布局，以此类推。嵌套的栅格必须归结起来，Bootstrap的布局其实就是：容器+栅格，容器只是显示包含框的宽度，主要变化在于栅格，通过栅格的合并、偏移、嵌套来最终达到布局效果的（不管是固定栅格还是流式栅格，都可以实现嵌套设计）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栅格嵌套</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-12" style="background-color: thistle;"> Fluid 12
<div class="row">
<div class="col-xs-6" style="background-color: teal;"> Fluid 6
<div class="row">
<div class="col-xs-6" style="background-color:violet;">Fluid 6</div>
<div class="col-xs-6" style="background-color: yellow;">Fluid 6</div>
</div>
</div>
<div class="col-xs-6" style="background-color: turquoise;">
Fluid 6
</div>
</div>
</div>
</div>
</div>
</body>
</html>
在固定式栅格中，栅格中套栅格逻辑很简单，照着它们的固定宽度进行设计即可。在流动式布局中，栅格中套栅格逻辑就稍微复杂一点，不是按照固定宽度来计算，而按照宽度百分比来计算。因此，在实际项目中，同样的栅格套栅格，流动式布局会比固定式布局中的栅格宽度宽一些。
Bootstrap允许通过variables.less的参数值来自定义栅格系统，流式栅格系统也同样可以进行类似的修改，修改后并重新编译Bootstrap来实现自定义栅格系统。
列排序
列排序通过push和pull相关类实现，利用这两个系列class可以调整列的显示位置，其中push向右偏移，通过left属性定义列左侧的偏移位置，通过right属性定义列右侧的偏移位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列排序</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-xs-push-9">左列</div>
<div class="col-xs-6 col-xs-pull-3">中间</div>
<div class="col-xs-3 col-xs-pull-3">右列</div>
</div>
</div>
</body>
</html>
Bootstrap3栅格系统遵循每行各列之和为12格的设计原则，但是pull和push不受此限制，但是如果要确保列在页面内显示，则列宽加push或pull宽度之和不能大于12格，否则将显示在页面外，或者出现滚动条。
代码地址：示例代码
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
