一、目前比較主流的前端框架有：
1.layui
2.vue.js
3.bootstrap
4.jquery ui
二、bootstrap：
1.來自Twitter,目前最流行的前端框架之一
2.是基于HTML、CSS和JavaScript的一個簡潔、靈活的開源框架。
3.目前版本是V3
三、bootstrap的優(yōu)勢：
1.快速制作響應式的網(wǎng)頁來適配各種終端
2.開發(fā)簡單、方便
3.移動先行
4.代碼開源
5.代碼有良好的規(guī)范
四、使用bootstrap的步驟：
1.在head里面寫：
2.在title下面引入css文件：

3.在上面引入js文件，注意順序，先引入jquery的js，在引入bootstrap的js。

五、bootstrap架構(gòu)：
1.響應式設計
2.CSS組件
3.JavaScript插件
4.基礎布局組件
5.12柵格系統(tǒng)
6.jQuery1.10+
六、12柵格系統(tǒng)：
1.概念：就把網(wǎng)頁的總寬度分為12等分。
2.實現(xiàn)原理：
（1）通過定義容器的大小，平分為12份。
（2）調(diào)整內(nèi)外邊距
（3）結(jié)合媒體查詢
七、列組合：
1.語法：

6等分
6等分


八、列偏移：
1.語法： 向右偏移2等分
九、列嵌套：
語法：

6等分


十、列排序：
語法：
9等分
3等分
十一、響應式柵格：
1.小屏幕（手機）：<768px (xs)
2.小屏幕（平板）：>=768px (sm)
3.中屏幕(桌面顯示器)：>=992px (md)
4.大屏幕(大桌面顯示器)：>=1200px (lg)
eg:既要支持小屏幕，也需要支持大屏幕：

十二、CSS全局樣式：
1.標題樣式：
.h1~.h6
2.頁面主體：
默認頁面中的字體都是12px,如果要突出顯示字體的話需要加class樣式lead
3.突出字體：
突出
4.強調(diào)文本：
左對齊：text-left
右對齊：text-right
居中：text-center
兩端對齊：text-justify
5.列表：
class=“l(fā)ist-inline”
6.表單：
語法：


姓名：


7.控件大小：
（1）.大型輸入框：
（2）.小型輸入框：
8.按鈕：
1.灰色：btn btn-default
2.深藍色：btn btn-primary
3.綠色：btn btn-success
4.天藍色：btn btn-info
5.黃色：btn btn-warning
6.紅色：btn btn-danger
7.鏈接：btn btn-link
9.按鈕大小：
（1）大型：btn-lg
（2）小型：btn-sm
（3）超小型：btn-sx
10.圖片：
（1）響應式:img-responsive
（2）圓角：img-rounded
（3）圓形：img-circle
（4）圓角邊框：img-thumbnails

總結(jié)

以上是生活随笔為你收集整理的bootstrap样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。