Bootstrap全局css样式_表格
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap全局css样式_表格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
條紋狀表格
通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table表格</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><table class="table table-striped"><thead><tr><th>表格標題</th><th>表格標題</th><th>表格標題</th></tr></thead><tbody><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr></tbody></table></div>
</body>
</html>
帶邊框的表格
帶邊框的表格 添加 .table-bordered 類為表格和其中的每個單元格增加邊框。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>table表格</title><link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="container"><table class="table table-bordered"><thead><tr><th>表格標題</th><th>表格標題</th><th>表格標題</th></tr></thead><tbody><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr></tbody></table></div> </body> </html> 鼠標懸停 通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應。緊縮表格 通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>table表格</title><link rel="stylesheet" href="bootstrap.min.css"><style>.container {margin-top: 10px;}</style> </head> <body><div class="container"><table class="table table-bordered table-hover table-condensed"><thead><tr><th>表格標題</th><th>表格標題</th><th>表格標題</th></tr></thead><tbody><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr></tbody></table></div> </body> </html>狀態類
Class 描述 .active 鼠標懸停在行或單元格上時所設置的顏色 .success 標識成功或積極的動作 .info 標識普通的提示信息或動作 .warning 標識警告或需要用戶注意 .danger 標識危險或潛在的帶來負面影響的動作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>table表格</title><link rel="stylesheet" href="bootstrap.min.css"><style>.container {margin-top: 10px;}</style> </head> <body><div class="container"><table class="table table-bordered table-hover table-condensed"><thead><tr><th>表格標題</th><th>表格標題</th><th>表格標題</th></tr></thead><tbody><tr class="success"><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr class="info"><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr class="warning"><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr class="danger"><td>表格內容</td><td>表格內容</td><td>表格內容</td></tr><tr><td class="success">表格內容</td><td>表格內容</td><td>表格內容</td></tr></tbody></table></div> </body> </html>?
總結
以上是生活随笔為你收集整理的Bootstrap全局css样式_表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap全局css样式_代码
- 下一篇： Bootstrap全局css样式_表单