Скачать Bootstrap5 с помощью npm

Question

Посмотрел пару видео о том, как установить Bootstrap5. Рассмотрено было 2 способа:

с помощью CDN
с помощью npm

В принципе эти же способы упоминаются на официальном сайте.

Способ 1: подключаем с помощью CDN:

Создаю файл index.html и пишу там такой код:

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

    <!-- 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 1</button>
    </div>

    <!--
        Дополнительный JavaScript: Bootstrap в связке с Popper
    -->
    <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>

Тут сначала подключают CSS-стили с помощью тега link. И в конце, перед закрытием тега body подключают некий JS-файл. А что, кстати, такое этот самый Popper? Если я правильно понял, это некая js-библиотека, которую используют в работе некоторые компоненты Bootstrap.

Далее открываю этот файл index.html в браузере и вижу, что к кнопке Button 1 применились стили, значит Bootstrap подключился.

Способ 2: используем npm

Сначала скачиваю внутрь проекта Bootstrap командой npm install [email protected]. В результате появилась папка node_modules/bootstrap которая содержит все файлы Bootstrap. И далее создают файл index.html:

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

    <!-- Bootstrap CSS -->
    <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

</head>
<body>

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

</body>
</html>

Открываю в браузере и вижу, что стиль к кнопке применился. Значит, получается Bootstrap в этом способе тоже успешно подключён.

Но тут возникает сразу вопрос: а почему в 1 способе (используя CDN) нам необходимо было помимо CSS добавить ещё JS-файл https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js (в конце body) ,а во втором способе его уже не подключают. Почему так?

Тем более, я поискал в папке node_modules/bootstrap и нашёл похожий файл: node_modules/bootstrap/dist/js/bootstrap.bundle.js И я бы написал файл inde.html вот так:

<!doctype html>
<html lang="ru" xmlns="http://www.w3.org/1999/html">
<head>
    <title>Заголовок</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

</head>
<body>

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

    <!-- ПОЧЕМУ ЭТОТ ФАЙЛ НЕ НУЖЕН ????  -->
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>


</body>
</html>

т.е. аналогично 1-му способу подключил бы и CSS-файл и JS-файл.

Объясните пожалуйста, почему JS-файл нужен только в случае использования подключения через CDN ?

БЛОГ НА HUSL

Скачать Bootstrap5 с помощью npm

Ответы (0 шт):