当前位置： 首页 > news >正文

【Bootstrap V4系列】学习入门教程之 加载必要文件和入门模板

news 2025/5/1 7:29:39

Bootstrap V4 学习入门之加载必要文件和入门案例

  • 快速开始
  • 一、CSS 文件
  • 二、JS 文件
    • 1.集成包
    • 2.分开加载
  • 入门模板
  • 总结
    • 重要的全局设置
    • HTML5 文档类型（doctype）
    • 响应式布局相关的标签
  • 其他参考

快速开始

如何让项目快速用上 Bootstrap？ 使用 jsDelivr，这是一个免费且开源的 CDN，在你的页面上添加几个文件链接就能开始你的 Bootstrap 之旅啦。

一、CSS 文件

复制以下 标签并粘贴到 标签内，注意，务必放到其它所有 CSS 样式前面。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

二、JS 文件

Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说，这些组件依赖 jQuery、Popper 以及我们自己开发的 JavaScript 插件。
复制下面的 <script> 标签 粘贴到页面底部，并且是在 标签之前，就能起作用了。注意，顺序很重要，不能错，首先是 jQuery，然后是 Popper，最后是我们自己的 JavaScript 插件。

1.集成包

我们提供的两个集成包都包含了 Bootstrap 的每一个 JavaScript 插件。即 bootstrap.bundle.js 和 bootstrap.bundle.min.js，此外，还包含了 Popper，用于支持工具提示（tooltip）和弹出框（popover）功能，但是不包含 jQuery。添加到页面中时，按照先 jQuery 后 Bootstrap 的 JavaScript 集成包的顺序依次添加。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

2.分开加载

如果你决定分开加载各个文件，那么务必按此顺序，首先是 jQuery，其次是 Popper（如果你使用工具提示和弹出框的话），最后是我们提供的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>

入门模板

请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：
代码如下（示例）：

<!DOCTYPE html>
<html lang="en"><head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><title>Hello, world!</title></head><body><h1>Hello, world!</h1><!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ --><!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） --><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script><!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 --><!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>--></body>
</html>

页面的效果展示：

在这里插入图片描述

总结

以上就是对于一个页面的大致要求。另外，还有以下的几个重要的全局设置，是你在开发页面前必须了解的。

重要的全局设置

Bootstrap 依赖一些重要的全局样式和设置，专门针对的是跨浏览器的样式 统一化（normalization），需要你在使用 Bootstrap 之前重点了解。

HTML5 文档类型（doctype）

Bootstrap 要求文档类型（doctype）是 HTML5。如果没有这一设置，你就会看到一些古怪的、不完整的样式，因此，正确设置文档类型（doctype）就能轻松避免这些困扰。

<!doctype html>
<html lang="zh-CN">...
</html>

响应式布局相关的标签

Bootstrap 采用的是 移动设备优先（mobile first） 的开发策略，因此，首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放，请务必在 标签中 添加让 viewport（视口）支持响应式布局的 标签。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

你可以在 入门模板 中查看此示例的实际应用。

其他参考

国内推荐使用 Staticfile CDN 上的库：

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。

或者引入集成包文件：

<script src="https://cdn.staticfile.net/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
http://www.xdnf.cn/news/233767.html

相关文章：

  • javascript 深拷贝和浅拷贝的区别及具体实现方案
  • 【每日八股】复习 Redis Day4：线程模型
  • NLP 分词技术学习
  • 【Dify系列教程重置精品版】第四章：实现Dify的 hello world
  • ISO 26262认证步骤
  • 【Java面试笔记：进阶】30.Java程序运行在Docker等容器环境有哪些新问题？
  • 楼宇智能化三、五章【期末复习】
  • 芯知识｜小体积语音芯片方案WTV/WT2003H声音播放ic应用解析
  • 楼宇智能化四章【期末复习】
  • (eNSP)Smart Link配置实验
  • MicroPython for esp32s3开发HX711称重模块指南
  • rk3568 A/B系统 OAT升级 实践
  • 全面了解CSS语法 ! ! !
  • 聊一聊接口自动化测试断言处理策略
  • 用户意图驱动：GEO优化策略之内容精准匹配
  • PID中低通滤波算法的详细讲解
  • 消防岗位技能竞赛流程方案策划
  • verilog_testbench技巧
  • 逻辑回归之参数选择：从理论到实践
  • [FPGA VIDEO IP] VCU
  • Allegro23.1新功能之新型via structure创建方法操作指导
  • 20250430在ubuntu14.04.6系统上完成编译NanoPi NEO开发板的FriendlyCore系统【严重不推荐，属于没苦硬吃】
  • 两向量平行公式、向量与平面平行公式、两平面平行公式；两向量垂直公式、向量与平面垂直公式、两平面垂直公式
  • 2025年数字创意设计与图像处理国际会议 (DCDIP 2025)
  • 一种导弹追踪算法的MATLAB仿真实现
  • HTML5 新增的主要标签整理
  • 10. 你需了解的原生测试框架Unittest断言的使用
  • 开源项目[Heygem]可商用的本地运行AI数字人！支持离线运行、本地API接口调用（喂饭级安装教程）
  • ‌连续流型液氮恒温器核心特点解析
  • 望获实时Linux系统荣获人形机器人技术突破奖