Вступление

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.

Z-index

Several Bootstrap components utilize , the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used + or +.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit values of , , and for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher value to show their border over the sibling elements.

Важные глобальные атрибуты

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

Отзывчивый мета-тэг

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

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

Размер ширины и высоты элемента

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

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

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

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

Ребут

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые сбросы стилей для элементов HTML для коррекции мелких багов в браузерах и девайсах.

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

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

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

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

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

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

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

Свойство Box-sizing

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

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

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

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

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

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

Назначение Bootstrap сетки. Контрольные точки

Сетка Bootstrap 4 – это основная часть фреймворка. Она предназначена для создания адаптивных шаблонов.

Сетка Bootstrap 4 основывается на CSS Flexbox и медиа-запросах (CSS media queries). Чтобы понять, как она работает более точно, рекомендуется сначала изучить эти CSS технологии.

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

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

В Bootstrap изменения вида макета реализовано через медиа-запросы. Каждый медиа-запрос в Bootstrap строится на основании минимальной ширины viewport браузера. В Bootstrap ключевое значение ширины viewport в медиа-запросе называется breakpoint (контрольной точкой, или более просто классом устройства).

На схеме приведены основные контрольные точки, которые Bootstrap 4 имеет по умолчанию:

Это означает что до 576px макет сайта может отображаться одним образом, от 576px до 768px – другим образом и т.д. Таким образом, можно создать макет, который на каждом из этих участков может выглядеть по-разному.

Контрольные точки имеют обозначение. Первый breakpoint не имеет обозначения (), второй называется – , третий – , четвёртый – и пятый – . Эти обозначения необходимо запомнить, т.к. они используются в классах, которые мы будем добавлять к элементам. Эти обозначения в имени класса будут указывать на то с какой ширины viewport стили, определённые в нём, будут применяться к элементу.

Ширина viewport браузера	Контрольная точка (название устройства)
>=0	без обозначения (xs)
>=576px	sm
>=768px	md
>=992px	lg
>=1200px	xl

При этом, контрольные точки задают только минимальную ширину. Т.е., например, если вы определили макет, используя в нём классы без обозначения контрольной точки () и с использованием , то он на будет иметь такую же структуру как на , а на и — как на .

Если вы знакомы с сеткой Bootstrap 3, то в ней количество контрольных точек равнялось четырём.

Позиции

Используйте класс, чтобы сделать любой элемент фиксированным/пребывание в верхней части страницы:

<nav class=»navbar navbar-expand-sm bg-dark navbar-dark fixed-top»> 
…</nav>

Используйте класс, чтобы сделать любой элемент фиксированным/остаться в нижней части страницы:

<nav class=»navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom»> 
…</nav>

Используйте класс, чтобы сделать любой элемент фиксированным/остаться в верхней части страницы, когда вы прокрутите его мимо. Примечание:
Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как ).

Create First Web Page With Bootstrap 4

1. Add the HTML5 doctype

Bootstrap 4 uses HTML elements and CSS properties that require
the HTML5 doctype.

Always include the HTML5 doctype at the beginning of
the page, along with the lang attribute and the correct character set:

<!DOCTYPE html><html lang=»en»>  <head>    <meta charset=»utf-8″>   </head></html>

2. Bootstrap 4 is mobile-first

Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first styles are
part of the core framework.

To ensure proper rendering and touch zooming, add the following tag inside the
element:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

The part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).

The part sets the initial zoom level when the page is first loaded
by the browser.

3. Containers

Bootstrap 4 also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The class provides a responsive fixed width container
2. The class provides a full width container, spanning the entire width of the viewport

.container

.container-fluid

Bootstrap 4 CDN

Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете включить его в CDN (сеть доставки контента).

Макскдн предоставляет поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:

MaxCDN:

<!— Latest compiled and minified CSS —><link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css»><!— jQuery library —><script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script>
<!— Popper JS —><script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js»></script><!— Latest compiled JavaScript —><script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js»></script>

Одно из преимуществ использования Bootstrap 4 CDN:Многие пользователи уже скачали Bootstrap 4 из макскдн при посещении другого сайта. В результате, он будет загружен из кэша, когда они посещают ваш сайт, что приводит к более быстрому времени загрузки.
Кроме того, большинство CDN будет убедиться, что после того, как пользователь запрашивает файл из него, он будет обслуживаться от ближайшего к ним сервера, что также приводит к более быстрой загрузке времени.jQuery и Поппер?Bootstrap 4 использует jQuery и Поппер. js для JavaScript компонентов (таких как модальные, всплывающие подсказки, Попов и т.д.). Однако, если вы просто используете CSS часть Bootstrap, вы не нуждаетесь в них.

Show components that require jQuery »

• Закрываемые оповещения
• Кнопки и флажки/переключатели для переключения состояний
• Карусель для слайдов, элементов управления и индикаторов
• Свертывание для переключения содержимого
• Выпадающие (также требуется Поппер. js для идеального позиционирования)
• Модальные (открытые и закрытые)
• Навигационная (для складных меню)
• Подсказка и всплывающие подсказки (также требует Поппер. js для идеального позиционирования)
• Скроллспи для поведения прокрутки и обновления навигации

Содержимое архива с Bootstrap 4

Внутри папки css вы найдете ряд файлов, внутреннее содержимое которых состоит из разных составляющих. Точнее — в папках css и js будут представлены следующие файлы:

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

Если вам нужна только сетка Bootstrap 4, имеет смысл подключать только файл 

Карты исходного кода CSS () доступны для использования лишь с определенными инструментами разработчика в браузере. Для их использования необходимо знание работы препроцессоров.

Файлы в папке js имеют также разное содержимое. Для использования файла необходимо подключить jQuery и Popper, а файлы  и минимизированный  уже включают Popper, но не jQuery.

В таблице ниже представлен список включенных в различные css-файлы компонентов:

CSS файлы	Разметка	Компоненты	Утилиты
	Включены	Включены	Включены	Включены
	Только Система сеток	Не включены	Не включены	Только flex утилиты
	Не включены	Только Reboot	Не включены	Не включены

Следующая таблица содержит список включенных js-компонентов:

JS-файлы	Popper	jQuery
	Включены	Не включены
	Не включены	Не включены

Отзывчивые поплавки

Плавающий элемент влево или вправо в зависимости от ширины экрана, с адаптивными классами float ( — where * is (>=576px), (>=768px), (>=992px) or (>=1200px)):

Пример

Float right on small screens or wider
Float right on medium screens or wider
Float right on large screens or wider
Float right on extra large screens or wider
Float none

Пример

<div class=»float-sm-right»>Float right on small screens or wider</div><br>
<div class=»float-md-right»>Float right on medium screens or wider</div><br>
<div class=»float-lg-right»>Float right on large screens or wider</div><br>
<div class=»float-xl-right»>Float right on extra large screens or
wider</div><br><div class=»float-none»>Float none</div>

Основной принцип верстки макета

Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.

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

Размещать контент веб-страницы следует только в адаптивных блоках.

Например, в имеющийся макет, а именно в адаптивный блок вложим ещё 2 блока:

<div class="container">
    <div class="row">
        <div class=col-8>...</div>
        <div class=col-4>...</div>
    </div>
</div>

Для этого предварительно необходимо в блок положить ряд (контейнер для адаптивных блоков):

<div class="container">
    <div class="row">
        <div class=col-8>
            <div class="row">...</div>
        <div class=col-4>...</div>
    </div>
</div>

После этого добавим 2 адаптивных блока в ряд:

<div class="container">
    <div class="row">
        <div class=col-8>
            <div class="row">
                <div class=col-6>...</div>
                <div class=col-6>...</div>
            </div>
        <div class=col-4>...</div>
    </div>
</div>

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

Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

JS

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода в конце страниц, прямо перед закрывающим . Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать коренную структуру страницы, можете использовать наши шаблоны.

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

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

• Уведомления отмены
• Кнопки изменения состояний и чекбоксов/»радио»
• Карусель для поведения «слайд», элементы контроля и индикаторы
• Коллапс для изменения видимости содержимого
• Выпадающие элементы для отображения и расположения (также требует Popper.js)
• Модальные окна для отображения, расположения и создания поведения прокрутки
• Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
• Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
• Отслеживание прокрутки и обновления навигации

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью (адаптивностью).

Bootstrap 4 поддерживает последние стабильные выпуски всех основных браузеров и платформ. Тем не менее, Internet Explorer 9 и ниже не поддерживается.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самая стабильная версия Bootstrap, и она все еще поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Поддержка удаленных иконок: Bootstrap 4 не поддерживает BS3 Glyphicons. Используйте Font-Awesome или другие библиотеки иконок вместо этого.

Community

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

• 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 that 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 4 CDN

If you don’t want to download and host Bootstrap 4 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/4.5.2/css/bootstrap.min.css»><!— jQuery library —><script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>
<!— Popper JS —><script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js»></script><!— Latest compiled JavaScript —><script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script>

One advantage of using the Bootstrap 4 CDN:
Many users already have downloaded
Bootstrap 4 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.jQuery and Popper?Bootstrap 4 use jQuery and Popper.js for
JavaScript components (like modals, tooltips, popovers etc). However, if you just use the
CSS part of Bootstrap, you don’t need them.

Show components that require jQuery »

• Closable alerts
• Buttons and checkboxes/radio buttons for toggling states
• Carousel for slides, controls, and indicators
• Collapse for toggling content
• Dropdowns (also requires Popper.js for perfect positioning)
• Modals (open and close)
• Navbar (for collapsible menus)
• Tooltips and popovers (also requires Popper.js for perfect positioning)
• Scrollspy for scroll behavior and navigation updates

Типография/текстовые классы

Как описано в разделе типография, вот список всех типографий/текстовых классов:

Класс	Описание
	Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: , , ,
	Полужирный текст
	Обычный текст
	Легковесный текст
	Курсивный текст
	Выделяет абзац
	Обозначает меньший текст (значение 85% от размера родительского элемента)
	Указывает текст, выровненный по левому краю
	Обозначает текст, выровненный по центру
	Указывает текст с выравниванием по правому краю
	Обозначает обоснованный текст
	Текст с интервалом
	Обозначает отсутствие текста переноса
	Обозначает текст в нижнем регистре
	Указывает верхний текст
	Обозначает текст с прописными буквами
	Отображение текста внутри элемента в немного меньшем размере шрифта
	Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих и ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
	Размещение всех элементов списка в одной строке (используется вместе с каждым элементом <li>)
	Делает элемент прокручиваемым

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицы стилей и большей отзывчивостью.

Bootstrap 4 поддерживает новейшие, стабильные выпуски всех основных браузеров и платформ. Тем не менее Internet Explorer 9 и вниз не поддерживается.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Поддержка значков дропппед: Bootstrap 4 не поддерживает BS3 глификонс. Используйте Шрифт-Awesome или другие библиотеки значков вместо.

Responsive breakpoints

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

Since we write our source CSS in Sass, all our media queries are available via Sass mixins:

We occasionally use media queries that go in the other direction (the given screen size or smaller):

Note that since browsers do not currently support , we work around the limitations of and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Once again, these media queries are also available via Sass mixins:

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

These media queries are also available via Sass mixins:

Similarly, media queries may span multiple breakpoint widths:

The Sass mixin for targeting the same screen size range would be:

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.

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 4 страницы

В следующем примере показан код базовой загрузочной страницы 4 (с адаптивным контейнером с фиксированной шириной):

Пример контейнера

<!DOCTYPE html><html lang=»en»><head>  <title>Bootstrap
4 Example</title>  <meta charset=»utf-8″>  <meta name=»viewport» content=»width=device-width, initial-scale=1″>  <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css»>
 
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script> 
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js»></script>
 
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js»></script>
</head><body><div class=»container»>  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div></body></html>

В следующем примере показан код базовой загрузочной страницы 4 (с контейнером с полной шириной):

Пример с контейнерной жидкостью

<!DOCTYPE html><html lang=»en»><head>  <title>Bootstrap
4 Example</title>  <meta charset=»utf-8″>  <meta name=»viewport» content=»width=device-width, initial-scale=1″>  <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css»>
  <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script> 
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js»></script>
 
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js»></script></head><body><div class=»container-fluid»>  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div></body></html>

❮ Назад
Дальше ❯

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

Система сеток в Bootstrap помогает вам создать шаблон и легко сделать адаптивный сайт. Тут нет каких-либо изменений в названиях классов, кроме .xs класса, который больше не существует в Bootstrap 4.

Советую почитать статью — Сетка в Bootstrap 4. Подробное руководство

Сетка разделена на 12 столбцов, следовательно, ваш шаблон будет основываться на этом факте.

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

col-lg-2 // класс используется для больших устройств, таких как ноутбукиcol-md-2 // класс используется для средних по размерам устройств, таких как планшетыcol-sm-2 // этот класс используется для маленьких устройств, таких как мобильные телефоны.

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.