11-18 02:23 阅读 205

Bootstrap深入理解（一）(bootstrap知识点总结)

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插件都用到的。

作者：贰拾壹先生
链接：https://juejin.cn/post/7031558397233201183