BootStrap笔记-表格方面的配置
生活随笔
收集整理的這篇文章主要介紹了
BootStrap笔记-表格方面的配置
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css"> <!-- bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script> <!-- 彈窗、提示、下拉菜單--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script> <!-- bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head> <body><div class="container-fluid"><table class="table"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-striped"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-bordered"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-hover"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-dark"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-hover"><thead><tr class="table-primary"><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr class="table-success"><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr class="table-dark"><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr class="table-danger"><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table></div> </body> </html>運行截圖如下：
其中的table-hover的含義是鼠標(biāo)放上去有這樣的效果：
其他方面說明：
| 類名 | 描述 |
| .table-primary | 重要的顏色 |
| .table-success | 成功的顏色 |
| .table-danger | 危險的顏色 |
| .table-info | 通知的顏色 |
| .table-warning | 橘色，注意的地方 |
| .table-active | 灰色，鼠標(biāo)懸停效果 |
| .table-secondary | 灰色，表示內(nèi)容不怎么重要 |
| .table-light | 淺灰色，可用于表格行背景 |
| .table-dark | 深灰色，可用于表格行背景 |
總結(jié)
以上是生活随笔為你收集整理的BootStrap笔记-表格方面的配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 内核空间 缺页,Linux-
- 下一篇： 购书中心管理信息系统(含源文件)