三. 环境搭建之bootstrap的引入

一 bootstrap介绍

bootstrap是一款前端框架，可以用来快速开发静态网页，如果我们一些样式等都从0写起就太费时间了，所以这款框架给我们提供了很多强大的功能。

二 下载

首先百度直接搜索bootstrap，进入官网，点击中文文档

再点击下载，进入下载界面

下载还好可以看到这些文件夹：

里面都是它的样式、字体等。

三 导入idea

在文件结构 webapp下新建一个static包，将刚刚解压好的文件放进即可。
然后我们来测试一下怎么使用：
在webapp下新建一个jsp文件，并且在static包下再新建一个js文件夹，并把下载好的jquery.min.js（min.js和.js相比是缩小版，内容是一样的，为了网页开发的速度更快）最后结构应该是这样：

然后打开index.jsp，我们根据bootstrap文档手册引入样式：
在上面那个下载页面中找到基本模板：

把里面的两段话引入：

link标签引入css样式
script标签引入脚本，包括js和其他脚本比如上面的jquery

四 测试

这里需要一个tomcat服务器。这里顺便记录一下tomcat服务器配置过程：
首先去官网下载tomcat：最好和jdk版本一致
官网
选择一个版本下载，进去点windows64.zip
下载解压出来后，需要配置环境变量
因为我发现我的环境变量下没有JAVA_HOME变量，所以添加一个

如图配置好后，点击文件夹下bin目录中的startup.bat 就可以启动服务器啦

然后在idea里面的run-edit configuration 里面配置tomcat
这里遇到一个问题，缺少arti，参考文章：解决方案
现在来测试，在body里随便写一个按钮先，然后我们来运行

这时候应该是如下界面：

这里涉及到一个小问题，idea中jsp需要及时更新网页页面怎么办呢，这里参考这篇文章：Idea每次修改jsp可以及时刷新的办法

然后我把bootstrap样式应用上去：
进去bootstrap中文文档，最上面有一个全局CSS样式，点击进去，右边目录有很多选项，选择按钮，可以看到很多样式，那么我们想要使用的话，只需要根据里面给的class，加入到我们的标签里面即可。如图：

重新刷新页面，即可看到下面的显示效果