Как локально подключить bootstrap 5
Перейти к содержимому

Как локально подключить bootstrap 5

  • автор:

Настройка

Узнайте, как создавать темы, настраивать и расширять Bootstrap с помощью Sass, множества глобальных опций, обширной цветовой системы и многого другого.

Обзор

Есть несколько способов настроить Bootstrap. Ваш лучший путь может зависеть от Вашего проекта, сложности Ваших инструментов сборки, версии Bootstrap, которую Вы используете, поддержки браузера и многого другого.

Два наших предпочтительных метода:

  1. Использование Bootstrap через менеджер пакетов, чтобы Вы могли использовать и расширять наши исходные файлы.
  2. Использование скомпилированных файлов дистрибутива Bootstrap или jsDelivr, чтобы Вы могли добавлять или переопределять стили Bootstrap.

Хотя мы не можем здесь подробно описывать, как использовать каждый менеджер пакетов, мы можем дать некоторые рекомендации по использованию Bootstrap с Вашим собственным компилятором Sass.

Для тех, кто хочет использовать файлы распространения, просмотрите страницу начала работы, чтобы узнать, как включить эти файлы и пример HTML-страницы. Оттуда обратитесь к документации по макету, компонентам и поведению, которые Вы хотите использовать.

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

CSP и встроенные SVG

Некоторые компоненты Bootstrap включают встроенные SVG-файлы в наш CSS, чтобы согласованно и легко стилизовать компоненты в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP , мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через background-image ), поэтому Вы можете более тщательно изучить свои варианты.

  • Accordion
  • Close button (используется в уведомлениях и модальных окнах)
  • Form checkboxes and radio buttons
  • Form switches
  • Form validation icons
  • Select menus
  • Carousel controls
  • Navbar toggle buttons

На основе обсуждения сообщества, некоторые варианты решения этой проблемы в вашей собственной кодовой базе включают замену URL-адресов локально размещенными ресурсами, удаление изображений и использование встроенных изображений (невозможно во всех компонентах) и изменение вашего CSP. Наша рекомендация — внимательно изучить свои собственные политики безопасности и при необходимости выбрать лучший путь для дальнейшего развития.

  • Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия v5.0.2.

Участие

Помогите разработать Bootstrap с помощью наших сценариев сборки документации и тестов.

На этой странице

Настройка инструмента

Bootstrap использует сценарии npm для создания документации и компиляции исходных файлов. Наш package.json содержит эти сценарии для компиляции кода, запуска тестов и многого другого. Они не предназначены для использования за пределами нашего репозитория и документации.

Чтобы использовать нашу систему сборки и запускать нашу документацию локально, Вам понадобится копия исходных файлов Bootstrap и Node. Выполните следующие шаги, и Вы должны быть готовы к игре:

  1. Загрузите и установите Node.js, который мы используем для управления нашими зависимостями.
  2. Либо загрузите исходные коды Bootstrap, либо сделайте “форк” репозитория Bootstrap.
  3. Перейдите в корневой каталог /bootstrap и запустите npm install , чтобы установить наши локальные зависимости, перечисленные в package.json.

По завершении Вы сможете запускать различные команды из командной строки.

Использование скриптов npm

Наш package.json включает множество задач для разработки проекта. Запустите npm run , чтобы увидеть все сценарии npm в Вашем терминале. Основные задачи включают:

Задача Описание
npm start Компилирует CSS и JavaScript, создает документацию и запускает локальный сервер.
npm run dist Создает каталог dist/ с скомпилированными файлами. Требуется Sass, Autoprefixer, и terser.
npm test Выполняет тесты локально после запуска npm run dist
npm run docs-serve Создает и запускает документацию локально.

Начните работу с Bootstrap через npm с помощью нашего начального проекта! Перейдите в репозиторий шаблонов twbs/bootstrap-npm-starter, чтобы узнать, как создать и настроить Bootstrap в своем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и иконки Bootstrap.

Sass

Bootstrap использует Dart Sass для компиляции наших исходных файлов Sass в файлы CSS (включенные в наш процесс сборки), и мы рекомендуем Вам сделать то же самое, если Вы компилируете Sass с использованием собственного конвейера активов. Ранее мы использовали Node Sass для Bootstrap v4, но LibSass и пакеты, созданные на его основе, включая Node Sass, теперь устарели.

Dart Sass использует точность округления 10 и из соображений эффективности не позволяет изменять это значение. Мы не снижаем эту точность во время дальнейшей обработки нашего сгенерированного CSS, например, во время минификации, но если Вы решите это сделать, мы рекомендуем поддерживать точность не менее 6, чтобы предотвратить проблемы с округлением в браузере.

Автопрефиксер

Bootstrap использует Autoprefixer (включенный в наш процесс сборки) для автоматического добавления префиксов поставщиков к некоторым свойствам CSS во время сборки. Это экономит время и код, позволяя писать ключевые части нашего CSS за один раз, устраняя при этом необходимость в миксинах от поставщиков, подобных тем, что есть в v3.

Мы храним список браузеров, поддерживаемых с помощью Autoprefixer, в отдельном файле в нашем репозитории GitHub. См. .browserslistrc для получения дополнительной информации.

RTLCSS

Bootstrap использует RTLCSS для обработки скомпилированного CSS и преобразования их в RTL — в основном заменяя свойства, учитывающие горизонтальное направление (например, padding-left ), их противоположностью. Это позволяет нам писать наш CSS только один раз и вносить незначительные изменения с помощью RTLCSS директив control и value.

Локальная документация

Для локального запуска нашей документации требуется использование Hugo, который устанавливается через пакет npm hugo-bin. Hugo — это невероятно быстрый и достаточно расширяемый генератор статических сайтов, который предоставляет нам: базовые включения, файлы на основе Markdown, шаблоны и многое другое. Вот как это начать:

  1. Выполните настройку инструментов выше, чтобы установить все зависимости.
  2. Из корневого каталога /bootstrap , запустите npm run docs-serve в командной строке.
  3. Откройте http://localhost:9001/ в вашем браузере и вуаля.

Узнайте больше об использовании Hugo, прочитав его документацию.

Исправление проблем

Если у Вас возникнут проблемы с установкой зависимостей, удалите все предыдущие версии зависимостей (глобальные и локальные). Затем перезапустите npm install .

Введение

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и шаблонами страниц.

На этой странице

Быстрый старт

Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.

CSS

Скопируйте и вставьте часть кода в свой перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 

JS

Многие из наших компонентов требуют использовать для работы JavaScript. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих тегов в конце страницы, прямо перед закрывающим тегом , чтобы включить их.

Пакетное подключение

Включите каждый плагин Bootstrap JavaScript в один из двух наших пакетов. Оба файла, и bootstrap.bundle.js и bootstrap.bundle.min.js включают в себя Popper для наших всплывающих подсказок и всплывающих окон. Для получения дополнительной информации о том, что входит в Bootstrap, смотрите раздел содержание.

script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">script> 
Раздельное подключение

Если вы решите использовать отдельные скрипты, сначала должен быть подключен Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.

script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">script> script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">script> 
Модули
Компоненты

Любопытно, какие компоненты явно требуют наши JavaScript и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

  • Уведомления отмены
  • Кнопки изменения состояний и чекбоксов/»радио»
  • Карусель для поведения «слайд», элементы контроля и индикаторы
  • Коллапс для изменения видимости содержимого
  • Выпадающие элементы для отображения и расположения (также требует Popper)
  • Модальные окна для отображения, расположения и создания поведения прокрутки
  • Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
  • Выплывающие подсказки и окна для отображения и расположения (также требует Popper)
  • Отслеживание прокрутки и обновления навигации

Стартовый шаблон

Убедитесь, что ваши страницы сверстаны в соответствии с последними стандартами дизайна и разработки. Это означает использование HTML5 и включение метатега области просмотра для правильного «отзывчивого» поведения страниц. Вот как должены выглядеть ваши страницы:

 html lang="ru"> head> meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> title>Привет мир!title> head> body> h1>Привет мир!h1>  script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">script>      --> body> html> 

Это все, что вам нужно из общих требований к странице. Посетите раздел Система сеток или наши официальные примеры для создания контента и компонентов вашего сайта.

Важные глобальные атрибуты

Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

Тип текущего документа

Bootstrap требует использования doctype HTML5. Без него у вас возникнут некоторые проблемы со стилями, но его включение не должно вызывать каких-либо серьезных сбоев.

 html lang="ru"> . html> 

Мета-теги для адаптивной вёрстки

Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в :

meta name="viewport" content="width=device-width, initial-scale=1">

Вы можете увидеть пример этого в действии в Начальном шаблоне страницы.

Размер ширины и высоты элемента (Box-sizing)

Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.

В том редком случае, когда вам понадобится переопределить его, делайте так:

.selector-for-some-widget  box-sizing: content-box; >

В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью ::before и ::after , будут наследовать указанный размер блока box-sizing для этого .selector-for-some-widget .

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы используем «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Сообщество

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

  • Читайте и подписывайтесь на Официальный блог Bootstrap.
  • Спрашивайте и изучайте наши обсуждения на GitHub.
  • Общайтесь с другими Bootstrappers в IRC. На сервере irc.freenode.net , в канале ##bootstrap .
  • Справку по реализации можно найти на сайте Stack Overflow (с тегом bootstrap-5 ).
  • Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или расширяют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной узнаваемости.

Вы также можете присоединиться к @getbootstrap on Twitter, чтобы следить за последними слухами и потрясающими музыкальными клипами.

Как локально подключить bootstrap 5

В этом уроке мы с вами подключим Bootstrap.

  1. Сначала создадим папку с проектом и назовём её test ;
  2. Теперь создадим папку css и файл index.html .

Есть два способа подключения: через CDN и локальный, я расскажу про оба способа, но использовать будем только второй.

Подключение через CDN:

1. В теге link пишем:

2. Подключаем JavaScript перед тегом

Если вы хотите использовать весь потенциал библиотеки, то перед тегом необходимо дописать еще пару строк:

Теперь перейдем к локальному подключению:

  1. Скачиваем исходники с официального сайта Bootstrap;
  2. В исходниках заходим в dist/css ;
  3. Извлекаем два файла: bootstrap-grid.min.css и bootstrap-reboot.min.css ;
  4. Перемещаем в папку css , которую вы создали ранее.

Файл bootstrap-grid.min.css отвечает за сетку, а файл bootstrap-reboot.min.css работает как normalize.css .

Если вы не знаете, что такое normalize.css , не отчаивайтесь, он просто обеспечивает кроссбраузерную согласованность. Большего вам знать и не нужно.

Перейдем к подключению сетки. В теге , подключайте bootstrap-reboot.min.css и bootstrap-grid.min.css .

Должно получиться как на рисунке 1.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *