bootstrap

簡單、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。 來自Twitter，是目前很受歡迎的前端框架之一。 Bootrstrap是基於HTML、CSS、JavaScript的，讓書寫程式碼更容易。 移動優先，響應式佈局開發。

bootstrap中文網址：http://www.bootcss.com/

bootstrap 容器

• container-fluid 流體
• container
  • 1170
  • 970
  • 750
  • 100%

bootstrap 柵格系統

bootstrap將頁面橫向分為12等分，按照12等分定義了適應不同寬度等分的樣式類，這些樣式類組成了一套響應式、移動裝置優先的流式柵格系統：

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

bootstrap響應式查詢區間：

1、大於等於768
2、大於等於992
3、大於等於1200

bootstrap 表單

1、form 宣告一個表單域
2、form-inline 內聯表單域
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 預設按鈕樣式
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 寬度是父級寬100%的按鈕
13、active
14、disabled
15、btn-group 定義按鈕組

bootstrap 圖片

img-responsive 宣告響應式圖片

bootstrap 隱藏類

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

bootstrap 字型圖示

通過字型代替圖示，font資料夾需要和css資料夾在同一目錄

bootstrap 下拉選單

1、dropdown-toggle
2、dropdown-menu

bootstrap 選項卡

1、nav
2、nav-tabs
3、nav-pills
4、tab-content

bootstrap 導航條

1、navbar 宣告導航條
2、navbar-default 宣告預設的導航條樣式
3、navbar-inverse 宣告反白的導航條樣式
4、navbar-static-top 去掉導航條的圓角
5、navbar-fixed-top 固定到頂部的導航條
6、navbar-fixed-bottom 固定到底部的導航條
7、navbar-header 申明logo的容器
8、navbar-brand 針對logo等固定內容的樣式
11、nav navbar-nav 定義導航條中的選單
12、navbar-form 定義導航條中的表單
13、navbar-btn 定義導航條中的按鈕
14、navbar-text 定義導航條中的文字
9、navbar-left 選單靠左
10、navbar-right 選單靠右

bootstrap 模態框

1、modal 宣告一個模態框
2、modal-dialog 定義模態框尺寸
3、modal-lg 定義大尺寸模態框
4、modal-sm 定義小尺寸模態框
5、modal-header
6、modal-body
7、modal-footer

bootstrap 響應式專題網站例項