Bootstrap表格示例

来源：互联网发布：大数据技术书籍推荐编辑：程序博客网时间：2024/05/20 03:40
效果图如下:
代码如下:
<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title>Bootstrap表格示例</title>    <!-- Bootstrap -->    <link href="css/bootstrap.min.css" rel="stylesheet"><style></style>  </head>  <body>       <div class="container"><div style="text-align:center">  <h2>Bootstrap表格示例</h2></div> <div class="panel panel-primary">  <div class="panel-heading"><h3 class="panel-title">数据表格</h3>  </div><div class="panel-body" ><form class="form-inline"><div class="row">        <div class="form-group col-sm-3"><input type="checkbox" id="inlineCheckbox1" value="option1"><label>选择所有</label>  </div>     <div class="form-group col-sm-3"><label>用户名:</label><input type="name"  class="form-control"  id="exampleInputName3" placeholder="用户名">  </div>      <div class="form-group col-sm-3"><label>手机号:</label><input type="Mobile" class="form-control"  id="exampleInputMobile3" placeholder="手机号"></input>  </div>    <div class="col-sm-3"><button type="submit" class="btn btn-primary">搜索</button><button type="submit" class="btn btn-primary">删除</button>  </div>     </div> </form><table class="table table-hover" style="margin-top:2px;">  <thead><tr><th></th><th>顺序</th><th>家庭名称</th><th>家庭Key</th><th>负责人</th><th>手机号</th><th>邮箱</th><th>家庭地址</th><th>创建时间</th><th>状态</th><th>操作</th></tr>  </thead>  <tbody><tr>  <td><input type="checkbox" id="inlineCheckbox1" value="option1"></td>  <th scope="row">1</th>  <td>ckse的家庭</td>  <td>234567981234567841564131</td>  <td>ckse</td>  <td>1302016367</td>  <td>1302016367@163.com</td>  <td>闵行区</td>  <td>2017-6-9</td>  <td>启用</td>  <td><a href="#">编辑</a></td></tr><tr>  <td><input type="checkbox" id="inlineCheckbox1" value="option1"></td>  <th scope="row">2</th>  <td>Thornton的家庭</td>  <td>234567981234567841564133</td>  <td>Thornton</td>  <td>1302016363</td>  <td>1302016363@163.com</td>  <td>闵行区</td>  <td>2017-6-9</td>  <td>启用</td>  <td><a href="#">编辑</a></td></tr><tr>  <td><input type="checkbox" id="inlineCheckbox1" value="option1"></td>  <th scope="row">3</th>  <td>the Bird的家庭</td>  <td>234567981234567841564132</td>  <td>the Bird</td>  <td>1302016365</td>  <td>1302016365@163.com</td>  <td>闵行区</td>  <td>2017-6-9</td>  <td>启用</td>  <td><a href="#">编辑</a></td></tr>  </tbody></table></div></div><div style="margin:0px;text-align:center;margin-top:0px;"><ul class="pagination" style="height:100px;"><li><a href="#">«</a></li><li class="active"><a href="#">1</a></li><li class="disabled"><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">»</a></li><li>                  总记录                    1                    总页数                    1                    当前第                    1                    页                转到                <input type="text" style="width:30px;" class="input" value="1" />                页                <button type="button" class="btn btn-success">确定</button>            </li></ul></div></div>    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="js/bootstrap.min.js"></script>  </body></html>
阅读全文
0 0