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">
    <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">11</div>
            <div  class="col-xs-4">22</div>
            <