03 Bootstrap的栅格布局
Bootstrap的栅格布局
- 认识Bootstrap栅格布局
- Bootstrap响应设备类型
- Bootstrap设备优化栅格
- Bootstrap固定栅格和流式栅格
- 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的值来表示其跨越的范围
下面看一个布局的案例：
<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，页面底部呈现横向滚动条。
<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遵循设备优先的原则来确定当前结构的布局效果，因此我们可以在相同的结构中设置不同的设备类型，以实现在不同的设备呈现不同的布局效果。
<html lang="en本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！