BootStrap table的各種樣式效果

2021-10-03 07:56:19 字數 1788 閱讀 6461

☑  .table:基礎**,為任意 新增基本樣式 (只有橫向分隔線)

☑  .table-striped:斑馬線**

☑  .table-bordered:帶邊框的**

☑  .table-hover:滑鼠懸停高亮的**

☑  .table-condensed:緊湊型**

☑  .table-responsive:響應式**

1、「.table」主要有三個作用:

☑  給**設定了單元內距及底部邊距margin-bottom:20px

☑  在thead底部設定了乙個2px的淺灰實線

☑  每個單元格頂部設定了乙個1px的淺灰實線

下面就以上**類樣式,作簡要介紹:

一、基礎**

實現**:

基礎**

省份城市

廣東深圳 廣西

桂林 海南

三亞

效果圖如下:

二、條紋**

關鍵**:

效果圖:

三、邊框**

關鍵**:

效果圖:

四、懸停**

通過給**class新增 .table-hover樣式,當指標懸停在行上時會出現淺灰色背景

實現**: 

效果圖:

五、上下文類**

通過給tr和td新增樣式,給行或單元格新增指定樣式的背景色,突出上下文,常用的樣式有active、success、info、danger和warning。如下所示:

上下文**布局

省份省會

地級市數量

福建福州9

廣東廣州21

廣西南寧14

海南海口4

效果圖:

六、響應式**

通過給**新增上.table-responsive 樣式,可以讓**水平滾動以適應小型裝置(小於 768px)。當在大於 768px 寬的大型裝置上檢視時,您將看不到任何的差別。 

核心**:

七、緊湊型**:

通過給**新增.table-condensed 樣式,讓行內邊距(padding)被切為兩半,以便讓表看起來更緊湊,

核心**:

bootstrap table 分頁的問題

問題1 伺服器端取不到form值,querystring沒有問題,但是request.form取不到值 如2 設定傳遞到伺服器的引數 方法 function queryparams params tablelist bootstraptable if this.options.pagination ...

bootstrap table的編輯刪除

基於 bootstrap 的 jquery 外掛程式,通過簡單的設定,就可以擁有強大的單選 多選 排序 分頁,以及編輯 匯出 過濾 擴充套件 等等的功能。官網 其實很簡單,只需要在js的columns 裡面新增操作一欄的 title 操作 field id formatter option 然後繼續...

Bootstrap table學習筆記

引入css檔案 引入相關庫 我們需要引入jquery庫 bootstrap庫 以及bootstrap table.js檔案 put your locale files after bootstrap table.js 啟用bootstrap table外掛程式 官方文件中給出了我們有兩種那個方式來啟...