前端學習筆記 bootstrap 7

2021-09-27 09:43:13 字數 784 閱讀 5776

前端學習筆記: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...