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">33div> //将33向右平移了两列

3、嵌套列
在网络列里再嵌套列，

//注意下面这种情况，平分8列时，不是设置它为两个4，而是两个6，因为bootstrap中是12列栅格布局。
<div class="row">
    <div class="col-xs-8">
        <div class="col-xs-6">div>
        <div class="col-xs-6">div>
    div>
div>

对比来看：

<div  class="container">--或者container-fluid-->
    <div  class="row">
        <div  class="col-xs-8">
            <div  class="col-xs-2">11div>
            <div  class="col-xs-4">22div>
            <div  class="col-xs-2">33div>
        div>
    div>
    <div  class="row">   
        <div  class="col-xs-8">11div>
    div>
    <div  class="row">   
        <div  class="col-xs-4">11div>
        <div  class="col-xs-4">22div>
        <div  class="col-xs-4">33div>
    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表示拉。如：

<div class="row">
    <div class="col-xs-4">41div>
    <div class="col-xs-8">42div>
div>
<div class="row">
    <div class="col-xs-4 col-xs-push-8">43div>——记为div1
    <div class="col-xs-4 col-xs-pull-8">44div>——记为div2
div>

结果如下图：
可理解为div1和div2两者交换位置，需要div1向右推8列，div2需要向左拉4列。

三、流式网络布局

1，列宽采用百分比而不是像素；
2，将row类换成row-fluid
3，其他基本功能与上面固定布局一样，支持响应式
4，平分某一个列时，由于流式布局采用的是百分比，所以应该按照6来计算

        
        <div class="container">
            <div class="col-xs-6">hahahdiv>
            <div class="col-xs-6">xixixdiv>
        div>
        <div class="container-fluid">
        
            <div class="row-fluid">
                <div class="col-xs-6 col-md-12">hehehediv>
                <div class="col-xs-6 col-md-12">lalaladiv>
            div>
        div>
        <div class="row-fluid">
        
            <div class="col-xs-6">heiheidiv>
            <div class="col-xs-6">lueluediv>
        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：

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

那如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中像下面这样调用就可以了：

#menu a {
    color: #111;
    .bordered;
}
.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：

.clearfix() {
  &:before,
  &:after {
    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伪元素清除了浮动。其结果是，没有必要隐藏任何生成的内容，并减少所需的代码量。

五、优缺点总结

bootstrap虽然很好，但也不是没有缺点，由于框架很多都是模块化的，只能这么用，当您的网站比较多样化，界面复杂的话就不太适合使用，此时您需要大量重写代码，维护比较麻烦，此外这个系统的CSS内容也比较多，很多内容是根本用不到的，对于带宽不是很理想的情况下就会造成浪费，当然bootstrap的css模块化还是相当不错的。下面总结几点本人觉得非常不错的点。
栅格系统（结构）、CSS模块化（表现）、JavaScript插件（交互）

不足：
对IE兼容也存在不小的问题，bootstrap将所有的元素盒模型都设置成了border-box，这是IE混杂模式下的盒模型，光这点就导致了不能兼容IE。此外还用到了大量的H5标签以及CSS3语法，这些语法标签兼容性方面同样存在不小的问题，当然网上存在很多兼容IE的办法，但需要引入其他文件，有些还不小，势必导致加载速度变慢，影响用户体验。
bootstrap对IE6，7的兼容性肯定不好，对IE8的支持也需要一些额外的文件。
IE8的媒体查询需要response.js的配合才能实现
bootstrap不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 标签加入到你的页面中：

按 F12 键打开 IE 的调试工具，就可以看到 IE 当前的渲染模式是什么。

最后：
bootstrap官方文档列出了一个编码规范，值得各个开发团队参考，下面罗列一下比较重要的：
HTML
语法：
用两个控制代替制表符（tab）–这是唯一能保证在所有环境下保持一致的的展现方法
嵌套元素应当缩进一次（两个空格）

CSS
声明顺序：
相关属性声明应该归为一组，并按照下面的顺序书写：
1、定位 Positioning
2、盒模型 Box Model
3、格式排版 Typographic
4、视觉 Visual
5、杂项 Misc
由于定位可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首位。盒模型排在第二，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部或者是不影响前两组属性，因此排在后面
完整规范网址：http://codeguide.bootcss.com/#html-syntax

总结：
bootstrap属于前端UI库，可以快速搭建前端页面，还可以使用saas重新设计组件，，比较适合前端一般的后端工程师，大中型企业用的不多。bootstrap源码对于前端学习非常有必要。