Bootstrap學習筆記

weixin_34236869發表於2016-03-23

一、網格佈局(柵格系統)概念

1、有12列(col)

2、col有四個類分別適應不同裝置 xs——extra small        sm——small            md——medium        lg——large

1694547-1253f3f387a7d9dd.jpg

二、表格樣式

可選表格類

1、條紋表格 table-striped

2、邊框表格 table-bordered

3、懸停表格 table-hover

4、精簡表格 table-condensed

上下文類

.active 灰色

.success 綠色

.warning 黃色

.danger 紅色

響應式類

table-responsive

<768px 可水平滾動     >768px 正常


三、表單樣式

基礎:role ="form"      class="form-group"

垂直(預設)       內聯form-inline       水平form-horizontal


四、按鈕

.btn為按鈕新增基本樣式嘗試一下

.btn-default預設/標準按鈕嘗試一下

.btn-primary原始按鈕樣式(未被操作)嘗試一下

.btn-success表示成功的動作嘗試一下

.btn-info該樣式可用於要彈出資訊的按鈕嘗試一下

.btn-warning表示需要謹慎操作的按鈕嘗試一下

.btn-danger表示一個危險動作的按鈕操作嘗試一下

.btn-link讓按鈕看起來像個連結 (仍然保留按鈕行為)嘗試一下

.btn-lg製作一個大按鈕嘗試一下

.btn-sm製作一個小按鈕嘗試一下

.btn-xs製作一個超小按鈕嘗試一下

.btn-block塊級按鈕(拉伸至父元素100%的寬度)嘗試一下

.active按鈕被點選嘗試一下

.disabled禁用按鈕


五、圖片

.img-rounded為圖片新增圓角 (IE8 不支援)嘗試一下

.img-circle將圖片變為圓形 (IE8 不支援)嘗試一下

.img-thumbnail縮圖功能嘗試一下

.img-responsive圖片響應式 (將很好地擴充套件到父元素)

相關文章