bootstrap学习总结分享
最近项⽬开发需要bootstrap于是⾃学了⼀波，现在来和⼤家分享⼀下。
⼀. ⼀些组件插件的使⽤及注意点
1、 Bootstrap是移动设备优先的
让 Bootstrap 开发的⽹站对移动设备友好，确保适当的绘制和触屏缩放，需要在⽹页的 head 之中添加 viewport meta 标签，如下：<meta name="viewport"content="width=device-width, initial-scale=1">
注意：Bootstrap所有的js插件都依赖jquery，故bootstrap.js应在jquery.js后引⼊
2、导航条 navbar
导航条依赖javascript，响应式导航条依赖（collapse）组件。固定在顶部的导航条会遮盖住⽹页中的实际内容，解决的⽅法就是给body设置padding把内容从导航条下⾯挤出来。
在导航条中实现下拉菜单class:dropdown其中的具体的内容放在ul列表中这个列表的类dropdown-menu这样ul⾥⾯的li就成了⼀个下拉菜单的选取项。同时data-toggle添加到需要变成下拉菜单的元素中，如果没有data-toggle属性元素不会显⽰下拉菜单。
3、轮播内容的carousel
图⽚轮播设置样式⾸先设置最外层包裹的div在设置每⼀个轮转的div最后设置图⽚的宽度为100%，使图⽚⾃动缩放。
4、 bootstrap弹出框（模态框）
⼀个完整的bootstrap弹出框分三部分modal-header、modal-body、modal-footer这三部分，弹出框最好要复制在body元素中，也就是作为body的⼦元素出现，这时为了防⽌其他元素的遮挡，默认是隐藏的，那么我们如何让其弹出呢？⽤data-toggle=”modal” data-target=”#about”这两个元素是控制id为about的弹出框弹出的。
⼆、css样式
1、栅格系统
每列实际上是没有间距的，是每个col类⾃⾝携带了左右padding值，看上去是有左右间距的。
栅格系统阈值计算
lg为 min-width：1200px
md为min-width：992px
sm为min-width：768px
xs为最⼩width时宽度计算都按照⼀定的⽐例计算，⽆阈值。
其中的栅格列都使⽤了position:relative定位，relative是脱离了⽂档流，它的定位是依据⽗级的原始点为原始点定位，虽然脱离⽂档流，但是还是占⽤⽂档流的位置，如果要彻底脱离⽂档流，就使⽤position:absolute，或者position:fixed
2、平移列
使⽤offset来进⾏平移，即平移的列数。如：
<div class="col-xs-offset-2 col- xs-4">33</div> //将33向右平移了两列
3、嵌套列
在⽹络列⾥再嵌套列，
//注意下⾯这种情况，平分8列时，不是设置它为两个4，⽽是两个6，因为bootstrap中是12列栅格布局。
<div class="row">
为什么使用bootstrap?<div class="col-xs-8">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
对⽐来看：
结果如下图：
没有平分8，打开控制台发现padding-left 和padding-right均为15px，这是因为，列与列之间存在padding值得影响，那为什么第⼆个div 没有影响呢？我们来探究⼀下栅栏格的原理。
1：“⾏（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2：通过为“列（column）”设置 padding 属性，从⽽创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从⽽抵消掉为 .container 元素设置的 padding
也就间接为“⾏（row）”所包含的“列（column）”抵消掉了padding。
注意：此时row已经把列的padding给抵消了，所以，没有出现padding的值情况。
4、列排序
主要使⽤col-xs-push-* col-xs-pull-(表⽰0-11的数字)如何理解这两个类呢？push表⽰推，pull表⽰拉。如：
结果如下图：
可理解为div1和div2两者交换位置，需要div1向右推8列，div2需要向左拉4列。
三、流式⽹络布局
1，列宽采⽤百分⽐⽽不是像素；
2，将row类换成row-fluid
3，其他基本功能与上⾯固定布局⼀样，⽀持响应式 4，平分某⼀个列时，由于流式布局采⽤的是百分⽐，所以应该按照6来计算
<div  class ="container"><!--或者container-fluid-->
<div  class ="row">
<div  class ="col-xs-8">
<div  class ="col-xs-2">11</div >
<div  class ="col-xs-4">22</div >
<div  class ="col-xs-2">33</div >
</div >
</div >
<div  class ="row">
<div  class ="col-xs-8">11</div >
</div >
<div  class ="row">
<div  class ="col-xs-4">11</div >
<div  class ="col-xs-4">22</div >
<div  class ="col-xs-4">33</div >
</div >
</div >
<div  class ="row">
<div  class ="col-xs-4">41</div >
<div  class ="col-xs-8">42</div >
</div >
<div  class ="row">
<div  class ="col-xs-4 col-xs-push-8">43</div >——记为div1
<div  class ="col-xs-4 col-xs-pull-8">44</div >——记为div2
</div >
当屏幕⼩于768px时：
当屏幕⼤于992px时：
row-fluid类（⾮常重要），决定是否是流式布局，然后⾥⾯的内容块代码编写与⽹络系统⼀致，依然是从col-md-1到col-md-12，分别对应于不同的百分⽐。
四、Less
定义：基于CSS的CSS扩展技术
特点：引⼊变量、混合、运算和函数。
作⽤：简化CSS代码。
1.定义变量。
形式：@ 变量名=值；
我⼀直以为Bootstrap的LESS源代码精髓在mixins.less，所以主要讲解mixins.less。
2、mixins？
什么是mixins？
混⼊，或者翻译成混合。官⽹的说法是：我们可以定义⼀些通⽤的属性集为⼀个 class，然后在另⼀个 class 中去调⽤这些属性。 ⽅式：可以⽤类选择器 .； id选择器：#；标签选择器：input body等
看起来⾮常难理解，没事，我们来看例⼦，⽐如有这样⼀个class：那如果我们现在需要在其他 class 中引⼊那些通⽤的属性集，那么我们只需要在任何 class 中像下⾯这样调⽤就可以了：
<!--流失布局与固定布局对⽐-->
<div  class ="container">
<div  class ="col-xs-6">hahah </div >
<div  class ="col-xs-6">xixix </div >
</div >
<div  class ="container-fluid">
<!--声明container-fluid 类，表明内容使流式布局，作⽤：作为⼀个包含块来包含流式内容-->
<div  class ="row-fluid">
<div  class ="col-xs-6 col-md-12">hehehe </div >
<div  class ="col-xs-6 col-md-12">lalala </div >
</div >
</div >
<div  class ="row-fluid">
<!--没有声明container 和container-fluid 类，此时为屏幕的宽度-->
<div  class ="col-xs-6">heihei </div >
<div  class ="col-xs-6">luelue </div >
</div >
.bordered  {
border-top: dotted 1px black ;
border-bottom: solid 2px black ;
}
}
.post a {
color: red;
.bordered;
}
编译后，.bordered class ⾥⾯的属性样式都会在 #menu a 和 .post a 中体现出来：
#menu a{
color:#111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a{
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
在 LESS 中，我们还可以还可以像函数⼀样定义⼀个带参数的属性集合：
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-
webkit-border-radius: @radius;
}
然后在其他 class 中像这样调⽤它：
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
Bootstrap 3.0中有许多有⽤的混⼊函数，第⼀个⽆疑是clearfix函数。clearfix是⽤来清除浮动的。
但是，为什么要清除浮动呢？
如果⽗元素只包含浮动元素，那么它的⾼度就会塌缩为零。 形象的说，既然是浮动元素，那么其⽗级元素就觉得他们都是飘在我上⾯的玩意，没有占据我的空间，所以⾼度就塌陷为零了。这时候我们清除浮动，告诉⽗级元素，你需要包含这些浮动的元素，然后他就被撑开了。常见的清除浮动技术是这样的：
.clearfix:after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearxi{
*zoom: 1;
}
Boostrap：
content: " ";
display: table;
}
&:after {
clear: both;
}
}
如果要兼容IE6和IE7则加上：
.
clearfix{
*zoom: 1;
}
值得注意Bootstrap使⽤的技术不⽀持Firefox 3.5以下版本。
clearfix基本原理
远古时代，我们使⽤⼀个隐藏的元素进⾏清除浮动。但⾃从伪类选择器:after和:before出现后，我们可以通过content来悄悄的在⼦元素后端，或者前端插⼊元素，并将其设为clear: both。
:after
:after 选择器在被选元素的内容后⾯插⼊内容。
请使⽤ content 属性来指定要插⼊的内容。
:before
:before 选择器在被选元素的内容前⾯插⼊内容。
请使⽤ content 属性来指定要插⼊的内容。
怎么混⼊？
我们来看看Bootstrap中的例⼦：
// Panel contents
.panel-body {
padding: 15px;
.clearfix();
}
为了防⽌panel塌陷，Bootstrap使⽤.clearfix()混⼊函数对.panel-body处理，编译后如下：
.panel-body{
padding: 15px;
}
.panel-body:before,
.panel-body:after{
display: table;
content: " ";
}
.panel-body:after{
clear: both;
}
这种clearfix⽅案，⽣成了两个伪元素，并将其display设置成table。这将创建⼀个匿名的table-cell和⼀个新的块状区域，这意味
着：:before伪元素阻⽌了顶部边缘塌陷。⽽:after伪元素清除了浮动。其结果是，没有必要隐藏任何⽣成的内容，并减少所需的代码量。
五、优缺点总结

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