Bootstrap 4 классы: Шпаргалка по Bootstrap 4 — список классов Bootstrap

Классы 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 имеет значение

1rem. Т.е. значения величин отступов меняются от 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, а уже класс добавит горизонтальные

margin со значением 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 или, возможно, загружают их в обратном порядке, используя

. flex-column-reverse

Вот как именно используются инфиксы уровней сетки — например, чтобы сложить .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 — довольно эффективно для удобочитаемости — и расширение всех элементов по высоте, чтобы они соответствовали уровню контейнера, или, другими словами, — стать такими же высокими, как самый высокий — достигается с помощью

.align-items -stretch — очень полезно, например, для карточек с деталями, изменяющимися в размерах описаний.

Каждая из указанных утилит flexbox уже поддерживает независимые инфиксы уровней сетки — вставляйте их прямо перед последним словом сопоставимых классов — точно так же, как .