Bootstrap把table单独拿出来封装，只需要简单几个class就能做出很好的效果
img主要增加了圆角矩形，圆形，缩略图三种样式
实例如下：
<!DOCTYPE html> <html> <head> <title>02_table.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" media="screen" href="../css/bootstrap.min.css"> <link rel="stylesheet" media="screen" href="../css/bootstrap-theme.min.css"> <script src="../js/jquery-1.11.2.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h4 class="page-header">1 普通表</h4> <table class="table table-striped table-bordered table-hover"> <caption>加.table-striped的class相邻记录背景深浅不同, .table-bordered负责边框, table-hover响应鼠标悬停(背景加深)</caption> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>User Name</th> </tr> </thead> <tbody> <tr> <td>Athrun</td> <td>Null</td> <td>@Athrun</td> </tr> <tr> <td>aehyok</td> <td>leo</td> <td>@aehyok</td> </tr> <tr> <td>lynn</td> <td>thl</td> <td>@lynn</td> </tr> </tbody> </table> <h4 class="page-header">2 带色紧凑表</h4> <table class="table table-condensed table-responsive table-hover"> <caption>.table-condensed缩紧列表(减小padding), tr中的class表示不同标识颜色, .table-responsive响应式表格(小屏幕小于768px出现滚动条但是电脑上好像不行可能只在移动设备上)</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>User Name</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>Athrun</td> <td>Null</td> <td>@Athrun</td> </tr> <tr class="success"> <td>2</td> <td>lynn</td> <td>thl</td> <td>@lynn</td> </tr> <tr class="warning"> <td>3</td> <td>Amdy</td> <td>Amy</td> <td>@Amdy</td> </tr> <tr class="danger"> <td>4</td> <td>Amdy</td> <td>Amy</td> <td>@Amdy</td> </tr> <tr > <td class="success">5</td> <td class="danger">Amdy</td> <td class="warning">Amy</td> <td class="active">@Amdy</td> </tr> </tbody> </table> <h4 class="page-header">3 图片</h4> <div class="row"> <p><code>.img-rounded</code>圆角矩形，<code>.img-circle</code>圆形，<code>.img-thumbnail</code>缩略图</p> <p><code>.img-responsive</code>表示响应式图片，让图片不超过父class指定尺寸 <div class="col-md-2"> <img src="http://placehold.it/150x150" class="img-rounded img-responsive" alt="Responsive image"> </div> <div class="col-md-2"> <img src="http://placehold.it/150x150" class="img-circle img-responsive" alt="Responsive image"> </div> <div class="col-md-2"> <img src="../image/znufe.jpg" class="img-thumbnail img-responsive" alt="Responsive image"> </div> <div class="col-md-2"> <img src="http://placehold.it/150x150" class="img-thumbnail img-responsive" alt="Responsive image"> </div> <div class="col-md-2"> <img src="../image/znufe.jpg" class="img-thumbnail img-responsive" alt="Responsive image"> </div> <div class="col-md-2"> <img src="../image/znufe.jpg" class="img-circle img-thumbnail img-responsive" alt="Responsive image"> </div> </div> </div> </body> </html>
效果如图(第二张表第4条记录就是鼠标悬停加强让背景加深)：
