Javaweb——Bootstrap、 XML

(后端概述)
**Bootstrap概念 **
前端开发的框架,Bootstrap 是基于 HTML、CSS、JavaScript 的,定义了很多的css样式和js插件, 响应式布局–利用其栅格系统。

响应式布局
①同一套页面可以兼容不同分辨率的设备——也就是一个页面可以换分为不同模板,
②实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子

** XML概念**
Extensible Markup Language 可扩展标记语言(可扩展:标签都是自定义的)

  • 功能
    * 存储数据
    1. 配置文件
    2. 在网络中传输
    * xml与html的区别
    1. xml标签都是自定义的,html标签是预定义。
    2. xml的语法严格,html语法松散
    3. xml是存储数据的,html是展示数据

语法(看懂即可)
①基本语法:
1. xml文档的后缀名 .xml
2. xml第一行必须定义为文档声明
3. xml文档中有且仅有一个根标签
4. 属性值必须使用引号(单双都可)引起来
5. 标签必须正确关闭
6. xml标签名称区分大小写
②组成部分

  1. 文档声明
    1. 格式:<?xml 属性列表 ?>
    2. 属性列表:
    * version:版本号,必须的属性
    * encoding:编码方式。告知解析引擎当前文档使用的字符集,默认值:ISO-8859-1
    * standalone:是否独立
    * 取值:
    * yes:不依赖其他文件
    * no:依赖其他文件

xml常见的解析器:jsoup

### 解决BootstrapJavaWeb项目中样式或功能不生效的方法 #### 1. 检查文件路径设置 确保引入的 Bootstrap 文件路径正确无误。通常情况下,CSS 和 JavaScript 文件应放置于 `web` 目录下的相应子文件夹内,如 `css`, `js` 或者通过 CDN 方式加载外部库[^1]。 ```html <!-- 使用本地资源 --> <link rel="stylesheet" href="./css/bootstrap.min.css"> <script src="./js/bootstrap.bundle.min.js"></script> <!-- 使用CDN方式 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script> ``` #### 2. 验证IDE缓存状态 有时 IDE 的缓存可能导致新修改未被及时反映出来。尝试清理并重新启动集成开发环境 (IDE),比如 IntelliJ IDEA 来刷新视图和清除可能存在的临时数据问题。 #### 3. 修改 Web 应用程序配置 对于基于 Spring MVC 构建的应用程序来说,需确认 DispatcherServlet 是否已适当配置来处理静态资源请求。具体做法是在 `web.xml` 中添加如下映射规则以允许 `.css` 等扩展名作为例外项而不触发控制器逻辑: ```xml <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.css</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.js</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.png</url-pattern> </servlet-mapping> ... ``` 此外还可以考虑采用更现代的方式——即利用 `<mvc:resources>` 标签简化这一过程,在 spring-config 文件里声明类似下面的内容: ```xml <mvc:resources mapping="/static/**" location="/WEB-INF/static/"/> ``` 这会使得位于 `/WEB-INF/static/` 下面的所有资源都能按照预期正常工作[^2]。 #### 4. 浏览器开发者工具排查 最后一步也是非常重要的一环就是借助浏览器自带的开发者工具(F12)查看网络请求日志(Network tab), 查看是否存在404错误或者其他异常提示;同时也可以在此处验证 CSS 类的选择符是否匹配目标 HTML 元素以及 JavaScript 控制台(Console Tab)有否报错信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值