bootstrap响应式布局特点以及解析
⼀、bootstrap介绍
当提到响应式布局，我们脑⼦⾥会出现bootstrap的概念，它有哪些特点呢？
（1）响应式（@media媒体布局）
电脑屏幕花屏
（2）移动设备优先（meta name="viewport" content="width=device-width,initial-scale=1.0"）
（3）⾃定义css属性样式（data-*=""）
（4）栅栏布局（col-md-3）
1、响应式，什么⼜是响应式布局呢？
（1）概念：响应式web布局是让⽤户通过不同尺⼨的浏览器都可以获得良好视觉的⼀种⽅法。是⽬前⽐较流⾏的⼀种布局⽅法。
（2）实现原理：通过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页⾯内容在不同的媒体环境下运⾏时可以展⽰不同的样式（这个样式当然是由我们来书写规定的）。
@media是CSS3中规定的属性，它可以实现针对不同媒体设备来设置不同的样式的⽬的。⽽且就算是在同⼀设备中它也可以在你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。
（3）应⽤：Bootstrap主要⽤到min-width、max-width，以及and语法，⽤于在不同的分辨率下设置不同的CSS样式。
（4）@media的语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}什么时候进九
其中mediatype有print（打印设备）、screen（⽤于电脑屏幕，平板电脑，智能⼿机等）、speech（应⽤于屏幕阅读器等发声设备）；media feature则是⽤来规定如最⼤宽度或者最⼩宽度。
我们来看看bootstrap中布局容器的例⼦：
Bootstrap 需要为页⾯内容和栅格系统包裹⼀个 .container 容器。
如下
固定宽度布局
<div class="container">
...
</div>
或者流式布局
<div class="container-fluid">
...
</div>
在bootstrap的css⽂档中@media属性
1591~1605⾏五行方位
@media (min-width: 768px) {
陶拼音.container{
width: 750px;
}
}
@media (min-width: 992px) {
.container{
width: 970px;
古诗词歌曲}
}
@media (min-width: 1200px) {
.
四姑娘山镇
container{
width: 1170px;
}
}
……
以上代码实现了随浏览器宽度的变化container容器的宽度也进⾏变化。
2、除了响应式这⼀特点外，另⼀个特点就是：移动设备优先
在html⽂件中head区域加⼊这样的⼀个meta标签，name=“viewpoint”是指这个标签对移动设备⽣效，content中width=device-width是指宽度为设备宽度，initial-scale=1意思是初始缩放⽐例为1.
<meta name="viewport" content="width=device-width, initial-scale=1">
但是在css⽂档中没有对超⼩屏幕定义任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的移动设备优先！
/* 超⼩屏幕（⼿机，⼩于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* ⼩屏幕（平板，⼤于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌⾯显⽰器，⼤于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* ⼤屏幕（⼤桌⾯显⽰器，⼤于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
3、bootstrap⾃定义“date-*”属性的使⽤
data属性是HTML5中定义的⼀个全局属性，它⽤来存在页⾯或者应⽤程序的私有⾃定义数据。我们可以为所有 HTML 元素上嵌⼊⾃定义data 属性，⾃定义（存储）的数据可以被CSS或者JS来使⽤，来
提⾼⽤户体验。
data-* 属性包括两部分：
属性名不应该包含任何⼤写字母，并且在前缀 “data-” 之后必须有⾄少⼀个字符
属性值可以是任意字符串
data属性是bootstrap中应⽤很多的⼀个属性，它可以让开发者仅仅通过data属性API就能使⽤所有Bootstrap中的插件，⽽且不⽤写⼀⾏JavaScript代码。
bootstap中封装的data-*属性的API
**css中**
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
**js中**
[data-toggle="buttons"
[data-toggle="collap"]
[data-toggle="dropdown"]
[data-toggle="modal"]
[data-toggle="tab"]
[data-toggle="pill"]
4、bootstrap采⽤栅格系统进⾏各个区块之间的布局
参考：
栅格将⼀个页⾯可以拆分成多个区块来理解，⽽正是这些区块共同构成了真个页⾯的布局。根据不同的屏幕尺⼨情况，调整这些区块的排版，就可以实现响应式设计。另外，屏幕宽度较⼤的时候，区块倾向于⽔平分布，⽽屏幕宽度较⼩的时候，区块倾向于竖直堆叠。
栅格样式库⼀般是这样做的：将页⾯划分为若⼲等宽的列（column），然后推荐你通过等宽列来创建响应式的页⾯区块。
20款家常汤菜做法Bootstrap把它的栅格放在CSS这个分类下，并称它为Gird system。默认分为12列。
要点⼀：容器、⾏与列
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
container、row、column必须保持特定的层级关系，栅格系统才可以正常⼯作。
要点⼆：断点类型
Bootstrap栅格的column对应的类名形如.col-xx-y。y是数字，表⽰该元素的宽度占据12列中的多少列。⽽xx只有特定的⼏个值可供选择，分别是xs、sm、md、lg，它们就是断点类型。
在Bootstrap栅格的设计中，断点的意义是，当视⼝（viewport）宽度⼩于断点时，column将竖直堆叠（display: block的默认表现），⽽当视⼝宽度⼤于或等于断点时，column将⽔平排列（float的效果）。按照xs、sm、md、lg的顺序，断点像素值依次增⼤，其中xs表⽰极⼩，即认为视⼝宽度永远不⼩于xs断点，column将始终⽔平浮动。
有时候，会需要将多种断点类型组合使⽤，以实现更细致的响应式设计。此时不同的断点类型之间会有怎样的相互作⽤呢？
先看看Bootstrap的sass源码是如何定义栅格的：
@include make-grid-columns;
@include make-grid(xs);
@media (min-width: $screen-sm-min) {
@include make-grid(sm);
}
@media (min-width: $screen-md-min) {
@include make-grid(md);
}
@media (min-width: $screen-lg-min) {
@include make-grid(lg);
}
可以看到，⽤了min-width
的写法，⽽且断点像素值越⼤的，对应代码越靠后。所以，如果有这样的⼀些元素：
结合前⾯的源码，可以想到，在上⾯这样视⼝宽度由⼩变⼤的过程中，⾸先是保持默认的竖直堆叠，然后超过了sm 的断点，sm 的样式⽣效，变为⼀⾏两列的排版，再继续超过lg 的断点后，lg 的样式也⽣效，由于lg 的样式代码定义在sm 之后，所以会覆盖掉sm 的样式，从⽽得到⼀⾏四列的排版。
所以，结合使⽤多个断点类型，就可以引⼊多个断点变化，把响应式做得更加细致。
⼆、bootstrap ⾯试题
1、为什么使⽤bootstrap ？
答：浏览器⽀持情况、移动优先、响应式布局、简单易写、统⼀编码风格的话。
2、什么是bootstrap 栅格系统？
答：系统会⾃动分为最多12列，栅格系统⽤于通过⼀系列的⾏（row ）与列（column ）的组合来创建页⾯布局，你的内容就可以放⼊这些创建好的布局中
3、为什么bootstrap 栅格系统是12列？
答：因为12是1，2，3，4，6的最⼩公倍数，所以12列栅格系统相对较灵活，⽀持将⼀⾏分成1列，2列，3列，4列，6列。若是想要⽀持5列，那1，2，3，4，5的最⼩公倍数是60，⽽60这个数对于栅格系统来说显然太⼤了。18能均分4列不？24能做的12都能做，所以12是最好的选择。
1、 如果让⼀个元素在pc 端显⽰⽽在⼿机端隐藏，下列选项正确的是（b ）。
A 、 visible-xs-8 hidden-md
B 、 visible-md-8 hidden-xs
<div class ="container">
<div class ="row">
<div class ="col-sm-6 col-lg-3">1</div >
<div class ="col-sm-6 col-lg-3">2</div >
<div class ="col-sm-6 col-lg-3">3</div >
<div class ="col-sm-6 col-lg-3">4</div >
</div >
</div >
C、 visible-md-8 hidden-sm
D、 visible-sm-8 hidden-md
详解：
a、超⼩屏幕（<768px）显⽰，中屏（>=992px）隐藏，所以错误
b、中屏（>=992px）显⽰，超⼩屏幕（<768px）隐藏，所以正确
c、中屏（>=992px）显⽰，⼩屏幕（>=768px）隐藏，所以错误
d、⼩屏幕（>=768px）显⽰，中屏（>=992px）隐藏，所以错误
2、在bootstrap中，下列的类（c）可以使⼀个元素在打印使隐藏。
A、visible-print-block
B、 visible-print-inline
C、 hidden-print
D、 print-hidden示弱
详解：
a、浏览器：隐藏。打印机：可见。
b、浏览器：隐藏。打印机：可见。
c、浏览器：可见。打印机：隐藏。
d、 Bootstrap的打印类⾥⾯没有这个类。
3、在bootstrap中，栅格系统的标准⽤法（c）是错误的。
A、<div class=”container”><div class=”row”></div></div>
B、 <div class=”row”><div class=”col-md-1″></div></div>
C、 <div class=”row”><div class=”container”></div></div>
