第一步:在https://v3.bootcss/getting-started/#top该网站下载Bootstrap,有可以看到有三种,如下图所示(本人下载的是源码)
第二步:解压下载的解压包
第三步:新建Maven工程然后将它转为一个动态web工程(如果不会,可以参考本人上一篇博客《将一个Maven工程转为一个标准的Web动态工程》)
第四步:在src下面新建一个文件夹(static),并将解压的文件导入粘贴进去,如下图所示
第五步:在xxx-servlet.xml配置文件中配置响应静态文件
<!-- 响应静态文件 -->
<mvc:default-servlet-handler/>
第六步:配置jsp页面,代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/bootstrap-3.3.7/dist/css/bootstrap.min.css">
<!-- href:里面的路径是你导入在static文件夹里面下面bootstrap.min.css所在的路径,下面两个属性一样 -->
<script type="text/javascript" src="<%=basePath%>/static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/static/bootstrap-3.3.7/js/tests/vendor/jquery.min.js"></script>
</head>
<body>
<h1>你好,世界!</h1>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<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>
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
<table class="table table-hover">
<tr>
<td>aaa</td>
</tr>
</table>
</body>
</html>
运行效果
更多推荐
在jsp引入bootstrap
发布评论