Содержание
Сетка Bootstrap 3 — ИТ Шеф
В этой статье познакомимся с классами фреймворка Bootstrap 3, предназначенными для создания адаптивного «скелета» (макета) сайта.
Сетка Bootstrap состоит из «строительных» элементов. Основные — это обёрточные контейнеры, ряды, адаптивные блоки и отзывчивые служебные классы.
По существу сетка — это просто список предопределённых классов, с помощью которых можно задать необходимое поведение блокам (HTML элементам) и построить с их помощью определённый адаптивный макет сайта.
Обёрточные контейнеры
Обёрточный контейнер — это «строительный» элемент сетки, с которого начинается создание макета для всей страницы или её части (например, шапки, основного меню, основной области, футера) в зависимости от стратегии разработки.
Контейнер в Bootstrap бывает адаптивно-фиксированным или адаптивно-резиновым.
Первый (адаптивно-фиксированный контейнер) характеризуется тем, что он имеет постоянную ширину в пределах некоторого диапазона ширины viewport (области просмотра).
В следующей таблице приведено то, какую ширину имеет адаптивно-фиксированный контейнер при той или иной ширине области просмотра (viewport) браузера:
Ширина viewport | Ширина контейнера (container) |
---|---|
<768px | Ширина контейнера равна ширине viewport |
>= 768px и <992px | 750px |
>= 992px и <1200px | 970px |
<=1200px | 1170px |
Кроме установки ширины адаптивно-фиксированный контейнер Bootstrap ещё центрирует себя в горизонтальном направлении относительно краёв страницы. Выполняет это он с помощью CSS свойств margin-left:auto
и margin-right:auto
. Ещё адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх (с помощью CSS свойств padding-left:15px
и padding-right:15px
) для содержимого, которое в него помещено.
<!-- HTML-код адаптивно-фиксированного контейнера --> <div> ... </div>
Адаптивно-резиновый контейнер отличается от адаптивно-фиксированного тем, что он занимает всю ширину (100%) окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх для содержимого, которое в него помещено.
<!-- HTML-код адаптивно-резинового контейнера --> <div> ... </div>
При разработке макета сайта обычно не применяют вкладывание одних обёрточных контейнеров Bootstrap в другие.
Итак, первый «строительный» элемент сетки Bootstrap – это обёрточный контейнер. Он определяет ширину макета на различных viewport, а также выполняет его центрирование (только адаптивно-фиксированный контейнер) относительно левого и правого края рабочей области вкладки или окна браузера.
Следующий строительный элемент – это ряд (блок div
с классом row
). Ряд — это специальный блок, который применяется только для оборачивания других строительных элементов (адаптивных блоков). Его основное назначение — это нейтрализация положительного внутреннего отступа (15px слева и справа) обёрточного контейнера или адаптивного блока.
Пример формирования внутренних отступов:
container (+15px) -> row (-15px) -> col (+15px) -> контент container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент *col - это адаптивный блок
Пример показывает, что независимо от того в каком адаптивном блоке находится контент, он всегда будет иметь правильный отступ от края (т.е. 15px слева и справа).
Следующий «строительный» элемент сетки Bootstrap – это адаптивный блок (div
с классом col-?-?
).
Адаптивные блоки — это элементы сетки Bootstrap, которым установлен один или несколько классов col-?-?
. Данные блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру.
Ширина адаптивному блоку задаётся в связке с типом устройства. Это означает, что адаптивный блок на разных устройствах может иметь разную ширину. Именно из-за этого данный блок и называется адаптивным.
Как же осуществляется установка ширины адаптивному блоку? Установка ширины адаптивному блоку, которую он должен иметь на определённом устройстве, задаётся по умолчанию числом от 1 до 12 (количеством колонок Bootstrap). Данное число указывается вместо второго знака ?
в классе col-?-?
.
Данное число (по умолчанию от 1 до 12) определеяет какой процент от ширины родительского элемента должен иметь адаптивный блок.
Например, число 1 — устанавливает адаптивному блоку ширину, равную 8,3% (1/12) от ширины родительского блока. Число 12 — ширину, равную 100% (12/12) от ширины родительского блока.
Кроме указания ширины адаптивному блоку необходимо ещё указать и тип устройства (вместо 1 вопроса). Класс устройства будет определять то, на каком viewport будет действовать эта ширина. В Bootstrap 3 различают 4 основных класса. Это xs (ширина viewport >0)
, sm
(ширина viewport >= 768px), md
(ширина viewport >= 992px) и lg
(ширина области просмотра браузера >=1200px).
Например, адаптивный блок с классом col-xs-12 col-sm-6 col-md-4 col-lg-3
будет иметь на устройстве xs
ширину 100% (12/12), на sm — 50%
(6/12), на md — 33,3%
(4/12), на lg — 25%
(3/12).
Кроме этого следует обратить внимание на то, что адаптивные блоки не ограничивают свой диапазон. Т.е. если вы в атрибуте class
адаптивного блока указали xs
, но не указали sm
, то его действие распространится и на область действия этого диапазона.
Например, адаптивный блок с классом col-xs-6 col-lg-3
будет иметь на устройствах xs
, sm
и md
ширину 50% (6/12), на lg
— 25% (3/12).
Адаптивный блок, также как и контейнер, задаёт положительные отступы слева и справа по 15px для контента, который в него будет помещён.
В правильном макете, построенном на основе сетки Bootstrap, адаптивный блок должен всегда иметь в качестве своего родителя ряд.
Например, разобьём блок на 3 равные колонки, которые на xs
будут отображаться вертикально, а на sm
и выше горизонтально:
<div> <div>...</div> <div>...</div> <div>...</div> </div>
Если необходимо рассчитать ширину колонок в пикселях, то это правильно делать на границах контрольных точек (т.е. когда одно действие класса сменяется другим).
Например, рассчитаем, доступную ширину под контент для первого и второго блока:
<div> <div> <div>1 блок...</div> <div>2 блок...</div> </div> </div>
Контрольные точки | Доступная ширина 1 блока | Доступная ширина 2 блока |
---|---|---|
320px — 749. 98px | от 290px (320px — padding (30px)) до 719.98px (749.98px — padding (30px)) | от 290px (320px — padding (30px)) до 719.98px (749.98px — padding (30px)) |
750px — 969.98px | 720px (750px — padding (30px)) | 720px (750px — padding (30px)) |
970px — 1169.98px | 616,7px (970px*8/12 — padding (30px)) | 293,3px (70px*4/12 — padding (30px)) |
1170px и больше | 750px (1170px*8/12 — padding (30px)) | 360px (1170px*4/12 — padding (30px)) |
Расположение адаптивных блоков в родительском элементе
Адаптивные блоки располагаются в родительском элементе один за другим строчками. В одну строчку помещаются адаптивные блоки с суммарным количеством колонок не больше 12 (по умолчанию). Т.е. блоки, которые не помещаются в первую строку, располагаются в следующей строке и т. д.
В Bootstrap 3 адаптивные блоки являются плавающими (float:left
). Это необходимо учитывать при создании макета веб-страницы.
Перед блоком, который должен начинаться с новой строки обязательно необходимо расположить пустой div
элемент с классом clearfix
. Ещё его необходимо скрыть для устройств, на которых это действие выполнять не нужно. Осуществляется скрытие блока с помощью соответствующих классов, приведённых ниже.
Ещё у плавающих блоков есть одна особенность. Например, если в вышеприведённом примере высота 1 блока будет выше, чем 2 блока. То 3 блок будет располагаться не на новой строчке, а «прилипнет» к правой стороне 1 блока.
Чтобы этого не допустить, необходимо добавить блок с классом clearfix
и сделать его видимым для необходимых устройств (например, на md
и lg
):
<div> <div>1 блок...</div> <div>2 блок...</div> <div></div> <div>3 блок. ..</div> </div>
Основной принцип создания макета
Основной принцип создания макета заключается во вкладывании одних адаптивных блоков в другие. При этом их ширина — это всегда относительный параметр, который задаётся в процентном отношении (количеством колонок) от ширины родительского блока. Т.е. на любом уровне вложенности, например, ширина адаптивного блока в 6 колонок — это всегда 50% (6/12*100%) от ширины родительского элемента.
Например, разобьём некоторый блок (основной) на 4 блока (2 в первой строке и 2 во второй). Для простоты, макет создадим не адаптивный:
<div> <div>1 блок...</div> <div>2 блок...</div> <div></div> <div>3 блок...</div> <div>4 блок...</div> </div>
Создадим макет 3 блока (3 x 2):
<div> <div>1 блок...</div> <div>2 блок...</div> <div></div> <div> <div> <div>3-1 блок. ..</div> <div>3-2 блок...</div> <div></div> <div>3-3 блок...</div> <div>3-4 блок...</div> <div></div> <div>3-5 блок...</div> <div>3-6 блок...</div> </div> </div> <div>4 блок...</div> </div>
Нетрудно заметить, что разметка вложенного адаптивного блока выполняется также как и основного. Это означает, что не имеет разницы, какой уровень вложенности имеет блок, создание его макета выполняется по тем же правилам.
Классы для адаптивного смещения блоков
В Bootstrap имеются адаптивные классы (col-?-offset-?
), с помощью которых вы можете сдвинуть блок на определённое количество колонок вправо. Первый ?
необходимо заменить на тип устройства (xs
, sm
, md
или lg
). Второй ?
на количество колонок.
Например, зададим блоку на md
устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо):
<div> <div>1 блок...</div> </div>
Кроме инструментов для адаптивного смещения блоков, в Bootstrap 3 есть ещё специальные классы, с помощью которых можно изменить порядок следования элементов в пределах одной строки.
Отзывчивые служебные классы Bootstrap 3
Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства.
Кроме указания устройства (xs
, sm
, md
, lg
), на котором будет виден блок, необходимо ещё указать то, как на этом устройстве он должен отображаться. Возможные варианты: inline
, block
и inline-block
.
Класс | Описание |
---|---|
visible-xs-? | Делает элемент видимым только на устройствах с очень маленьким экраном xs (ширина viewport <768px). На других устройствах эти элементы не отображаются. |
visible-sm-? | Делает элемент видимым только на устройствах, имеющих экран sm (ширина viewport >=768px и <992px). На других устройствах эти элементы не отображаются. |
visible-md-? | Делает элемент видимым лишь на устройствах, имеющих экран md (ширина viewport >=992px и <1200px). На других устройствах эти элементы не отображаются. |
visible-lg-? | Делает элемент видимым только на устройствах, имеющих экран lg (ширина viewport >=1200px). На других устройствах эти элементы не отображаются. |
Вместо знака ?
необходимо указать block
, inline
или inline-block
. Т.е. указать, как данный элемент должен отображаться.
Например, добавление к элементу класса visible-md-block
будет означать то, что он будет отображаться только на устройствах, имеющим viewport md
(width viewport >=992px и <1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;
).
Примечание: Эти классы также можно использовать совместно для того, чтобы элементы были видны на нескольких устройствах. Например, если вы примените к элементу классы visible-xs-inline
и visible-md-inline
, то это сделает его видимым на устройствах, имеющих как маленький экран, так и средний. Отображаться данный элемент будет как строчный (CSS: display:inline;
).
Кроме этих Bootstrap 3 имеет ещё классы с противоположным действием. С их помощью можно скрыть элементы на определенных устройствах.
Класс | Описание |
---|---|
hidden-xs | Скрывает элемент на устройствах xs (ширина viewport <768px). |
hidden-sm | Скрывает элемент на устройствах sm (ширина viewport >=768px и <992px). |
hidden-md | Скрывает элемент на устройствах md (ширина viewport >=992px и <1200px). |
hidden-lg | Скрывает элемент на устройствах lg (ширина viewport >=1200px). |
Эти классы тоже можно использовать совместно, чтобы сделать элемент не видимым на нескольких устройствах.
Например, элемент с классами hidden-xs
и hidden-sm
будет не виден сразу на 2 устройствах (xs
и sm
).
Кроме вышеприведённых отзывчивых классов, фреймворк Bootstrap 3 ещё содержит и такие, которые позволяют управлять видимостью элементов при печати.
Класс | Описание |
---|---|
visible-print-block | Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение block . |
visible-print-inline | Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline . |
visible-print-inline-block | Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline-block . |
hidden-print | Элемент, имеющий указанный класс не будет отображаться при печати. На странице (в браузере) данный элемент будет виден. |
Пример создания макета с помощью сетки Bootstrap 3
В этом разделе статьи рассмотрим процесс создания адаптивного макета для блока с использованием сетки Bootstrap 3.
Макет состоит из трёх блоков. Эти блоки должны располагаться на устройствах так, как это показано на изображении.
Разрабатывать макет обычно начинают с крохотных устройств (xs). На данном устройстве блоки имеют одинаковую ширину, равную 12 колонкам Bootstrap.
<div> <div>Контент блока 1...</div> <div>Контент блока 2...</div> <div>Контент блока 3...</div> </div>
На sm блоки располагаются следующим образом:
- 1 — занимает всю ширину родительского блока;
- 2 и 3 (каждый из них) — ширину, равную 6 колонкам Bootstrap.
<div> <div>Контент блока 1...</div> <div>Контент блока 2...</div> <div>Контент блока 3...</div> </div>
На md
блоки 1 и 2 расположены на первой строке, а 3 блок — на 2 строке. 1 блок имеет ширину, равную 8 колонкам Bootstrap (col-md-8
), 2 блок — 4 колонки (col-md-4
).
3 блок должен всегда располагаться на 2 строке. Чтобы это гарантировать, перед этим блоком необходимо поместить дополнительный пустой блок с классом clearfix
. Данный блок не позволит 3 блоку обтекать предыдущие блоки. Кроме этого необходимо иметь в виду, что блок с классом clearfix
необходимо отображать только на md
, т.к. данное действие на других устройствах не нужно.
<div> <div>Контент блока 1...</div> <div>Контент блока 2...</div> <div></div> <div>Контент блока 3...</div> </div>
На lg
адаптивные блоки расположены горизонтально и занимают вместе всю ширину. 1 блок имеет ширину равную половине ширины родительского элемента (col-lg-6
), 2 блок — одну четвертую ширины (col-lg-3
), и 3 блок — тоже должен занимать одну четвертую ширину родительского элемента (col-lg-3
).
<div> <div>Контент блока 1...</div> <div>Контент блока 2...</div> <div></div> <div>Контент блока 3...</div> </div>
Ещё интересные темы:
- Ещё немного информации о сетки и создании разметки
- Как создать адаптивно-фиксированный макет сайта?
- Пример адаптивно-резинового макета сайта
- Как разработать в Bootstrap обычный (не адаптивный) макет фиксированной ширины
- Как создать свою сборку Bootstrap, например состоящую из 24 или 16 колонок
- Про создание своих собственных адаптивных контейнеров
Что такое Bootstrap
Назад
Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрого создания адаптивных дизайнов сайтов.
Фреймворк Bootstrap используется не только независимыми разработчиками, но и целыми компаниями. Основная область его применения – это разработка фронтенд составляющих сайтов и интерфейсов админок. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Bootstrap является самым популярным.
В сущности, Bootstrap — это просто набор файлов (CSS и JavaScript). После подключения этих файлов к странице вам станут доступны для верстки дизайна большое количество классов и готовых компонентов. Используя их можно очень быстро и качественно создать современный адаптивный дизайн сайта.
Классы Bootstrap можно разбить на 3 большие группы:
- Классы для создания сетки (адаптивного макета страницы).
- Классы для стилизации контента (текста, кода, изображений, таблиц и другой информации).
- Служебные классы (для решения наиболее часто встречающихся вспомогательных задач, таких как выравнивание, управление отображением, добавление границ и др. ).
Кроме классов во фреймворке Bootstrap имеются ещё и компоненты (готовые объекты интерфейса). Это кнопки, хлебные крошки, формы, навигационные меню, выпадающие списки, всплывающие панели и др.
Основы работы с Bootstrap
Многие начинающие разработчики задаются вопросом: «Как начать работать с Bootstrap?». На самом деле создавать страницы с использованием Bootstrap очень просто.
Первое, что вам необходимо — это скачать Bootstrap и подключить его к странице.
Следующий шаг — это создание сетки. Этот этап является наиболее сложным, особенно для тех, кто в первый раз начинает использовать фреймворк Bootstrap. Поэтому на данном этапе стоит остановиться более подробно и разобраться с тем как она (сетка) работает.
После создания сетки переходят к наполнению её «ячеек» контентом и компонентами.
Это основные шаги по созданию дизайна сайта на Bootstrap.
Преимущества фреймворка Bootstrap
Применение фреймворка Bootstrap при создании сайтов даёт следующие преимущества:
- Очень быстрое создание качественных адаптивных дизайнов сайтов (достигается благодаря использованию хорошо продуманных и протестированных огромным количеством веб-разработчиков классов и готовых компонентов).
- Современный дизайн (оформление HTML элементов и компонентов Bootstrap выполнено в едином стиле в последних тенденциях веб-дизайна).
- Нет необходимости иметь глубокие знания по HTML, CSS, JavaScript и jQuery (достаточно знать только основы вышеперечисленных технологий).
- Является кроссбраузерным и кроссплатформенным (адаптирован для всех популярных операционных систем и браузеров (Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera и др.), работающих в этих системах).
- Является открытым и бесплатным. Фреймворк Bootstrap – это проект с открытым исходным кодом, доступным на Github. Он имеет лицензию MIT. Это означает, что его можно использовать бесплатно как для личного, так и для коммерческого использования.
Но, кроме преимуществ у Bootstrap есть также недостатки. Первый заключается в том, что он не подходит для проектов с уникальным дизайном. В этом случае из Bootstrap для проекта в основном берут только сетку. Второй – это когда вам для проекта нужны не все компоненты и классы, а только некоторые. Этот недостаток, не является проблемой. Например, на странице Customize можно очень просто собрать свою сборку, состоящую только из нужных классов и компонентов Bootstrap.
Какую версию Bootstrap выбрать?
Для разработки большинства веб-проектов лучше использовать последнюю версию Bootstrap. На текущий момент актуальной версией является 4.3.1.
Данная версия поддерживает последние, стабильные версии всех основных браузеров и платформ. В операционной системе Windows Bootstrap v.4.3.1 поддерживает Internet Explorer 10-11 и Microsoft Edge.
Если же проект должен корректно работать и в более старых браузерах (Internet Explorer 8 и 9), то в этом случае для его реализации лучше выбрать вместо 4.3.1 версию Bootstrap 3 (последняя версия 3.4.1).
У вас нет прав для комментирования.
Bootstrap 5 Tutorial
❮ Главная
Далее ❯
Попробуйте сами Примеры
Это руководство содержит сотни примеров Bootstrap 5.
С помощью нашего онлайн-редактора вы можете отредактировать код и нажать кнопку, чтобы просмотреть результат.
Начальная загрузка 5 Пример
Попробуйте сами »
Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.
Bootstrap 5 против Bootstrap 3 и 4
Bootstrap 5 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.
Bootstrap 5 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 11 и более ранние версии не поддерживаются.
Основное различие между Bootstrap 5 и Bootstrap 3 и 4 заключается в том, что
Bootstrap 5 переключился на JavaScript вместо jQuery.
Примечание. Bootstrap 3 и Bootstrap 4 по-прежнему поддерживаются командой для исправления критических ошибок и изменений в документации,
и совершенно безопасно продолжать их использовать. Однако новые функции НЕ будут добавлены в
их.
Bootstrap 5 Упражнения
Проверьте себя с помощью упражнений
Упражнение:
Используйте класс Bootstrap для центрирования следующего текста:
Привет, мир!
Начать упражнение
Викторина Bootstrap 5
Проверьте свои навыки работы с Bootstrap 5 в W3Schools!
Начать викторину Bootstrap 5!
Мое обучение
Отслеживайте свои успехи с помощью бесплатной программы «Мое обучение» здесь, в W3Schools.
Войдите в свою учетную запись и начните зарабатывать очки!
Это дополнительная функция. Вы можете учиться в W3Schools без использования My Learning.
❮ Дом
w3schools.com
Далее ❯
Начало работы с BS5
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
7 Top0 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Введение · Bootstrap v5.0
Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатный CDN с открытым исходным кодом. Используете менеджер пакетов или вам нужно загрузить исходные файлы? Перейдите на страницу загрузок.
CSS
Скопируйте и вставьте таблицу стилей
в свой
перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.
JS
Для работы многих наших компонентов требуется использование JavaScript. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих Дальнейшие действия см. в документации по макету или в наших официальных примерах, чтобы приступить к размещению содержимого и компонентов вашего сайта. Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам необходимо знать при его использовании, и все они почти исключительно ориентированы на нормализацию кросс-браузерных стилей. Давайте углубимся. Bootstrap требует использования типа документа HTML5. Без него вы увидите причудливый незавершенный стиль, но включение его не должно вызывать значительных сбоев. Bootstrap разработан сначала для мобильных устройств , стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиазапросов CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра к вашему Вы можете увидеть пример этого в действии в начальном шаблоне. Для более простого изменения размера в CSS мы переключаем глобальное значение В редких случаях вам нужно переопределить его, используйте что-то вроде следующего: В приведенном выше фрагменте вложенные элементы, включая сгенерированный контент с помощью Узнайте больше о блочной модели и размерах на CSS Tricks. Для улучшения рендеринга в разных браузерах мы используем перезагрузку для исправления несоответствий между браузерами и устройствами, обеспечивая при этом несколько более точные сбросы общих элементов HTML. Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
Важные глобальные параметры
Тип документа HTML5
...
Отзывчивый метатег
.
Box-sizing
box-sizing
с content-box
на border-box
. Это гарантирует, что padding
не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine. .selector-for-some-widget {
box-sizing: контент-бокс;
}
::before
и ::after
, наследуют указанный box-sizing
для этого .selector-for-some-widget
. Перезагрузка
irc.libera.chat
, в канале #bootstrap
.