bootstrap總結

 

Bootstrap總結報告： 看源碼學習哦！必需要作的事！

一：前言

1.兼容設備：桌面瀏覽器、平板電腦、手機

2.特點：響應式柵格、豐富組件、jquery插件！ （佈局、樣式、交互）

3.get skill：圖片文件壓縮！

圖標集：前端用到的哦！

4.先引入css，由於渲染引擎要用到哦！ 放最上面； 而後是jquery，由於bootstrap是基於jquery實現的哦！

二：腳手架

1.腳手架：作的就是準備工做。

2.normalize.css（reset.css）：清空和重置瀏覽器的默認行爲！

3.響應式：meta標籤 + bootstrap.respsonsive.css: 佈局輔助類
。響應式工具不能用於table元素，並且本就不支持。

 

三：基本CSS樣式

1.文本

2.列表

3.表格

4.表單

5.按鈕

6.圖片樣式類

7.圖標：glyphicons 圖標顏色是能夠設置的哦！

 

 

四：組件

1.下拉菜單

2.按鈕組

3.按鈕下拉菜單

4.導航

5.導航條：static fixed absolute

6.路徑導航（麪包屑導航）

7.分頁

8.縮略圖

9.警告框：信息提示只用

10.進度條

11.媒體對象？ 幹啥用的？

 

 

五: JavaScript插件 （show：事件執行以前； shown：動做執行完畢） bootstrap提供了不少事件哦！

1.過渡效果

2.模態對話框(模態框提供了事件哦：show、shown、hide、hidden)

3.滾動監聽（bootstrap提供了事件哦）

4.標籤頁

5.工具提示、彈出提示

6.警告框

7.手風琴組件（可摺疊）

8.輪播：Bootstrap的輪播插件對外暴露了兩個可被監聽的事件！

9.輸入提示：前端驗證能夠用的到哦，本身去擴展裏面的內容！

10.附加導航

 

發現的漏洞、思想：

1.媒體查詢你要好好的學習下噢！ <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

2.javascript構建工具：grunt

3.定義了額多個class類，實現了類的靈活性！ btn btn-default btn-large： 解耦，各司其職！

4.圖標的實現原理：都是編碼實現的哦！

5.經常使用的標籤：div ul li a

6.絕對定位的導航條和fixed的導航條？

7.data-src?

8.插件衝突：Bootstrap插件和其它UI框架一同使用！ 思想：有問題第一時間好好的看官網哦！

 

最後： 一個良好的前端工程師的素養

1.用相對單位：em rem！

2.行內、塊狀

3.css選擇器：CSS的 :empty 選擇器 jquery：first之類的選擇器

4.web端事件、移動web端事件！

 

 

Bootstrap Version 3：

一：是什麼？

答：HTML/CSS/JAVASCRIPT框架，響應式的web項目框架。

二：

1.css預處理腳本：less sass