在JSP页面中使用Bootstrap

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

应暻

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

阅读量2.7k

点赞数 1

文章标签： html5 jquery

本文链接：https://blog.csdn.net/ysmdelog/article/details/115028481

版权

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。官网：https://v3.bootcss.com/。
在官网下载相应版本后，导入资源【css、js、fonts】，然后在<head></head>中写

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">

而Bootstrap使用前提时JQuery，所以也要将jquery导入，共4步，同样在<head></head>中写。

	<%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
	<link href="${APP_PATH}/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${APP_PATH}/js/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${APP_PATH}/js/bootstrap.min.js"></script>

然后参考官网的样式操作即可。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

应暻

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JSP和bootstrap

m0_58723498的博客

03-15

2586

1.JSP 1.Java Server Page:java服务页面,能够书写java代码的html 2.通过idea部署的web文件--->默认jsp文件存储路径:C:\Users\Administrator\.IntelliJIdea2019.1\system\tomcat\Tomcat_8_5_66_Web1\work\Catalina\localhost\Web1_war_exploded\org\apache\jsp 3.经历两个阶段: 翻译阶段:需要被web容器解析将当

使用BootStrap优化网页页面

m0_65725031的博客

05-07

1101

在上一篇文章教大家如何使用BootStrap，今天主要使用BootStrap在去在页面上完成一些功能，大家去BootStrap官网复制所需要的样式，在进行更改。代码实操代码和使用BootStrap制作网页页面该文章代码基本一致，就是index.jsp我们的首页代码有些不同，所以今天只给大家提供首页代码，其他的代码去看上一篇文章。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding.

参与评论您还未登录，请先登录后发表或查看评论

jsp引入并使用bootstrap和jquery——javaweb系列(五)

qq_23858785的博客

05-12

1475

jsp引入并使用bootstrap和jquery——javaweb系列(五)

BootStrap在jsp中的使用

01-08

下载bootstrap的js，css文件：在jsp中的应用：第一步：新建一个web项目将bootstrap下载下来的文件放入WEB-INF下面的，lib目录下，新建一个bootstrap文件：第二步：新建一个index.jsp文件，引入所使用的css.js和bootstrap的：注意这里的要缓存<!DOCTYPE html> <html lang=zh-CN> 第三步：在body中载入需要的组件：运行在tomcat服务器上：效果如图：第四步：tomcat的8080端口被占用，修改tomcat的文件：然后重启eclipse即可。在java的项

在jsp中使用Bootstrap

weixin_33753003的博客

04-02

554

将css、js、font文件夹拷贝到WebRoot目录下 1 <html> 2 <head lang="zh-cn"> 3 <meta charset="utf-8"> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5

bootstrap之jsp

JackMaster_xh的博客

07-09

1281

Bootstrap的简单项目 1.首先我们要数据库建库，然后在myeclipse里建项目工程，还有导jar包和Bottstrap的框架，这些咱们先暂时省略，直奔主题页面Jsp: 引入jquery和bootstrap框架： href="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/css/bootstra

简洁大气的Bootstrap前台框架（Jsp版）

08-31

纯手工原创良心制作

bootstrap制作jsp页面（根据值让table显示选中）

10-20

本篇介绍如何使用Bootstrap框架来构建JSP页面，并实现当满足特定条件时，在表格中突出显示或选中某行的功能。Bootstrap是一个用于快速开发响应式网站的前端框架，提供了一套丰富的界面组件，而JSP（JavaServer Pages...

jsp中使用的Bootstrap中下拉列表根据查询结果在输入框中显示默认值

qq_40695548的博客

10-23

1105

jsp中使用的Bootstrap中下拉列表根据查询结果在输入框中显示默认值在使用过Bootstrap的朋友们应该知道Bootstrap的表单支持的控件中有下拉列表这个东西，就是下面的代码，每个<option>就是一个下拉选项，它默认选中是第一个，我们可以通过设置<option>的selected属性来改变默认选中的选项，但有时候我们想要动态地去根据自己的数据来设置默认选中来显示，这有如何实现呢？ Bootstrap中文文档：https://www.bootcss.com/ <

flex-bootstrap-jsp.zip_bootstrap_flex

09-19

这个库可能封装了与Flex和Bootstrap相关的类和方法，使得在JSP页面上可以方便地使用这两者的技术，无需手动导入和配置大量的依赖。使用这样的库，开发者可以将Flex的组件与Bootstrap的响应式设计结合，创建出既...

一个实用的bootstrap模板（html版本和jsp版本都有）

04-29

一个实用的bootstrap模板（html版本和jsp版本都有）

bootstrap模板（包括HTML和jsp）

12-28

bootstrap模板包含html,jsp代码，从登陆到后台管理界面都有

在jsp页面中使用bootstrap制作

最新发布

2305_76609659的博客

06-26

206

SSM框架中jsp引入bootstrap路径使用${pageContext.request.contextPath}或者<%=request.getContextPath()%>无效，浏览器控制台报错bootstrap404。搜索到在springmvc.xml中添加<mvc:default-servlet-handler/>，添加后仍不起作用。最后在web.xml中添加url-pattern解决。

bootstrap在jsp中的应用

weixin_33877092的博客

01-05

229

http://www.bootcss.com/ 下载bootstrap的js，css文件：在jsp中的应用：第一步：新建一个web项目将bootstrap下载下来的文件放入WEB-INF下面的，lib目录下，新建一个bootstrap文件：第二步：新建一个index.jsp文件，引入所使用的css.js和bootstrap的：注意这里的要缓存<!DOCTYPE ht...

jsp页面使用弹窗插件bootstrap 示例

05-30

在JSP页面中使用Bootstrap弹窗插件的步骤与普通HTML页面大致相同，只需要注意一些细节。以下是一个简单的JSP页面，演示如何使用Bootstrap创建一个弹窗： 1. 首先，需要在JSP页面中引入Bootstrap的CSS和JS文件。可以在head标签中添加以下代码： ``` <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> ``` 2. 在JSP页面中，创建一个按钮，用于触发弹窗。例如： ``` <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 点击打开弹窗 </button> ``` 这个按钮与在HTML页面中的按钮相同。 3. 创建弹窗的代码。在JSP页面中，可以使用JSP标签来动态生成弹窗的内容。例如： ``` <div class="modal" tabindex="-1" role="dialog" id="myModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">这是一个弹窗</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>${message}</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> ``` 在这个例子中，弹窗的正文部分使用了JSP表达式`${message}`，这个表达式会被动态替换为实际的内容。 4. 这个弹窗现在已经可以在JSP页面中使用了。当用户点击按钮时，会出现一个弹窗，显示弹窗中的内容。用户可以使用关闭按钮或者按下ESC键来关闭弹窗。需要注意的是，JSP页面中使用弹窗插件时，需要确保生成的HTML代码符合Bootstrap的要求，否则可能会出现样式问题。