<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>排版样式</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body style="margin:50px;"> <!--<table class="table table-hover">--> <!--<table class="table table-striped">--> <!--<table class="table table-bordered">--> <table class="table table-striped table-hover"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>吴者然1</td> <td>男</td> <td>12</td> </tr> <tr class="info"> <td>2</td> <td>吴者然2</td> <td>男</td> <td>29</td> </tr> <tr class="success"> <td>3</td> <td>吴者然3</td> <td>男</td> <td>33</td> </tr> <tr class="sr-only"> <td>4</td> <td>吴者然4</td> <td>男</td> <td>41</td> </tr> </tbody> </table> <a href="###" class="btn btn-default">Link</a> <input type="button" class="btn btn-default" value="按钮"> <button class="btn btn-default">按钮</button> <button class="btn btn-success">按钮</button> <button class="btn btn-info">按钮</button> <button class="btn btn-info btn-lg">按钮</button> <button class="btn btn-info btn-sm">按钮</button> <button class="btn btn-info btn-xs">按钮</button> <button class="btn btn-info btn-block">按钮</button> <button class="btn btn-info btn-block active">按钮</button> <button class="btn btn-info btn-block disabled">按钮</button> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图: