bootstrap 中 css 与 javascript 的使用

1.css

1.1.选择器

　　

1.2.子选择器：

　　css 里的子元素用符号'>'表示。如下示例是表示拥有table样式的表盒，其thead元素内的tr元素如果有th的话，则应用该样式。
　　.table >thead>tr>th{

　　}

1.3.兄弟选择器：

　　兄弟分为两种：临近兄弟，普通兄弟

　　比如：导航条里需要设置两个li之间的外边距，则需要如下定义：

　　.nav-pills > li + li {

　　　　margin-left:20px;　　

　　}

　　或者用class选择器：

　　.nav-pills > .btn + .btn {

　　　　margin-left:20px;　　

　　}

　　如果只是想查找一个指定元素后面的兄弟节点（而不限于临近节点），则使用普通兄弟节点的符号"~"，比如：

　　.article h1~p{

　　　　margin-left:20px;

　　}

　　或者用class选择器：

　  .nav-pills > .btn ~ .btn {

　　　　margin-left:20px;　　

　　}

1.4.伪类

属性	描述
:hover	鼠标划过时的状态
:focus	元素拥有焦点时的状态
:first-child	指定某一个元素的第一个子元素
:last-child	指定某一个元素的最后一个子元素
:nth-child()	指定某个元素的一个或多个特定的子元素，可以传入数字，也可以传入even(偶数)或odd(奇数)

1.5.媒体查询

　　基本语法：

　　@media (max-width:767px){

　　　　/*在小于767px的屏幕里，这里的样式才生效*/

　　}

　　@media (min-width: 768px) and (max-width: 991px){

　　　　/*在大于768px，小于991px的屏幕里，这里的样式才生效*/

　　}

　　@media (min-width:1200px){

　　　　/*在大于1200px的屏幕里，这里的样式才生效*/

　　}

2.javascript

　2.1.运算符  ||  &&

2.2.立即调用的函数

　　(function () {}());　　　　//推荐使用

　　(function (){})();　　　　//也可以使用

　　(function (){}(1));

　　(function (){}(2));

　　例如：

　　+function($){

　　}(jQuery);

　　含义：声明一个函数，然后立即执行，并在执行的时候传入jQuery对象作为参数。好处：function中的$是局部变量，不收外部作用域的影响（function前面的加号和分号功能是一样的）。

　　详情请查看：http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html

2.3.原型

　　例如：

　　var = function(){};

　　Calculator.prototype.add = function(a,b){

　　　　return a+b;

　　}

　　var cal = new Calculator();

　　var sum = cal.add(1,2);

　　关于原型与原型链的内容，请查看：http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html

　2.4.事件

　　jQuery 的on和off分别用于绑定和禁用事件，例如：

　　　　$('td').on("click",function(){

　　　　　　alert(1);

　　　　});

　　　　$('td').off("click");

　　在bootsrap中的on和off的使用稍有不同：

　　　　$(document).on('click.bs.carousel.data-api','td',function(e){});

　　　　$(document).off('.carousel.data-api');
　　　　与jquery的区别：中间多了一个参数，选择器变成了document，好处：只在document上绑定一个单击事件，利用冒泡机制，在单击的时候检查是否是td元素，如果是，才处理，这种模式叫做：亨元模式。

　　　　jquery的写法，一个页面有多少tb元素，就会绑定多少个单击事件，性能大大降低。

　　详情请查看：http://www.cnblogs.com/TomXu/archive/2012/04/09/2379774.html
2.5.事件命名空间