前端學習筆記:bootstrap(7)
4. **
(1)與**有關的類樣式
**的樣式 類名
基本例項 table
條紋狀** table-striped類可以給之內的每一行增加斑馬條紋樣式。
帶邊框的** table-bordered類為**和其中的每個單元格增加邊框。
滑鼠懸停 table-hover類可以讓中的每一行對滑鼠懸停狀態作出相應。
(2)**中的狀態類
即單獨對某個td或tr設定不同的顏色,通過這些狀態類可以為行或單元格設定顏色。
class 描述
.active 滑鼠懸停在行或單元格上時所設定的顏色。
.success 標識成功或積極的動作。
.info 標識普通的提示資訊或動作。
.warning 標識警告或需要使用者注意。
.danger 標識危險或潛在的帶來負面影響的動作。
(3)狀態類的效果
......
......
......
......
......
**案例:
案例需求:
使用bootstrap製作如下所示的**效果,支援響應式布局
案例**:
編號姓名
性別**
1302
貝吉塔19509869504
5940
孫悟空男
13938475687
6841
龜仙人男
18501029504
前端學習筆記 bootstrap 2
前端學習筆記 bootstrap 2 二 柵格系統 1.組成 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕或視口 viewport 尺寸的增加,系統會自動分為最多12列。柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局,你的內容就可以放入這些...
bootstrap學習筆記
學習 然後對bootstrap進行引用 柵格系統中,列數是12,行數不固定 例項 手機 平板 桌面 在上面案例的基礎上,通過使用針對平板裝置的 col sm 類,我們來建立更加動態和強大的布局吧。col xs 12 col sm 6 col md 8 col xs 6 col md 4 col xs...
bootstrap學習筆記
1 引入的檔案 script script 2 柵格系統布局 bootstrap把頁面設定為12列,通過改變列的數字來進行布局。col xs 4 指小於768px的小裝置 11 col sm 4 指 768px的裝置 22 col md 4 指 992px裝置 33 col lg 4 值1200px...