什么是BootStrap惩歉？BootStrap有什么作用？

1嗅辣、BootStrap是基于html、css挠说、javascript的前端框架澡谭，框架定義了一套css樣式和對應(yīng)的javascript代碼，開發(fā)人員只要按照BootStrap的要求編寫html代碼就能取得很好的顯示效果损俭。2蛙奖、使web開發(fā)更簡單快捷BootStrap支持響應(yīng)式開發(fā)，解決了移動互聯(lián)網(wǎng)前端問題撩炊。

第1章? BootStrap的簡述

（二）什么是響應(yīng)式開發(fā)/布局舉個例子來說明一下響應(yīng)式：所謂的響應(yīng)式就是一呼百應(yīng)外永；響應(yīng)式開發(fā)就是使一個網(wǎng)站能夠兼容多個終端（手機(jī)、平板拧咳、電腦）伯顶，不需要單獨(dú)為每個終端設(shè)計特定的版本。

第2章? BootStrap環(huán)境搭建下載資源：

中文官網(wǎng)地址：http://d.bootcss.com/bootstrap-3.3.5.zip了解目錄結(jié)構(gòu)，要知道我們需要哪個目錄里面的資源祭衩？完整版和壓縮版有什么區(qū)別灶体，分別有什么作用？搭建環(huán)境需要拷貝哪些資源掐暮？1蝎抽、目錄結(jié)構(gòu)：對于javaee開發(fā)人員來說，主要使用dist發(fā)布版目錄路克。2樟结、完整版和壓縮包的使用和效果是一模一樣的，壓縮版較完整版去掉了所有的空格和換行精算，網(wǎng)絡(luò)傳輸更快瓢宦。完整版適用于開發(fā)中學(xué)習(xí)源碼，壓縮版適用于開發(fā)灰羽。3驮履、dist目錄里面的所有目錄文件；還要拷貝jquery-1.11.3.min.js文件見資料文件夾下的標(biāo)準(zhǔn)頁面.txt

第3章? BootStrap環(huán)境搭建-基本模板創(chuàng)建參考我們給的模板廉嚼，直接復(fù)制就行玫镐，主要：要把相關(guān)引入的路徑改一下，其他的不要修改怠噪。

第4章? BootStrap環(huán)境搭建-基本模板講解這一部分內(nèi)容大家了解一下就行恐似。什么是視口，以及視口的作用傍念？視口：瀏覽器的可視區(qū)域蹂喻，作用于移動設(shè)備，可將頁面進(jìn)行縮放設(shè)置捂寿。

第5章? BootStrap布局容器兩種容器樣式各有什么特點(diǎn)？需要注意什么孵运？

第6章? BootStrap柵格系統(tǒng)-簡述柵格系統(tǒng)如何理解柵格系統(tǒng)秦陋？布局容器規(guī)定占用一行治笨，柵格系統(tǒng)就是將這一行劃分成12列驳概，我們只需要設(shè)定元素占多少列旷赖，就可以布局元素的顯示位置。有了這個等孵，以后布局元素就簡單了稚照。

第7章? BootStrap柵格系統(tǒng)-柵格系統(tǒng)入門案例柵格系統(tǒng)的書寫方式是什么？柵格系統(tǒng)的特點(diǎn)/注意點(diǎn)是什么果录？1、書寫方式和html的表格（tabletrtd）比較相似弱恒，柵格系統(tǒng)的書寫方式是：定義容器（container）定義行（row）定義列辨萍。2、特點(diǎn)/注意點(diǎn)：“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中返弹。列必須包含在行中锈玉。行使用樣式“row”,列使用樣式“col-屏幕尺寸-所占列數(shù)”义起。列的書寫順序就決定了它的顯示順序。

第8章? BootStrap柵格系統(tǒng)-柵格系統(tǒng)特點(diǎn)及深入剖析總列數(shù)與12列之間有什么關(guān)系去团？柵格系統(tǒng)是可以嵌套使用的穷蛹，注意嵌套原則。正確理解12列肴熏，12列指的是一個row里面有12列，如果有嵌套蛙吏，那么頁面的一行就不止12列了。1励烦、總列數(shù)<=12;那么所有列數(shù)在同一行顯示泼诱；如果總列數(shù)>12，那么從開始超過的部分在下一行顯示屉栓。2耸袜、嵌套原則：row里面嵌套col，col里面可以嵌套row堤框，row里面又可以繼續(xù)嵌套col……依次嵌套纵柿，不再需要container容器骗绕。總結(jié):1.col數(shù)和12的關(guān)系1.列數(shù) <= 12 它們在一行顯示2.列數(shù) > 12 從>12的列開始,換行顯示2.row和col的嵌套1.container(僅一個)--->row--col--->row-->col--row...3.每個row都有12列

第9章? BootStrap柵格系統(tǒng)-屏幕尺寸設(shè)置（一）介紹了幾種屏幕尺寸荆忍？如何設(shè)置不同屏幕尺寸下顯示的列數(shù)撤缴？1、介紹了4種屏幕尺寸微宝，如上圖的參數(shù)介紹，記他們的簡寫就行了虎眨。2、如果沒有設(shè)置對應(yīng)屏幕尺寸顯示的列數(shù)岳守，默認(rèn)每部分是獨(dú)占一行的碌冶。設(shè)置對應(yīng)屏幕尺寸顯示的列數(shù)只需要使用對應(yīng)的類前綴即可，最后一個參數(shù)是顯示的列數(shù)扑庞。col-lg-4 col-md-4mdsmxsdiv.className += “ ys2”;

第10章? BootStrap柵格系統(tǒng)-屏幕尺寸設(shè)置（二）設(shè)置對應(yīng)屏幕尺寸顯示的列數(shù)的原則是什么罐氨？首先需要知道柵格系統(tǒng)的顯示原則：如果設(shè)置了某個屏幕尺寸的列數(shù)，那么屏幕尺寸大的會使用這個屏幕尺寸小的設(shè)置栅隐，屏幕尺寸小的不會使用屏幕尺寸大的設(shè)置。所以，我們設(shè)置不同屏幕尺寸顯示的列數(shù)的時候恰矩，只需要設(shè)置最小屏幕顯示列數(shù)的屬性就行憎蛤，如果需要特殊處理纪吮，那么就在class屬性值后面追加就行萎胰，屬性值之間用空格隔開。例如：設(shè)置了col-md-4冰肴，那么相當(dāng)于也設(shè)置了col-lg-4榔组。其他屏幕尺寸均默認(rèn)為col-sm-12,col-xs-12col-sm-3總結(jié):1.多個樣式用空格隔開div.className? += “ ys2”;2.3.設(shè)置了一個尺寸, 實(shí)際屏幕 >= 這個尺寸 都用這個設(shè)置4.設(shè)置了一個尺寸, 實(shí)際屏幕 < 這個尺寸 默認(rèn)一個占滿一行最后一句話:class=”col-sm-3” 一般設(shè)置這個就可以了,比它小的一個占一行

第11章? BootStrap柵格系統(tǒng)-列偏移列偏移使用什么關(guān)鍵字，記關(guān)鍵字就行了搓扯。列偏移：指把自己定義的列向右偏移一定的位置锨推。使用offset關(guān)鍵字 col-屏幕尺寸-offset-占列數(shù)

第12章? BootStrap-響應(yīng)式工具響應(yīng)式工具的作用是什么？1换可、響應(yīng)式工具主要是讓元素在不同屏幕尺寸下顯示和隱藏，如果只想在某個屏幕尺寸下顯示俭识，使用visible-屏幕尺寸洞渔；如果只想在某個屏幕尺寸下隱藏，使用hidden-屏幕尺寸堤瘤。

第13章? BootStrap-列表掌握開發(fā)中最常見的一種場景：讓有序列表或者無序列表水平顯示浆熔。

第14章? BootStrap-按鈕樣式很多，會查文檔會看案例就行了慎皱，但是要知道class屬性由兩部分組成叶骨，btn表示是按鈕，btn-xxx表示不同的樣式忽刽。按照文檔的要求，如果按鈕要有超鏈接效果今膊，那么就是用，標(biāo)簽設(shè)計按鈕市埋，如果不需要超鏈接效果赖钞，那就使用標(biāo)簽。

第15章? BootStrap-導(dǎo)航條要求大家會修改代碼就行了弓千，以后在公司,學(xué)習(xí)使用框架也是這樣的献起。注意：引入javascript文件要放在引入jQuery文件之后∏床停可以結(jié)合瀏覽器的“檢查”功能來定位要修改的元素的位置岂嗓。

第16章? BootStrap-輪播圖（一）這里面要求同樣是會修改代碼，如果想添加條目厌殉，那么點(diǎn)和圖片一起添加，因為是一一對應(yīng)關(guān)系器紧。1楼眷、輪播圖位于文檔的-------》2、修改輪播圖的寬高

第17章? BootStrap-輪播圖（二）如何給輪播圖設(shè)置自動輪播掌腰？當(dāng)頁面上有多個輪播圖時张吉，會出現(xiàn)什么情況，如何解決士飒？1蔗崎、通過給輪播圖最外層div設(shè)置data-interval = "1000"可實(shí)現(xiàn)自動輪播，屬性值為毫秒缓苛。2、當(dāng)出現(xiàn)多個輪播圖時笔刹，發(fā)現(xiàn)控制的永遠(yuǎn)是第一個輪播圖冬耿，因為輪播圖的唯一表示id是一樣的，只需要把每個輪播圖的id不一樣即可日月。具體修改如下：a)修改最外層div的id缤骨，例如 id=”lbt1”。b)修改指示器小白點(diǎn)data-target屬性值為對應(yīng)的#lbt1精拟，因為之前他們就是一致的虱歪，否則點(diǎn)擊小白點(diǎn)效果。c)修改左右按鈕的href屬性值為對應(yīng)的#lbt1荡碾，因為之前他們也是一致的局装，否則點(diǎn)擊左右按鈕也沒不切換圖片

第18章? BootStrap-排版對齊方式使用什么屬性能夠讓內(nèi)容居中？文檔位置：全局CSS樣式----排版----對齊注意：這個樣式是讓內(nèi)容居中拨脉，不僅僅是讓文本居中宣增。

第19章? BootStrap-表單元素（一）如何修改表單項的寬度？也就是修改所占列數(shù)就行了文檔位置：------》1帖旨、通過修改柵格系統(tǒng)中所占的列數(shù)即可，

第20章? BootStrap-表單元素（二）在什么位置添加什么屬性分別表示校驗成功解阅、失敗和警告的樣式？應(yīng)用場景：在開發(fā)中述召，我們通常是通過ajax異步訪問服務(wù)器來校驗數(shù)據(jù)蟹地，如果校驗成功，那么就在js中給div添加has-success屬性夺刑。onblurdiv.className += “ has-error”;

第21章? BootStrap-分頁條讓上一頁不可用要注意什么琼梆？文檔位置：-------》

第22章 第一部分綜合案例-需求說明我們的案例有哪些要求？要求：1.頁面頂部的三部分在PC屏幕上顯示為一行错览，在移動設(shè)備屏幕上顯示為一部分一行煌往；2.導(dǎo)航條在大屏幕展示全部內(nèi)容，在移動設(shè)備上需要將內(nèi)容能夠折疊/展開羞海；3.用戶名/密碼/確認(rèn)密碼不能為空曲管，密碼需和確認(rèn)密碼一致，如果不符合腊徙，阻止注冊操作邦泄，并將錯誤信息展示給用戶看装黑。具體頁面設(shè)計部分,

第23章? 第一部分綜合案例-需求分析如何劃分我們的頁面民傻？把整個頁面放到容器中，然后按照柵格系統(tǒng)要求劃分行牵署，把每一部分內(nèi)容放到對應(yīng)行的列里面喧半，還可以規(guī)定占多少列。

第24章? 第一部分綜合案例-需求實(shí)現(xiàn)-表單用戶名非空校驗理清楚表單用戶名非空校驗的實(shí)現(xiàn)思路即可：1、給表單添加一個onsubmit="return checkForm()"事件吴菠，觸發(fā)一個校驗函數(shù)浩村，并把返回值true/false返回給submit進(jìn)一步返回。2酿矢、在校驗函數(shù)checkForm()里面首先獲取表單元素對象3怎燥、獲取表單對象的value值，判斷非空

第25章? 第一部分綜合案例-需求實(shí)現(xiàn)-表單密碼和確認(rèn)密碼非空校驗理清楚表單密碼和確認(rèn)密碼非空校驗的實(shí)現(xiàn)思路即可：1策肝、由于校驗密碼隐绵、確認(rèn)密碼判斷非空的代碼與判斷用戶名非空的代碼一樣，所有可以抽取一個判斷非空的方法棺禾。2峭跳、在修改表單項代碼，添加顯示非空信息的lable竣付、給輸入框最外層div添加id屬性滞欠，當(dāng)非空時表單項顯示紅色。3、當(dāng)不是非空的時候惹恃，使用初始的class屬性值來覆蓋含有 has-error的class屬性值在checkForm（）方法里面調(diào)用checkNotEmpty（id）方法：

第26章? 第一部分綜合案例-需求實(shí)現(xiàn)-表單密碼和確認(rèn)密碼一致性校驗校驗密碼和確認(rèn)密碼一致性的原則是什么棺牧？

//表單校驗的入口方法function checkForm()

{//檢查用戶名是否為空var isEmpty1=checkNotEmpty("username");

//檢查密碼是否為空var isEmpty2=checkNotEmpty("password");

//檢查確認(rèn)密碼是否為空var isEmpty3=checkNotEmpty("repassword");

//檢驗密碼和確認(rèn)密碼是否相等var isEqual=checkPwdAndRepwd(isEmpty2,isEmpty3);

return isEmpty1&&isEmpty2&&isEmpty3&&isEqual;}