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

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

news 来源：原创 2025/5/1 5:25:59

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>

相关文章：

  • IDEA git配置[通俗易懂]
  • 网络原理 - 12（HTTP/HTTPS - 3 - 响应）
  • Spring Boot 中 `@EnableConfigurationProperties` 注解
  • 【c++】【STL】list详解
  • python-docx清空段落样式的方法有哪些
  • Java学习手册：Spring 中常用的注解
  • 全面解析SimHash算法：原理、对比与Spring Boot实践指南
  • 决策树在电信客户流失分析中的实战应用
  • 基于C++的IOT网关和平台5：github项目ctGateway开发指南
  • 「动态规划」线性DP：最长上升子序列（LIS）|编辑距离 / LeetCode 300|72（C++）
  • 景联文科技牵头起草的《信息技术 可扩展的生物特征识别数据交换格式 第4部分：指纹图像数据》国家标准正式发布
  • LeetCode路径总和系列问题解析：I、II、III的解决方案与优化
  • LeetCode392_判断子序列
  • 2025,运维人，如何构建智能运维的知识图谱？！
  • ros2_topic_hz_命令实现_实时统计频率不准问题
  • 宇树科技开启“人形机器人格斗盛宴”
  • 深入探讨Facebook隐私政策的演变
  • idea写spark程序
  • ASP.NET MVC后端控制器用模型 接收前端ajax数据为空
  • 基于C++的IOT网关和平台2：github项目ctGateway技术说明书
  • 工业富联一季度净利增长25%，云计算业务营收增长超50%
  • 人民日报：在大有可为的时代大有作为
  • 美情报机构攻击中国大型商用密码产品提供商，调查报告公布
  • 银川市市长信箱被指已读乱回，官方回应
  • 三大猪企去年净利润同比均较大幅度增长，资产负债率齐降
  • 五粮液一季度净利增长5.8%，今年营收与宏观经济指标保持一致