Театр начинается с вешалки, а использование Bootstrap начинается с подключения к странице. Подключение происходит одним из нескольких доступных способов: от подключения готовых файлов CSS и JS до использования SASS препроцессора с возможностью подключения нужных компонентов.
Подключение с помощью CDN
Перед тем, как изучить подключение через CDN стоит разобраться с тем, что такое CDN.
CDN — сокращение от Content Delivery Network. Чаще всего система CDN представляет собой несколько серверов в разных странах мира. Они хранят в себе файлы, которые можно подключить к проекту. В зависимости от того, где находится пользователь, отдается файл с того сервера, который обеспечит минимальную задержку.
Для подключения Bootstrap с помощью CDN достаточно просто подключить необходимые файлы в HTML. Свежие ссылки для подключения находятся на странице документации Bootstrap. В настоящее время это выглядит следующим образом:
В процессе прохождения курса будет описано, какие именно компоненты требуют наличие JavaScript. Если не использовать такие компоненты, то возможно не подключать скрипты к странице, что положительно скажется на скорости загрузки сайта. Этот критерий очень важен при разработке. На него также ориентируются алгоритмы ранжирования сайта в поисковых системах.
Локальное подключение CSS
Разработчики не всегда хотят доверять внешним серверам, которые они не могут контролировать. Никто не может дать гарантию того, что CDN не подведет в самый нужный момент, когда на сайт пришли инвесторы с миллиардами. Чтобы избежать такой ситуации можно расположить все файлы Bootstrap у себя в рабочей директории и подключать их локально.
Скачать все необходимые файлы можно на официальной странице Bootstrap или через репозиторий GitHub . В случае с репозиторием нас интересует директория dist.
Внутри директории dist находится следующая структура CSS файлов:
В директории css находится больше файлов, чем при подключении Bootstrap через CDN. При таком подходе возможно подключать только необходимые части CSS.
bootstrap-grid.css. В файле находятся все стили, отвечающие за создание сеток. Если от Bootstrap в проекте необходима только сетка, то данного файла достаточно. В этом случае нет необходимости подключать все остальные зависимости, в том числе и JavaScript.
bootstrap-reboot.css. Файл, вопреки своему названию не сбрасывает стандартные стили браузеров, как это делает reset.css, а устанавливает стандартные Bootstrap стили для всех элементов.
bootstrap-utilities.css. Файл содержит все атомарные классы и утилиты Bootstrap. Основные утилиты будут изучены в следующих уроках.
bootstrap.css. Компиляция всех стилей Bootstrap. Если необходимы все стили, то достаточно подключить именно этот файл. Так же файл содержит стили всех компонентов.
Создадим проект, в котором используется только сетка и утилиты бутстрапа:
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов
Наши выпускники работают в компаниях:
Как подключить бутстрап к html файлу
В этом уроке мы с вами подключим Bootstrap.
Сначала создадим папку с проектом и назовём её test ;
Теперь создадим папку css и файл index.html .
Есть два способа подключения: через CDN и локальный, я расскажу про оба способа, но использовать будем только второй.
Подключение через CDN:
1. В теге link пишем:
2. Подключаем JavaScript перед тегом
Если вы хотите использовать весь потенциал библиотеки, то перед тегом необходимо дописать еще пару строк:
Теперь перейдем к локальному подключению:
Скачиваем исходники с официального сайта Bootstrap;
В исходниках заходим в dist/css ;
Извлекаем два файла: bootstrap-grid.min.css и bootstrap-reboot.min.css ;
Перемещаем в папку css , которую вы создали ранее.
Файл bootstrap-grid.min.css отвечает за сетку, а файл bootstrap-reboot.min.css работает как normalize.css .
Если вы не знаете, что такое normalize.css , не отчаивайтесь, он просто обеспечивает кроссбраузерную согласованность. Большего вам знать и не нужно.
Перейдем к подключению сетки. В теге , подключайте bootstrap-reboot.min.css и bootstrap-grid.min.css .
Должно получиться как на рисунке 1.
Загрузка
Загрузите Bootstrap, чтобы получить скомпилированный CSS и JavaScript исходный код или включите его с вашими любимыми менеджерами пакетов, такими как npm, Bower, RubyGems и другие.
Компилированные CSS и JS
Загружайте компилированный, готовый к использованию код Bootstrap v4.0.0 (для легкого внедрения в ваш проект), включающие:
Компилированные и «облегченные» бандлы (Смотрите Сравнение файлов CSS)
Компилированные и «облегченные» плагины JS.
Сюда не входит документация, исходники или сторонние JS-«зависимости» Зависимости передаются (внедряются) сервису в момент его создания (jQuery или Popper.js). Зависимости передаются (внедряются) сервису в момент его создания.
Исходные файлы
Компилируйте Bootstrap со своим «файлопроводом», загружая наши исходники Sass, JS и файлы документации. Это потребует некоторого дополнительного инструментария:
Компилятор Sass (поддерживаются: Libsass или Ruby Sass) для компиляции ваших CSS.
Постпроцессоры для создания своих нестандартных свойств CSS. (-webkit-, -moz-, -o-, и т.д.)
Инструменты сборки также могут понадобиться при работе с Bootstrap, но все-таки они не совсем подходят для ваших целей.
Bootstrap CDN
Пользуйтесь кэшированной версией Bootstrap для «облегчения» страницы и ускорения загрузки.
Системы управления пакетами (Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — всё это заменяется парой команд в терминале)
Используйте исходники Bootstrap в любом проекте с помощью популярных систем управления пакетами. С любой системой управления пакетами Bootstrap потребует компилятор Sass (препроцессор) и постпроцессор для правильной установки наших компилированных версий.
npm
Устанавливайте Bootstrap в вашем приложении на движке Node с помощью пакета npm:
npm install bootstrap
require(‘bootstrap’) ) загрузит все плагины JS Bootstrap в объект jQuery. Модуль bootstrap сам не экспортирует ничего. Вы можете вручную загрузить плагины JS Bootstrap, загружая файлы /js/*.js в корневую папку пакета.
пакет.json Bootstrap содержит некоторые дополнительные метаданные со следующими ключами:
sass — путь к главным исходникам Sass Bootstrap
style — путь к полной версии CSS Bootstrap, которая предварительно откомпилирована с помощью установок по умолчанию (без настройки)
RubyGems
Устанавливайте Bootstrap в ваши приложения на Ruby с помощью Bundler (рекомендовано) и системы управления пакетами «RubyGems», просто добавив следующую строку в ваш Gemfile :
gem'bootstrap','~> 4.0.0'
Еще один способ – если вы не используете Bundler, вы можете установить gem-файл такой командой:
gem install bootstrap -v 4.0.0
Composer
Вы также можете устанавливать и управлять Sass и JS в Bootstrap c помощью пакетного менеджера уровня приложений для языка программирования PHP:
composer require twbs/bootstrap:4.0.0
NuGet
Если вы занимаетесь разработкой в .NET, вы также можете устанавливать и управлять базами CSS, Sass и JS в вашем Bootstrap с помощью NuGet:
Install-Package bootstrap
Install-Package bootstrap.sass
Введение
Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и шаблонами страниц.
На этой странице
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.
CSS
Скопируйте и вставьте часть кода в свой перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
Многие из наших компонентов требуют использовать для работы JavaScript. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих тегов в конце страницы, прямо перед закрывающим тегом , чтобы включить их.
Пакетное подключение
Включите каждый плагин Bootstrap JavaScript в один из двух наших пакетов. Оба файла, и bootstrap.bundle.js и bootstrap.bundle.min.js включают в себя Popper для наших всплывающих подсказок и всплывающих окон. Для получения дополнительной информации о том, что входит в Bootstrap, смотрите раздел содержание.
Если вы решите использовать отдельные скрипты, сначала должен быть подключен Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.
Любопытно, какие компоненты явно требуют наши JavaScript и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.
Уведомления отмены
Кнопки изменения состояний и чекбоксов/»радио»
Карусель для поведения «слайд», элементы контроля и индикаторы
Коллапс для изменения видимости содержимого
Выпадающие элементы для отображения и расположения (также требует Popper)
Модальные окна для отображения, расположения и создания поведения прокрутки
Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
Выплывающие подсказки и окна для отображения и расположения (также требует Popper)
Отслеживание прокрутки и обновления навигации
Стартовый шаблон
Убедитесь, что ваши страницы сверстаны в соответствии с последними стандартами дизайна и разработки. Это означает использование HTML5 и включение метатега области просмотра для правильного «отзывчивого» поведения страниц. Вот как должены выглядеть ваши страницы:
Это все, что вам нужно из общих требований к странице. Посетите раздел Система сеток или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
Тип текущего документа
Bootstrap требует использования doctype HTML5. Без него у вас возникнут некоторые проблемы со стилями, но его включение не должно вызывать каких-либо серьезных сбоев.
htmllang="ru"> . html>
Мета-теги для адаптивной вёрстки
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в :
Вы можете увидеть пример этого в действии в Начальном шаблоне страницы.
Размер ширины и высоты элемента (Box-sizing)
Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.
В том редком случае, когда вам понадобится переопределить его, делайте так:
.selector-for-some-widgetbox-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, чтобы следить за последними слухами и потрясающими музыкальными клипами.