 |
位置：电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：Bootstrap4教程 > 指定意义的颜色类 | |||||||||||||||||||||
| 阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||
| 上一篇： 鼠标悬停效果 - 黑色背景表格 .table-dark 和 .table-hover 类 | 下一篇： 表头颜色 .thead-dark 类 | ||||||||||||||||||||
|
通过指定意义的颜色类可以为表格的行或者单元格设置颜色： 实例 <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td>Defaultson</td> <td>def@somemail.com</td> </tr> <tr> <td>Primary</td> <td>Joe</td> <td>joe@example.com</td> </tr> <tr> <td>Success</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Danger</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>Info</td> <td>Dooley</td> <td>july@example.com</td> </tr> <tr> <td>Warning</td> <td>Refs</td> <td>bo@example.com</td> </tr> <tr> <td>Active</td> <td>Activeson</td> <td>act@example.com</td> </tr> <tr> <td>Secondary</td> <td>Secondson</td> <td>sec@example.com</td> </tr> <tr> <td>Light</td> <td>Angie</td> <td>angie@example.com</td> </tr> <tr class="table-dark text-dark"> <td>Dark</td> <td>Bo</td> <td>bo@example.com</td> </tr> </tbody> </table> 下表列出了表格颜色类的说明:
完整代码 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例(小白教程网 2d5.net)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div> <h2>指定意义的颜色类</h2> <p>通过指定意义的颜色类可以为表格的行或者单元格设置颜色：</p> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td>Defaultson</td> <td>def@somemail.com</td> </tr> <tr> <td>Primary</td> <td>Joe</td> <td>joe@example.com</td> </tr> <tr> <td>Success</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Danger</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>Info</td> <td>Dooley</td> <td>july@example.com</td> </tr> <tr> <td>Warning</td> <td>Refs</td> <td>bo@example.com</td> </tr> <tr> <td>Active</td> <td>Activeson</td> <td>act@example.com</td> </tr> <tr> <td>Secondary</td> <td>Secondson</td> <td>sec@example.com</td> </tr> <tr> <td>Light</td> <td>Angie</td> <td>angie@example.com</td> </tr> <tr class="table-dark text-dark"> <td>Dark</td> <td>Bo</td> <td>bo@example.com</td> </tr> </tbody> </table> </div> </body> </html> 效果图
|
|||||||||||||||||||||
| 上一篇： 鼠标悬停效果 - 黑色背景表格 .table-dark 和 .table-hover 类 | 下一篇： 表头颜色 .thead-dark 类 | ||||||||||||||||||||
