WEB开发----BootStrap美化页面
2017-09-01 17:39
183 查看
在上一篇博客中,我们完成了SpringBoot与mybatis的整合,并加入了PageHelper分页插件spring boot与mybatis整合,今天我在项目中加入了BootStrap前端框架用来美化页面,
,目录结构:
,其实只需要这两个文件就可以实现最基础的样式了.
table表格页面代码page-list-root.jsp
由于index.jsp页面为首页,需要有导航栏之类的,所以为了存放显示table数据列表,所以要再写一个页面
数据列表管理页面grid.jsp
之后我的index页面已上部导航栏,然后内容分成左中右三部分
最终代码:
至于我的相册那个东西,是我在网上下载的别人用html5写的3D相册,觉得好看就加到项目中了,美化一下项目,
到此,首页已经差不多完成了,以后需要什么东西就可以往里面添加了
1. BootStrap介绍
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 Bootstrap 是基于 HTML、CSS、JAVASCRIPT,是目前最受欢迎的前端框架。2. BootStrap编写页面
首先看一下最终的效果:2.1 添加BootStrap文件
BootStrap文件在网上可以下载到,把他放到src/main/resource下面的static/css文件里面,因为它属于css样式美化,目录结构:
,其实只需要这两个文件就可以实现最基础的样式了.
2.2 对数据表格BootStrap化
上次使用的按钮进行上一页下一页操作,今天用BootStrap插件来进行.table表格页面代码page-list-root.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div style="height:400px;width:100%;">
<table class="table table-hover table-bordered" style="overflow:auto">
<thead>
<tr>
<td style="width:20%">RootID</td>
<td style="width:50%">RootName</td>
<td style="width:30%">RootPID</td>
</tr>
</thead>
<tbody>
<c:forEach var="r" items="${rootPage }">
<tr>
<td style="height:22px">${r.rootId }</td>
<td>${r.rootName }</td>
<td>${r.rootPid }</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<ul class="pagination" style="float:right">
<li><a href="JavaScript:pageAction('1')">«</a></li>
<c:if test="${pageNum>2 }">
<li><a href="JavaScript:pageAction('${pageNum-2 }')">${pageNum-2 }</a></li>
</c:if>
<c:if test="${pageNum>1 }">
<li><a href="JavaScript:pageAction('${pageNum-1 }')">${pageNum-1 }</a></li>
</c:if>
<li class="active"><a href="JavaScript:pageAction('${pageNum }">${pageNum }</a></li>
<c:if test="${pages-pageNum>0 }">
<li><a href="JavaScript:pageAction('${pageNum+1 }')">${pageNum+1 }</a></li>
</c:if>
<c:if test="${pages-pageNum>1 }">
<li><a href="JavaScript:pageAction('${pageNum+2 }')">${pageNum+2 }</a></li>
</c:if>
<li><a href="JavaScript:pageAction('${pages }')">»</a></li>
</ul>
<span id="nowPage" hidden>${pageNum }</span>
<script type="text/javascript">
function pageAction(pageNum){
var pageSize = $("#pageSize").val();
$("#rootListBody").load("${pageContext.request.contextPath}/root/rootAll",
{"pageNum":pageNum,"pageSize":pageSize,"orderBy":""});
}
</script>
</style>
</body>
</html>由于index.jsp页面为首页,需要有导航栏之类的,所以为了存放显示table数据列表,所以要再写一个页面
数据列表管理页面grid.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/css/bootstrap/js/bootstrap.js"></script>
<link
href="${pageContext.request.contextPath}/css/bootstrap/css/bootstrap.css"
rel="stylesheet" />
<title>Grid页面</title>
</head>
<body>
<div style="width: 100%; height: 100%; float: left;padding:5px;">
<!-- 查询 -->
<div style="width: 100%; height: 50px;">
<!-- search -->
<div style="width: 100%; float: left">
<input type="text" id="txtId" style="display: block; float: left;
width: 350px" class="form-control" placeholder="通过id搜索">
<input type="button" value="search" style="display: block; float: left;"
id="searchBtn" class="btn btn-success">
<input type="button" value="searchAll" style="display: block; float: left;
margin-left: 10px" id="searchAllBtn" class="btn btn-default">
<select id="pageSize" style="display: none; width: 60px; float: right; margin: 5px 2px 0px 0px"
class="form-control input-sm">
<option style="height:30px">3</option>
<option style="height:30px">5</option>
<option style="height:30px" selected>10</option>
</select>
</div>
</div>
<div id="rootListBody">
</div>
<script type="text/javascript">
$(function() {
//通过id查询名字
$("#searchBtn").click(
function() {
var id = $("#txtId").val();
$.get("${pageContext.request.contextPath}/root/rootId/"+ id, "",
function(data) {$("#contentSpan").text(
data.toString());
})
}
);
//查询所有,有分页
$("#searchAllBtn").click(function() {
$("#pageSize").show();
var pageSize = $("#pageSize").val();
$("#rootListBody").load("${pageContext.request.contextPath}/root/rootAll",{
"pageNum" : "","pageSize" : pageSize ,"orderBy" : ""
});
});
//分页下拉框
$("#pageSize").change(function() {
var pageSize = $("#pageSize").val();
var pageNum = $("#nowPage").text();
$("#rootListBody").load("${pageContext.request.contextPath}/root/rootAll",{
"pageNum" : pageNum,"pageSize" : pageSize,"orderBy" : ""
});
})
});
</script>
</body>
</html>2.3 完成index首页
首先需要引入BootStrap相关的文件<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/css/bootstrap/js/bootstrap.js"></script>
<link
href="${pageContext.request.contextPath}/css/bootstrap/css/bootstrap.css"
rel="stylesheet" />之后我的index页面已上部导航栏,然后内容分成左中右三部分
最终代码:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/css/bootstrap/js/bootstrap.js"></script> <link href="${pageContext.request.contextPath}/css/bootstrap/css/bootstrap.css" rel="stylesheet" />
<title>index页面</title>
</head>
<body style="border: 0px; margin: 0px; padding-top: 50px;background:#EEEEEE">
<!-- top -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">跟我一起学SpringBoot</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="JavaScript:loadGrid()">数据表格分页</a></li>
<li><a href="#">树状菜单</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">其他
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li><input type="text" id="txtId" style="float: left; width: 250px;margin-top:10px"
class="form-control" placeholder="关键字搜索">
<input type="button" value="search" style="display: block; float: left;margin-top:10px"
id="searchBtn" class="btn btn-default">
</li>
<li><a href="/my_3D_photo.jsp"><span class="glyphicon glyphicon-user"></span> 我的相册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 退出</a></li>
</ul>
</div>
</nav>
<!-- content -->
<div style="width: 100%; height: 550px; margin: 8px 3px">
<!-- content left -->
<div style="width: 15%; height: 100%; float: left;padding:5px">
<div id="leftContent" style="background:#fff;height:100%;">
</div>
</div>
<!-- content center -->
<div style="width: 60%; height: 100%; float: left;padding:5px">
<div id="content" style="background:#fff;width: 100%; height: 550px">
</div>
</div>
<!-- content right -->
<div style="width: 25%; height: 100%; background: #fefefc; float: left;">
<!-- 轮播 -->
<div id="myCarousel" class="carousel slide" style="width:100%;padding:5px;height:230px;">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="${pageContext.request.contextPath}/images/my3DPhoto/2.jpg" alt="First slide">
</div>
<div class="item">
<img src="${pageContext.request.contextPath}/images/my3DPhoto/3.jpg" alt="Second slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">最新新闻
</a>
<a href="#" style="margin-left:180px">更多>></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body" style="padding:2px;">
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">最热新闻
</a>
<a href="#" style="margin-left:180px">更多>></a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body" style="padding:2px;">
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">最多评论
</a>
<a href="#" style="margin-left:180px">更多>></a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body" style="padding:2px;">
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//开启轮播
$("#myCarousel").carousel('cycle');
// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
})
//加载数据表格
function loadGrid(){
$("#content").load("${pageContext.request.contextPath}/grid.jsp");
}
</script>
</body>
</html>
至于我的相册那个东西,是我在网上下载的别人用html5写的3D相册,觉得好看就加到项目中了,美化一下项目,
到此,首页已经差不多完成了,以后需要什么东西就可以往里面添加了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作
- （转）基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作
- webpack集成bootstrap进行多页面开发
- 高性能WEB开发 - flush让页面分块,逐步呈现
- 移动Web单页应用开发实践——页面结构化
- Bootstrap登陆注册页面开发教程
- 有关web开发中页面局部刷新
- bootstrap开发公众号后台，管理永久素材页面
- web开发的性能准则（减少页面加载时间方面）
- WEB前端开发框架Bootstrap3 VS Foundation5
- 关于web开发中的开关功能------layui和bootstrap两种开关
- 基于easyui开发Web版Activiti流程定制器详解（四）——页面结构（下）
- 基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
- web开发之制作页面弹出窗口(url传参提交)
- Skyline软件二次开发初级——3如何在WEB页面中的三维地图上创建几何对象