Подключить Bootstrap 5

Question

Пытаюсь подключить Bootstrap 5. Наткнулся на просторах интернета на 2 способа:

СПОСОБ 1:

<!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 подключился:

У меня такой вопрос возник: в чём разница в этих способах и какой лучге использовать на практике?

Визуально, конечно, 1-ый вариант выглядит получше: компактно в одном месте в теге head прописали обе ссылки. А во 2-ом варианте ссылку на JS утащили в тег body, причём в самый низ (выглядит не так красиво, но, наверное, в этом есть какой-то смысл).

И вообще, зачем в обоих случаях подключать некий JS ? Бутстрап - это же вроде чисто для вёрстки инструмент.

Answer 1

Не знаю, насколько ещё актуален этот вопрос, но я удивлён, что на него никто не отреагировал.

В чём разница в этих способах и какой лучше использовать на практике?

HTML-страница, которую получает клиент в качестве ответа от сервера, парсится браузером последовательно, сверху-вниз. Соответственно, так же и отрисовывается. Если по пути встречается тег с JS-кодом, то на него тратится дополнительное время, и он может замедлить загрузку страницы.

К тому же, если этот скрипт проделывает что-то с содержимым страницы, то при вставке его в начало документа он сразу же загрузится и начнёт работать, но так как не вся страница к этому моменту будет прогружена, он, соответственно, может не получить доступ к некоторым нужным ему элементам.

Поэтому более хорошим подходом является размещение скрипта в конце раздела <body>. Похожий вопрос есть на англоязычном стеке.

И вообще, зачем в обоих случаях подключать некий JS ? Бутстрап - это же вроде чисто для вёрстки инструмент.

Нет, не только. Вёрстка - это вообще достаточно простое понятие, а Bootstrap же предоставляет огромное количество разных полезных JS-функций, которые вы можете использовать, а также использует он сам. Например, без подключения скрипта Bootstrap не сможет отобразить модальное окно, или какой-нибудь выплывающий список.

БЛОГ НА HUSL

Подключить Bootstrap 5

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