Bootstrap
柵格系統(tǒng)
工作原理
1.行必須放置在.center class內(nèi)求摇。
2.使用行來創(chuàng)建水平組殊者。
3.內(nèi)容應放置在列內(nèi)猖吴，唯有列是行的直接子元素。
4.預定的類可以用于快速創(chuàng)建柵格布局海蔽。bootstrap源碼中定義的mixin也可以用于創(chuàng)建語義話的布局党窜。
5.列通過內(nèi)邊距來創(chuàng)建列內(nèi)容之間的間隙幌衣。該內(nèi)邊距是通過 .rows 上的外邊距取負，表示第一列和最后一列的行偏移。
6.柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍择镇。三個等寬的列可以使用三個 .col-xs-4 來創(chuàng)建腻豌。
7.如果一行中包含的列多于12個嘱能，則多余的部分將另起一行排列惹骂。
媒體查詢
/* 小屏幕 */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕 */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕*/
@media (min-width: @screen-lg-min) { ... }
在媒體查詢代碼中包含 max-width 將css的影響限制在更小范圍的屏幕之內(nèi)
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
柵格參數(shù)
超小屏幕 手機（<768px）：.col-xs-
小屏幕 平板（>=768px）：.col-sm-
中等屏幕 桌面顯示器（>=992px）:.col-md-
大屏幕 大桌面顯示器（>=1200px）：.col-lg-
從堆疊到水平排列
使用單一的一組 .col-md-* 柵格類对粪，就可以創(chuàng)建一個基本的柵格系統(tǒng)
在手機和平板上一開始是堆疊在一起的，在桌面上變?yōu)樗脚帕须怪悖辛斜仨毞旁? .row 內(nèi)乳蛾。
流式布局容器
將最外面的布局元素 .container 修改為 .container-fluid肃叶，就可以將固定寬度的柵格布局轉(zhuǎn)換為 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區(qū)分大小寫
2.標識符規(guī)則：第一個字符必須是一個字母，下劃線娜遵，或者一個美元符號$
3.Js使用C風格的注釋
嚴格模式
啟用嚴格模式壤短，可以在頂部添加如下代碼：
“use strict”;
也可以指定函數(shù)在嚴格模式下執(zhí)行：
function doSomething(){
“use strict”;
//函數(shù)體
}
語句
一個語句以分號結尾久脯，可以使用C風格的語法把多條語句組合到一個代碼塊中：
If(test){
test=false;
alert(test);
}
變量
定義變量時使用var操作符（注意var是一個關鍵字）帘撰，后接變量名（即一個標識符）：
var message;
未經(jīng)初始化的變量會保存一個特殊的值——undefined
變量賦值：
var message = "a”;
注意用var操作符定義的變量將成為定義該變量的作用域中的局部變量。如果在函數(shù)中使用var定義一個變量相赁，這個變量在函數(shù)退出后就會銷毀：
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用來檢測給定變量的數(shù)據(jù)類型。對一個值使用typeof操作符可能返回下列某個字符串：
如果這個值未定義返回undefined瞧剖；
如果這個值是布爾值返回boolean抓于；
如果這個值是字符串返回string浇借；
如果這個值是數(shù)值返回number捉撮；
如果這個值是對象或null返回object；
如果這個值是函數(shù)返回function妇垢；
undefined類型
只有一個值巾遭，在使用var聲明變量但沒有初始化時，這個變量的值為 undefined闯估。未經(jīng)初始化的值默認就會取得undefined值灼舍。
null類型
只有一個值，這個特殊的值是null涨薪。typeof操作符檢測null 值時會返回”object”片仿。
var car = null;
alert(typeof car); //”object”
如果定義的變量準備在將來用于保存對象，則將該變量初始化為null。
Boolean類型
只有true和 false兩個值厢岂。true不一定等于1光督，false不一定等于0，塔粒。若要將一 個值轉(zhuǎn)化為其對應的Boolean值结借，可以調(diào)用Boolean()函數(shù)：
var message = “Hellow world!”;
var messageAsBoolean = Boolean(message); //將字符串message轉(zhuǎn)化為Boolean值
boolean值取決于轉(zhuǎn)換值的數(shù)據(jù)類型及其實際值
Number類型表示整數(shù)和浮點數(shù)
十進制整數(shù)可以直接在代碼中輸入：
var intNum = 55;
整數(shù)也可以通過八進制，十六進制的字面值來表示：
var octalNum1 = 070; //八進制56
var octalNum2 = 079; //無效的八進制
var hexNum1 = 0xA; //十六進制的10
在計算時卒茬。所有數(shù)據(jù)都會被轉(zhuǎn)換成十進制船老。
（1）浮點數(shù)值
var floatNum1 = 1.1;
var floatNum2 = 0.1;
如果小數(shù)點后沒有任何數(shù)字咖熟，則該數(shù)值可以作為整數(shù)值保存。如果浮點數(shù)本身表示一個整數(shù)（如2.0）柳畔，則該值也會轉(zhuǎn)化為整數(shù)馍管。
var floatNum1 = 2.; //解析為2
var floatNum2 = 2.0; //解析為2
對于極大或極小的值可以用 e 表示法
var floatNum = 3.125e7; //3.1250000
（2）數(shù)值范圍
在js中能夠表示的數(shù)是有范圍限制的，超出數(shù)值范圍的值將會被自動轉(zhuǎn)化成特殊的Infinity值薪韩。如果這個數(shù)是負數(shù)确沸，則轉(zhuǎn)化為-Infinity，正數(shù)則轉(zhuǎn)化為Infinity俘陷。Infinity值將無法參與下一次計算。
isFinite()函數(shù)可以確定一個數(shù)值是不是有窮的拉盾，這個函數(shù)在參數(shù)位于最大和最小之間是會返回true桨菜。
<script type="text/javascript">
document.write(isFinite(123)+ "<br />"); //true
document.write(isFinite("Hello")+ "<br />"); //false
</script>
（3）NaN
即非數(shù)值是一個特殊的數(shù)值，用于表示一個本來要返回數(shù)值的操作數(shù)未返回是指的情況捉偏。
NaN的特點：
1.任何涉及NaN的操作都會返回NaN倒得。
2.NaN與任何值都不相等。
<script type="text/javascript">
alert(NaN == NaN); //false
alert(NaN != NaN); //true
</script>
isNaN()函數(shù)接受一個參數(shù)告私，這個參數(shù)可以是任何類型屎暇，函數(shù)會幫我們確定這個參數(shù)是否“不是數(shù)值”。
該函數(shù)在接收到一個值之后驻粟，會嘗試將這個值轉(zhuǎn)換成數(shù)值根悼，不是數(shù)值的值會直接轉(zhuǎn)換成數(shù)值，任何不能被轉(zhuǎn)換成數(shù)值的值都會導致這個函數(shù)返回true蜀撑。
<script type="text/javascript">
alert(isNaN(NaN)); //true
alert(isNaN(2)); //false
alert(isNaN("2")); //false
alert(isNaN("bulala")); //true
</script>
（4）數(shù)值轉(zhuǎn)換
有3個函數(shù)可以吧非數(shù)值轉(zhuǎn)換為數(shù)值：Number(),parseInt();parseFloat()挤巡。
三個函數(shù)的共性：
1.均可解析不同進制的數(shù)字。
2.無法解析是返回NaN酷麦。
Number()
1.轉(zhuǎn)換為數(shù)字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.如果解析的第一個非空格字符不是數(shù)字或符號則返回NaN母廷。
2.parseInt(“”)返回NaN。
3.parseInt()可以識別各種證書形式（八進制糊肤，十六進制）琴昆。
<script type="text/javascript">
var num1 =parseInt("123bulala"); //123
var num2 =parseInt(""); //NaN
var num3 =parseInt("0xA"); //十六進制數(shù)10
var num4 =parseInt("070"); //八進制數(shù)56
</script>
parseFloat()
1.解析時遇到一個無效浮點數(shù)為止。
2.在解析數(shù)字或可以轉(zhuǎn)化為數(shù)字的字符串會忽略小數(shù)點后尾部的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>
