Bootstrap
栅格系统
工作原理
1.行必须放置在.center class内。
2.使用行来创建水平组。
3.内容应放置在列内，唯有列是行的直接子元素。
4.预定的类可以用于快速创建栅格布局。bootstrap源码中定义的mixin也可以用于创建语义话的布局。
5.列通过内边距来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距取负，表示第一列和最后一列的行偏移。
6.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。三个等宽的列可以使用三个 .col-xs-4 来创建。
7.如果一行中包含的列多于12个，则多余的部分将另起一行排列。
媒体查询
/* 小屏幕 */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕 */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕*/
@media (min-width: @screen-lg-min) { ... }
在媒体查询代码中包含 max-width 将css的影响限制在更小范围的屏幕之内
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
栅格参数
超小屏幕 手机（<768px）：.col-xs-
小屏幕 平板（>=768px）：.col-sm-
中等屏幕 桌面显示器（>=992px）:.col-md-
大屏幕 大桌面显示器（>=1200px）：.col-lg-
从堆叠到水平排列
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统
在手机和平板上一开始是堆叠在一起的，在桌面上变为水平排列，所有列必须放在 .row 内。
流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
<div class="container-fluid">
<div class="row">
...
</div>
</div>
移动设备和桌面屏幕
.col-xs-* 和 .col-md-*是针对超小屏幕和中等屏幕设备所定义的类
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
手机，桌面，平板
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
多余的列将另起一行排列
如果一行包含的列多于12个，则多出来的另起一行排列
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
Javascript
基本概念
1.js区分大小写
2.标识符规则：第一个字符必须是一个字母，下划线，或者一个美元符号$
3.Js使用C风格的注释
严格模式
启用严格模式，可以在顶部添加如下代码：
“use strict”;
也可以指定函数在严格模式下执行：
function doSomething(){
“use strict”;
//函数体
}
语句
一个语句以分号结尾，可以使用C风格的语法把多条语句组合到一个代码块中：
If(test){
test=false;
alert(test);
}
变量
定义变量时使用var操作符（注意var是一个关键字），后接变量名（即一个标识符）：
var message;
未经初始化的变量会保存一个特殊的值——undefined
变量赋值：
var message = "a”;
注意用var操作符定义的变量将成为定义该变量的作用域中的局部变量。如果在函数中使用var定义一个变量，这个变量在函数退出后就会销毁：
function test(){
var message = ”hi”; //局部变量
}
test();
alert(message); //错误
改正：
function test(){
message = “a”; //全局变量
}
test();
alert(message); //”a”
可以使用一条语句定义多个变量，每个变量用逗号隔开：
var message = “hi”; Found = false; age = 29;
在严格模式下，不能定义名为eval或argument的变量，否则会导致语法错误
typeof操作符
typeof用来检测给定变量的数据类型。对一个值使用typeof操作符可能返回下列某个字符串：
如果这个值未定义返回undefined；
如果这个值是布尔值返回boolean；
如果这个值是字符串返回string；
如果这个值是数值返回number；
如果这个值是对象或null返回object；
如果这个值是函数返回function；
undefined类型
只有一个值，在使用var声明变量但没有初始化时，这个变量的值为 undefined。未经初始化的值默认就会取得undefined值。
null类型
只有一个值，这个特殊的值是null。typeof操作符检测null 值时会返回”object”。
var car = null;
alert(typeof car); //”object”
如果定义的变量准备在将来用于保存对象，则将该变量初始化为null。
Boolean类型
只有true和 false两个值。true不一定等于1，false不一定等于0，。若要将一 个值转化为其对应的Boolean值，可以调用Boolean()函数：
var message = “Hellow world!”;
var messageAsBoolean = Boolean(message); //将字符串message转化为Boolean值
boolean值取决于转换值的数据类型及其实际值
Number类型表示整数和浮点数
十进制整数可以直接在代码中输入：
var intNum = 55;
整数也可以通过八进制，十六进制的字面值来表示：
var octalNum1 = 070; //八进制56
var octalNum2 = 079; //无效的八进制
var hexNum1 = 0xA; //十六进制的10
在计算时。所有数据都会被转换成十进制。
（1）浮点数值
var floatNum1 = 1.1;
var floatNum2 = 0.1;
如果小数点后没有任何数字，则该数值可以作为整数值保存。如果浮点数本身表示一个整数（如2.0），则该值也会转化为整数。
var floatNum1 = 2.; //解析为2
var floatNum2 = 2.0; //解析为2
对于极大或极小的值可以用 e 表示法
var floatNum = 3.125e7; //3.1250000
（2）数值范围
在js中能够表示的数是有范围限制的，超出数值范围的值将会被自动转化成特殊的Infinity值。如果这个数是负数，则转化为-Infinity，正数则转化为Infinity。Infinity值将无法参与下一次计算。
isFinite()函数可以确定一个数值是不是有穷的，这个函数在参数位于最大和最小之间是会返回true。
<script type="text/javascript">
document.write(isFinite(123)+ "<br />"); //true
document.write(isFinite("Hello")+ "<br />"); //false
</script>
（3）NaN
即非数值是一个特殊的数值，用于表示一个本来要返回数值的操作数未返回是指的情况。
NaN的特点：
1.任何涉及NaN的操作都会返回NaN。
2.NaN与任何值都不相等。
<script type="text/javascript">
alert(NaN == NaN); //false
alert(NaN != NaN); //true
</script>
isNaN()函数接受一个参数，这个参数可以是任何类型，函数会帮我们确定这个参数是否“不是数值”。
该函数在接收到一个值之后，会尝试将这个值转换成数值，不是数值的值会直接转换成数值，任何不能被转换成数值的值都会导致这个函数返回true。
<script type="text/javascript">
alert(isNaN(NaN)); //true
alert(isNaN(2)); //false
alert(isNaN("2")); //false
alert(isNaN("bulala")); //true
</script>
（4）数值转换
有3个函数可以吧非数值转换为数值：Number(),parseInt();parseFloat()。
三个函数的共性：
1.均可解析不同进制的数字。
2.无法解析是返回NaN。
Number()
1.转换为数字0的情形：false,"0",null," "四种。
2.Number Undefined()返回NaN。
3.Number(true)返回1。
<script type="text/javascript">
var num1 = Number("bulala"); //NaN
var num2 = Number(""); //0
var num1 = Number("true"); //1
</script>
parseInt()
1.如果解析的第一个非空格字符不是数字或符号则返回NaN。
2.parseInt(“”)返回NaN。
3.parseInt()可以识别各种证书形式（八进制，十六进制）。
<script type="text/javascript">
var num1 =parseInt("123bulala"); //123
var num2 =parseInt(""); //NaN
var num3 =parseInt("0xA"); //十六进制数10
var num4 =parseInt("070"); //八进制数56
</script>
parseFloat()
1.解析时遇到一个无效浮点数为止。
2.在解析数字或可以转化为数字的字符串会忽略小数点后尾部的0。
<script type="text/javascript">
var num1 =parseFloat("10",2); //按二进制解析
var num2 =parseFloat("123bulala"); //123
var num3 =parseFloat(0xA); //0
var num4 =parseFloat("098.5"); //98.5
var num5 =parseFloat(15.5"); //15.5
</script>
