前端開(kāi)發(fā)利器-bootstrap

1、BS整體框架CSS組件響應(yīng)式設(shè)計(jì)列表組進(jìn)度條圖標(biāo)縮略圖下拉菜單標(biāo)簽導(dǎo)航分頁(yè)面包屑警告框徽章大屏展播洼地輸入框組媒體對(duì)象按鈕組面板JavaScript插件動(dòng)畫(huà)彈窗下拉菜單滾動(dòng)偵查選項(xiàng)卡提示框警告框彈出框按鈕輪播折疊浮標(biāo)基礎(chǔ)布局組件12柵格系統(tǒng)jQuery1.10+BS整體框架Bootstrap中國(guó)官網(wǎng)http:/牽出來(lái)溜溜DTDDOCTYPE標(biāo)簽是一種標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的文檔類型聲明，它的目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言解析器，它應(yīng)該使用什么樣的文檔類型定義（DTD）來(lái)解析文檔。要使用可以觸發(fā)各瀏覽器“標(biāo)準(zhǔn)模式”的DTD，并書(shū)寫符合規(guī)范的代碼，以保證您的頁(yè)面在各瀏覽器中可以最大程度的兼容.viewpo

2、rt深入理解viewport width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 user-scalable - 用戶是否可以手動(dòng)縮放 參數(shù)詳解：Mobile firstbox-sizing* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;box-sizing：content-box

3、 | border-box默認(rèn)值- content-box參數(shù)詳解： box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; CSS優(yōu)先級(jí)A：表示style屬性數(shù)量總和，優(yōu)先級(jí)最高。B：CSS選擇器上的id數(shù)量的總和。C：CSS選擇器上的其他CSS屬性選擇器以及偽類（像：hover、：focus、：first-child等）的總和。D：計(jì)算元素（table

4、、p、div等）和偽元素（像first-child等）數(shù)量總和。示例：1、#navbar li#first color:red; 2、#navbar li:first-child color:blue; 計(jì)算CSS優(yōu)先級(jí)的公式：選擇器定為4種，假設(shè)為，優(yōu)先級(jí)=ABCD，組成的4位數(shù)越大，優(yōu)先級(jí)越高。0,2,0,1=2010,1,0,2=102CSS選擇器att=value :屬性等于valueatt=value :屬性包含value值，eg.class=“title home list”,class=“l(fā)ist”att|=value :屬性值以“value-”開(kāi)頭，eg. lang=“zh-c

5、n”att=value :屬性值必須以value開(kāi)頭，eg. class=“value1”att$=value :屬性值必須以value結(jié)束，eg. class=“homevalue”att*=value :屬性值必須包含value結(jié)束，eg. class=“homevaluecur”屬性選擇器CSS選擇器ul li a color:#fff; (以當(dāng)前節(jié)點(diǎn)為父節(jié)點(diǎn)的所有元素）子和兄弟選擇器h1 + li color:#fff; 臨近兄弟h1 p color:#fff; 查找某一個(gè)元素后面的兄弟節(jié)點(diǎn)（不限制于臨近節(jié)點(diǎn)）思考與：$(el）.closest() 區(qū)別CSS選擇器：hover，鼠標(biāo)劃

6、過(guò)時(shí)的狀態(tài)偽類選擇器：focus，元素?fù)碛薪裹c(diǎn)時(shí)的狀態(tài)：first-child,指定元素的第一個(gè)子元素：last-child,指定元素的最后一個(gè)子元素：nth-child(),指定元素的一個(gè)或多個(gè)子元素，可以傳數(shù)字，也可以傳入even(偶數(shù)）和odd(奇數(shù))eg. .btn-group .btn:not(:first-child):not(:last-child)border-radius:0;displaynone 此元素不會(huì)被顯示。 block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。 inline 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。inline-block 行內(nèi)

7、塊元素 list-item 此元素會(huì)作為列表顯示。 table 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 ），表格前后帶有換行符。 inline-table 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 ），表格前后沒(méi)有換行符。 table-row 此元素會(huì)作為一個(gè)表格行顯示（類似 ）。 table-column 此元素會(huì)作為一個(gè)單元格列顯示（類似 ） table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類似 和 ） 媒體查詢media （max-width:767px)media （min-width:768px) and(max-width:992px)柵格系統(tǒng)原理最外層：根據(jù)瀏覽器寬度分為4種尺寸lia:

8、hover etc.)6、并列元素樣式（ btn-group.btn + .btn etc.)7、嵌套元素樣式（ btn-group.btn .btn-group etc.)8、動(dòng)畫(huà)元素樣式 (progress.active etc.)A+OAppend+Overwrite8種樣式重載+覆蓋JavaScript插件架構(gòu)插件規(guī)范：1、HTML布局規(guī)則：基于元素自定義屬性的布局規(guī)則，比如data-target等自定義屬性。2、JavaScript實(shí)現(xiàn)規(guī)則：所有插件都遵循jQuery插件開(kāi)發(fā)的標(biāo)準(zhǔn)步驟，所有事件都保持了統(tǒng)一標(biāo)準(zhǔn)。3、插件調(diào)用規(guī)則：都可以通過(guò)HTML聲明的方式，也可以用js調(diào)用，支持多

9、種回調(diào)和可選參數(shù)。JavaScript插件架構(gòu)1、HTML布局規(guī)則不用寫JavaScript代碼，就可以實(shí)現(xiàn)關(guān)閉功能。Cool！JavaScript插件架構(gòu)2、JavaScript實(shí)現(xiàn)規(guī)則1、立即調(diào)用函數(shù).eg. +function($)“” (jQuery);2、定義插件類型、原型方法，.eg. Alert。3、在jQuery上定義插件并設(shè)置插件的構(gòu)造函數(shù)，.eg. $.fn.alert.Constructor = Alert4、防沖突管理(noConflict)，.eg. $.fn.alert.noConflict = Alert5、綁定各種觸發(fā)事件(data-api)JavaScript插件架構(gòu)2、JavaScript實(shí)現(xiàn)規(guī)則+function ($) use strict; /1. ECMAscript5/2.alert原型方法 /3.在jQuery上定義alert方法,制定構(gòu)造函數(shù)/4.防沖突管理/5.綁定事件(window.jQuery);$(document).on(click.bs.alert.data-api,