bootstrap使⽤⼼得总结
背景介绍：2015年9⽉份开始接触bootstrap前端框架集，为什么呢，因为它实在是太⽕了，慕课⽹、菜鸟教程这些我经常逛的⽹站上bootstrap都是⼀个专题了，再加之它简单好上⼿于是就选了它来⼊门。
项⽬：1.电⼦⼿册阅读⽹站的搭建；2.个⼈博客⽹站的搭建。
bootstrap的特点：
1.响应式布局
概念：响应式web布局是让⽤户通过不同尺⼨的浏览器都可以获得良好视觉的⼀种⽅法。是⽬前⽐较流⾏的⼀种布局⽅法。
实现原理：通过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页⾯内容在不同的媒体环境下运⾏时可以展⽰不同的样式（这个样式当然是由我们来书写规定的）。@media是CSS3中规定的属性，它可以实现针对不同媒体设备来设置不同的样式的⽬的。⽽且就算是在同⼀设备中它也可以在你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。
Bootstrap主要⽤到min-width、max-width，以及and语法，⽤于在不同的分辨率下设置不同的CSS样式。
@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.data-*属性的使⽤
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="collapse"]
[data-toggle="dropdown"]
[data-toggle="modal"]
[data-toggle="tab"]
[data-toggle="pill"]
4.栅格系统
参考：
栅格将⼀个页⾯可以拆分成多个区块来理解，⽽正是这些区块共同构成了真个页⾯的布局。根据不同的屏幕尺⼨情况，调整这些区块的排版，就可以实现响应式设计。另外，屏幕宽度较⼤的时候，区块倾向于⽔平分布，⽽屏幕宽度较⼩的时候，区块倾向于竖直堆叠。
栅格样式库⼀般是这样做的：将页⾯划分为若⼲等宽的列（column），然后推荐你通过等宽列来创建响应式的页⾯区块。
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);
}bootstrap项目
@media (min-width: $screen-lg-min) {
@include make-grid(lg);
}
可以看到，⽤了min-width的写法，⽽且断点像素值越⼤的，对应代码越靠后。所以，如果有这样的⼀些元素：
<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>
结合前⾯的源码，可以想到，在上⾯这样视⼝宽度由⼩变⼤的过程中，⾸先是保持默认的竖直堆叠，然后超过了sm的断点，sm的样式⽣效，变为⼀⾏两列的排版，再继续超过lg的断点后，lg的样式也⽣效，由于lg的样式代码定义在sm之后，所以会覆盖掉sm的样式，从⽽得到⼀⾏四列的排版。
所以，结合使⽤多个断点类型，就可以引⼊多个断点变化，把响应式做得更加细致。

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