Сетка Bootstrap 3 — ИТ Шеф

В этой статье познакомимся с классами фреймворка Bootstrap 3, предназначенными для создания адаптивного «скелета» (макета) сайта.

Сетка Bootstrap состоит из «строительных» элементов. Основные — это обёрточные контейнеры, ряды, адаптивные блоки и отзывчивые служебные классы.

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

Обёрточные контейнеры

Обёрточный контейнер — это «строительный» элемент сетки, с которого начинается создание макета для всей страницы или её части (например, шапки, основного меню, основной области, футера) в зависимости от стратегии разработки.

Контейнер в Bootstrap бывает адаптивно-фиксированным или адаптивно-резиновым.

Первый (адаптивно-фиксированный контейнер) характеризуется тем, что он имеет постоянную ширину в пределах некоторого диапазона ширины viewport (области просмотра).

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

Кроме установки ширины адаптивно-фиксированный контейнер 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. Поместите один из следующих

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

 

  ...

 

 .selector-for-some-widget {
  box-sizing: контент-бокс;
}