Bootstrap 源码解析

前言

Bootstrap 是个CSS库，简单，高效。很多都可以忘记了再去网站查。但是有一些核心的东西需要弄懂。个人认为弄懂了这些应该就算是会了。源码看一波。

栅格系统

所谓的栅格系统其实就是一种布局方式。融合bootstap的自适应样式就会显的很酷炫。

例子:

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                I am col-xs-6
            </div>
            <div class="col-xs-6">
                I am col-xs-6
            </div>
        </div>
    </div>

.container

.container = margin:0 auto + padding:0 15px + clearfix + media

1.margin 让盒子居中。

2.padding 让盒子与两边有一定的距离,为了美感。注意数字15。

3.clearfix为了防止与BFC有关的一些bug(这个有空再写一篇记录)。

4.media是为了相应式，根据不同的屏幕大小设置宽度。

注：.container-fluid 跟.container 的唯一区别就是没有相应式。

.row

.row = clearfix + margin:0 -15px

1.clearfix 是为了包含浮动的.col-xs-$ 们。

2.负的margin值是为了抵消.container的padding。

疑点：为什么要抵消掉.container的padding. 原因：抵消是为了尽量减少因为空间不足从而引起.contanier无法刚好的放下width加起来为100%的元素的元素。一个.col-xs-&元素最少width也有30px(15+15),也就是说12个.col-xs-1最少也要占360px,如果不用.row 抵消的话就需要390px的盒子来放置。

其实扯远了，这种极端的情况很少会发生，主要还是看你想不想padding15px 之后再布局。

.col-xs-$

.col-xs-$ = float:left + position:relative + padding:15px + width:$$%(media);

1.float:left　一行放多个div等元素的原理，还有就是让.col-xs-offset-$ 这样的类生效,原理为margin-left 。

2.position:relative 让.col-xs-pull-$ 和　.col-xs-push-$ 能够生效。原理为left:***,right:***

3.padding 为了每个元素有间隔，这里不用担心会让元素占据更多空间，原因为box-sizing:border-box;

4.media 让元素能够根据不同的屏幕大小显示不同样式。最小的屏幕用.col-xs-$设置的宽度,再大一点用.col-sm-$的，再大用.col-md ,直到.col-lg.

注：嵌套使用栅格系统的时候，原则上要用.row 包起来。原因在上面又说，上面懂了，这里也就懂了，不懂得在看一看，css不是编程语言很好懂的。

表单

bootstrap 对表单控件做了处理，让表单控件更美观和规范，只需要加.form-control 在表单控件上就可以了

.form-control = display:block + width:100% + goodstyle

1.前面两个是为了让表单自成一行（如论元素是否浮动)。

2.一些margin和vertical-align等熟悉来美化表单，并让管理他们的高度和位置。

简单的应用这个类是不足够满足需求的。下面是一般表单布局的需求和实现方式。

label与控件各种占一行。

<form>
    <div class="form-group">
        <label class="control-label">介绍</label>
        <input class="form-control" type="input">
    </div>
</form>

这个是最简单的实例，在bootstrap官网有，没啥好说的。

1 .form-group 在这里就是margin-bottom:15px;

2 .control-label 规定label的高度和行高等使其规范。

许多控件与label在同一行

<form class="form-inline">
    <div class="form-group">
        <label class="form-label">选择标签:</label>
        <button  class="btn btn-sm btn-info" v-on:click="    showselect" type="button">选择标签</button>
        <samll class="form-control-static">已选择{{select}}个标签</small>
    </div>
    <div class="form-group">
        <label class="form-label">选择关系</label>
        <select class="form-control" id="relation">
            <option value="OR">至少包含一个</option>
            <option value="AND">同时包含</option>
        </select>
    </div>
</form>

.form-inline 主要的作用就是控制子元素中的.form-control

.from-inline .form-control = display:inline-block + width:auto + vertical-align

样式表一贴出来原理应该就不需要再说什么了。但是这个布局当你觉得每个form-group 太近的时候，改动就容易犯错了，因为你很可能选择bootstrap的栅格布局，那就容易出问题。如：

<form class="form-inline">
    <div class="form-group col-xs-4">
        <label class="form-label">选择标签:</label>
        <button  class="btn btn-sm btn-info" v-on:click="    showselect" type="button">选择标签</button>
        <samll class="form-control-static">已选择{{select}}个标签</small>
    </div>
    <div class="form-group  col-xs-6">
        <label class="form-label">选择关系</label>
        <select class="form-control" id="relation">
            <option value="OR">至少包含一个</option>
            <option value="AND">同时包含</option>
        </select>
    </div>
</form>

这样的布局乍一看，没有什么问题，但是当缩小屏幕大小的时候就容易出问题。所以我建议不要使用来栅格布局来拉开距离，可以结合.pull-left 和 .

col-xs-offset-$ 来，这样的自适应能力就好很多，如：

<form class="form-inline">
    <div class="form-group pull-left">
        <label class="form-label">选择标签:</label>
        <button  class="btn btn-sm btn-info" v-on:click="    showselect" type="button">选择标签</button>
        <label class="form-control-static">已选择{{select}}个标签</label>
    </div>
    <div class="form-group pull-left col-xs-offset-1">
        <label class="form-label">选择关系</label>
        <select class="form-control" id="relation">
            <option value="OR">至少包含一个</option>
            <option value="AND">同时包含</option>
        </select>
    </div>
</form>

label于控件共同占一行

这种布局就是使用栅格布局。

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-xs-3">选择关系</label>
        <div class="col-xs-4">
            <select class="form-control" id="relation">
                <option value="OR">至少包含一个</option>
                <option value="AND">同时包含</option>
            </select>
        </div>
    </div>
</form>

form-horizontal > .form-group = clearfix ;

form-horizontal > .control-label = text-align:right;

这里需要注意的就是select等控件需要用盒子包起来。

To be continue...