jsp怎么用bootstrap？

jsp怎么用bootstrap？下面本篇文章给大家介绍一下bootstrap在jsp中的应用。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

jsp怎么用bootstrap？

第一步：去官网下载Bootstrap，有可以看到有三种,如下图所示

1.jpg-600

第二步：解压下载的解压包

2.png-600

第三步：新建Maven工程然后将它转为一个动态web工程（如果不会，可以参考本人上一篇博客《将一个Maven工程转为一个标准的Web动态工程》）

第四步：在src下面新建一个文件夹（static），并将解压的文件导入粘贴进去,如下图所示

3.jpg-600

第五步：在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.org/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">&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>
	<!-- 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>

运行效果：

4.png-600