概念

BootStrap是由Twitter的两位员工Mark Otto和Jacob Thornton于2010年8月创建，距今已有7年，不过其仍然是最流行的前端CSS框架。它基于Less前端开发库，提供了常见的CSS和Javascript代码，然开发快速上手。其具有以下特性：完整的基础CSS插件；丰富的预定义样式表；基于jQuery的js插件集；非常灵活的响应式栅格系统，而且崇尚移动先行的思想。随着bootstrap的火爆，出现了很多优秀插件，比如Font Awesome字体。
Bootstrap官网地址，demo和文档非常丰富。
其下载后的源码结构为：

这儿值得的一说的就是fonts中通过字体文件代替了过去的.png，其通过@font-face语法，将安全的Web字体实时下载到客户端，便于任意缩放、改变颜色。
Html标准模板如下所示


    
    
    
    bootstrap基础模板
    
    
    

    

    

    
    

可以看到viewport的媒体查询，此外如果需要更多的模板可以访问getbootstrap下载模板。

CSS基本回顾

优先级：（过去有一些误区）如何确定CSS的优先级，需要引入一个机制，分别用数字(a,b,c,d)表示优先组合，a表示style属性（行内样式），优先级最高，但由于一般使用class样式，该值为0；b是该css选择器上id数量的总和，一般为1个；c是用在该css选择器上的其他属性css选择器和伪类的总和，包括class（.btn）和属性css选择器li[id=red];d计算元素div和伪元素first-child；通用css选择器*的0优先级，即最低；如果2个css具有相同优先级，在样式表中后面的起作用。比如下面连个选择器的优先，第一个比第二个高。
leftbar li#first{color: red}: 0,2,0,1
leftbar li:first-child{color: blue}: 0,1,0,2

选择器
属性选择器

  • [att=value] 该属性有确定的值

  • [att~=value] 该属性值必须是多个空格隔开的值，比如class="title featured home"，其中需要有value

  • [att|=value] 属性值时value或value-

  • [att^=value] 属性值以什么开始

  • [att$=value] 属性值以什么结束

  • [att*=value] 属性值包含特定值

子选择器：用>表示，例如table>thread>tr>th
兄弟选择器：临近兄弟用+,普通兄弟用~

伪类：bootstrap支持的伪类包括:hover鼠标划过时的状态, :focus元素有焦点的状态, :first-child, :last-child, :nth-child()指定元素的一个或多个特定子元素(可以是数字，也可以是even,odd)。
例如，设置按钮组，除第一个、最后一个按钮和带dropdown-toggle样式的元素外，其他btn样式都不设置圆角

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}

display属性:用于定义建立布局时元素生成的框的类型，如果不谨慎使用容易出错

  • none 此元素不会显示

  • block 此元素显示为块级元素，前后会带换行符

  • inline 默认，此元素会被显示为内联元素，没有换行符

  • inline-block 行内块元素

  • list-item 此元素会以列表显示

  • run-in 此元素会根据上下问作为块级元素和内联元素显示

  • inherit 规定从父元素集成display属性

  • table-xxx 各种table显示

媒体查询:响应式设计的核心元素，常用的有min-width,max-width,and，详情可访问Mediaqueries官方网站

JavaScript语法回顾

||和&&运算符：a&&b返回第一个可转化为false的元素值，a||b返回第一个可转换为true的元素值。
立即调用的函数表达式：在JS中，function定义后通过加小括号，完成立即调动。(function(){}())

+function($){
    "user strict";
}(jQuery);//这儿+和;一样，起到分割的作用

原型：Alert.prototype.close=function(e){}
jQuery事件绑定：jQuery使用on和off来绑定和禁用时间，但bootstrap中稍有变化

$('td').on('click', function(event){});//原有格式$('document').on('click.bjock', 'td', function(event){});//这儿增加了参数'td'，而且选择器变成了document，//好处是在document上绑定了一个单击事件，利用冒泡机制，在单机的时候检查是否为td元素，如果是才处理//而把td作为选择器，一个页面有多少td都会被绑定，性能下降，这三个参数的名字呗称为享元模式(回顾一下)。

事件命名空间：可以看到上例中的事件click.bjork，bjork被称命名空间，当需要触发自己的时间时，命名空间就变得很有用，比如$('#first').trigger('click.bjork');，这是触发自己定义的事件，而不影响他人，这在前端复杂化的今天变得非常重要。
$.data():在很多js插件中都是用$(selector).data()方法，意思是收集指定元素上所有以data-开头的自定义属性，并合并成一个对象字面量。比如

，那么$(#'aaa').data();的值为:var value={role:'bbb', toggle:'ccc'};，当然也可以选定指定值$(#'aaa').data('role');，结果就是'aaa'。
Tip：
BootStrap包含aria-xxx开头的属性，被称为辅助属性，用于支持有阅读障碍的人士。

整体结构

首先介绍一下栅格系统的工作原理

  • 一行数据必须包含在一个.container中，一遍为其赋予合适的对齐方式和内边距padding。

  • 使用行在水平方向上创建一组列

  • 具体内容放在列中，只有列可以作为行的直接子元素

接下来看一下.container样式的源码，可以看出其核心就是.container和@media的设置

.container {    padding-right: 15px;    padding-left: 15px;    margin-left: auto;    margin-right: auto;
}
@media ( min-width :768px) {    .container {        width: 750px;
    }
}

栅系统的用法，其实就是列的组合，主要涉及4个特性：列组合、列偏移、列嵌套、列排序，首先介绍列组合的例子。


    
        .col-md-1
        .col-md-11