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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *