Bootstrap基础教程最新章节_赵丙秀著

1.5 简单模板

在使用 Bootstrap时，需要在页面中引用 bootstrap.css样式。Bootstrap的所有 JavaScript插件都依赖 jQuery，因此，jQuery 必须在 Bootstrap 之前引入，jquery.js 必须在 bootstrap.js文件之前引入。使用了Bootstrap的基本的HTML模板如下所示。

<!doctype html>
<html lang=＂zh-CN＂>
  <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.0/dist/css/bootstrap.min.css＂ integrity=＂sha384-B0vP5xmATw1+K9KRQjQERJvTum QW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l＂ 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.0/dist/js/bootstrap.bundle.min.js＂ integrity=＂sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQM xRonb/M3b9EmhCNNNrV＂ 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+IbbVYU ew+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.0/dist/js/bootstrap.min.js＂ integrity=＂sha384-gRC4eoaRyQ8xv2X6Mnf+eOIrtON3wId3dAkwO0HQX 26OrFBoLpjX/XWOJacSiZhL＂ crossorigin=＂anonymous＂></script>
    -->
  </body>
</html>

在以上代码中，语句<meta name=＂viewport＂ content=＂width=device-width,initial-scale=1, shrink-to-fit=no＂>，可以实现对不同手机屏幕分辨率的支持。

我们同时可以看到，以上语句中包含了 bootstrap.min.css 文件，用于让一个常规的 HTML页面变为使用了Bootstrap框架的页面。

如果用户需要使用 Bootstrap 框架中的 JS 插件，则需要包含 jquery.js 或 jquery.min.js 文件，以及bootstrap.js或者bootstrap.min.js文件。需要注意的是，因为Bootstrap是基于jQuery的，一定要在bootstrap.js或者bootstrap.min.js文件之前包含jquery.js或jquery.min.js文件，否则JS插件将没有效果。

在表1-2中，我们看到，bootstrap.bundle.js比bootstrap.js文件多包含了Popper。这是因为，在使用弹出框等组件时，需要包含 Popper。在上面的基础模板中，对于 JS 文件有2个选项，可以在包含 jquery.min.js 后，再包含 bootstrap.bundle.min.js，或者包含 popper.min.js和bootstrap.min.js。

以上模板使用了 jsdelivr提供的免费 CDN服务，所引用的 CSS文件和 JS文件都来源于jsdeliver。