Bootstrap ru: Bootstrap. Документация на русском языке.

Содержание

Вступление. Начало работы · Bootstrap v5.2.2

Включите CSS и JS Bootstrap. Поместите тег <link> в <head> для нашего CSS и тег <script> для нашего пакета JavaScript (включая Popper для позиционирования раскрывающихся списков, всплывающие сообщения и всплывающие подсказки) перед закрывающим </body>. Узнайте больше о наших ссылках CDN.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Демо Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
    <h2>Привет мир!</h2>
    <script src="https://cdn.  jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

Вы также можете включить Popper и наш JS отдельно. Если вы не планируете использовать раскрывающиеся списки, всплывающие окна или всплывающие подсказки, сэкономьте несколько килобайт, не включая Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected].
  2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

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

В качестве справки, вот наши основные ссылки CDN.

Описание	URL-адрес
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

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

Следующие шаги

Узнайте больше о некоторых важных глобальных настройках среды, которые использует Bootstrap.
Прочитайте о том, что включено в Bootstrap, в нашем разделе содержания и списке компонентов, для которых требуется JavaScript ниже.
Нужно немного больше энергии? Рассмотрите возможность сборки с помощью Bootstrap, включив исходные файлы с помощью диспетчера пакетов.
Хотите использовать Bootstrap в качестве модуля с <script type="module">? Пожалуйста, обратитесь к нашему разделу использование Bootstrap как модуля.

JS компоненты

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

Показать компоненты, требующие JavaScript

Уведомления (Alerts) для отклонений
Кнопки (Buttons) для переключения состояний и функциональности флажка/радио
Карусель (Carousel) для всех режимов слайдов, элементов управления и индикаторов
Коллапс (Collapse) для переключения видимости содержимого
Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper)
Модальные окна (Modals) для отображения, позиционирования и поведения прокрутки
Панель навигации (Navbar) для расширения наших плагинов Collapse и Offcanvas для реализации адаптивного поведения
Навигация (Navs) с плагином Tab для переключения панелей содержимого
Offcanvases для отображения, позиционирования и поведения прокрутки

Отслеживание прокрутки (Scrollspy) для поведения прокрутки и обновлений навигации
Тосты (Toasts) для отображения и отклонения
Всплывающие подсказки (Tooltips) и Всплывающие окна (Popovers) для отображения и позиционирования (также требуется Popper)

Важные глобальные переменные

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

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

Bootstrap требует использования типа документа HTML5. Без него вы увидите причудливый и незавершенный стиль.

<!doctype html>
<html lang="ru">
  ...
</html>

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

Bootstrap разработан сначала для мобильных устройств

, стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости, используя медиа-запросы CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра в свой <head>.

<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.

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

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

Для улучшения кросс-браузерного рендеринга мы используем Reboot для исправления несоответствий между браузерами и устройствами, обеспечивая при этом несколько более самостоятельный сброс общих элементов HTML.

Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

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

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

Примеры. Документация · Bootstrap v5.2.2

Фрагменты

Общие шаблоны для создания сайтов и приложений, основанных на существующих компонентах и утилитах с настраиваемым CSS и т.

д.

Заголовки

Отобразите свой брендинг, навигацию, поиск и многое другое с помощью этих компонентов заголовка.

Герои

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

Функции

Объясните особенности, преимущества или другие детали Вашего маркетингового контента.

Боковые панели

Общие шаблоны навигации идеально подходят для макетов вне холста или нескольких столбцов.

Футеры

Завершите каждую страницу потрясающим нижним колонтитулом, большим или маленьким.

Выпадающие списки

Расширьте свои раскрывающиеся списки с помощью фильтров, значков, настраиваемых стилей и многого другого.

Список групп

Расширяйте группы списков с помощью утилит и настраиваемых стилей для любого контента.

Модали

Преобразуйте модальные окна для любых целей, от обзоров функций до диалогов.

Пользовательские компоненты

Совершенно новые компоненты и шаблоны, которые помогут людям быстро приступить к работе с Bootstrap и продемонстрируют лучшие практики для добавления в платформу.

Альбом

Простой одностраничный шаблон для фотогалереи, портфолио и многого другого.

Прайслист

Пример страницы с ценами, созданной с помощью карточек, с настраиваемым верхним и нижним колонтитулами.

Оформление заказа

Пользовательская форма оформления заказа, показывающая наши компоненты формы и их функции проверки.

Продукт

Ориентированная на продукт продвигающая маркетинговая страница с обширной сеткой и изображениями.

Обложка

Одностраничный шаблон для создания простых и красивых домашних страниц.

Слайдер

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

Блог

Макет блога с заголовком, навигацией, избранным контентом.

Панель администратора

Базовая панель администратора с фиксированной боковой панелью и навигационной панелью.

Форма входа

Индивидуальный макет и дизайн формы для простой формы входа.

Закрепленный футер

Прикрепленный нижний колонтитул к нижней части области просмотра, когда содержимое страницы мало.

Закрепленный футер и панель навигации

Прикрепленный нижний колонтитул к нижней части области просмотра с помощью фиксированной верхней панели навигации.

Джамботрон

Используйте утилиты для воссоздания и улучшения Jumbotron Bootstrap.

Используйте утилиты для воссоздания и улучшения jumbotron Bootstrap 4.

Фреймворк

Примеры, которые сосредоточены на реализации использования встроенных компонентов, предоставляемых Bootstrap.

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

Ничего, кроме основ: скомпилированный CSS и JavaScript.

Разметка

Несколько примеров макетов сетки с различными уровнями вложенности.

Шпаргалка

Множество компонентов Bootstrap.

Шпаргалка RTL

Множество компонентов Bootstrap, RTL.

Панели навигации

Взять компонент панели навигации по умолчанию и показать, как его можно перемещать, размещать и расширять.

Панели навигации

Демонстрация всех адаптивных и контейнерных опций для навигационной панели.

Панель навигации вне холста (offcanvas)

Аналогичный пример с панелями навигации, но с нашим компонентом offcanvas.

Статичная панель навигации

Пример статической верхней панели навигации с одним дополнительным контентом.

Фиксированная панель навигации

Пример единой панели навигации с фиксированной верхней панелью навигации и некоторым дополнительным контентом.

Нижняя панель навигации

Пример единой панели навигации с нижней панелью навигации и дополнительным контентом.

Панель навигации вне холста

Превратите расширяемую панель навигации в скользящее меню вне холста (не использует наш компонент вне холста).

RTL

Посмотрите, как работает RTL-версия Bootstrap с этими модифицированными примерами пользовательских компонентов.

RTL все еще находится в экспериментальной стадии и будет развиваться с учетом обратной связи. Заметили что-то или хотите предложить улучшение?

Пожалуйста, откройте вопрос.

Альбом RTL

Простой одностраничный шаблон для фотогалерей, портфолио и т. д.

Оформление заказа RTL

Пользовательская форма оформления заказа, показывающая наши компоненты формы и их функции проверки.

Слайдер RTL

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

Блог RTL

Журнал как шаблон блога с заголовком, навигацией, избранным контентом.

Панель администратора RTL

Базовая панель администратора с фиксированной боковой панелью и навигационной панелью.

Интеграции

Интеграции с внешними библиотеками.

Masonry

Объедините возможностей сетки Bootstrap и макета Masonry.

Please enable JavaScript to view the comments powered by Disqus.

Начните работу с Bootstrap · Bootstrap v5.2

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

Начните работу, включив готовые CSS и JavaScript Bootstrap через CDN без каких-либо шагов по сборке. Посмотрите это на практике с помощью этой демонстрации Bootstrap CodePen.

Создайте новый файл index.html в корне проекта. Включите также тег для правильного реагирования на мобильных устройствах.
```
 

  <голова>
    <мета-кодировка="utf-8">
    
    Демо Bootstrap
  
  <тело>
     Привет, мир! 
  

 
```

Включить CSS и JS Bootstrap. Поместите тег в для нашего CSS и . Узнайте больше о наших ссылках CDN.

  <голова> <мета-кодировка="utf-8">Демо Bootstrap jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" целостность="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="анонимный">  <тело>Привет, мир!