Bootstrap это комплексное front-end решение, включающее CSS, JavaScript, шрифты и т.д. Для того чтобы обеспечить вам самый гибкий контроль над компонентами Bootstrap, это расширение предоставляет несколькоо asset bundles. Вот они:
BootstrapAsset — содержит CSS файлы.
BootstrapPluginAsset — зависит от yii\bootstrap\BootstrapAsset, содержащий javascript файлы.
BootstrapThemeAsset — зависит от yii\bootstrap\BootstrapAsset, содержащий Bootstrap CSS темы по умолчанию.
Конкретные приложения могут потребовать различного использования. Если вам нужны только CSS стили, то yii\bootstrap\BootstrapAsset будет достаточным для вас. Тем не менее, если вы хотите использовать Bootstrap JavaScript, вам необходимо зарегистрировать yii\bootstrap\BootstrapPluginAsset.
Tip: большинство виджетов регистрируются yii\bootstrap\BootstrapPluginAsset автоматически.
Введение
Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных, ориентированных на мобильные устройства сайтов, с BootstrapCDN и начальной страницей шаблона.
Содержание
Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из StackPath. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.
CSS
Скопируйте и вставьте таблицу стилей в перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются наши собственные плагины JavaScript и Popper.js. Поместите следующие в конце страниц, прямо перед закрывающим тегом
, чтобы включить их. Сначала должен быть Popper.js, а затем наши плагины JavaScript.
Интересно, какие компоненты явно требуют нашего JavaScript и Popper.js? Щелкните ссылку «Показать компоненты» ниже. Если вы совсем не уверены в общей структуре страницы, продолжайте читать, чтобы найти образец шаблона страницы.
Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper. Для получения дополнительной информации о том, что включено в Bootstrap, см. Наш раздел содержимого.
Оповещения об увольнении (Alerts)
Кнопки для переключения состояний и функции флажка / радио
Карусель для любого поведения слайдов, элементов управления и индикаторов
Свернуть для переключения видимости содержимого (Collapse)
Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper.js)
Модальные окна для отображения, позиционирования и прокрутки
Navbar для расширения нашего плагина Collapse для реализации адаптивного поведения
Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper.js)
Scrollspy для поведения прокрутки и обновлений навигации
Стартовый шаблон
Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования. Соберите все это вместе, и ваши страницы должны выглядеть так:
Это все, что вам нужно для выполнения общих требований к странице. Посетите документацию или наши официальные примеры, чтобы начать размещать контент и компоненты вашего сайта.
Важные глобалы
Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при его использовании, и все они почти исключительно направлены на нормализацию кросс-браузерных стилей. Давайте погрузимся.
HTML5 doctype
Bootstrap требует использования документа типа HTML5. Без него вы увидите несколько забавных неполных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.
htmllang="ru"> . html>
Адаптивный метатег
Bootstrap разрабатывается в первую очередь для мобильных устройств. Это стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить надлежащий рендеринг и масштабирование касанием для всех устройств, добавьте метатег адаптивного окна просмотра к вашему .
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Box-sizing
Для упрощения настройки размеров в CSS мы переключаем глобальное box-sizing значение с content-box на border-box . Это гарантирует, что padding это не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Карты Google и Система пользовательского поиска Google.
В редких случаях, когда вам нужно переопределить его, используйте что-то вроде следующего:
.selector-for-some-widgetbox-sizing:content-box;>
В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью ::before и ::after будут наследовать указанные box-sizing для этого .selector-for-some-widget .
Reboot (перезагрузка)
Для улучшения кроссбраузерности рендеринга мы используем Reboot чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс до общих HTML элементов.
Сообщество
Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
Следуйте @getbootstrap on Twitter.
Прочтите и подпишитесь на The Official Bootstrap Blog.
Join the official Slack room.
Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
Справку по реализации можно найти на сайте Stack Overflow (с тегами bootstrap-4 ).
Разработчики должны использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаружимости.
Вы также можете подписаться на @getbootstrap в Twitter, чтобы следить за последними сплетнями и классными музыкальными клипами.
Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.
Это самая простая форма Bootstrap: предварительно скомпилированные файлы для быстрого использования практически в любом веб-проекте. Мы предоставляем скомпилированные CSS и JS ( bootstrap.* ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min.* ). source maps ( bootstrap.*.map ) доступны для использования с инструментами разработчика некоторых браузеров. Связанные файлы JS ( bootstrap.bundle.js ) и минифицированные bootstrap.bundle.min.js ) включают Popper.
Файлы CSS
Bootstrap включает несколько вариантов для включения некоторых или всего нашего скомпилированного CSS.
Bootstrap bundle что это
Узнайте, что включено в Bootstrap, включая наши скомпилированные и исходные коды. Помните, что для плагинов JavaScript Bootstrap’у требуется jQuery.
Это базовая форма Bootstrap: перекомпилированные файлы для быстрого подключения в почти любой веб-проект. Доступны: компилированные файлы CSS и JS ( bootstrap.* ), как и компилированные «облегченные» файлы ( bootstrap.min.* ). Карты исходного кода CSS ( bootstrap.*.map ) доступны для использования лишь с определенными инструментами разработчика в браузере. Связанные JS-файлы ( bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js ) включают Popper, но не jQuery.
Кодовые карты дают независимый от языка способ показа соответствия рабочего кода и исходных кодов (sources), написанных вами при разработке.
Файлы СSS
Bootstrap включает несколько параметров для подключения всех ваших компилированных CSS.