Bootstrap學習筆記
一、網格佈局(柵格系統)概念
1、有12列(col)
2、col有四個類分別適應不同裝置 xs——extra small sm——small md——medium lg——large
![1694547-1253f3f387a7d9dd.jpg](https://i.iter01.com/images/70e5b84d144bb482c44f0f1833a207686f38c594dbf95e82755b27acbc21c950.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圖片響應式 (將很好地擴充套件到父元素)
相關文章
- Bootstrap框架:學習筆記boot框架筆記
- Vue & Bootstrap 結合學習筆記(二)Vueboot筆記
- Vue & Bootstrap 結合學習筆記(一)Vueboot筆記
- bootstrap-modal.js學習筆記(原始碼註釋)bootJS筆記原始碼
- BootStrap筆記18boot筆記
- [Bootstrap 5 學習記錄](一)搭建框架boot框架
- 【Bootstrap5】精細學習記錄boot
- numpy的學習筆記\pandas學習筆記筆記
- 前端學習之Bootstrap學習前端boot
- 學習筆記筆記
- Django學習筆記(20)——BBS+Blog專案開發(4)Django如何使用BootstrapDjango筆記boot
- bootstrap外掛學習-bootstrap.modal.jsbootJS
- 【學習筆記】數學筆記
- 《JAVA學習指南》學習筆記Java筆記
- 機器學習學習筆記機器學習筆記
- 學習bootstrap的整理。boot
- 學習筆記-粉筆980筆記
- 學習筆記(3.29)筆記
- 學習筆記(4.1)筆記
- 學習筆記(3.25)筆記
- 學習筆記(3.26)筆記
- JavaWeb 學習筆記JavaWeb筆記
- golang 學習筆記Golang筆記
- Nginx 學習筆記Nginx筆記
- spring學習筆記Spring筆記
- gPRC學習筆記筆記
- GDB學習筆記筆記
- 學習筆記(4.2)筆記
- 學習筆記(4.3)筆記
- 學習筆記(4.4)筆記
- Servlet學習筆記Servlet筆記
- 學習筆記(3.27)筆記
- jest 學習筆記筆記
- NodeJS學習筆記NodeJS筆記
- WebSocket 學習筆記Web筆記
- mount 學習筆記筆記
- mapGetters學習筆記筆記
- jQuery學習筆記jQuery筆記
- 學習筆記:DDPG筆記