jsp怎么用bootstrap?

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

jsp怎么用bootstrap?

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

1.jpg

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

2.png

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

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

3.jpg

第五步:在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

更多web前端知识,请查阅 HTML中文网 !!

以上就是jsp怎么用bootstrap?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏