BootStrap实现会员列表完成前端页面------前端

╰+哭是因爲堅強的太久メ 2024-02-17 09:53 62阅读 0赞

![c1dcda181afc4704bc0483020ada3be9.png][]

>     <!DOCTYPE html>
>     <html>
>     	<head>
>     		<meta charset="utf-8" />
>     		<title></title>
>     		
>     		
>     		<script src="jquery/jquery-3.6.1.js" type="text/javascript"></script>
>     		
>     		<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
>     		
>     		<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
>     		<style type="text/css" rel="stylesheet">
>     			.myPostion
>     			{
>     				position: relative;
>     				left: 30px;
>     			}
>     			
>     			#top : 30px;
>     			{
>     				top: 30px;
>     			}
>     		</style>
>     		<script type="text/javascript">
>     			$(function()
>     			{
>     				
>     			});
>     		</script>
>     	</head>
>     	<body>
>     		
>     		<div class="modal fade" id="impModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
>     		  <div class="modal-dialog" role="document" style="width: 30%;">
>     		    <div class="modal-content">
>     				
>     		      <div class="modal-header">
>     		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
>     		        <h4 class="modal-title" id="myModalLabel">删除用户</h4>
>     		      </div>
>     			  <div class="modal-body">
>     			    <form>
>     					<div class="form-group">
>     						<label for="vipfile">会员文件</label>
>     						<input type="file" value="杰克"/>
>     					</div>
>     				</form>
>     			  </div>
>     			  
>     		      <div class="modal-footer">
>     		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
>     		        <button type="button" class="btn btn-danger">确定</button>
>     		      </div>
>     		    </div>
>     		  </div>
>     		</div>
>     		
>     		<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
>     		  <div class="modal-dialog" role="document" style="width: 30%;">
>     		    <div class="modal-content">
>     				
>     		      <div class="modal-header">
>     		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
>     		        <h4 class="modal-title" id="myModalLabel">删除用户</h4>
>     		      </div>
>     			  
>     		      <div class="modal-footer">
>     		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
>     		        <button type="button" class="btn btn-danger">确定</button>
>     		      </div>
>     		    </div>
>     		  </div>
>     		</div>
>     		
>     		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
>     		  <div class="modal-dialog" role="document">
>     		    <div class="modal-content">
>     				
>     		      <div class="modal-header">
>     		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
>     		        <h4 class="modal-title" id="myModalLabel">修改用户</h4>
>     		      </div>
>     			  
>     		      <div class="modal-body">
>     				  
>     		        <form>
>     		          <div class="form-group">
>     		            <label for="exampleInputEmail1">邮箱地址</label>
>     		            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
>     		          </div>
>     		          <div class="form-group">
>     		            <label for="exampleInputPassword1">密码</label>
>     		            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
>     		          </div>
>     		          <div class="form-group">
>     		            <label for="exampleInputPassword1">密码</label>
>     		            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
>     		          </div>
>     		          <div class="form-group">
>     		            <label for="exampleInputPassword1">密码</label>
>     		            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
>     		          </div>
>     		          <button type="submit" class="btn btn-default">保存</button>
>     		        </form>
>     		      </div>
>     			  
>     		      <div class="modal-footer">
>     		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
>     		        <button type="button" class="btn btn-primary">新增</button>
>     		      </div>
>     		    </div>
>     		  </div>
>     		</div>
>     		
>     		<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
>     		  <div class="modal-dialog" role="document">
>     		    <div class="modal-content">
>     				
>     		      <div class="modal-header">
>     		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
>     		        <h4 class="modal-title" id="myModalLabel">新增用户</h4>
>     		      </div>
>     			  
>     		      <div class="modal-body">
>     				  
>     		        <form>
>     		          <div class="form-group">
>     		            <label for="exampleInputEmail1">邮箱地址</label>
>     		            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
>     		          </div>
>     		          <div class="form-group">
>     		            <label for="exampleInputPassword1">密码</label>
>     		            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
>     		          </div>
>     		          <div class="form-group">
>     		            <label for="exampleInputPassword1">密码</label>
>     		            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
>     		          </div>
>     		          <div class="form-group">
>     		            <label for="exampleInputPassword1">密码</label>
>     		            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
>     		          </div>
>     		          <button type="submit" class="btn btn-default">保存</button>
>     		        </form>
>     		      </div>
>     			  
>     		      <div class="modal-footer">
>     		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
>     		        <button type="button" class="btn btn-primary">新增</button>
>     		      </div>
>     		    </div>
>     		  </div>
>     		</div>
>     		<div class="myPostion">
>     			<div class="page-header">
>     				<h1>会员列表<small>信息维护</small></h1>
>     			</div>
>     		</div>
>     		<div class="myPostion">
>     			
>     			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
>     				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span></span>新增
>     			</button>
>     			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">
>     				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
>     			</button>
>     			<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delModal">
>     				<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除
>     			</button>
>     			<button type="button" class="btn btn-default" data-toggle="modal" data-target="#impModal">
>     				<span class="glyphicon glyphicon-import" aria-hidden="true">导入
>     			</button>
>     			<button type="button" class="btn btn-default">
>     				<span class="glyphicon glyphicon-export" aria-hidden="true">导出选中
>     			</button>
>     			<button type="button" class="btn btn-default">
>     				<span class="glyphicon glyphicon-export" aria-hidden="true">导出所有
>     			</button>
>     		</div>
>     		<div class="myPostion">
>     			
>     			<table class="table table-striped">
>     				<tr>
>     					<th>
>     						<input type="checkbox"/>
>     					</th>
>     					<th>序号</th>
>     					<th>真实姓名</th>
>     					<th>出生日期</th>
>     					<th>电话号码</th>
>     					<th>详细地址</th>
>     				</tr>
>     				<tr>
>     					<td>
>     						<input type="checkbox"/>
>     					</td>
>     					<td>
>     						1
>     					</td>
>     					<td>
>     						王富贵
>     					</td>
>     					<td>
>     						1980-10-1
>     					</td>
>     					<td>
>     						cedin
>     					</td>
>     					<td>
>     						君士坦丁堡
>     					</td>
>     				</tr>
>     				<tr>
>     					<td>
>     						<input type="checkbox"/>
>     					</td>
>     					<td>
>     						2
>     					</td>
>     					<td>
>     						JACK
>     					</td>
>     					<td>
>     						1980-10-1
>     					</td>
>     					<td>
>     						cedin
>     					</td>
>     					<td>
>     						君士坦丁堡
>     					</td>
>     				</tr>
>     				<tr>
>     					<td>
>     						<input type="checkbox"/>
>     					</td>
>     					<td>
>     						3
>     					</td>
>     					<td>
>     						Rose
>     					</td>
>     					<td>
>     						1980-10-1
>     					</td>
>     					<td>
>     						cedin
>     					</td>
>     					<td>
>     						君士坦丁堡
>     					</td>
>     				</tr>
>     			</table>
>     		</div>
>     		<div class="myPostion">
>     			<nav aria-label="Page navigation">
>     				<ul class="pagination">
>     					<li>
>     						<a href="#" aria-label="Previous">
>     							<span aria-hidden="true">«</span>
>     						</a>
>     					</li>
>     					<li>
>     						<a href="#">1</a>
>     					</li>
>     					<li>
>     						<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="#" aria-label="Next">
>     							<span aria-hidden="true">»</span>
>     						</a>
>     					</li>
>     				</ul>
>     			</nav>
>     		</div>
>     	</body>
>     </html>
> 
> <!DOCTYPE html>  
> <html>  
> <head>  
> <meta charset="utf-8" />  
> <title></title>  
>   
>   
> <script src="jquery/jquery-3.6.1.js" type="text/javascript"></script>  
>   
> <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css"/>  
>   
> <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>  
> <style type="text/css" rel="stylesheet">  
> .myPostion  
> \{  
> position: relative;  
> left: 30px;  
> \}  
>   
> \#top : 30px;  
> \{  
> top: 30px;  
> \}  
> </style>  
> <script type="text/javascript">  
> $(function()  
> \{  
>   
> \});  
> </script>  
> </head>  
> <body>  
>   
> <div class="modal fade" id="impModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  
> <div class="modal-dialog" role="document" style="width: 30%;">  
> <div class="modal-content">  
>   
> <div class="modal-header">  
> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
> <h4 class="modal-title" id="myModalLabel">删除用户</h4>  
> </div>  
> <div class="modal-body">  
> <form>  
> <div class="form-group">  
> <label for="vipfile">会员文件</label>  
> <input type="file" value="杰克"/>  
> </div>  
> </form>  
> </div>  
>   
> <div class="modal-footer">  
> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
> <button type="button" class="btn btn-danger">确定</button>  
> </div>  
> </div>  
> </div>  
> </div>  
>   
> <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  
> <div class="modal-dialog" role="document" style="width: 30%;">  
> <div class="modal-content">  
>   
> <div class="modal-header">  
> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
> <h4 class="modal-title" id="myModalLabel">删除用户</h4>  
> </div>  
>   
> <div class="modal-footer">  
> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
> <button type="button" class="btn btn-danger">确定</button>  
> </div>  
> </div>  
> </div>  
> </div>  
>   
> <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  
> <div class="modal-dialog" role="document">  
> <div class="modal-content">  
>   
> <div class="modal-header">  
> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
> <h4 class="modal-title" id="myModalLabel">修改用户</h4>  
> </div>  
>   
> <div class="modal-body">  
>   
> <form>  
> <div class="form-group">  
> <label for="exampleInputEmail1">邮箱地址</label>  
> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">  
> </div>  
> <div class="form-group">  
> <label for="exampleInputPassword1">密码</label>  
> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">  
> </div>  
> <div class="form-group">  
> <label for="exampleInputPassword1">密码</label>  
> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">  
> </div>  
> <div class="form-group">  
> <label for="exampleInputPassword1">密码</label>  
> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">  
> </div>  
> <button type="submit" class="btn btn-default">保存</button>  
> </form>  
> </div>  
>   
> <div class="modal-footer">  
> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
> <button type="button" class="btn btn-primary">新增</button>  
> </div>  
> </div>  
> </div>  
> </div>  
>   
> <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  
> <div class="modal-dialog" role="document">  
> <div class="modal-content">  
>   
> <div class="modal-header">  
> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
> <h4 class="modal-title" id="myModalLabel">新增用户</h4>  
> </div>  
>   
> <div class="modal-body">  
>   
> <form>  
> <div class="form-group">  
> <label for="exampleInputEmail1">邮箱地址</label>  
> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">  
> </div>  
> <div class="form-group">  
> <label for="exampleInputPassword1">密码</label>  
> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">  
> </div>  
> <div class="form-group">  
> <label for="exampleInputPassword1">密码</label>  
> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">  
> </div>  
> <div class="form-group">  
> <label for="exampleInputPassword1">密码</label>  
> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">  
> </div>  
> <button type="submit" class="btn btn-default">保存</button>  
> </form>  
> </div>  
>   
> <div class="modal-footer">  
> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
> <button type="button" class="btn btn-primary">新增</button>  
> </div>  
> </div>  
> </div>  
> </div>  
> <div class="myPostion">  
> <div class="page-header">  
> <h1>会员列表<small>信息维护</small></h1>  
> </div>  
> </div>  
> <div class="myPostion">  
>   
> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="\#addModal">  
> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></span>新增  
> </button>  
> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="\#editModal">  
> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改  
> </button>  
> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="\#delModal">  
> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除  
> </button>  
> <button type="button" class="btn btn-default" data-toggle="modal" data-target="\#impModal">  
> <span class="glyphicon glyphicon-import" aria-hidden="true">导入  
> </button>  
> <button type="button" class="btn btn-default">  
> <span class="glyphicon glyphicon-export" aria-hidden="true">导出选中  
> </button>  
> <button type="button" class="btn btn-default">  
> <span class="glyphicon glyphicon-export" aria-hidden="true">导出所有  
> </button>  
> </div>  
> <div class="myPostion">  
>   
> <table class="table table-striped">  
> <tr>  
> <th>  
> <input type="checkbox"/>  
> </th>  
> <th>序号</th>  
> <th>真实姓名</th>  
> <th>出生日期</th>  
> <th>电话号码</th>  
> <th>详细地址</th>  
> </tr>  
> <tr>  
> <td>  
> <input type="checkbox"/>  
> </td>  
> <td>  
> 1  
> </td>  
> <td>  
> 王富贵  
> </td>  
> <td>  
> 1980-10-1  
> </td>  
> <td>  
> cedin  
> </td>  
> <td>  
> 君士坦丁堡  
> </td>  
> </tr>  
> <tr>  
> <td>  
> <input type="checkbox"/>  
> </td>  
> <td>  
> 2  
> </td>  
> <td>  
> JACK  
> </td>  
> <td>  
> 1980-10-1  
> </td>  
> <td>  
> cedin  
> </td>  
> <td>  
> 君士坦丁堡  
> </td>  
> </tr>  
> <tr>  
> <td>  
> <input type="checkbox"/>  
> </td>  
> <td>  
> 3  
> </td>  
> <td>  
> Rose  
> </td>  
> <td>  
> 1980-10-1  
> </td>  
> <td>  
> cedin  
> </td>  
> <td>  
> 君士坦丁堡  
> </td>  
> </tr>  
> </table>  
> </div>  
> <div class="myPostion">  
> <nav aria-label="Page navigation">  
> <ul class="pagination">  
> <li>  
> <a href="\#" aria-label="Previous">  
> <span aria-hidden="true">&laquo;</span>  
> </a>  
> </li>  
> <li>  
> <a href="\#">1</a>  
> </li>  
> <li>  
> <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="\#" aria-label="Next">  
> <span aria-hidden="true">&raquo;</span>  
> </a>  
> </li>  
> </ul>  
> </nav>  
> </div>  
> </body>  
> </html>

[c1dcda181afc4704bc0483020ada3be9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/f8fcca1d2d594cd7b7479d8884c9b017.png