WEB基礎(chǔ)入門十六:bootstrip框架

簡(jiǎn)單、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架,讓web開(kāi)發(fā)更迅速、簡(jiǎn)單。 來(lái)自Twitter,是目前很受歡迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的,讓書(shū)寫(xiě)代碼更容易。 移動(dòng)優(yōu)先,響應(yīng)式布局開(kāi)發(fā)。

bootstrap 容器
container-fluid 流體
container
1170
970
750
100%

bootstrap 柵格系統(tǒng)
bootstrap將頁(yè)面橫向分為12等分,按照12等分定義了適應(yīng)不同寬度等分的樣式類,這些樣式類組成了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng):

1、col-lg-
2、col-md-
3、col-sm-
4、col-xs-

bootstrap響應(yīng)式查詢區(qū)間:
1、大于等于768
2、大于等于992
3、大于等于1200

bootstrap 表單
1、form 聲明一個(gè)表單域
2、form-inline 內(nèi)聯(lián)表單域
3、form-horizontal 水平排列表單域
4、form-group 表單組、包括表單文字和表單控件
5、form-control 文本輸入框、下拉列表控件樣式
6、checkbox checkbox-inline 多選框樣式
7、radio radio-inline 單選框樣式
8、input-group 表單控件組
9、input-group-addon 表單控件組物件樣式 10、input-group-btn 表單控件組物件為按鈕的樣式
10、form-group-lg 大尺寸表單
11、form-group-sm 小尺寸表單

bootstrap 按鈕
1、btn 聲明按鈕
2、btn-default 默認(rèn)按鈕樣式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 寬度是父級(jí)寬100%的按鈕
13、active
14、disabled
15、btn-group 定義按鈕組

bootstrap 圖片
img-responsive 聲明響應(yīng)式圖片

bootstrap 隱藏類
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg

bootstrap 字體圖標(biāo)
通過(guò)字體代替圖標(biāo),font文件夾需要和css文件夾在同一目錄

bootstrap 下拉菜單
1、dropdown-toggle
2、dropdown-menu

bootstrap 選項(xiàng)卡
1、nav
2、nav-tabs
3、nav-pills
4、tab-content

bootstrap 導(dǎo)航條
1、navbar 聲明導(dǎo)航條
2、navbar-default 聲明默認(rèn)的導(dǎo)航條樣式
3、navbar-inverse 聲明反白的導(dǎo)航條樣式
4、navbar-static-top 去掉導(dǎo)航條的圓角
5、navbar-fixed-top 固定到頂部的導(dǎo)航條
6、navbar-fixed-bottom 固定到底部的導(dǎo)航條
7、navbar-header 申明logo的容器
8、navbar-brand 針對(duì)logo等固定內(nèi)容的樣式
9、navbar-left 菜單靠左
10、navbar-right 菜單靠右
11、nav navbar-nav 定義導(dǎo)航條中的菜單
12、navbar-form 定義導(dǎo)航條中的表單
13、navbar-btn 定義導(dǎo)航條中的按鈕
14、navbar-text 定義導(dǎo)航條中的文本

bootstrap 模態(tài)框
1、modal 聲明一個(gè)模態(tài)框
2、modal-dialog 定義模態(tài)框尺寸
3、modal-lg 定義大尺寸模態(tài)框
4、modal-sm 定義小尺寸模態(tài)框
5、modal-header
6、modal-body
7、modal-footer

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第5章 菜單、按鈕及導(dǎo)航 一、下拉菜單 小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個(gè)獨(dú)立的組件,根...
    凜0_0閱讀 5,315評(píng)論 0 66
  • 一、入門準(zhǔn)備 二、整體架構(gòu) A.整體架構(gòu) 1.CSS12柵格系統(tǒng):以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布已有以...
    ZyBlog閱讀 1,241評(píng)論 0 1
  • 簡(jiǎn)單、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架,讓web開(kāi)發(fā)更迅速、簡(jiǎn)單。 來(lái)自Twitter,是目前很受歡迎的前端框架之一。 B...
    風(fēng)中丶凌亂閱讀 461評(píng)論 0 1
  • 早晨陽(yáng)光很好,撒在江面波光粼粼。內(nèi)心較為平和,每天努力進(jìn)步一點(diǎn)
    MENG_人迷茫的那幾年閱讀 177評(píng)論 0 0
  • 與其埋怨世界, 不如改變自己。 管好自己的心, 做好自己的事, 比什么都強(qiáng)。 人生無(wú)完美, 曲折亦風(fēng)景。
    趙知畫(huà)閱讀 199評(píng)論 0 0

友情鏈接更多精彩內(nèi)容