在jsp引入bootstrap

最新推荐文章于 2024-06-26 19:04:20 发布

苏世-顾长歌

最新推荐文章于 2024-06-26 19:04:20 发布

阅读量1w

点赞数 3

分类专栏： bootstrap 文章标签： jsp bootstrap

本文链接：https://blog.csdn.net/qq_43254488/article/details/85099244

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：在https://v3.bootcss.com/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.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>

运行效果
在这里插入图片描述

苏世-顾长歌

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
在jsp引入bootstrap

第一步：在https://v3.bootcss.com/getting-started/#top该网站下载Bootstrap，有可以看到有三种,如下图所示（本人下载的是源码）第二步：解压下载的解压包第三步：新建Maven工程然后将它转为一个动态web工程（如果不会，可以参考本人上一篇博客《将一个Maven工程转为一个标准的Web动态工程》）第四步：在src下面新建一个文件夹（static...
复制链接

扫一扫

专栏目录