在jsp引入bootstrap

第一步：在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"> <spanaria-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>

运行效果

在jsp引入bootstrap相关推荐

SSM整合的Maven项目中引入Bootstrap，三步实现高大上插拔UI，后端也有美感
对比效果引入bootstrap前引入bootstrap后实现第一步下载并引入bootstrap bootstrap3下载 https://v3.bootcss.com/getting-star ...
在线引入bootstrap包
在eclipse中,本地引入一直引入不起,绝对路径和相对路径都不行~所以,现在就先用在线包引入bootstrap.同时bootstrap需要jquery来支持 <link rel="s ...
laravel mysql视图,在 Laravel 视图文件中引入 bootstrap
如何在 Laravel 视图文件中引入 bootstrap?对于从来没有接触过 PHP 开发框架的菜鸟来说,这确实是个问题. 在我们这些菜鸟传统的认知里,要在一个 html/php 文件里引入一个外部 ...
JSP引入CSS文件无法生效的问题
JSP引入CSS文件无法生效的问题开发工具与关键技术:eclipse.Java 作者:幻奏撰写时间:2020.8.8 不知道你们有没有碰到这个问题,就是css文件在jsp中无法生效,看解决办法的可 ...
jsp引入页面，即包含文件的两种方法介绍
最近在练手做一个小Demo中,比较多的用到了jsp引入另一个jsp的例子,感觉很简单,但是不幸出现了错误500,于是查找了一些资料来了解一下关于jsp包含的方法,这里分享出来,个人总结,可能不够完善, ...
angular引用bootstrap_angular怎么引入bootstrap？
angular中引入bootstrap的方法:方法一.找到index.html直接添加样式引用链接.方法二.打开Angular.json文件找到style和scripts两个配置节.并将bootstr ...
IDEA中引入Bootstrap并展示第一个模板
在导入bootstrap之前要先导入jQuery 如果你是使用的maven管理的话,可以直接导入jQuery的坐标 <dependency><groupId>org.webja ...
vue引入bootstrap、jquery
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案参考文章: (1)vue-cli项目中单文件组件引入bootstrap.js异常的解决方案 (2)https://www.cn ...

在jsp引入bootstrap

在jsp引入bootstrap相关推荐

最新文章

热门文章