布局实现 · Vue从入门到实战

![](https://box.kancloud.cn/aaa325f23dc46167912b305b2f1303a7_398x663.png) ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container{ margin:100px auto; } </style> <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css"/> <script src="lib/bootstrap/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container"> <form role="form"> <div class="form-group"> <label for="username">用户名：</label> <input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名"/> </div> <div class="form-group"> <label for="age">年龄：</label> <input type="text" name="age" id="age" class="form-control" placeholder="请输入年龄"/> </div> <div class="form-group"> <input type="button" value="添加" class="btn btn-primary" /> <input type="button" value="重置" class="btn btn-danger" /> </div> </form> <hr /> <table class="table table-bordered table-hover"> <caption class="h1 text-info text-center">用户信息表</caption> <tr class="text-danger"> <th class="text-center">序号</th> <th class="text-center">姓名</th> <th class="text-center">年龄</th> <th class="text-center">操作</th> </tr> <tr class="text-center"> <td>1</td> <td>bob</td> <td>36</td> <td> <button class="btn btn-primary btn-sm">修改</button> <button class="btn btn-primary btn-sm">删除</button> </td> </tr> <tr class="text-center"> <td>2</td> <td>lili</td> <td>18</td> <td> <button class="btn btn-primary btn-sm">修改</button> <button class="btn btn-primary btn-sm">删除</button> </td> </tr> <tr> <td colspan="4" class="text-right"> <button class="btn btn-danger">删除全部</button> </td> </tr> <tr> <td colspan="4" class="text-center text-muted"> <p>暂无数据……</p> </td> </tr> </table> </div> </body> </html> ~~~