Привет, уважаемый веб-разработчик! Итак, вы хотите знать, как включить автономный файл Bootstrap в свой HTML? Не волнуйтесь, я вас прикрою! В этой статье я познакомлю вас с пятью различными способами достижения этой цели. Давайте погрузимся!
Метод 1: локальный файл начальной загрузки.
Самый простой способ включить Bootstrap в автономном режиме — загрузить файлы начальной загрузки (CSS и JavaScript) с официального сайта ( https://getbootstrap.com ) и сохранить их локально на своем компьютере. каталог проекта. Затем вы можете ссылаться на них в своем HTML следующим образом:
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/bootstrap.min.js"></script>Обязательно замените «path/to/» фактическим путем к файлу в вашем проекте.
Метод 2: загруженный Bootstrap CDN
Если вы предпочитаете использовать сеть доставки контента (CDN) для Bootstrap, но при этом хотите работать в автономном режиме, вы можете загрузить файлы Bootstrap у поставщика CDN и сохранить их локально. Например, вы можете посетить веб-сайт BootstrapCDN ( https://www.bootstrapcdn.com ) и загрузить файлы CSS и JavaScript. Затем включите их в свой HTML, как в методе 1.
Метод 3: Менеджеры пакетов (npm, Yarn)
Если вы используете для своего проекта менеджер пакетов, такой как npm или Yarn, вы можете установить Bootstrap в качестве зависимости и включить его в свой HTML, используя локальную установку пакета.. Вот как это можно сделать:
-
Установите Bootstrap из командной строки:
npm install bootstrap -
В вашем HTML-файле укажите установленные файлы Bootstrap:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Метод 4: загруженный стартовый шаблон Bootstrap
Bootstrap предоставляет стартовый шаблон, который включает необходимые файлы CSS и JavaScript. Вы можете загрузить его с веб-сайта Bootstrap ( https://getbootstrap.com/docs/5.1/getting-started/download/ ) и использовать в качестве основы для своего проекта. Шаблон уже включает автономные файлы Bootstrap, поэтому вам не нужно загружать их отдельно.
Метод 5: автономный конструктор Bootstrap
Если вам нужен больший контроль над тем, какие компоненты и стили Bootstrap вы включаете в свой проект, вы можете использовать автономный инструмент построения Bootstrap. Эти инструменты позволяют вам настроить и загрузить адаптированную версию Bootstrap, содержащую только те компоненты, которые вам нужны. После создания настроенных файлов Bootstrap воспользуйтесь методом 1 или методом 2, чтобы включить их в свой HTML.
Вот и все! Теперь у вас есть пять различных способов добавить автономный Bootstrap в ваш HTML-файл. Выберите тот, который лучше всего соответствует вашему рабочему процессу и требованиям проекта. Приятного кодирования!