Классы Bootstrap 4 для управления отступами
Вы здесь: Главная » Bootstrap » Классы Bootstrap 4 для управления отступами
08.01.2018 От Админ 3 комментария
В 4-й версии Bootstrap разработчики решили создать ряд классов, которые позволяют увеличивать внутренний (padding
) и внешний (margin
) отступ для блочных (display: block
) или строчно-блочных элементов (display: inline-block
).
Эти классы получили название «утилит расстояния» (Spacing utilities) и позволяют изменять отступы в пределах от .25rem до 3rem. Классы для управления отступами позволяют назначить их как по вертикальным, так и по горизонтальным сторонам. Их названия тесно связаны с соответствующими css-свойствами, а именно начинаются с буквы:
m
— для классов, устанавливающихmargin
p
— для классов, устанавливающихpadding
Также можно управлять сторонами, к которым будет применен отступ:
t
— для классов, устанавливающихmargin-top
илиpadding-top
b
— для классов, устанавливающихmargin-bottom
илиpadding-bottom
l
— для классов, устанавливающихmargin-left
илиpadding-left
r
— для классов, устанавливающихmargin-right
илиpadding-right
x
— для классов, устанавливающих и*-left
, и*-right
y
— для классов, устанавливающих оба значения: и*-top
, и*-bottom
- без буквы — для классов, устанавливающих
margin
илиpadding
для всех 4-х сторон элемента
Значение величин отступов:
0
— для классов, которые убираютmargin
илиpadding
, устанавливая их значение в0
1
— (по умолчанию) для классов, устанавливающихmargin
илиpadding
в значение, равное$spacer * . 25
2
— (по умолчанию) для классов, устанавливающихmargin
илиpadding
в значение, равное$spacer * .5
3
— (по умолчанию) для классов, устанавливающихmargin
илиpadding
в значение, равное$spacer
4
— (по умолчанию) для классов, устанавливающихmargin
илиpadding
в значение, равное$spacer * 1.5
5
— (по умолчанию) для классов, устанавливающихmargin
илиpadding
в значение, равное$spacer * 3
auto
— для классов, устанавливающихmargin
в значение auto
По умолчанию, переменная $spacer
имеет значение
. Т.е. значения величин отступов меняются от 0.25rem до 3rem с шагом, который увеличивает предыдущее значение вдвое. Подразумевается, что используется стандартный шрифт размером в 16px. Соответственно, отступы имеют значения от 4px до 48px.
Вы можете добавить больше величин, если добавите новые значения в карту SASS (Sass map) для переменной $spacers
.
Следует отметить, что классы отступов предполагают еще указание классов адаптивной сетки (-md-, -sm-, -lg-, -xl-
) для того, чтобы отступы в элементах существовали только для определенных разрешений экранов. Например, необходимо добавить отступ снизу только для экранов смартфонов, но убрать его на всех остальных разрешениях экранов:
<div> … </div>
<div> … </div> |
Если нужно добавить внутренний отступ на небольших экранах, можно использовать такой код:
<div> … </div>
<div> … </div> |
Правило использования названий классов здесь такое: формат {property}{sides}-{size}
для смартфонов (xs
) и {property}{sides}-{breakpoint}-{size}
для других разрешений ( sm
, md
, lg
и xl
).
Горизонтальное выравнивание
Также в Bootstrap 4 существует класс .mx-auto
для горизонтального выравнивания блочных элементов с установленной для них фиксированной шириной. Это значит, что для элемента должны быть записаны такие css-свойства:display: block
и width
, а уже класс добавит горизонтальные
со значением auto
.
Пример использования классов для внутренних отступов
Внутренний отступ — это padding
, поэтому все классы начинаются с английской буквы p
.
See the Pen Bootstrap 4 Padding Classes by Elen (@ambassador) on CodePen.18892
Пример использования классов для внешних отступов
Внутренний отступ — это margin
, поэтому все классы начинаются с английской буквы m
. в нижней части примера размещены классы, в которых одна или 2 стороны имеют margin: auto
.
See the Pen Bootstrap 4 Margin Classes by Elen (@ambassador) on CodePen.18892
Ссылка на документацию Bootstrap 4.
Возможно, вам еще будут интересны утилиты Bootstrap для скрытия/отображения элементов на разных экранах.
Просмотров: 4 541
Метки: Bootstrap-4 margin padding
Автор: Админ
Видео курс Bootstrap 4. Утилиты Bootstrap 4 Служебные классы
- Главная > org/ListItem»> Каталог >
- Bootstrap 4 >
- Утилиты Bootstrap 4 Служебные классы
Для прохождения теста нужно авторизироваться
Войти Регистрация
×
Вы открыли доступ к тесту! Пройти тест
Для просмотра полной версии видеокурса, онлайн тестирования и получения доступа к дополнительным учебным материалам купите курс Купить курс
Для просмотра всех видеокурсов ITVDN, представленных в Каталоге, а также для получения доступа к учебным материалам и онлайн тестированию купите подписку Купить подписку
№1
Знакомство с Bootstrap 4
0:42:01
Материалы урокаДомашние заданияТестирование
В первом видео уроке автор познакомит вас с Bootstrap 4: расскажет краткую историю, преимущества фреймворка и причины его востребованности. Дополнительно вы узнаете, какие компоненты в себя включает Bootstrap.
Читать дальше…
Типографика Bootstrap 4
0:35:17
Материалы урокаДомашние заданияТестирование
Типография, глобальные настройки, заголовки, основной текст, списки. Встроенный код, Блоки кода, переменные. Картинка, форматирование картинок. Таблицы, стили таблиц. Фигуры.
Читать дальше…
Компоненты Bootstrap 4
1:25:42
Материалы урокаДомашние заданияТестирование
Ознакомиться со всеми компонентами Bootstrap 4, способы их применения и форматирования.
Читать дальше…
JavaScript Bootstrap 4
0:34:22
Материалы урокаДомашние заданияТестирование
Ознакомить обучающего использовать компоненты, ккоторые требую JavaScript.
Читать дальше…
Утилиты Bootstrap 4 Служебные классы
0:46:44
Материалы урокаДомашние заданияТестирование
Bootstrap использует несколько важных глобальных стилей и настроек, которые нужно знать при использовании, которые почти целиком ориентированы на нормализацию перекрестных типов браузера.
Читать дальше…
Следующий курс:
Видео курс JavaScript Базовый — видео курсы ITVDN
ПОКАЗАТЬ ВСЕ
основные темы, рассматриваемые на уроке
0:01:00
Границы
0:03:40
Свойство border-radius
0:04:42
Очищение
0:07:16
0:08:40
Отображение
0:13:08
flex-box
0:18:22
Свойство justify-content
0:24:04
Свойство align-items
0:28:54
Выравнивание элемента относительно его высоты
0:31:55
Свойство margin-auto
0:34:28
Порядок элементов
0:37:56
Размеры, позиционирование
0:40:06
Отступы
0:41:48
Форматирование текста
0:46:10
Резюме урока
ПОКАЗАТЬ ВСЕ
Регистрация через
✖или E-mail
Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.
Уже есть аккаунт
Получите курс бесплатно
✖Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.
РЕГИСТРАЦИЯ
Спасибо за регистрацию
✖Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN.com
ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ
Спасибо за регистрацию
✖Ваш аккаунт успешно подтвержден.
Начать обучение вы можете через Личный кабинет
пользователя или непосредственно на странице курса.
НАЧАТЬ ОБУЧЕНИЕ
Подтверждение аккаунта
На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.
Отправить код еще раз
Изменить номер телефона
Ошибка
✖Текстовые классы — Bootstrap — Simple Dev
Demo
Для лучшего просмотра нажмите кнопку «Редактировать на CodePen» в правом верхнем углу пера, чтобы открыть его в новой вкладке.
Резюме
Вы можете добавлять к своим элементам классы, которые изменяют внешний вид текста. Просмотрите демонстрацию, чтобы увидеть примеры всех классов.
Details
Классы заголовков
В Bootstrap 4 и 5 вы можете использовать h2
, h3
, h4
, h5
, h5
и h6
, чтобы любой элемент выглядел как заголовок.
Display
В Boostrap 4 и 5 вы можете использовать классы display-1
, display-2
, display-3
и display-4
. В Bootstrap 5 у вас также есть классы display-5
и display-6
.
Lead
В Bootstrap 4 и 5 вы можете использовать класс lead
, чтобы выделить элемент абзаца.
Выравнивание
В Bootstrap 4 вы можете использовать классы text-left
, text-center
и text-right
для выравнивания текста.
В v5 вы можете использовать классы text-start
, text-center
и text-end
.
Преобразование текста
В v4 и v5 вы можете использовать классы text-lowercase
, text-uppercase
, text-capitalize
для преобразования текста.
Размер шрифта
В v5 вы можете использовать классы fs-1
, fs-2
, fs-3
, fs-4
, fs-5
и fs-6
для изменения шрифта. размер элемента. Эти классы изменяют только размер шрифта, тогда как приведенные выше классы заголовков изменяют свойства font-size, font-weight и line-height.
Высота строки
В v5 вы можете использовать классы lh-1
, lh-sm
, lh-base
и lh-lg
для изменения высоты строки в элементе.
Толщина и стиль шрифта
В v4 вы можете использовать шрифт насыщенность полужирный
, насыщенность шрифта полужирный
, толщину шрифта нормальный
, толщину шрифта
и шрифт -weight-lighter
классов для управления весом шрифта. Вы можете использовать класс font-italic
, чтобы изменить стиль шрифта.
В v5 вы можете использовать fw-bold
, fw-bolder
, fw-normal
, fw-light
и fw-lighter
, чтобы изменить толщину шрифта. Вы можете использовать классы fst-normal
и fst-italic
для изменения стиля шрифта.
Оформление текста
В v4 вы можете использовать класс text-decoration-none
для удаления подчеркивания элемента.
В v5 вы можете использовать классы text-decoration-underline
, text-decoration-line-through
и text-decoration-none
для изменения оформления текста.
Упражнения
Попробуйте воссоздать часть HTML-кода из демонстрационного раздела в файле index.html. Вам не нужно воссоздавать весь код.
Назад к: Справочник по Bootstrap > Классы утилит BootstrapКласс Bootstrap Row
Обзор
Как раз то, с чем справляются адаптивные фреймворки — они предоставляют нам полезную и функционирующую среду сетки для размещения контента, гарантируя, что если мы определим это правильно, и поэтому он будет выполнять свою работу и правильно отображаться на любом типе устройства, независимо от размера его дисплея. И так же, как и в конструкции, каждый фреймворк включает в себя один из самых известных в своей последней версии — фреймворк Bootstrap 4 — включает в себя всего несколько основных функций, которые правильно устанавливаются и сочетаются, что может помочь вам создать практически любой привлекательный внешний вид. в соответствии с вашим макетом и визуальным смыслом.
В Bootstrap, как правило, структура сетки создается тремя основными элементами, с которыми вы, скорее всего, сталкивались при изучении кода определенных веб-страниц — на самом деле это .container
и его собственная разновидность .container-fluid
. , элемент .row
и широкий спектр функций столбцов — все они имеют префикс класса .col-
— на самом деле это контейнеры, где — когда макет для определенного раздела наших веб-страниц фактически был разработано — мы можем влить реальный материал прямо в.
Если вы новичок во всем этом и в некоторых случаях можете задаться вопросом, какой метод был правильным, эти 3 должны быть применены в вашей разметке, вот простой метод — все, что вам нужно всегда помнить, это CRC — эта аббревиатура относится к Container— Row— Column. И поскольку вы быстро адаптируетесь, замечая столбцы, такие как самая внутренняя функция, это, безусловно, не изменится, вероятно, вы неправильно оцените, что представляют самая первая и последняя C.
Несколько слов о системе сетки в Bootstrap 4:
Режим сетки Bootstrap применяет набор строк, столбцов и контейнеров к макету, а также выпрямляет веб-контент. Он разработан с использованием flexbox и полностью адаптивен. Здесь приведен пример и подробная проверка того, как именно интегрируется сетка.
Вышеупомянутая ситуация создает три столбца одинаковой ширины на малых, средних, больших и очень больших гаджетах, работающих с нашими предопределенными классами сетки. Эти столбцы централизованы на странице с родительским .контейнер
.
Вот как это работает:
— Контейнеры предоставляют методы для центрирования элементов вашего веб-сайта. Нанесите .container
для концентрированной ширины или .container-fluid
для полной ширины.
— Строки — это горизонтальные группы столбцов, которые обеспечивают правильное выравнивание ваших столбцов. Мы работаем с методом отрицательного поля в отношении .row
, чтобы гарантировать, что весь ваш контент правильно выровнен по левой стороне.
— Контент должен быть вставлен в столбцы, а также только столбцы могут быть непосредственными дочерними элементами Bootstrap Row Class.
— из-за flexbox столбцы сетки без фиксированной ширины будут мгновенно форматироваться с использованием эквивалентной ширины. Например, четыре экземпляра
.col-sm
мгновенно будут иметь размер 25% для небольших точек останова.
— классы столбцов указывают на количество столбцов, которые необходимо применить, из возможных 12 в каждой строке. { Итак, предположим, что вам нужны три столбца одинаковой ширины, вы можете работать с .col-sm-4
.
— Ширина столбца
задается в процентах, поэтому они на самом деле регулярно меняются, а также имеют размер относительно своего родительского компонента.
— Столбцы имеют горизонтальный отступ
для создания промежутков внутри специальных столбцов, но вы можете убрать отступ
из строк плюс отступ
из столбцов с .no-gutters
в .row
.
— существует 5 уровней сетки, по одному для каждой точки останова: все точки останова (очень маленькие), маленькие, средние, огромные и очень большие.
— Уровни сетки строятся на минимальной ширине, что указывает на то, что они накладываются на этот один уровень плюс все те, что выше него (например, .col-sm-4
применяется к малым, средним, большим и очень большим устройствам).
— Вы можете использовать предопределенные классы сетки или миксины Sass для дополнительной семантической разметки.
Помните о проблемах и ошибках, связанных с flexbox, таких как невозможность использования некоторых функций HTML, таких как flex-контейнеры.
Хотя Контейнеры предоставляют нам фиксированный максимальный размер или расширяющееся от края до края горизонтальное пространство на дисплее с небольшими практичными отступами вокруг, а столбцы обеспечивают средства для доставки экранного пространства по горизонтали — еще раз с некоторыми отступами по конкретному контенту предоставив ему территорию, чтобы дышать, мы собираемся сосредоточить наше внимание на функции Bootstrap Row и всех удивительных методах, которые мы можем использовать для стилизации, настройки и распространения его содержимого, работая с блестящими новыми утилитами flexbox alpha 6. которые действительно являются некоторыми классами, чтобы предоставить .строка
элемент. И учитывая, что это просто адаптивная структура, мы говорим о том, что каждый из классов проектирования, которые мы собираемся изучить, может быть использован для определенного диапазона размеров экрана с инфиксами уровней сетки, такими как -sm-
, -md-
и так далее — мы ясно увидим, как это делается на следующем хорошем примере.
Эффективные способы работы с таблицей строк Bootstrap:
Утилиты Flexbox могут использоваться для составления структуры функций, расположенных в пределах .row
— вы можете легко создать всплывающее окно, расположенное горизонтально одно за другим, как обычно, с классом .flex-row
, изменить расположение, которое они появляются в разметке, с помощью .flex-row-reverse
, темп их накладывают друг на друга через класс .flex-column
или, возможно, загружают их в обратном порядке, используя
Вот как именно используются инфиксы уровней сетки — например, чтобы сложить .row
дочерние аспекты только на экранах большого размера и выше используют класс .flex-lg-column
— инфиксы всегда идут сразу после .flex-
части имени класса.
С утилитами flexbox, рассматриваемыми как .row
, может быть также достигнуто некоторое действительно полезное выравнивание — у вас также есть возможность выровнять все компоненты слева с .justify-content-start
или справа с . оправдать содержание-конец
классов flexbox, или же вы можете выбрать, чтобы поместить то, что находится в строке, в идеальную середину контейнера с классом .justify-content-center
. Дополнительными альтернативами является равномерное распределение свободного пространства между элементами или вокруг них с применением классов .justify-content между
и .justify-content-around
.
Это также относится к вертикальному размещению, которое в утилитах Bootstrap 4 flexbox было просто адресовано как .align-
компонент. Размещение всех элементов, выровненных по верхнему краю их компонента-контейнера, завершается с помощью .align-items-start
, назначенного .row
, обеспечивающего их, выравнивая их по самой нижней части — с использованием .align- items-end
, центрирование — с помощью .align-items-center
.
Дополнительными возможностями является согласование элементов по их базовым линиям. Класс .align-items-baseline
— довольно эффективно для удобочитаемости — и расширение всех элементов по высоте, чтобы они соответствовали уровню контейнера, или, другими словами, — стать такими же высокими, как самый высокий — достигается с помощью
— очень полезно, например, для карточек с деталями, изменяющимися в размерах описаний.
Каждая из указанных утилит flexbox уже поддерживает независимые инфиксы уровней сетки — вставляйте их прямо перед последним словом сопоставимых классов — точно так же, как .