Bootstrap — это мощный, многофункциональный интерфейсный инструментарий. Создавайте что угодно — от прототипа до продакшена — за считанные минуты.
На этой странице На этой странице
Быстрый старт
Начните с включения готовых CSS и JavaScript Bootstrap через CDN без каких-либо шагов по сборке. Посмотрите это на практике с помощью этой демонстрации Bootstrap CodePen.
-
Создайте новый файл index.html в корне вашего проекта. Включите также тег для правильного отзывчивого поведения на мобильных устройствах.
html lang=»ru»> head> meta charset=»utf-8″> meta name=»viewport» content=»width=device-width, initial-scale=1″> title>Демо Bootstraptitle> head> body> h1>Привет мир!h1> body> html>
Вы также можете включить Popper и наш JS отдельно. Если вы не планируете использовать раскрывающиеся списки, всплывающие окна или всплывающие подсказки, сэкономьте несколько килобайт, не включая Popper.
Что такое Bootstrap (Бутстрап)? Все ЗА и ПРОТИВ
CDN ссылки
В качестве справки, вот наши основные ссылки CDN.
Вы также можете использовать CDN для получения любой из наших дополнительных сборок, перечисленных на странице Содержание.
Следующие шаги
- Узнайте больше о некоторых важных глобальных настройках среды, которые использует Bootstrap.
- Прочитайте о том, что включено в Bootstrap, в нашем разделе содержания и списке компонентов, для которых требуется JavaScript ниже.
- Нужно немного больше энергии? Рассмотрите возможность сборки с помощью Bootstrap, включив исходные файлы с помощью диспетчера пакетов.
- Хотите использовать Bootstrap в качестве модуля с ? Пожалуйста, обратитесь к нашему разделу использование Bootstrap как модуля.
JS компоненты
Любопытно, какие компоненты явно требуют нашего JavaScript и Popper? Щелкните ссылку «Показать компоненты» ниже. Если вы совсем не уверены в общей структуре страницы, продолжайте читать пример шаблона страницы.
- Уведомления (Alerts) для отклонений
- Кнопки (Buttons) для переключения состояний и функциональности флажка/радио
- Карусель (Carousel) для всех режимов слайдов, элементов управления и индикаторов
- Коллапс (Collapse) для переключения видимости содержимого
- Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper)
- Модальные окна (Modals) для отображения, позиционирования и поведения прокрутки
- Панель навигации (Navbar) для расширения наших плагинов Collapse и Offcanvas для реализации адаптивного поведения
- Навигация (Navs) с плагином Tab для переключения панелей содержимого
- Offcanvases для отображения, позиционирования и поведения прокрутки
- Отслеживание прокрутки (Scrollspy) для поведения прокрутки и обновлений навигации
- Тосты (Toasts) для отображения и отклонения
- Всплывающие подсказки (Tooltips) и Всплывающие окна (Popovers) для отображения и позиционирования (также требуется Popper)
Важные глобальные переменные
Bootstrap использует несколько важных глобальных стилей и настроек, почти исключительно направленных на нормализацию кросс-браузерных стилей. Давайте погрузимся.
Что такое Bootstrap 4, для чего он нужен?
Тип текущего документа
Bootstrap требует использования типа документа HTML5. Без него вы увидите причудливый и незавершенный стиль.
html lang=»ru»> . html>
Мета-теги для адаптивной вёрстки
Bootstrap разработан сначала для мобильных устройств, стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости, используя медиа-запросы CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра в свой .
meta name=»viewport» content=»width=device-width, initial-scale=1″>
Вы можете увидеть пример этого в действии в быстром старте.
Размеры ширины и высоты элемента (Box-sizing)
Для более простого определения размера в CSS мы переключаем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что padding не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine.
В редких случаях вам нужно переопределить его, используйте что-то вроде следующего:
.selector-for-some-widget box-sizing: content-box; >
В приведенном выше фрагменте вложенные элементы, включая сгенерированный контент с помощью ::before и ::after , будут наследовать указанный box-sizing для этого .selector-for-some-widget .
Reboot (библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшения кросс-браузерного рендеринга мы используем Reboot для исправления несоответствий между браузерами и устройствами, обеспечивая при этом несколько более самостоятельный сброс общих элементов HTML.
Сообщество
Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
- Прочтите и подпишитесь на Официальный блог Bootstrap.
- Спрашивайте и изучайте наши обсуждения на GitHub.
- Общайтесь с другими загрузчиками в IRC. На сервере irc.libera.chat , в канале #bootstrap .
- Справку по реализации можно найти в Stack Overflow (с тегом bootstrap-5 ).
- Разработчики должны использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальная обнаруживаемости.
Источник: bootstrap-5.ru
Вступление
Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных, ориентированных на мобильные устройства сайтов, с jsDelivr и начальной страницей шаблона.
На этой странице
Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатный CDN с открытым исходным кодом. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.
Стили
Скопируйте и вставьте таблицу стилей в Ваш перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.
Скрипты
Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих в конце Ваших страниц, прямо перед закрывающим тегом , чтобы включить их.
Связка
Включите каждый плагин Bootstrap JavaScript и зависимости в один из двух наших пакетов. Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper. Для получения дополнительной информации о том, что входит в Bootstrap, см. наш раздел содержимое.
Раздельно
Если Вы решите использовать отдельное решение для сценариев, сначала должен быть Popper.js (если Вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.
Модули
Компоненты
Интересно, какие компоненты явно требуют нашего JavaScript и Popper? Кликните на ссылку “Показать компоненты” ниже. Если Вы совсем не уверены в общей структуре страницы, продолжайте читать, чтобы найти образец шаблона страницы.
- Alerts (Уведомления) для отклонения
- Buttons (Кнопки) для переключения состояний и функционала флажка/радио
- Carousel (Карусель) для любого поведения слайдов, элементов управления и индикаторов
- Collapse (Сворачиваемое) для переключения видимости содержимого
- Dropdowns (Выпадающие списки) для отображения и позиционирования (также требуется Popper)
- Modals (Модальные окна) для отображения, позиционирования и прокрутки
- Navbar (Панель навигации) для расширения нашего плагина Сворачиваемое для реализации адаптивного поведения
- Offcanvases (Внехолста) для отображения, позиционирования и поведения прокрутки
- Toasts (Тосты) для показа и отклонения
- Tooltips (Всплывающие подсказки) и popovers (всплывающие окна) для отображения и позиционирования (также требуется Popper)
- Scrollspy (Отслеживание прокрутки) для поведения прокрутки и обновлений навигации
Стартовый шаблон
Убедитесь, что Ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования. Сложите все вместе, и Ваши страницы должны выглядеть так:
Глобально важно
Bootstrap использует несколько важных глобальных стилей и настроек, о которых Вам нужно знать при его использовании. Все они почти исключительно направлены на нормализацию кроссбраузерных стилей. Давайте погрузимся.
Тип текущего документа
Bootstrap требует использования doctype HTML5. Без него Вы увидите несколько забавных неполных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.
html lang=»ru»> . html>
Адаптивный метатег
Bootstrap разработан mobile first (сначала мобильный), стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра (viewport) к Вашему .
meta name=»viewport» content=»width=device-width, initial-scale=1″>
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Свойство Box-sizing
Для более простого изменения размеров в CSS мы переключаем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что padding не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine.
В редких случаях Вам нужно переопределить его, используйте что-то вроде следующего:
.selector-for-some-widget box-sizing: content-box; >
В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью ::before и ::after будут наследовать указанный box-sizing для этого .selector-for-some-widget .
Перезагрузка
Для улучшения кроссбраузерности рендеринга мы используем Reboot, чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс общих элементов HTML.
Сообщество
Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
- Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
- Код под лицензией MIT, документация CC BY 3.0.
- Текущая версия v5.1.3.
Источник: getbootstrap.ru
Введение
Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и шаблонами страниц.
На этой странице
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.
CSS
Скопируйте и вставьте часть кода в свой перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
JS
Многие из наших компонентов требуют использовать для работы JavaScript. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих тегов в конце страницы, прямо перед закрывающим тегом , чтобы включить их.
Пакетное подключение
Раздельное подключение
Если вы решите использовать отдельные скрипты, сначала должен быть подключен Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.
Модули
Компоненты
Любопытно, какие компоненты явно требуют наши JavaScript и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.
- Уведомления отмены
- Кнопки изменения состояний и чекбоксов/»радио»
- Карусель для поведения «слайд», элементы контроля и индикаторы
- Коллапс для изменения видимости содержимого
- Выпадающие элементы для отображения и расположения (также требует Popper)
- Модальные окна для отображения, расположения и создания поведения прокрутки
- Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
- Выплывающие подсказки и окна для отображения и расположения (также требует Popper)
- Отслеживание прокрутки и обновления навигации
Стартовый шаблон
Убедитесь, что ваши страницы сверстаны в соответствии с последними стандартами дизайна и разработки. Это означает использование HTML5 и включение метатега области просмотра для правильного «отзывчивого» поведения страниц. Вот как должены выглядеть ваши страницы:
Это все, что вам нужно из общих требований к странице. Посетите раздел Система сеток или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
Тип текущего документа
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 или аналогичные механизмы доставки для максимальной узнаваемости.
Источник: bootstrap-4.ru