Введение

Quick start

Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the downloads page.

JS

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of the following s near the end of your pages, right before the closing tag, to enable them.

Bundle

Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both and include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our section.

Separate

If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.

Components

Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Show components requiring JavaScript

• Alerts for dismissing
• Buttons for toggling states and checkbox/radio functionality
• Carousel for all slide behaviors, controls, and indicators
• Collapse for toggling visibility of content
• Dropdowns for displaying and positioning (also requires Popper)
• Modals for displaying, positioning, and scroll behavior
• Navbar for extending our Collapse plugin to implement responsive behavior
• Toasts for displaying and dismissing
• Tooltips and popovers for displaying and positioning (also requires Popper)
• Scrollspy for scroll behavior and navigation updates

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Глобально важно

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

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

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

Адаптивный метатег

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

Вы можете увидеть пример этого в действии в .

Свойство Box-sizing

Для более простого изменения размеров в CSS мы переключаем глобальное значение с на . Это гарантирует, что не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine.

В редких случаях Вам нужно переопределить его, используйте что-то вроде следующего:

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

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

Перезагрузка

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

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

You can see an example of this in action in the .

Box-sizing

For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

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

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

Скрипты

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

Связка

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

Раздельно

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

Компоненты

Интересно, какие компоненты явно требуют нашего JavaScript и Popper? Кликните на ссылку “Показать компоненты” ниже. Если Вы совсем не уверены в общей структуре страницы, продолжайте читать, чтобы найти образец шаблона страницы.

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

• Alerts (Уведомления) для отклонения
• Buttons (Кнопки) для переключения состояний и функционала флажка/радио
• Carousel (Карусель) для любого поведения слайдов, элементов управления и индикаторов
• Collapse (Сворачиваемое) для переключения видимости содержимого
• Dropdowns (Выпадающие списки) для отображения и позиционирования (также требуется Popper)
• Modals (Модальные окна) для отображения, позиционирования и прокрутки
• Navbar (Панель навигации) для расширения нашего плагина Сворачиваемое для реализации адаптивного поведения
• Toasts (Тосты) для показа и отклонения
• Tooltips (Всплывающие подсказки) и popovers (всплывающие окна) для отображения и позиционирования (также требуется Popper)
• Scrollspy (Отслеживание прокрутки) для поведения прокрутки и обновлений навигации

Сообщество

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

• Обсуждайте в чате Telegram @getbootstrap_ru.
• Читайте и подписывайтесь на Официальный блог Bootstrap.
• Присоединиться к официальной комнате Slack.
• Общайтесь с другими Bootstrappers в IRC. На сервере , в канале .
• Справку по реализации можно найти на сайте Stack Overflow (с тегом ).
• Разработчикам следует использовать ключевое слово в пакетах, которые изменяют или расширяют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной узнаваемости.

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

Bootstrap CDN

If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provides CDN support for Bootstrap’s CSS and JavaScript. You must also include jQuery:

MaxCDN:

<!— Latest compiled and minified CSS —><link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css»><!— jQuery library —><script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»>&lt;/script&gt;<!— Latest compiled JavaScript —><script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js»></script>

One advantage of using the Bootstrap CDN:
Many users already have downloaded
Bootstrap from MaxCDN when visiting
another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN’s will make sure that once a user requests a file from it, it will be served
from the server closest to them, which also leads to faster loading time.

jQueryBootstrap uses jQuery for JavaScript plugins (like modals, tooltips, etc). However, if you just use the
CSS part of Bootstrap, you don’t need jQuery.

Quick start

Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the downloads page.

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper, and our own JavaScript plugins. We use jQuery’s slim build, but the full version is also supported.

Place one of the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper, and then our JavaScript plugins.

Bundle

Include every Bootstrap JavaScript plugin with one of our two bundles. Both and include Popper for our tooltips and popovers, but not jQuery. Include jQuery first, then a Bootstrap JavaScript bundle. For more information about what’s included in Bootstrap, please see our section.

Separate

If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.

Components

Curious which components explicitly require jQuery, our JavaScript, and Popper? Click the show components link below. If you’re unsure about the page structure, keep reading for an example page template.

Show components requiring JavaScript

• Alerts for dismissing
• Buttons for toggling states and checkbox/radio functionality
• Carousel for all slide behaviors, controls, and indicators
• Collapse for toggling visibility of content
• Dropdowns for displaying and positioning (also requires Popper)
• Modals for displaying, positioning, and scroll behavior
• Navbar for extending our Collapse plugin to implement responsive behavior
• Tooltips and popovers for displaying and positioning (also requires Popper)
• Scrollspy for scroll behavior and navigation updates

How it works

Breaking it down, here’s how the grid system comes together:

• Our grid supports six responsive breakpoints. Breakpoints are based on media queries, meaning they affect that breakpoint and all those above it (e.g., applies to , , , , and ). This means you can control container and column sizing and behavior by each breakpoint.

• Containers center and horizontally pad your content. Use for a responsive pixel width, for across all viewports and devices, or a responsive container (e.g., ) for a combination of fluid and pixel widths.

• Rows are wrappers for columns. Each column has horizontal (called a gutter) for controlling the space between them. This is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to and gutter classes to change the spacing of your content.

• Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., spans four). s are set in percentages so you always have the same relative sizing.

• Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with classes, vertical gutters with , or all gutters with classes. is also available to remove gutters.

• Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.

Be aware of the limitations and bugs around flexbox, like the .

Как это работает

На высоком уровне, блочная система работает так:

• Существует три основных компонента—контейнера, строки и столбцы.
• Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
• «Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
• Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
• Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
• Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
• Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
• Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
• Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
• Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

• Follow @getbootstrap on Twitter.
• Read and subscribe to The Official Bootstrap Blog.
• Join the official Slack room.
• Chat with fellow Bootstrappers in IRC. On the server, in the channel.
• Implementation help may be found at Stack Overflow (tagged ).
• Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.

Валидаторы

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

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

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

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

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

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

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

Экономичная маркетинговая страница, ориентированная на продукт, с обширной сеткой и изображениями.

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

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

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

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

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

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

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

Привлечение к тексту внимания посредством цвета

В Bootstrap 3 и 4 имеются классы, с помощью которых можно изменить цвет текста, т.е. придать ему дополнительную информацию.

Цвет — это один из способов передачи информации. Bootstrap имеет несколько вспомогательных классов, которые могут быть использованы для придания тексту цветовой окраски. Например, зеленый цвет ассоциируется с успехом, оранжевый – на то, что надо быть осторожным, красный — с опасностью и т.д.

<p class="text-muted">Приглушенный текст</p>
<p class="text-primary">Важный текст</p>
<p class="text-success">Текст успеха</p>
<p class="text-info">Текст примечания</p>
<p class="text-warning">Текст предупреждения</p>
<p class="text-danger">Текст ошибки</p>

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

/* с помощью класса */
.text-red {
  color: red;
}

/* например, для всех заголовков h3, расположенных в aside */
aside h3 {
  color: #fff;
}

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

/* усиление CSS-свойства color */
aside h3 {
  color: #fff !important;
}

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

Например:

<p>...<span class="text-success">часть текста</span>...</p>

Как устранить выход текста за пределы

Если в тексте имеется какое-то длинное слово и ему не хватает длины блока, то оно выйдет за его пределы.

Чтобы это исправить, необходимо в CSS добавить следующее правило для блоков, в которых может возникнуть эта ситуация:

<!-- ... -->
<style>
/* CSS: */
.main {
  word-wrap: break-word;
}
</style>
<!-- ... -->
<div class="main">
  Некоторый контент...
</div>

Кроме этого, бывают ситуации, когда вы задаёте блоку фиксированную высоту, а контент, который содержит данный блок, в него не помещается.

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

<!-- ... -->
<style>
/* CSS: */
.main {
  word-wrap: break-word;
  overflow: hidden;
}
</style>
<!-- ... -->
<div class="main" style="height: 200px;">
  Некоторый контент...
</div>

Но можно поступить и по-другому, а именно показать пользователю, что это не весь контент, добавив после него три точки.

Для этого можно скачать js-плагин dotdotdot. Подключить его к странице и назначить необходимым элементам.

<div class="main" style="height: 200px;">
  Некоторый контент...
</div>
<!-- ... -->
<script src="jquery.dotdotdot.min.js"></script>
<script>
$(function(){
  $('.main').dotdotdot();
});
</script>

Ещё одна очень частая задача — это когда текст необходимо расположить в одну строку. Это осуществляется с помощью CSS-свойство со значением .

<!-- ... -->
<style>
/* CSS: */
.main {
  white-space: nowrap;
}
</style>
<!-- ... -->
<div class="main" style="height: 200px;">
  Некоторый контент...
</div>

Для скрытия контента, который не помещается в блок, также можно использовать CSS-свойство со значением . Если необходимо добавить троеточие после текста, то нужно дополнительно ещё добавить CSS-свойство со значением .

<!-- ... -->
<style>
/* CSS: */
.main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
<!-- ... -->
<div class="main" style="height: 200px;">
  Некоторый контент...
</div>

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

<!-- ... -->
<style>
/* CSS: */
.main {
  overflow: auto;
}
</style>
<!-- ... -->
<div class="main" style="height: 200px;">
  Некоторый контент...
</div>

CSPs and embedded SVGs

Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. For organizations with more strict CSP configurations, we’ve documented all instances of our embedded SVGs (all of which are applied via ) so you can more thoroughly review your options.

• Close button (used in alerts and modals)

Based on community conversation, some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on a best path forward, if necessary.

Quick start

Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the downloads page.

JS

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of the following s near the end of your pages, right before the closing tag, to enable them.

Bundle

Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both and include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our section.

Separate

If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.

Components

Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Show components requiring JavaScript

• Alerts for dismissing
• Buttons for toggling states and checkbox/radio functionality
• Carousel for all slide behaviors, controls, and indicators
• Collapse for toggling visibility of content
• Dropdowns for displaying and positioning (also requires Popper)
• Modals for displaying, positioning, and scroll behavior
• Navbar for extending our Collapse plugin to implement responsive behavior
• Toasts for displaying and dismissing
• Tooltips and popovers for displaying and positioning (also requires Popper)
• Scrollspy for scroll behavior and navigation updates

Что такое Bootstrap?

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.

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

Основная область его применения – это фронтенд разработка сайтов и интерфейсов админок. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Bootstrap является самым популярным.

Почему Bootstrap так популярен? Это связано с тем, что он позволяет верстать сайты в несколько раз быстрее, чем на «чистом» CSS и JavaScript. А в нашем мире, время – это очень ценный ресурс. Ещё один его аспект – доступность. Она сводится к тому, что предоставляет возможность даже начинающему веб-разработчику (без глубоких знаний и достаточной практики) создавать достаточно качественные макеты.

Фреймворк Bootstrap – это набор набор CSS и JavaScript файлов. Чтобы его использовать эти файлы необходимо просто подключить к странице. После этого вам станут доступны инструменты данного фреймворка: колоночная система (сетка Bootstrap), классы и компоненты.

Как он работает? Например, чтобы создать кнопку на странице с помощью Bootstrap, достаточно к ссылке или элементу добавить всего несколько классов.

Создание кнопки в Bootstrap 5:

Ну как? Сколько на это потребовалось времени? Да, всего несколько секунд.

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

Всё, вкладки готовы. На это тоже ушли считанные секунды. Правда, потрясающая скорость. В этом сила Bootstrap.

Но, Bootstrap – это не просто набор готовых инструментов (HTML фрагментов, классов, компонентов и плагинов), а хорошо спроектированный фронтенд фреймворк, который довольно просто можно настроить под себя посредством редактирования Sass переменных и использования миксинов.