Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ?在網頁制作中，通常會用到表格的鼠標懸停、隔行變色等功能。Bootstrap中提供了一系列表格布局樣式，利用該樣式可以幫助開發者快速開發出美觀的表格，作用于<table>元素的表格樣式如下表所示。
上表中，.table是表格的一個基類，如果想要加其他的樣式，都要在.table的基礎上去添加。表內的樣式可以組合使用，多個樣式之間只需使用空格隔開即可，并且都支持.table-dark樣式，適用于反轉色調。
Bootstrap對表格進行了優化，通過給<table>元素應用.table類樣式便可以得到一個優化的基本的表
格。
1.基本實例
例:給<table>添加.table類樣式，顯示優化后的表格。
結果圖：
?
2.表頭選項
?例:給表頭<thead>添加.thead-light類樣式示例。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><table class="table"><thead class="thead-light"><tr><th scope="col">序號</th><th scope="col">學號</th><th scope="col">姓名</th><th scope="col">專業</th><th scope="col">課程</th></tr></thead><tbody><tr><th scope="row">1</th><td>21090401001</td><td>李莉</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">2</th><td>21090401002</td><td>張雷</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">3</th><td>21090401003</td><td>周冰</td><td>計算機科學與技術</td><td>操作系統</td></tr></tbody></table></div></body> </html>?結果圖：
3.條紋狀表格
例:給<table>添加.table-striped類樣式示例。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><table class="table table-striped"><thead><tr><th scope="col">序號</th><th scope="col">學號</th><th scope="col">姓名</th><th scope="col">專業</th><th scope="col">課程</th></tr></thead><tbody><tr><th scope="row">1</th><td>21090401001</td><td>李莉</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">2</th><td>21090401002</td><td>張雷</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">3</th><td>21090401003</td><td>周冰</td><td>計算機科學與技術</td><td>操作系統</td></tr></tbody></table></div></body> </html>結果圖：
?
4.帶邊框的表格
例：給<table>元素添加.table-bordered類樣式。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><table class="table table-bordered"><thead><tr><th scope="col">序號</th><th scope="col">學號</th><th scope="col">姓名</th><th scope="col">專業</th><th scope="col">課程</th></tr></thead><tbody><tr><th scope="row">1</th><td>21090401001</td><td>李莉</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">2</th><td>21090401002</td><td>張雷</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">3</th><td>21090401003</td><td>周冰</td><td>計算機科學與技術</td><td>操作系統</td></tr></tbody></table></div></body> </html>?結果圖：
5.無邊框的表格
例：給<table>元素添加.table-boardeless類樣式。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><table class="table table-borderless"><thead><tr><th scope="col">序號</th><th scope="col">學號</th><th scope="col">姓名</th><th scope="col">專業</th><th scope="col">課程</th></tr></thead><tbody><tr><th scope="row">1</th><td>21090401001</td><td>李莉</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">2</th><td>21090401002</td><td>張雷</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">3</th><td>21090401003</td><td>周冰</td><td>計算機科學與技術</td><td>操作系統</td></tr></tbody></table></div></body> </html>?結果圖：
?6.鼠標指針懸停
例：給<table>元素添加.table-hover類樣式示例。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><table class="table table-hover"><thead><tr><th scope="col">序號</th><th scope="col">學號</th><th scope="col">姓名</th><th scope="col">專業</th><th scope="col">課程</th></tr></thead><tbody><tr><th scope="row">1</th><td>21090401001</td><td>李莉</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">2</th><td>21090401002</td><td>張雷</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">3</th><td>21090401003</td><td>周冰</td><td>計算機科學與技術</td><td>操作系統</td></tr></tbody></table></div></body> </html>結果圖：
7.緊湊表格
例：給<table>元素添加.table-sm類樣式。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head><body><div class="container"><table class="table table-sm"><thead><tr><th scope="col">序號</th><th scope="col">學號</th><th scope="col">姓名</th><th scope="col">專業</th><th scope="col">課程</th></tr></thead><tbody><tr><th scope="row">1</th><td>21090401001</td><td>李莉</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">2</th><td>21090401002</td><td>張雷</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr><th scope="row">3</th><td>21090401003</td><td>周冰</td><td>計算機科學與技術</td><td>操作系統</td></tr></tbody></table></div> </body></html>?結果圖：
8.狀態類
? ? ? ?Bootstrap為表格提供了多種狀態的樣式類，這些狀態類的主要作用是為表格中的行或單元格設置不同的背景顏色。
? ? ? ?狀態類設置的是<tr>、<td>或<th>元素樣式，使用.table-*來設置，可選值包括success、active、primary、secondary、danger、warning、info、light、dark等，同時狀態類也適用于反轉色調。
例：表格背景顏色示例。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><table class="table"><thead><tr><th scope="col">序號</th><th scope="col">學號</th><th scope="col">姓名</th><th scope="col">專業</th><th scope="col">課程</th></tr></thead><tbody><tr class="table-success"><th scope="row">1</th><td>21090401001</td><td>李莉</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr class="table-active"><th scope="row">2</th><td>21090401002</td><td>張雷</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr class="table-primary"><th scope="row">3</th><td>21090401003</td><td>周冰</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr class="table-warning"><th scope="row">4</th><td>21090401004</td><td>王穗</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr class="table-danger"><th scope="row">5</th><td>21090401005</td><td>周利</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr class="table-info"><th scope="row">6</th><td>21090401006</td><td>何琪</td><td>計算機科學與技術</td><td>操作系統</td></tr><tr class="table-secondary"><th scope="row">7</th><td>21090401007</td><td>付偉</td><td>計算機科學與技術</td><td>操作系統</td></tr></tbody></table></div></body> </html>結果圖：
?9.響應式表格
? ? ? ?通過把任意的table包裝在.table-responsive類內，可以創建響應式表格。即當表格水平溢出時出現水平滾動條。
例：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="table-responsive"><table class="table table-bordered"><thead><tr><th>序號</th><th>姓名</th><th>班級</th><th>語文</th><th>數學</th><th>英語</th><th>物理</th><th>化學</th><th>生物</th><th>地理</th><th>政治</th><th>歷史</th></tr><tbody><tr><th>1</th><th>張三</th><th>3班</th><th>80</th><th>90</th><th>92</th><th>85</th><th>92</th><th>80</th><th>85</th><th>90</th><th>85</th></tr></tbody></thead></table></div></body> </html>?結果圖：
小屏幕效果：
大屏幕效果：
總結
以上是生活随笔為你收集整理的Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MATLAB实现传递函数
- 下一篇： pytest合集（4）— 使用pytes