这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战
1, Bootstrap特性
- 一套完整的基础CSS插件
- 丰富的预定义样式表
- 一组基于jQuery的JS插件集
- 一个非常灵活的响应式珊格系统，并且崇尚移动先行的思想。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1,user-scalable=no">
# 上述代码表示：强制让文档的宽度与设备的宽度保持1:1， 文档最大的宽度比例：1， 且不允许用户单击
屏幕放大浏览。
2, 优先级
如何确定CSS的优先级，我们定义一个机制：分别用4个数字（a, b, c, d）表示优先级组合。
-
第一个数字：(a) 表示style属性，优先级最高，这是CSS知识，style优先级是最高的。但是一般都习惯写class样式，所以该值是：0
-
第二个数字：(b) 表示该CSS选择器上的ID数量的总和，一般ID是唯一的，所以该值是：1
-
第三个数字：(c) 表示用在该CSS选择器上的其他属性CSS选择器以及伪类的总和，这里包括class和属性选择器比如：（.btn, [id=red])
-
第四个数字：(d) 表示计算元素(比如：table, p, div, h1,h2...)和伪元素，通常CSS选择器（*）是0优先级
举个列子：
| 选择器 | 优先级 | |
|---|---|---|
| 1 | #menu h2 | 0, 1,0,1 |
| 2 | h2.tilte | 0,0,1,1 |
| 3 | h2+p | 0,0,0,2 |
| 4 | #leftbar li#first { color: red} | 0,2,0,1 |
| 5 | #leftbar li:first-child { color: blue} | 0,1,0,2 |
对比：4和5的优先级， 4的优先级要高于5的优先级。
3, 选择器
语法： 选择器： { 样式 }
1， 属性选择器
Bootstrap的CSS最里面使用了很多属性选择器，比如：[data-toggle^=button], [data-toogle=toggle]等，属性选择器有很多种用法。常见的如下
| 选择器 | 用法 |
|---|---|
| [att=value] | 该属性有指定的确切值 |
| [att~=value] | 该属性必须是有个用空格隔开的值： class="title home" |
| [att|=value] | 属性的值就是value或者以value开头后面立即跟上'-'字符：即 value- |
| [att^=value] | 该属性的值必须以指定的值开始 |
| [att$=value] | 该属性的值必须包含特定值 |
| [attr*=value] | 该属性的值必须以特定的值结束 |
2， 自选择器
CSS里的子元素用符合">"表示。比如：拥有table样式的表格，其thead元素内的tr元素如果有th
.table > thead > tr > th {
vertical-align: bootom;
boder-bottom: 2px solid #dddddd
}
3，兄弟选择器
兄弟元素分为两种， 一种是临近兄弟，一种是普通兄弟。
（1）临近兄弟的选择符用"+"表示,比如导航条里面设置两个li之间的外边距
.nav-pills > li + li {
margin-left: 2px;
}
（2）查找一个指定元素后面的兄弟节点：普通兄弟节点：符合："～"
.article h1 ~ p {
font-size: 13px;
}
4, 伪类
CSS提供了很多可用的伪类，但是Bootstrap只用了常用的几个。常见的如下：
| 属性 | 描述 |
|---|---|
| :hover | 鼠标滑过时的状态 |
| :focus | 元素拥有焦点时的状态 |
| :first-child | 指定某一个元素的第一个子元素 |
| :last-child | 指定某一个元素的最后一个子元素 |
| :nth-child() | 指定某一个元素的一个或多个特定的子元素，可以传入数字 |
举例： 按钮组里，除第一个按钮，最后一个按钮和带有dropdown-toggle样式的元素外，其他btn样式的按钮都不能设置圆角
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0px;
}
注意：多个伪类可以一起使用。
5, display属性
这个属性用于定义建立布局时元素生产的框的类型。如果使用不谨慎会很危险。
常见的display的属性
| 属性值 | 意义 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素，前后会带有换行符 |
| inline | 默认值，此元素为内联元素，前后没有换行符 |
| inline-block | 行内块元素 |
| list-item | 此元素会作为列表显示 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示 |
| table | 此元素会作为块级表格来显示，前后带有换行符 |
| inline-table | 此元素会作为内联表格来显示，前后没有换行符 |
| table-row-group | 此元素会作为一个或多个行的分组来显示 |
| table-header-group | 此元素会作为一个或多个行的分组来显示 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示 |
| table-row | 此元素会作为一个表格行显示 |
| table-column-group | 此元素会作为一个或多个列的分组来显示 |
| table-column | 此元素会作为一个表格单元列显示 |
| table-clel | 此元素会作为一个表格单元格显示 |
| table-caption | 此元素会作为一个表格标题显示 |
| inherit | 规定应该从父元素继承display属性的值 |
6, 媒体查询
媒体查询时进行响应式设计的核心要素，其功能非常的强大，我们这里只列出Bootstrap常用的功能。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像素的屏幕里,这里的样式才生效*/
}
7, JS需要注意的语法
1， 常用的按顺序优先级判断
（1）a && b && c && d : 返回第一个可转换为false的元素值
（2）a || b || c || d : 返回第一个可转换为true的元素值
2， 立即调用函数
(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 这个也是可以用的
(function () { /* code */ } (1)); // 传入参数1
(function () { /* code */ })(2); // 传入参数2
// Bootstrap都是使用的这个
+function ($) {
"use strict";
}(jQuery);
注意： 在Bootstrap里面的用法：在function前面的 + 号和 分号的功能是一样的，主要是防止定义了不符合规定的代码。 比如：上面的代码若没有加 + 号，上下的代码连接在一起执行就会出错。很多的时候，你可以看到其他人这样的写法
;function($) {
"use strict";
}(jQuery);
8, 原型
Bootstrap的JS插件里面，很多插件都是利用了下面的代码
Alert.prototype.close = function(e) {
/* code */
}
# 意思是：在Alert函数上定义了一个名为close的原型方法
9, jQuery对比Bootstrap用法
1, jQuery的on和off 分别用于绑定和禁用的事件.比如：
// 绑定abc元素上的click事件,单击时弹出 提示
$('td').on("click", function (event) {
alert(1);
});
// 禁用abc元素上的click事件
$('td').off('click');
但是：在Bootstrap里面的用法有所不同
Bootstrap的用法：
$(document).on('click.bs.carousel.data-api','td',function (e){};
$(document).off('.carousel.data-api');
注意：在on事件上，中间多了一个参数，而且选择器变成了document。它的好处是只在document上绑定一个单击事件，利用冒泡的机制，在单击的时候检查是否是td元素，如果是才处理。
而前面jQuery中，如果td非常多，需要绑定多个click事件，这样性能会大大降低。这种三个参数的模式称为：享元模式
2， 事件命名空间
在事件后面都跟了一些字符串，我们简单的称之为：带有命名空间的事件
$('#abc').on("click.tomxu", function (event) {
alert(1);
});
触发的时候：
$("#abc").trigger('click.tom.xu');
好处：防止出发了其他的click方法
3，$.data()
很多JS插件都使用了$(selector).data()方法，它的意思是：收集指定元素上的所有以data-开头的自定义属性，并合并成为一个对象字面量。对于以data-开头的自定义属性，是HTLM5新支持的语法。
# html
<div id="abc" data-role="aaa" data-toggle="toggle" data-xxx="tom"></div>
# js
$("'#abc").data("role"); // 意思获取data-role里aaa这个值
注意：如果是$("'#abc").data();不带参数，则表示一次性将所有以data-开头的参数都收集起来。这个特性是：Bootstrap中很多JS插件都用到的。
