bootstrapheight百分⽐_Bootstrap结合代码学习Bootstrap3栅
格系统
开篇的话：
⼤家可能会好奇，技术的滚轮滚滚向前，这个时候怎么还会有博⽂在介绍Bootstrap 3呢？
技术没有好坏之分，只有适合和不适合的区别，因为我们这个项⽬对IE有明确的要求，所以Bootstrap 3相对来说更适合，栅格系统⼜是我
认为的Bootstrap的精髓，所以呢，我们就开始今天的博⽂吧～
简介
Bootstrap中的栅格系统就是通过⼀系列的⾏(row)与列(column)的组合创建页⾯布局。
要使⽤栅格系统，就要遵循以下规则：
1、数据⾏(.row)必须包含在容器.container或.container-fluid中
2、列(.column)必须放在数据⾏(.row)中
3、页⾯内容应当放置在列容器(.column)之内
4、列与列之间设置了15px的内距(padding)
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .c 在Bootstrap 4中添加了⼀个槽宽(Gutters)的概念，可以⽤no-gutters类来添加⼀个⽆内边距的列
no-gutter实现代码如下：
.no-gutters {  margin-right: 0;  margin-left: 0;}.no-gutters > .col,.no-gutters > [class*="col-"] {  padding-right: 0;  padding-left: 0;}
把no-gutters添加到row上就可以创建⼀个没有边距的列了，当然以下代码同时也展⽰了⼀个8列的栅格系统：
栅格参数
Bootstrap 3 栅格参数把屏幕分成了四类(超⼩屏，⼩屏，中屏和⼤屏)，分界点为768px、992px和1220px
把⼩屏幕和超⼩屏幕分界点定在768px已经不满⾜现在的需求了，所以在bootstrap 4中进⾏了优化，增加了576px这⼀个档位。
假设我们以bootstrap4的分隔节点重构Bootstrap 3，那么我们只需要保持-xs-这⼀档位不变，加上576px这⼀段媒体查询
@media (min-width: 576px) {/*.col-sm-*{  加上⼩屏代码}*/}
以前我们-col-xs- 则要改成 -col-sm-
以前我们-col-sm- 则要改成 -col-md-
以前我们-col-md- 则要改成 -col-lg-
以前我们-col-lg- 则要改成 -col-xl-
也就是前缀依次向后挪⼀位就可以了，这样改造过后的bootstrap 3在不同分辨率上的表现会更加合理些。
列的实现原理(以Bootstrap3为例)
我们以.col-xs-*为例，其他的除了前缀不⼀样外，其原理都是完全⼀样的。
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {  float: left;}.col-xs-12 {  width: 10 1、column采⽤百分⽐布局，默认为12列
col-xs-12就占100%，11列就占11/12(91.66666667%)，10列就为5/6(83.33333333%)以此类推
2、所有的列都是左浮动
所以bootstrap⽤了以下代码清除浮动
.container-fluid:before,.container-fluid:after,.row:before,.row:after{display: table;content: " ";}.container:after,.container-fluid:after,.row:after{  clear: both;}列偏移
有时候，我们不希望相邻的两个内容列之间有空隙，⼜或者我们想要某个列居中，这个时候就可以⽤到列偏移。
先看源码：
.col-xs-offset-12 {  margin-left: 100%;}.col-xs-offset-11 {  margin-left: 91.66666667%;}.col-xs-offset-10 {  margin-left: 83.33333333%;}.col-xs-offset-9 {  ma 翻看源码我们发现列偏移其实也不神奇，-col-*-offset就是运⽤margin-left把列往右移，相当于左侧补列。
⽐如说我们有个内容列在中等屏幕下占8列，并且居中，我们就可以⽤以下代码实现
内容
col-md-8保证了我们在中屏幕下内容列始终占屏幕66.7%,col-md-offset-2保证了我们在这个内容列始终有16.7%左边距，这样就保证内容列的居中。
ps：
使⽤了col-xs-offset-*在超⼩屏幕上偏移了列，要使⽤col-sm-offset-0(具体以你的代码为准)把列偏移回来，这样才可以在超⼩屏幕上实
现偏移并且不会影响到更⼤的屏幕
pps:
还有个⼩细节很容易被忽略，在bootstrap中，默认设定了元素的现实⽅式为box-sizing: border-box，这样才能保证默认每个列上15px
的边距在百分⽐下布局不出滚动条不换⾏。
* {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}*:before, *:after{  -webkit-box-sizing: border-box;    -moz-box
box-sizing
这⾥再花⼀分钟简单说下box-sizing，假如说页⾯上有⼀个id为box1的元素
#box1{width:200px;height:200px;border:8px solid red;padding:20px;box-sizing: border-box;}
box-sizing: border-box;
则元素实际宽⾼为144px，实际占⽤宽度为144 + 20 * 2 + 8 * 2，总宽度还是200px
box-sizing: content-box;
元素实际宽⾼为200px，实际占⽤的宽度为200 + 20 * 2 + 8 * 2 = 256px
bootstrap项目

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。