SpringMVC如何使用bootstrap列表展示list数据

2025-04-19 18:09:29

1、新建一个页面list.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% pageContext.setAttribute("APP_PATH",request.getContextPath());%> <script type="text/javascript" src="${APP_PATH} /static/js/jquery-3.2.1.min.js"></script> <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></html>

2、搭建bootstrap显示页面：首先建立一个四行的布局<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><script type="text/javascript" src="${APP_PATH} /static/js/jquery-3.2.1.min.js"></script><link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><body> <div class="container">  <div class="row"> </div>  <div class="row"></div>  <div class="row"></div>  <div class="row"></div> </div></body></html>

3、让标题占满整个12列 <div class="row"> <div class="col-md-12"> <h1>SSM-CRUD</h1> </div> </div>

4、查看页面效果

5、让按钮占满整个4列，然后偏移8列 <div class="row"> <div class="col-md-4 col-md-offset-8"> <button class="btn btn-primary">新增</button> <button class="btn btn-danger">删除</button> </div> </div>

6、让表格占满整个12列： <div c盟敢势袂lass="row"稆糨孝汶;> <div class="col-md-12"> <table class="table table-hover"> <tr> <th>#</th> <th>empName</th> <th>gender</th> <th>email</th> <th>department</th> <th> 操作 </th> </tr> <tr> <th>1</th> <th>qe</th> <th>mr</th> <th>gwolf_2010@126.com</th> <th>技术部</th> <th> <button type="button" class="btn btn-primary btn-sm" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span> 编辑 </button> <button type="button" class="btn btn-danger btn-sm" aria-label="Left Align"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除 </button> </th> </tr> </table> </div> </div>

7、设置list分页条 <挢旗扦渌;!-- 显示分页信息 --> <div class="row&鳎溻趄酃quot;> <div class="col-md-6"> 当前记录数 </div> <div class="col-md-6"> <nav aria-label="Page navigation"> <ul class="pagination"> <li><a href="#">首页</a></li> <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> <li><a href="#">末页</a></li> </ul> </nav> </div> </div> </div>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。