主页 / 问题 / 1589614
Accepted
alex_t
Asked:2024-08-06 00:18:03 +0000 UTC2024-08-06 00:18:03 +0000 UTC

连接引导程序 5

  • 772

我正在尝试连接 Bootstrap 5。我在互联网上发现了两种方法：

方法一：

<!doctype html>
<html lang="ru">
<head>
    <title>Заголовок</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap: подключение с помощью CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>

</head>
<body>

<div class="container">
    <button class="btn btn-primary">Button 1</button>
</div>

</body>
</html>

方法2：

<!doctype html>
<html lang="ru">
<head>
    <title>Заголовок</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">


</head>
<body>

<div class="container">
    <button class="btn btn-primary">Button 2</button>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

</body>
</html>

结果，从按钮的外观来看，在这两种情况下 Bootstrap 都已连接：

在此输入图像描述

我有一个问题：这些方法有什么区别？在实践中我应该使用哪一种？

当然，从视觉上看，第一个选项看起来更好：两个链接都紧凑地写在 head 标签中的一个位置。而在第二个版本中，JS的链接被拖到了body标签中，拖到了最底部（看起来不太漂亮，但可能有一些意义）。

一般来说，为什么在这两种情况下都连接一些 JS？ Bootstrap是一个纯粹的布局工具。

bootstrap

1 个回答

  1. Best Answer

    我不知道这个问题有多重要，但令我惊讶的是没有人对此做出回应。

    这些方法有什么区别？在实践中哪一种更适合使用？

    客户端从服务器接收到的作为响应的 HTML 页面由浏览器从上到下顺序解析。因此，以同样的方式绘制。如果一路上有一个带有 JS 代码的标签，那么就会花费额外的时间，并且会减慢页面的加载速度。

    另外，如果这个脚本对页面的内容做了一些事情，那么当您将其插入到文档的开头时，它将立即加载并开始工作，但由于此时不会加载整个页面，因此可能无法获得他需要的某些元素。

    因此，更好的方法是将脚本放在该部分的末尾<body>。英文堆栈上也有类似的问题。

    一般来说，为什么在这两种情况下都连接一些 JS？ Bootstrap是一个纯粹的布局工具。

    不，不仅如此。布局通常是一个相当简单的概念，但 Bootstrap 提供了大量不同的有用的 JS 函数供您使用，并且它本身也使用它。例如，如果不连接脚本，Bootstrap 将无法显示模式窗口或任何弹出列表。

    • 2

相关问题