Bootstrap入门准备
Bootstrap入门准备指南教程
本节目录：
-
简介
-
入门
-
基本模板
-
CSS基本语法
-
JS基本语法
-
扩展
简介
Bootstrap是目前最流行的前端开发框架，由Twitter的两位前 员工Mark Otto和Jacob Thornton在2010年8月份创建。它是一套 基于Less的前端开发库（最新版也包含了Sass源码），提供了很多常见并常用的各种CSS和JavaScript合集，以便开发人员随时上手。
Bootstrap提供了如下重要的特性：
-
一套完整的基础CSS插件。
-
丰富的预定义样式表。
-
一组基于jQuery的JS插件集。
-
一个非常灵活的响应式（Responsive）栅格系统，并且崇尚移动先行（Mobile First）的思想。
从V3.1.0开始，Bootstrap的License授权改成了MIT协议。 MIT是目前最为宽松的协议，大家可以放心地在各种商业环境中使用它。
入门
cdn：
Bootstrap框架的文件和源码可以在其官方网站 （www.getbootstrap.com）下载。打开链接可以看到3个下载链接
下载Bootstrap，下载的内容是编译后可以直接使用。包括未经压缩的文件和经过压缩处理的文件。
下载源码，是用于编译CSS的Less源码，以及各个插件的JS源码。
下载Sass项目，是用于编译CSS的Sass源码，以及各个插件的JS源码。
文件结构
3.X版和2.X系列版本有一个很大区别，就是2.x系列版本用于展示icon小图标的.png图 片不见了，取而代之的是fonts目录的4种类型的字体文件。我们称这种方式为@font-face版本的icon实现，该字体来自glyphicons.com网站，并得到免费授权。通过这种技术显示图标的好处是，图标可以被任意缩放、改变颜色。
对文件的css、js文件夹名称 进行随意重命名，但是不能对fonts文件夹进行重命名，因为CSS 文件里的源码使用了相对路径（../fonts/）
注意bs的所有js插件都是基于jQuery的，要确保在使用这些功能的时候引用相应的jQuery文件。
基本模板
由上述模板代码可以看出，3.x和2.x版本相比，有一个很大的 区别，就是多了以下一行代码：
这就是我们前面提到的，Bootstrap从3.0版本开始全面支持移动平台了，并将贯彻移动先行（Mobile First）的宗旨。
上述代码 的意思是，默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小。
CSS基本语法
Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。
如何确定CSS的优先级？
这里我们要先引入一个机制，分别 用4个字母（a，b，c，d）表示优先级组合.
第一个数字（a）表示style属性，优先级最高。由于一般都 是class样式，所以该值一般都是0。
第二个数字（b）是该CSS选择器上的id数量的总和，一般都 是1个。
第三个数字（c）是用在该CSS选择器上的其他属性CSS选择 器以及伪类的总和。这里包括class（.btn）和属性CSS选择器（比 如li[id=red]）。
第四个数字（d）计算元素（就像table、p、div等）和伪元 素（就像first-child等）。
选择器
这里简单介绍2个常用的：
子选择器：
扩展：
div,p表示多个选择器同时被选择
伪类用于向某些选择器添加特殊的效果。如a:hover a:link
媒体查询
媒体查询是进行响应式设计的核心要素，其功能非常强大。
Bootstrap主要用到min-width、max-width，以及and语法， 用于在不同的分辨率下设置不同的CSS样式。
JS基本语法
||与&& 2个运算符
||表示，如果第一个元素可以转换为true，则返回第一个元 素的值，否则查询第二个元素的值
&&则相反，如果第一个元素可以转换为false，才返回第一 个元素的值，否则返回第二个元素的值
空对象null，undefined为false
数字零为false
空字符串为false
自执行函数
原型
在Alert函数上定义一个名为close的原型方法。
什么是原型，原型的好处，可以看这篇：
这里演示如何调用原型方法
jQuery
绑定事件最好使用on()方法。
而在bs中
上述的on在使用时，中间多了一个参数，而且选择器变成了 document。它的好处是只在document上绑定一个单击事件，利 用冒泡的机制，在单击的时候检查是否是td元素，如果是才处 理。而前面我们把td作为选择器的时候，一个页面有多少td元素 就会绑定多少个click事件，这样性能会大大降低。这种3个参数的 模式称为享元模式。
$(selector).data()
收集指定元素上的所有以data-开头的自定义属性，并合并成为一个对象字面量。
如果要获取data-role里aaa这个值
扩展
Less是一种CSS预处理技术，它是一种动态样式语言，属于 CSS预处理语言中的一种。
HTML5辅助设计
在bs中，出现了不是以data-开头的 自定义属性，我们称之为辅助属性。
这些属性是HTML5新提出的概念，用于支持残障人士、老年人、文化水平不高或暂时患病的 人使用屏幕阅读器进行页面访问。
aria-hidden="true"表示对屏幕阅读器隐藏该div 元素
role="navigation"表示该区域用于导航
前端观察