【技术分享】Bootstrap之CSS篇(2)
本篇我们来学习Bootstrap在CSS布局中“网格系统”的使用。
本篇主要介绍Bootstrap的网格系统的使用，早期被称栅格系统不知何时修改了，名词什么的无所谓，关键是这个Bootstrap中文手册翻译得实在是..... 阅读起来真得很生涩，很生，很生......希望我能总结得更直白吧。
网格系统的介绍
Bootstrap提供的网格系统，可以根据设备屏幕尺寸来控制网页的显示内容。
网格系统每1行最多划分为12列。
“移动设备优先”，Bootstrap的基础CSS样式默认从小屏幕移动设备开始，然后扩展到大屏幕设备，所以也要求我们在布局时要使用媒体查询来设计平板电脑、台式电脑的展示效果。
随着屏幕大小的增加而添加元素，但系统最多最行只支持12列。
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12（屏幕最小） | |||||||||||
看图总结：
网格系统将列每一行分为12列 （上图第一行中），最小设备屏幕1行1列就占满12列，设备屏幕越大每行中显示的列数越多，但每一行总列数不能超过12
表格中那些 4-4-4/4-8/6-6 这些只是网格分配列数的参照
4-4-4这种列数分配，相当三个div各占屏幕列数 33%，33%，33%
4-8 这种列数分配，相当两个div各占屏幕列数 30%，70%
每行中占列数的和要等于12（4+4+4=12，4+8=12，6+6=12），其实也没要求一定是要占满12
网格参数对照表
上图是网格系统参数选用的对照表，我们布局时可参考使用，有以下几个重点内容需要了解：
.col-xs- 适配超小设备手机屏幕中的显示
.col-sm- 适配小型设备平板电脑中的显示
.col-md- 适配中型设备台式电脑中的显示
.col-lg- 适配大型设备台式电脑中的显示
以上这段内容请仔细阅读，细细品，一定要理解，在以后的布局时我们经常会使用到这个“网格系统”。
网格系统的使用
使用网格系统，需要定义一个容器，所有包含内容的行和列都必须放在这个容器内，只有在这个容器内行和列才可以获得最佳的对齐和内边距的效果。
在Bootstrap的布局中
需要创建一个容器(.container)来存放我们包含内容的行和列。
Bootstrap使用行（.row）做为布局的起始定位，行必须放置在.container内，这样才能保证行在容器内对齐和内边距能适应不同屏幕尺寸的设备。
在Bootstrap中应将页面内容放在列(col)中，允许一行里存在一个或多个列，不可超过12列，但不允许在列中包含行。
列与列之间使用padding来设置间距，假如有多个列，当前列的外边距(margin)为负值则行偏移（换行）。什么叫行偏移简单来说 一行只可以有12列，超过了就会被挤到下一行这就叫行偏移。
重点：在Bootstrap中通常使用row来定位，col来显示内容元素，所以我们在规划时要先考虑row列的设计
常规布局
通过一个实例代码展示一下Bootstrap的魅力，下面是我设计的一个布局样式，我希望他能在移动、平板、PC这三端都能保持基本相同的布局效果。
代码部份
<style>
.container div{
border:2px solid blue;
height:100px;
color:white;
background-color: red;
line-height: 100px;
text-align: center;
}
.container .row {
margin-top:10px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-4">col-xs-4</div>
<div class="col-xs-8">col-xs-8</div>
</div>
<div class="row">
<div class="col-xs-8">col-xs-8</div>
<div class="col-xs-4">col-xs-4</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">col-xs-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">col-xs-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">col-xs-4</div>
</div>
</div></body>
从代码部分可以看出，我们对超小设备（.col-xs-）屏幕进了适配，如果我们只是要求一致性布局的展示效果，对于平板和PC电脑的样式Bootstrap自动的为我们匹配了，你也可以如我最后一个row代码一样同时加上对sm、md、lg的适配，效果都是一样的。
重点：适配.col-xs-我们也可以理解为即使在最小的移动端屏幕中Bootstrap也会我们要求规则来显示内容。像某些移动端小屏幕无法展示的建议只适配sm、md、lg这样在xs这种移动小屏幕中这些较大屏幕才很好展示的内容会被收缩起来，而不会影响我们移动端重要内容的展示
非常规布局
下面这个布局，就是早期困扰我很久的一知识点，我们都知道Bootstrap的特点，适配屏幕尽可能的确保重要内容在移动、平板、PC终端中的正确显示，从而来实现多端一致性布局，但有很多的网站PC端访问展示的是一种布局设计，移动端访问的时候布局效果却不同，有的更改头换面了。当然这里只是简单介绍改变展示排列的，因为改头换面那种还需要我们掌握Bootstrap辅助类配合使用才能达到。
从图中可看到我们显示了第1行和第3行，第2行通过hidden-xs在移动端设备中进行了隐藏
同时我们对第1行也做了跨行的操作，当设备适配md时，第1行1列和1行2列经过设置已占满屏幕12个列，第1行3列将换行显示，1行3列我们设置它占满屏幕12个列，md适配的正好是PC设备，所以我这个布局在移动端、平板端、移动端都有不同的显示。
第1行的3个列中只适配了col-xs和col-md，Bootstrap默认以最小设备适配所以未定义col-sm将以xs效果来展示。
<body>
<style>
.container .row div{
background-color: red;
height:100px;
line-height: 100px;
text-align: center;
border:1px solid black;
margin-top: 2px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-4">1行1列 col-xs-4 col-md-4</div>
<div class="col-xs-4 col-md-8">1行2列 col-xs-4 col-md-8</div>
<div class="col-xs-4 col-md-12">1行3列 col-xs-4 col-md-12</div>
</div>
<div class="row">
<div class="hidden-xs col-sm-4">2行1列 hidden-xs col-sm-4</div>
<div class="hidden-xs col-sm-4">2行2列 hidden-xs col-sm-4</div>
<div class="hidden-xs col-sm-4">2行3列 hidden-xs col-sm-4</div>
</div>
<div class="row">
<div class="col-xs-4">3行1列 col-xs-4</div>
<div class="col-xs-4">3行2列 col-xs-4</div>
<div class="col-xs-4">3行3列 col-xs-4</div>
</div>
</div></body>
列重置
<div class="container"> <div class="row"> <div class="col-sm-3 col-xs-6">col1 所有的col属于左浮动，内容增多col3被挤到col2下了</div> <div class="col-sm-3 col-xs-6">col2</div> <div class="clearfix visible-xs"><!----></div> <div class="col-sm-3 col-xs-6">col3</div> <div class="col-sm-3 col-xs-6">col4</div> </div></div>
列遍移
col-md-offset-列偏移，取值范围从1~11，可以通过它实现列居中效果col-md-offset列偏移也会占当前行网格的列数col-xs-类不支持偏移，只可以通过空单元格来实现该效果
我们通过列偏移让一个DIV局中
<div class="container"> <div class="row"> <div class="col-xs-6 col-md-offset-3">这是一个局中的DIV（col+offset共占了9个格）</div> <div class="col-xs-4">我是小尾巴(占4个格，超过12所以我换行了)</div> </div></div>
㠌套列
我们在内容列中可以再嵌套网格，但这个被嵌套网格在列数不能超过12（也没要求一定要占满12列）
<div class="container"> <div class="row"> <div class="col-sm-4">我是左侧</div> <div class="col-sm-8"> <div class="row"> <div class="col-sm-6">我是右侧1，占6列</div> <div class="col-sm-4">我是右侧2，只占4列，也没要求必须占满12列</div> </div> <div class="row"> <div class="col-sm-6">我是右侧3，我占6列</div> <div class="col-sm-6">我是右侧4，我占6列</div> </div> </div> </div></div>
列排序
col-md-push-和col-md-pull-取值范围为1~11，通过这两个类可以互换两列的顺序
<div class="container"> <div class="row"> <p>列排序前</p> <div class="col-md-4">我在左</div> <div class="col-md-8">我在右</div> </div> <br> <div class="row"> <p>列排序后</p> <div class="col-md-4 col-md-push-8">我在左</div> <div class="col-md-8 col-md-pull-4">我在右</div> </div> </div>
终于写完这篇，通过总结搞明白了Bootstrap网格系统的工作原理，非常有收获得，以前总是吃不透这个网格的使用，现在掌握后对整个响应式布局有了一个更全面的认识。希望本篇对大家能有帮助。
Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap
书山有路勤为径，学海无涯苦作舟!!!
- 点赞
- 收藏
- 关注作者
评论（0）