Home >Web Front-end >HTML Tutorial >Bootstrap global CSS style table_html/css_WEB-ITnose
Bootstrap global CSS style table_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:221094browse
.table??Basic table style;
.table-striped??Add zebra striped style to each row within
;.table- bordered?? Add a border to the table;
.table-hover?? Create a hover effect for each row within
;.table-condensed?? Make the table more Compact, the padding in cells will be halved.
.active??The color set when the mouse is hovering over a row or cell;
.success??Identifies success or active action;
.info ??Identifies common prompt information or actions;
.warning??Identifies warnings or requires user attention;
.danger??Identifies dangerous or potentially negative actions;
.table-responsive??Create responsive tables;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>CSS全局样式_栅格系统</title> <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> <style type="text/css"> </style></head><body><div class="container table-responsive"> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="active"> <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th> <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th> <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th> </tr> </thead> <tbody> <tr class="info"> <td>辽足主帅:输球主要责任在我 坚信能够保级成功</td> <td>辽足主帅:输球主要责任在我 坚信能够保级成功</td> <td>辽足主帅:输球主要责任在我 坚信能够保级成功</td> </tr> <tr class="success"> <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> </tbody> </table></div></body></html>
Copyright statement: This article This is an original article by the blogger and may not be reproduced without the blogger's permission.