Блок
Содержание отдельных разделов за счет объединения их в блоки с разными стилями.
Использование
Для установки этого компонента, просто добавьте .uk-block
класс элемента-контейнера.
Пример
Блок
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Разметки
<div class="uk-block">...</div>
Модификаторы
Применить различные цвета фона и отступы, добавьте один из следующих классов. Если два последовательных блоков имеют одинаковый Цвет фона, внутренний отступ автоматически быть разделены.
Класс | Описание |
---|---|
.uk-block-default |
Установка цвета фона по умолчанию, обычно белый или похожие. |
.uk-block-muted |
Добавляет легкий Цвет фона. |
.uk-block-primary |
Добавляет основного цвета фона. |
.uk-block-secondary |
Добавляет другой цвет фона, обычно темного цвета. |
Примечание, чтобы правильно отображать цвета, границы и другие элементы на цветные блоки, возможно, вы захотите применить .uk-contrast
класс Контраст компонент.
Пример
Первичный
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Разметки
<div class="uk-block uk-block-primary">...</div>
Внутренний отступ
Чтобы увеличить внутренний отступ у блока, просто добавьте .uk-block-large
класс. Вы можете также удалить внутренний отступ блока, используя один из .uk-padding-*
классов компонента Утилиты.
Пример
Большие
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Разметки
<div class="uk-block uk-block-large">...</div>