首先,新建一个Dynamic Web Project,项目结构实例如图:
可以看到项目结构如下:
————src(源码)
————WebContent
————----css/fonts/js(从网上下的bootstrap压缩包里面)
————----WEB-INF
————-------web.xml (xml配置文件,用于配置servlet和jsp文件路径名)
————-------jsp文件
在你的jsp文件中使用bootstrap一般需要导入以下内容:
<span style="font-size:14px;"><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/base.css"></span>
但是要使用模态框的话,还得多导两个哦:
<span style="font-size:14px;"><script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script></span>
Bootstrap 教程 | 菜鸟教程 https://www.runoob.com/bootstrap/bootstrap-tutorial.html
20个Bootstrap模板免费下载 https://www.sucai.biz/zx/201808295634.html
我用的是这个bootstrap:https://github.com/secondtruth/startmin
相对路径示意图:
把以下放到 head中。
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/startmin.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
以下放到body 最后面即可
<!-- jQuery -->
<span>
<script src="js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="js/raphael.min.js"></script>
<script src="js/morris.min.js"></script>
<script src="js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/startmin.js"></script>
</span>