重点部分跳至第三部分，第四部分是关于启动Tomcat服务器用地址方法查看JSP效果的内容

目录

一、直观效果

二、相关介绍

三、使用方法

四、Tomcat等补充

一、直观效果

Bootstrap提供的主要直观效果有：

布局效果（①响应式布局：流式栅格系统可适应各种屏幕尺寸；②列偏移和排序）视觉效果（①按钮样式：不同状态的按钮颜色风格大小不同；②导航栏样式：可在顶部、底部或者是折叠等样式；③卡片效果：由图片、文本、按钮等组成的卡片组件，还可以实现鼠标悬停变色或模糊等交互效果）交互效果（①动画效果：淡入淡出和滑动旋转等；②模态框效果：弹出式的状态框有过渡效果和遮罩层等）图标效果

想体验具体的效果可以去官网看看，官网https://expo.bootcss.com有相关的网站实例，或者去菜鸟教程runoob.com也有更加具体的运行效果。这里就不截屏了展示了，因为有的是流动式，截屏是静态的，下文（第三部分）有一个简单的示例进行对比。

二、相关介绍

Bootstrap即打包了一些CSS修饰效果和JavaScript行为，可以直接下载后使用,使用时直接把CSS和JS文件复制到项目中即可，官网（Download · Bootstrap v5.3）下载，也可以用超链接的方法调用。

Bootstrap的作用：在第一部分，你已经看完了哈哈。

三、使用方法

在官网下载后使用CSS和JS所在路径，或者使用官网的CDN地址的方法引用，当然也可以直接在IDEA选创建HTML项目勾选使用Bootstrap框架（IDEA会自动下载相关要用的东西，但是我感觉太乱了，用不习惯，还是建议创建空项目的方法）。

路径有相对路径和绝对路径，相对路径：相对当前项目的位置 ；绝对路径：在电脑中某磁盘的根目录+各级文件夹和文件名的位置。

操作方法：

创建空项目，将下载的css和js直接复制到空项目中，有图片的话可以创建存放img的包，创建HTML包存放HTML代码。包结构大概是这样的：

①引用成功：

查看是否成功引用方法：在浏览器右上角的"..."→更多工具→开发人员工具→控制台

②引用失败（没有写背景图片），如下图所示：

下拉栏示例代码：

四、Tomcat等补充

1.IDEA编译器有自己的规则和包结构，也因这些规则有时候会遇到困难，比如不在一定范围不生效、写JSP时Tomcat总是默认第一个文件是index,如果命名的是其他文件名则在浏览器会出现404的现象，虽然Bootstrap不用部署到Tomcat服务器上，但是作为补充还是想说一下，JSP可以直接用地址搜索的方法查看JSP效果。

①首先打开Tomcat服务器，即启动startup.bat（在bin目录下）。如果出现闪退的情况可以在记事本中最后面写入pause，然后保存，再点startup.bat会提示哪里存在问题，一般是JDK和JAVA_HOME的问题。

②然后确保Tomcat服务器能够在浏览器上打开，在浏览器访问http://localhost:8080/，能成功打开的话是下面图二的情况（只截了部分图）。

③将要打开的项目放在webapps目录下，

④然后使用地址的方法查看效果，比如项目名是youweb，找到 youweb文件中 xxx.jsp的路径，

示例：http://localhost:8080/youweb/biao.jsp

写的是一个表单，运行效果如图：

特别注意：不要关闭Tomcat服务器，不然会出现图一（localhost拒绝访问）的情况。

图一（未打开Tomcat服务器）

图二（成功启动Tomcat服务器）​​​

2.CodeGeeX插件是一个不错的代码AI助手；

3.runoob.com 菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程是一个不错的学习网站（有源代码还可以在线编辑运行）；Spring Initializr网站可以下载需要的项目结构包；

4.生活小知识：镜子用干抹布檫的更明亮