bootstrap框架与javaweb项目结合/引入

最新推荐文章于 2024-08-21 16:33:32 发布
最新推荐文章于 2024-08-21 16:33:32 发布
阅读量7.3k 收藏 31
点赞数 3
分类专栏： java前端 java框架 文章标签： bootstrap引入 bootstrap与Javaweb结合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38610651/article/details/85157937
版权

bootstrap框架是前端使用较多的前端样式框架，但是最近突然忘记框架怎么和javaweb怎么结合引入使用，故

先做个笔记

1、在官网上下载好bootstrap压缩包并解压，加压后包含这三个文件夹，问价中包含的文件如下：

2、将css、js、founts这三个文件夹直接拷贝放到javaweb 项目的WebRoot/WebContent文件夹下，与WEB-INF文件夹在同一级，如图

3、这样就把bootstrap前端样式框架与javaweb项目相结合了，下面就是在页面怎么引入并使用bootstrap框架

因为bootstrap是依靠jQuery的，所以在上图的js文件夹中也加入了jQuery-1.9.1.js，

在HTML中，进行如下的引入操作，注意路径地址的写法，是绝对路径还是相对路径

 

我想要变强
关注
专栏目录
【前端】怎么引入bootstrap框架
想和派大星一样
02-15 1万+
1、从bootstrap网站上下载bootstrap的文件包2、引入bootstrap包，以及jquery.js3、在html（或者其他动态页面）页面中引入所需的css和js4、引入完成之后，就可以测试是否可以正常使用bootstrap中的组件了...
bootstrap java框架_Java单体应用 - 常用框架 - 01.Bootstrap
weixin_32039589的博客
02-27 176
Bootstrap请参照如上章节导航进行阅读1.概述Bootstrap 来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开...
SpringBoot引入Swagger-bootstrap-ui
天生我才总有用！！！
08-21 373
是基于swagger接口api实现的一套UI,因swagger原生ui是上下结构的，在浏览接口时不是很清晰，所以，swagger-bootstrap-ui是基于左右菜单风格的方式,适用与我们在开发后台系统左右结构这种风格类似,方便与接口浏览。
java web (安装配置idea，创建vue项目，引入bootstrap)
qq_36780295的博客
01-26 1475
1、idea安装和配置： idea下载地址：https://www.jetbrains.com/idea/download/#section=windows 安装的详细步骤可以参考：https://blog.csdn.net/linshaolun0701/article/details/90287220 不能说的秘密参考自公众号，下载包链接为：不能说的秘密 提取码：qudk，按照指示文档步骤即可。 2、安装vue.js： （1）安装： 在Plugins中安装插件，搜索vue.js，然后install。 （直
Bootstrap
狗凡的博客
10-17 235
Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义...
JavaWeb之Bootstrap
粥粥的博客
06-21 153
Bootstrap： 1. 概念： 一个前端开发的框架 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 2.好处: 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 响应式布局。 同一套页面可以兼容不同分辨率的设备。 3.快速入门 1.下载: BootStrap. 2.在项目中将这三个文件夹复制 3.创建HTML页面,引入必要的资源. <!DOCTYPE html> <html lang="zh-CN">
基于SSM框架的完整项目 Spring+SpringMVC+Mybatis+mysql+bootstrap下载
02-15
项目还引入了前端Bootstrap框架，以实现响应式网页设计，提高用户体验。 首先，Spring框架作为核心容器，主要负责管理应用对象（如Bean）的生命周期和依赖注入。它允许开发者通过XML或注解配置来定义Bean及其相互...
javaweb项目实例
07-26
Bootstrap框架可以用来快速创建响应式布局，提高页面的美观度和用户体验。你将学习如何在JSP中引入Bootstrap样式和JavaScript库，以及如何使用jQuery简化DOM操作。如果项目包含Ajax交互，你还将接触到JSON格式的数据...
基于javaweb 的bootstrap table使用案例源码下载
03-26
在JavaWeb开发中，Bootstrap Table是一种非常流行的前端组件，它结合了Bootstrap框架的美观样式和强大的功能，使得在网页上展示数据变得更加便捷。本案例主要探讨如何利用Bootstrap Table与Ajax技术进行交互，实现...
javaweb开发后台bootstrap管理系统模版
03-24
标题中的"javaweb开发后台bootstrap管理系统模版"是指使用JavaWeb技术和Bootstrap框架来开发适用于后台管理的网页模板。这样的模板设计考虑了在不同设备上的显示效果，包括个人电脑和各种移动设备，如智能手机和平板...
javaweb毕业设计 仿360buy京东商城源码 京东JavaWeb项目源代码
02-14
为了提升用户体验，可能引入了jQuery、Bootstrap或其他前端框架。此外，Ajax技术用于实现页面的异步更新，提供无刷新体验。 6. **安全控制**：在登录注册、支付等环节，必须考虑安全性。这可能涉及到密码加密存储、...
基于Bootstrap的Java企业通用开发平台框架
06-07
基于Bootstrap的Java企业通用开发平台框架jeefw,Java企业通用开发平台框架只引用了一个第三方jar包(sina.jar)；部门管理、字典管理、角色权限管理、字典管理、菜单管理、信息发布、用户密码加密等功能；不同的用户角色权限不同可通过页面进行配置：具体说明在压缩包中有相关信息；仅供交流学习使用。
基于Bootstrap的Java企业开发平台框架实例
11-29
基于Bootstrap的Java企业开发平台框架实例
JAVA spring mvc + mybatis + shiro HTML5 bootstrap前后台框架搭建
04-09
JAVA spring mvc + mybatis + shiro HTML5 bootstrap前后台框架搭建
javaweb动态网站-----如何在javaweb项目中使用bootstrap框架
wuling129的专栏
12-08 1176
首先，新建一个Dynamic Web Project，项目结构实例如图： 可以看到项目结构如下： ————src(源码) ————WebContent ————----css/fonts/js(从网上下的bootstrap压缩包里面） ————----WEB-INF ————-------web.xml (xml配置文件，用于配置servlet和jsp文件路径名） ————-------jsp文件 在你的jsp文件中使用bootstrap一般需要导入以下内容： <span st
在Web、Maven项目中加入Bootstrap
xueningyang555的博客
10-26 1034
参考链接:https://blog.csdn.net/qq_41879385/article/details/82431238 https://www.bootcss.com/ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 我也很喜欢用Bootstrap，因为Bootstrap的文件是别人写的，所以我们根本不知道文件...
java web笔记之BootStrap框架
javaProgrammerr的博客
04-02 1137
BootStrap一. 介绍:二. 使用方法三. 案例 一. 介绍: BootStrap它是一个响应式设计,自动适应各个屏幕并且容易上手的前端开发框架 二. 使用方法 首先引入jQuery库 再引入bootstrap的js库 还要引入bootstrap的css库 下面是官方的帮助文档链接 bootstrap-5.0.2中文帮助文档 三. 案例 给按钮添加样式 效果图 给表格添加样式 效果图 ...
Java Web实战详细教程（十二）Bootstrap的使用
Java朱老师博客
10-22 1465
        BootStrap是国际知名互联网公司Twitter公司推出的开源免费的CSS框架。所谓的CSS框架，就是利用CSS属性，定义好了一系列的类选择器，使用者只要查阅手册，即可快速的通过这些类选择器，构造一个界面清新大方、风格统一的网页。         可以通过其官网或其他前端学习网站进行Bootstrap的手册查阅工作。  
Bootstrap框架
daimenglaoshi的博客
09-11 240
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。Bootstrap框架。
javaweb使用Bootstrap框架实现一个登录界面
最新发布
09-09
使用Bootstrap框架实现一个登录界面涉及HTML、CSS以及Bootstrap提供的组件。Bootstrap是一个流行的前端框架，它允许开发者快速地设计响应式和移动优先的网站。以下是一个简单的Bootstrap登录界面实现步骤： 1. 引入Bootstrap CSS和JS文件：你需要在你的HTML文件中引入Bootstrap的CSS和JS文件，以确保你的界面使用Bootstrap的样式和组件。 ```html <!DOCTYPE html> <html lang="zh-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录界面</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <h2 class="text-center mt-5">登录</h2> <form> <div class="form-group"> <label for="username">用户名:</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" class="form-control" id="password" placeholder="请输入密码"> </div> <button type="submit" class="btn btn-primary btn-block">登录</button> </form> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 2. 创建表单：在`<form>`标签内部，使用Bootstrap的类和组件来创建用户名和密码输入框。例如，使用`.form-group`包裹`<label>`和`<input>`来创建表单控件组，使用`.form-control`类来让输入框响应Bootstrap的样式。 3. 添加按钮：为提交按钮添加`.btn`和`.btn-primary`类，这样按钮就会继承Bootstrap定义的蓝色样式，并且保证在不同的设备上都能适应屏幕大小。 4. 响应式布局：利用Bootstrap的栅格系统，可以使登录界面在不同屏幕尺寸下都能保持良好的布局。上面的例子中，使用`col-md-6`和`offset-md-3`类使登录表单在中等尺寸以上的屏幕上居中显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我想要变强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值