详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】

简介: 这篇文章详细说明了如何在项目中整合Bootstrap V3版本,包括下载Bootstrap和jQuery、将文件复制到静态资源目录、项目中离线引用这些文件,并提供了完整页面代码示例。

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。

前言

以下这个图说明了、如果你使用的是BootStrap V3 ,那么你在使用BootStrap 的时候,同时需要依赖Jquery。这一篇文章讲解如何在项目中整合V3 版本的BootStrap,下一篇文章讲述如何整合V5 版本的BootStrap。可能比较麻烦一点点的就是、需要下载那些文件、去哪里下载、文件版本兼容性考虑等。下文中我给出了所需要的全部安装包。开箱即用、如果看下方教程不清楚、可在哔哩哔哩上搜热爱技术的小郑、有相关的视频

在这里插入图片描述

安装步骤

1、官网下载Bootstap

地址:https://getbootstrap.com/
这个下载的可能比较慢,可以在我的公众号【热爱技术的小郑】中回复关键字:BootStrap 安装包。就可以直接获取到对应的安装包。
在这里插入图片描述

或者直接在网上下载,选择老版本bootstrap(3.4.1版本)
在这里插入图片描述

2、下载jquery

官网:https://jquery.com/

这个也可能下载失败,我将这个文件同样放到了上文提及的资料文件中。

在这里插入图片描述

Production version - 用于实际的网站中,是已经被精简和压缩过的jQuery文件。
Development version - 用于测试和开发中,是未压缩的jQuery文件,可以方便阅读源码。 使用jQuery

在这里插入图片描述

3、将下载的jquery和bootstrap文件复制到静态资源目录下

静态资源下创建文件夹、存放引入的文件。

在这里插入图片描述

在这里插入图片描述

4、项目中离线引用

在要使用到的页面中引入文件,这里使用相对路径,确保能访问到自己存放的静态资源文件。

<!--离线使用低版本-->
<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
<script src="/plugins/bootstrap/jquery/jquery-3.7.1.js" ></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

在线引用

在线引用、jquery可能访问失败。不太稳定。没有网络的情况下是不能使用的。

<!--在线使用低版本  jquery总是访问失败,建议使用离线-->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" >-->
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css" >-->

5、引入组件

找到对应版本文档下的组件(如果V3 版本的BootStrap 引用了V5版本的组件、可能会出现错误)、直接复制粘贴要用到的组件到对应页面中即可。

在这里插入图片描述

6、完整页面代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--离线使用高版本-->
<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" ></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

<body>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

</body>
</html>

7、效果

在这里插入图片描述

相关文章
|
5月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
86 0
|
11月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
58 0
|
SpringCloudAlibaba 安全 Java
SpringCloud版本升级后bootstrap.yml配置不生效
SpringCloud版本升级后bootstrap.yml配置不生效
1860 1
|
9天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
14 2
|
2月前
|
JavaScript 前端开发
Bootstrap‘s JavaScript requires jQuery
文章讨论了网页开发中因jQuery库未正确引入或顺序不当导致的三个常见错误,并指出解决这些问题需要确保jQuery在其他依赖它的脚本之前加载。
|
4月前
|
前端开发 JavaScript 开发者
Bootstrap 3.x 版本基础引入指南
Bootstrap 3.x 版本基础引入指南
|
11月前
|
JavaScript 前端开发
踩坑-Uncaught Error: Bootstrap's JavaScript requires jQuery
踩坑-Uncaught Error: Bootstrap's JavaScript requires jQuery
111 0
|
11月前
|
前端开发 JavaScript Java
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
47 0
|
JavaScript 前端开发 测试技术
Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
227 0
|
编解码 移动开发 前端开发
【JQuery】扩展BootStrap入门——知识点讲解(一)
本期主要介绍扩展BootStrap入门——知识点讲解(一)
136 0
【JQuery】扩展BootStrap入门——知识点讲解(一)