《深入理解bootstrap》读书笔记：第一章 入门准备
一.bootstrap框架简介
二.新手入门
本书采用预编译的版本进行学习
三. 文件结构
生产环境使用bootstrap.min.css和bootstrap.min.js。除了font结构之外，其他文件都可以随意命名。
四. 标准模板
首先是在aptana搭建bootstrap环境。
ctrl+N新建web项目，选择默认项目，命名项目，定义位置，完成。
把下载好的文件夹dist重命名为bootstrap，复制粘贴到项目文件夹下。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
head>
body>
html>
|
注意用顺序，自己的样式和脚本必须在后面。
网上引用cdn是
|
1
2
3
4
5
6
7
8
|
>
|
五. CSS基本语法
1.优先级
和原生CSS一样。
#xxx>.xxx>xxx
2.选择器
（1）属性选择器
（2）子选择器
>号
（3）兄弟选择器
临近选择器用+号表示，比如说在一个nav-ul-li结构的导航条里，欲设置两个li之间的外边距。
|
1
2
3
|
nav>li+li{ margin-left:10px;
} |
指定元素后边的节点用~。比如说查找article元素内h1后面所有的p元素
|
1
|
article h1~p{font-size:20px} |
3. 伪类选择器
bootstrap常用的伪类无外乎这几个
4. display属性
display很好用，但是不能乱用。
5.媒询
|
1
2
3
4
5
6
7
8
9
|
@media(max-width: 767px){
/*在小于768像素的屏幕中，这里样式生效*/
}@media(max-width: 767px) and (max-width: 991px){
/*在768-991像素区间的屏幕中，这里样式生效*/
}@media(min-width: 1200px){
/*在大于等于1200像素的屏幕中，这里样式生效*/
} |
同理还可以用到高度。
6.相关JavaScript语法梳理
（1）与和或运算符（&&，||）
（2）立即调用函数
推荐使用这个
|
1
2
3
|
(function(){
do somthing
}() ) |
表示马上调用。
（3）原型
BT中的js插件，都是基于面向对象的方法创建。
简单举个栗子，定义加减法运算
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var decimalDigits = 2,
tax = 5;
function add(x, y) {
return x + y;
}function subtract(x, y) {
return x - y;
}//alert(add(1, 3)); |
改写成一个加减计算函数对象
|
1
2
3
4
|
var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
}; |
然后，通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。
|
1
2
3
4
5
6
7
8
9
10
|
Calculator.prototype = { add: function (x, y) {
return x + y;
},
subtract: function (x, y) {
return x - y;
}
};
//alert((new Calculator()).add(1, 3));
|
（代码来自作者博客）
7.jQuery知识梳理
（1）事件绑定
jQuery常用的绑定语法有on/off、bind/unbind。比如说
|
1
2
|
$('div').on(click,function(){...});
$('div').off(click,function(){...});
|
注：bind()函数是jQuery 1.7之前或更早版本采用的一个用来绑定事件处理程序的函数；on()函数是jQuery 1.7版本提供的首选的用来绑定事件处理程序的函数；从1.7版本的介绍以及参数描述来看，其实这两个函数基本上用法一致，但可能在早期的版本中，bind()函数一次只能为标签对象绑定一个事件的处理程序，而on()函数则可以一次为多个不同的事件绑定处理程序。
在bootstrap方法中的绑定类似但是思想不同，
|
1
|
$(document).on('click.bs.carosel.data.api','div',function(){...})
|
利用的是冒泡的机制，选择document的div。提高了性能。
（2）命名空间
调试时，事件后面加上一段字符串比如click.djtao，再用trigger方法触发时，就不会影响原本的点击事件。
（3）$.data()
搜集指定元素上所有以data为前缀的自定义属性，合并为一个字面量。比如说：
|
1
|
|
我要收集role的值
|
1
|
$('#abc').data('role')
|
如果不带参数，则等于收集并声明了一个json。var value={role:'aaa',toggle:'toggle',xxx:'djtao'}
8.H5的辅助属性
可以支持盲人等人群阅读。通常以arial为前缀统称arial属性。
【后记】
很多国内作者的书读起来就跟看api文档的感觉一样。自己的话多了错误就多，而且还贵(@﹏@)~。。但API文档本身的起点不低，既然说是“深入理解”了，多读几遍，经历过若干项目。或许就能看出它高于API文档的价值。
本系列读书笔记基于现学现用，快速入门的想法，将会插入一些书外网上搜集的书外实例。基本都是自己敲过一遍，部分内容自己改造过，故而只是一系列记录自己学习过程的文章。而已。
推荐阅读
-
《深入理解bootstrap》读书笔记：第一章 入门准备
-
《深入理解计算机系统》读书笔记 —— 第一章 计算机系统漫游
-
《深入理解bootstrap》读书笔记：第4章 CSS组件（上）
-
《深入理解bootstrap》读书笔记：第4章 CSS组件（下）
-
《深入理解bootstrap》读书笔记：第4章 CSS组件（上）
-
《深入理解bootstrap》读书笔记：第二章 整体架构
-
《深入理解bootstrap》读书笔记：第一章 入门准备
-
《深入理解bootstrap》读书笔记：第三章 CSS布局
-
《深入理解bootstrap》读书笔记：第三章 CSS布局
-
《深入理解bootstrap》读书笔记：第4章 CSS组件（下）