Bootstrap框架入门准备

1. Bootstrap框架重要特性

一套完整的基础CSS插件。

丰富的预定义样式表。

一组基于jQuery的JS插件集。

一个非常灵活的响应式（Responsive）栅格系统，并且崇尚移动先行（Mobile First）的思想。

2. Bootstrap下载地址
   Bootstrap框架的文件和源码可以在其官方网站（www.getbootstrap.com）下载。打开网站的首页，单击Download Bootstrap按钮，跳转到下载页面。
   3.　HTML标准模板
   HTML标准模板如下：
   
   
   
   
   
   
   
   
   
   
   

Hello, world!

官方网站还提供了各种布局的基本模板供大家使用，大家可以到如下地址进行访问查看：http://getbootstrap.com/getting-started/

4. CSS基本语法
   Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。
   4.1　优先级
   如何确定CSS的优先级？这里我们要先引入一个机制，分别用4个数字（a，b，c，d）表示优先级组合，比如1，1，1，1和0，1，0，1。它们的意思分别是：
   第一个数字（a）表示style属性，优先级最高。由于一般都是class样式，所以该值一般都是0。
   第二个数字（b）是该CSS选择器上的id数量的总和，一般都是1个。
   第三个数字（c）是用在该CSS选择器上的其他属性CSS选择器以及伪类的总和。这里包括class（.btn）和属性CSS选择器（比如li[id=red]）。
   第四个数字（d）计算元素（就像table、p、div等）和伪元素（就像first-child等）。
   通用CSS选择器（*）是0优先级。
   如果两个CSS选择器有同样的优先级，在样式表中后面的那个起作用。
   计算下面两个选择器的优先级：

leftbar li#first { color: red; } #leftbar li:first-child{ color: blue; }

结果肯定是第1个比第2个优先级高，因为第1个的优先级是0，2，0，1，而第2个是0，1，0，2。
4.2　选择器
每一条CSS样式的定义都由两部分组成，形式如下：选择器{样式}。在{}之前的部分就是“选择器”。“选择器”指明了应用这些“样式”的网页元素。
1.属性选择器
Bootstrap的CSS组件里使用了很多属性选择器，比如[data-toggle^=button]、[data-toggle=toggle]等。属性选择器有多种用法
2.子选择器
CSS里的子元素用符号“>”表示。如下示例是表示拥有table样式的表格，其thead元素内的tr元素如果有th的话，则应用该样式。
.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #dddddd; }
3.兄弟选择器
兄弟元素分为两种，一种是临近兄弟，一种是普通兄弟。临近兄弟的选择符用“+”表示。比如导航条里要设置两个li之间的外边距，则需要如下定义：
.nav-pills > li + li { margin-left: 2px; /* 加大左外边距 / }
如果只想查找某一个指定元素后面的兄弟节点（而不限制于临近节点），可以使用普通兄弟节点的符号“～”。比如：
.article h1 ~ p { font-size: 13px; }
4.3　伪类
CSS3提供了非常多的可用伪类，但是Bootstrap只用了常用的几个，这里我们只简单列一下常用的伪类和其对应的意思，具体如表1-5所示。
举个例子，按钮组里，除第一个按钮、最后一个按钮和带有dropdown-toggle样式的元素外，其他btn样式的按钮都不能设置圆角。我们应该这么定义：
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
4.4　display属性
这个属性用于定义建立布局时元素生成的框的类型。对于HTML等文档类型，如果使用display时不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。表1-6是display支持的常见属性值和意义。
4.5　媒体查询
媒体查询是进行响应式设计的核心要素，其功能非常强大。这里我们只列出Bootstrap用到的功能，具体可以访问http://www.w3.org/TR/css3-mediaqueries/进行查看。
Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。
@media (max-width: 767px) { /在小于768像素的屏幕里,这里的样式才生效/ } @media (min-width: 768px) and (max-width: 991px) { /在768和991像素之间的屏幕里,这里的样式才生效/ } @media (min-width: 992px) and (max-width: 1199px) { /在992和1199像素之间的屏幕里,这里的样式才生效/ } @media (min-width: 1200px) { /在大于1200像素的屏幕里,这里的样式才生效/ }
5.JavaScript基本语法
主要介绍JavaScript的基本用法。理解这些用法以后，就可以按照Bootstrap的开发规范去开发自己的各种插件了。
5.1　||和&&运算符
Java Script中的||和&&两个运算符，与其他语言相比略有不同，其符合如下规则：
❑||表示，如果第一个元素可以转换为true，则返回第一个元素的值，否则查询第二个元素的值。如果多个||一起用，则按顺序优先级判断。
❑&&则相反，如果第一个元素可以转换为false，才返回第一个元素的值，否则返回第二个元素的值，多个&&一起用时，也是按顺序优先级判断。
说得严谨一些就是：
❑a && b&& c&&d：返回第一个可转换为false的元素值。
❑a||b||c||d：返回第一个可转换为true的元素值。
上述运算符的转换规则如下：
❑对象为true
❑非零数字为true
❑非空字符串为true
❑其他为false
5.2　立即调用的函数表达式
在JS里，function在定义的时候就可以通过在后面加一个小括号的形式立即进行调用。比如：
(function () { / code / } ()); // 推荐使用这个
(function () { / code / })(); // 这个也是可以用的
(function () { / code / } (1)); // 传入参数1
(function () { / code / })(2); // 传入参数2
Bootstrap的所有的JS插件都使用了这个模式。比如在alert.js文件里有以下代码：
+function ($) { "use strict"; }(jQuery);
这个文件的意思是声明一个function，然后立即执行，并且在执行的时候传入jQuery对象作为参数。这么做的好处是，此时function内部的$已经是局部变量了，不会再受外部作用域的影响了。
function前面的+号和分号的功能是一样的，主要是防止定义了不符合规定的代码。比如上面的这段代码若没加+号，则代码连接在一起执行就会出错。这样就消除了出错的可能性。不习惯的话，改成这样也行：
;function ($) { "use strict"; }(jQuery);
5.3　原型
在Bootstrap的JS插件里，所有的插件都是利用了类似下面的代码：
Alert.prototype.close = function (e) { /...*/ }
上面的代码就是在Alert函数上定义一个名为close的原型方法。至于什么叫原型，原型有什么好处，这里我们不会深入讲解，只是举一个例子，简单理解一下就好。
var Calculator = function () {}; Calculator.prototype.add = function (a, b) { return a + b; } var cal = new Calculator(); var sum = cal.add(1, 2);
由于这些内容不是本书的重点，所以这里只需要知道Calculator的实例能调用原型上的add方法就可以了（就像Java和C#里定义的普通方法一样）。
6.　jQuery基本用法
本小节主要是介绍与jQuery相关的用法，读者在深入了解这些特性以后，就可以按照Bootstrap的开发规范去开发自己的各种插件了，而不需要精通jQuery的全部用法。
在学习jQuery相关的用法之前，首先要确保所有的CSS选择器都能在jQuery里使用，比如$('[data-toggle^=button]')。如果遇到任何不明白的选择器，请查询CSS相关的语法。
6.1　事件绑定
jQuery的on和off分别用于绑定和禁用事件。例如：
$('td').on("click", function (event) { // 绑定abc元素上的click事件,单击时弹出提示 alert(1); }); $('td).off('click'); // 禁用abc元素上的click事件
但是对于Bootstrap框架，它对jQuery的on和off的使用稍有不同。它使用了另外一种语法，例如：
$(document).on('click.bs.carousel.data-api','td',function (e){}; $(document).off('.carousel.data-api');
上述的on在使用时，中间多了一个参数，而且选择器变成了document。它的好处是只在document上绑定一个单击事件，利用冒泡的机制，在单击的时候检查是否是td元素，如果是才处理。而前面我们把td作为选择器的时候，一个页面有多少td元素就会绑定多少个click事件，这样性能会大大降低。这种3个参数的模式称为享元模式。
6.2　事件命名空间
另外，还需要注意的是，这里的事件后面都跟了一些字符串，我们简单称它们为带有命名空间的事件。比如，你声明如下这样的代码：
$('#abc').on("click.tomxu", function (event) { alert(1); });
一般别人触发click事件，都是这样做的：
$('#abc').trigger('click');
执行上述代码，在click时，所有绑定的click事件回调都会被执行。但是如果触发的时候，你不想影响其他click触发代码，这时候就可以只触发自己定义的click事件，以求不会对别人绑定的click回调产生影响，这时可以这样做。
$("#abc").trigger('click.tom.xu');
6.3　$.data()
很多JS插件里都使用了$(selector).data()方法，它的意思是收集指定元素上的所有以data-开头的自定义属性，并合并成为一个对象字面量。
对于以data-开头的自定义属性，相信大家都知道它是HTML5新支持的语法。比如：

如果要获取data-role里aaa这个值，则需要调用如下代码：
$("'#abc").data("role");
如果是不带参数的$("'#abc").data()；，则表示一次性将所有以data-开头的参数都收集起来，其结果和用如下方式声明一个value变量是一样的。
var value = { role: 'aaa', toggle: 'toggle', xxx: 'tom' };
Bootstrap中的很多JS插件都是利用了这个特性，在HTML元素上定义了一些必要的参数，比如要不要使用动画、是否开启键盘事件等。大家在分析JS插件的option选项参数时即可看到各个参数的详细解释。
7.　HTML5辅助设计
在Bootstrap组件里，很多示例里都出现了不是以data-开头的自定义属性，我们称之为辅助属性。这些属性是HTML5新提出的概念，用于支持残障人士、老年人、文化水平不高或暂时患病的人使用屏幕阅读器进行页面访问。这种逐渐增强和易访问的丰富Internet应用程序简称CSS。示例如下：

上述示例中的aria-hidden="true"表示对屏幕阅读器隐藏该div元素，我们称该aria-hidden为CSS状态属性。
示例中的aria-labelledby="myModalLabel"告诉屏幕阅读器，这是一个modal，一般用在区域元素上，它的值一般和标题或是标签元素的ID对应。
假定屏幕阅读器遇到包含role=navigation的页面且其上还有一个div元素，屏幕阅读器就会知道该div元素用于导航，用户将能直接使用导航功能而非通过所有链接选择标签。role支持的属性值。

更多关于CSS的详细内容，可以阅读下面两篇文章：

❑http://msdn.microsoft.com/zh-cn/magazine/jj863135.aspx

❑http://www.zhangxinxu.com/wordpress/?p=2277