Bootstrap用户手册·设计响应式网站+中文版
2016-06-06 15:01
791 查看
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
<link href="css/bootstrap3.0.3.css" rel="stylesheet">
<style>
.btn > .glyphicon {
margin-right: 3px;
}
.pagination.square {
margin: 0; /* 去除外边距 */
}
.pagination.square > li > a,
.pagination.square > li > span {
margin: 0 5px;
border: 1px solid #dddddd; /* 设置所有的边框都为1像素 */
}
.pagination.square > li:first-child > a,
.pagination.square > li:first-child > span,
.pagination.square > li:last-child > a,
.pagination.square > li:last-child > span {
margin-left: 0px;
padding-left: 10px;
padding-right: 10px;
border-radius: 0px; /* 取消圆角 */
}
.pagination.red > li > a,
.pagination.red > li > span {
color: #f00;
border: 1px solid #f00;
}
.pagination.red > li > a:hover,
.pagination.red > li > span:hover,
.pagination.red > li > a:focus,
.pagination.red > li > span:focus {
background-color: #fdd5d5;
}
.pagination.red > .active > a,
.pagination.red > .active > span,
.pagination.red > .active > a:hover,
.pagination.red > .active > span:hover,
.pagination.red > .active > a:focus,
.pagination.red > .active > span:focus {
color: #ffffff;
background-color: #f00;
border-color: #f00;
}
.pagination.red > .disabled > span,
.pagination.red > .disabled > span:hover,
.pagination.red > .disabled > span:focus,
.pagination.red > .disabled > a,
.pagination.red > .disabled > a:hover,
.pagination.red > .disabled > a:focus {
color: #fdd5d5;
background-color: #ffffff;
border-color: #f00;
}
.pagination.green > li > a,
.pagination.green > li > span {
color: #5aa414;
border: 1px solid #5aa414;
}
.pagination.green > li > a:hover,
.pagination.green > li > span:hover,
.pagination.green > li > a:focus,
.pagination.green > li > span:focus {
background-color: #d8edc3;
}
.pagination.green > .active > a,
.pagination.green > .active > span,
.pagination.green > .active > a:hover,
.pagination.green > .active > span:hover,
.pagination.green > .active > a:focus,
.pagination.green > .active > span:focus {
color: #ffffff;
background-color: #5aa414;
border-color: #5aa414;
}
.pagination.green > .disabled > span,
.pagination.green > .disabled > span:hover,
.pagination.green > .disabled > span:focus,
.pagination.green > .disabled > a,
.pagination.green > .disabled > a:hover,
.pagination.green > .disabled > a:focus {
color: #d8edc3;
background-color: #ffffff;
border-color: #5aa414;
}
.table {
margin-bottom: 10px;
}
</style>
<script src="http:localhost:8080/df/js/jquery-1.5.1.js" type="text/javascript" ></script>
<script src="http:localhost:8080/df/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="http:localhost:8080/df/js/formmodal.js" type="text/javascript" ></script>
<script src="http:localhost:8080/df/js/infomodal.js" type="text/javascript" ></script>
<script src="http:localhost:8080/df/js/tile.js" type="text/javascript" ></script>
</head>
<body style="padding: 10px" class="apollo">
<div class="modal fade" id="rolePopUp">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Roles of Tom Xu</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Role</th>
<th>Assign Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Administrator</td>
<td>2011-10-10</td>
</tr>
<tr>
<td>2</td>
<td>Editor</td>
<td>2011-11-11</td>
</tr>
<tr>
<td>3</td>
<td>Sr. Dev</td>
<td>2011-12-12</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newPopUp">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H1">Create a new User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Birthday</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Text1" placeholder="Birthday">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
Enable
</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btnCreate">Create</button>
<button type="button" class="btn btn-warning" id="btnReset">Reset</button>
<button type="button" class="btn btn-danger" id="btnCancel" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DisabledPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H2">删除提示</h4>
</div>
<div class="modal-body">
提示内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btnConfirm" data-dismiss="confirm">确认</button>
<button type="button" class="btn btn-danger" id="btn2Cancel" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="panel panel-default ">
<!-- Default panel contents -->
<div class="panel-heading clearfix">
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle active" data-toggle="dropdown">
Filter By Disabled <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Filter by Account Status</a></li>
<li><a href="#">Filter by Department</a></li>
<li class="divider"></li>
<li><a href="#">Reset</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Sort By FirstName <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Sort by FirstName</a></li>
<li><a href="#">Sort by Email</a></li>
<li class="divider"></li>
<li><a href="#">Reset</a></li>
</ul>
</div>
</div>
<div class="pull-left">
<button class="btn btn-success" data-toggle="modal" data-target="#newPopUp" data-backdrop="static">New</button>
<button class="btn btn-warning" data-toggle="infomodal" data-target="#DisabledPopup" data-backdrop="static">Disable</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
<table id="List" class="table table-bordered table-hover cc">
<thead>
<tr class="">
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">ID</td>
<td>Name</td>
<td>Birthday</td>
<td>Email</td>
<td>Phone Number</td>
<td class="col-lg-3">Action</td>
</tr>
</thead>
<tbody class="">
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">1</td>
<td>Tom Xu</td>
<td>1982-11-11</td>
<td>tomxu@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info" data-toggle="modal" data-target="#rolePopUp"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">2</td>
<td>Nicholas Gottlieb</td>
<td>1982-11-11</td>
<td>nicholas.gottlieb@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">3</td>
<td>Simon Howell</td>
<td>1982-11-11</td>
<td>smon.howell@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">4</td>
<td>Ray Sperry</td>
<td>1982-11-11</td>
<td>ray.sperry@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">5</td>
<td>John Mccarrin</td>
<td>1982-11-11</td>
<td>john.mccarrin@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">6</td>
<td>John Mccarrin</td>
<td>1982-11-11</td>
<td>john.mccarrin@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">7</td>
<td>John Mccarrin</td>
<td>1982-11-11</td>
<td>john.mccarrin@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<ul class="list-group">
<!-- <li class="list-group-item">
<div class="alert alert-warning">No user record!</div>
</li>-->
<li class="list-group-item">
<ul class="pagination square">
<li class="disabled"><span>Prev</span></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><span>...</span></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">Next</a></li>
</ul>
<ul class="pagination square red">
<li class="disabled"><span>Prev</span></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><span>...</span></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">Next</a></li>
</ul>
<ul class="pagination square green">
<li class="disabled"><span>Prev</span></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><span>...</span></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">Next</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
<link href="css/bootstrap3.0.3.css" rel="stylesheet">
<style>
.btn > .glyphicon {
margin-right: 3px;
}
.pagination.square {
margin: 0; /* 去除外边距 */
}
.pagination.square > li > a,
.pagination.square > li > span {
margin: 0 5px;
border: 1px solid #dddddd; /* 设置所有的边框都为1像素 */
}
.pagination.square > li:first-child > a,
.pagination.square > li:first-child > span,
.pagination.square > li:last-child > a,
.pagination.square > li:last-child > span {
margin-left: 0px;
padding-left: 10px;
padding-right: 10px;
border-radius: 0px; /* 取消圆角 */
}
.pagination.red > li > a,
.pagination.red > li > span {
color: #f00;
border: 1px solid #f00;
}
.pagination.red > li > a:hover,
.pagination.red > li > span:hover,
.pagination.red > li > a:focus,
.pagination.red > li > span:focus {
background-color: #fdd5d5;
}
.pagination.red > .active > a,
.pagination.red > .active > span,
.pagination.red > .active > a:hover,
.pagination.red > .active > span:hover,
.pagination.red > .active > a:focus,
.pagination.red > .active > span:focus {
color: #ffffff;
background-color: #f00;
border-color: #f00;
}
.pagination.red > .disabled > span,
.pagination.red > .disabled > span:hover,
.pagination.red > .disabled > span:focus,
.pagination.red > .disabled > a,
.pagination.red > .disabled > a:hover,
.pagination.red > .disabled > a:focus {
color: #fdd5d5;
background-color: #ffffff;
border-color: #f00;
}
.pagination.green > li > a,
.pagination.green > li > span {
color: #5aa414;
border: 1px solid #5aa414;
}
.pagination.green > li > a:hover,
.pagination.green > li > span:hover,
.pagination.green > li > a:focus,
.pagination.green > li > span:focus {
background-color: #d8edc3;
}
.pagination.green > .active > a,
.pagination.green > .active > span,
.pagination.green > .active > a:hover,
.pagination.green > .active > span:hover,
.pagination.green > .active > a:focus,
.pagination.green > .active > span:focus {
color: #ffffff;
background-color: #5aa414;
border-color: #5aa414;
}
.pagination.green > .disabled > span,
.pagination.green > .disabled > span:hover,
.pagination.green > .disabled > span:focus,
.pagination.green > .disabled > a,
.pagination.green > .disabled > a:hover,
.pagination.green > .disabled > a:focus {
color: #d8edc3;
background-color: #ffffff;
border-color: #5aa414;
}
.table {
margin-bottom: 10px;
}
</style>
<script src="http:localhost:8080/df/js/jquery-1.5.1.js" type="text/javascript" ></script>
<script src="http:localhost:8080/df/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="http:localhost:8080/df/js/formmodal.js" type="text/javascript" ></script>
<script src="http:localhost:8080/df/js/infomodal.js" type="text/javascript" ></script>
<script src="http:localhost:8080/df/js/tile.js" type="text/javascript" ></script>
</head>
<body style="padding: 10px" class="apollo">
<div class="modal fade" id="rolePopUp">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Roles of Tom Xu</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Role</th>
<th>Assign Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Administrator</td>
<td>2011-10-10</td>
</tr>
<tr>
<td>2</td>
<td>Editor</td>
<td>2011-11-11</td>
</tr>
<tr>
<td>3</td>
<td>Sr. Dev</td>
<td>2011-12-12</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newPopUp">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H1">Create a new User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Birthday</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Text1" placeholder="Birthday">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
Enable
</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btnCreate">Create</button>
<button type="button" class="btn btn-warning" id="btnReset">Reset</button>
<button type="button" class="btn btn-danger" id="btnCancel" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="DisabledPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H2">删除提示</h4>
</div>
<div class="modal-body">
提示内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btnConfirm" data-dismiss="confirm">确认</button>
<button type="button" class="btn btn-danger" id="btn2Cancel" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="panel panel-default ">
<!-- Default panel contents -->
<div class="panel-heading clearfix">
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle active" data-toggle="dropdown">
Filter By Disabled <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Filter by Account Status</a></li>
<li><a href="#">Filter by Department</a></li>
<li class="divider"></li>
<li><a href="#">Reset</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Sort By FirstName <span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Sort by FirstName</a></li>
<li><a href="#">Sort by Email</a></li>
<li class="divider"></li>
<li><a href="#">Reset</a></li>
</ul>
</div>
</div>
<div class="pull-left">
<button class="btn btn-success" data-toggle="modal" data-target="#newPopUp" data-backdrop="static">New</button>
<button class="btn btn-warning" data-toggle="infomodal" data-target="#DisabledPopup" data-backdrop="static">Disable</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
<table id="List" class="table table-bordered table-hover cc">
<thead>
<tr class="">
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">ID</td>
<td>Name</td>
<td>Birthday</td>
<td>Email</td>
<td>Phone Number</td>
<td class="col-lg-3">Action</td>
</tr>
</thead>
<tbody class="">
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">1</td>
<td>Tom Xu</td>
<td>1982-11-11</td>
<td>tomxu@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info" data-toggle="modal" data-target="#rolePopUp"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">2</td>
<td>Nicholas Gottlieb</td>
<td>1982-11-11</td>
<td>nicholas.gottlieb@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">3</td>
<td>Simon Howell</td>
<td>1982-11-11</td>
<td>smon.howell@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">4</td>
<td>Ray Sperry</td>
<td>1982-11-11</td>
<td>ray.sperry@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">5</td>
<td>John Mccarrin</td>
<td>1982-11-11</td>
<td>john.mccarrin@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">6</td>
<td>John Mccarrin</td>
<td>1982-11-11</td>
<td>john.mccarrin@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<input type="checkbox" /></td>
<td class="text-center">7</td>
<td>John Mccarrin</td>
<td>1982-11-11</td>
<td>john.mccarrin@outlook.com</td>
<td>135816xx8888</td>
<td>
<button class="btn btn-xs btn-info"><span class="glyphicon glyphicon-list"></span>Info</button>
<button class="btn btn-xs btn-success"><span class="glyphicon glyphicon-user"></span>Role</button>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<ul class="list-group">
<!-- <li class="list-group-item">
<div class="alert alert-warning">No user record!</div>
</li>-->
<li class="list-group-item">
<ul class="pagination square">
<li class="disabled"><span>Prev</span></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><span>...</span></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">Next</a></li>
</ul>
<ul class="pagination square red">
<li class="disabled"><span>Prev</span></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><span>...</span></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">Next</a></li>
</ul>
<ul class="pagination square green">
<li class="disabled"><span>Prev</span></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><span>...</span></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">Next</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android官方MVP架构解读
- 校园网、教育网 如何纯粹访问 IPv6 网站避免收费
- 系统知识
- nignx+keepalived高可用配置开发步骤
- clean架构
- redhat5.8下配置LAMP架构
- View学习笔记(1)-Android控件架构
- （3）PX4开发指南——PX4架构等关键概念
- 大型网站架构系列：缓存在分布式系统中的应用（二）
- 大型网站架构系列：缓存在分布式系统中的应用（一）
- JAVA抓取网站数据-----JSOUP
- 网站性能优化：压缩图片
- jeecms网站开发出现会员登录页面
- MVP架构模式详解
- camera基本代码架构
- HTML5移动端手机网站开发流程
- Android Camera 架构
- 大型网站架构系列：缓存在分布式系统中的应用（二）
- 大型网站架构系列：缓存在分布式系统中的应用（一）
- 云豹直播系统，多功能应用广泛，架构可嵌入各种平台