Компонент Раздел Section
Разделы макета с различными фонами и стилями. Создание горизонтальных разделов (секций) макета с применением внутренних отступов.
Создание разметки
Разметка. Использование
Разделы используются для разделения содержимого страницы на блоки с использованием разных стилей.
Чтобы применить этот компонент фреймворка UIkit 3, просто добавьте класс .uk-section
к элементу контейнера.
Вы можете разместить контейнер из компонента Контейнер,
чтобы изменить ширину содержимого внутри разделов и добавить горизонтальные отступы внурти.
Обратите внимание, что внутренние отступы вложенного контейнера в контейнер будут сброшены.
<div class="uk-section">
<div class="uk-container"></div>
</div>
По умолчанию раздел пуст. Вот почему важно добавить класс-модификатор для стиля.
В примере ниже используется класс .uk-section-muted
.
Модификатор «Стиль»
Чтобы применить разные цветные фоны и внутренние отступы, добавьте один из следующих классов.
Класс | Описание |
---|---|
.uk-section-default |
Добавляет цвет фона по умолчанию. |
.uk-section-muted |
Добавляет приглушенный цвет фона. |
.uk-section-primary |
Добавляет основной цвет фона. |
.uk-section-secondary |
Добавляет вспомогательный цвет фона. |
<div class="uk-section uk-section-primary"></div>
-
Раздел : Section Default
При этом мы помещаем себя в одном из заключительных пунктов развития, несомненно.
Справедливость требует сказать, что недостаточно здесь брать интеллект, даже в целом.
И если мой брат не похож на вас, то по крайней мере он знает, что любим. Твоему совершенно не хотелось.
Раздел : Section Muted
Точно так же можно сказать, что каждое действие выполняет какое-нибудь намерение.
Это не значит, что свободное действие есть действие прихотливое и неразумное.
Поэтому в известном смысле можно смело сказать, что мы все рождаемся платониками.
-
<div class="uk-section uk-section-default"> <div class="uk-container"> <h3>Раздел : Section Default</h3> <div class="uk-grid-match uk-child-width-1-3@m" uk-grid> <div> <p>При этом мы помещаем себя в одном из заключительных пунктов развития, несомненно.</p> </div> <div> <p>Справедливость требует сказать, что недостаточно здесь брать интеллект, даже в целом.</p> </div> <div> <p>И если мой брат не похож на вас, то по крайней мере он знает, что любим. Твоему совершенно не хотелось.</p> </div> </div> </div> </div> <div class="uk-section uk-section-muted"> <div class="uk-container"> <h3>Раздел : Section Muted</h3> <div class="uk-grid-match uk-child-width-1-3@m" uk-grid> <div> <p>Точно так же можно сказать, что каждое действие выполняет какое-нибудь намерение.</p> </div> <div> <p>Это не значит, что свободное действие есть действие прихотливое и неразумное.</p> </div> <div> <p>Поэтому в известном смысле можно смело сказать, что мы все рождаемся платониками.</p> </div> </div> </div> </div>
-
Раздел : Section Primary
Таким образом, человеческое сознание, поскольку оно сообразуется с требованиями действия.
Понятно поэтому, что после проведенная цель очень близка. Но капризы богачей необъяснимы.
Концентрируясь таким образом на повторяющемся, занимаясь только соединением следствий.
Раздел : Section Secondary
Изучение фактов показывает с таким же успехом как раз обратное.
Эти положения, в сущности, разрушают прежнюю концепцию конечных целей.
Все его элементы, говорят нам, участвуют в достижении наибольшего блага целого.
-
<div class="uk-section uk-section-primary uk-light"> <div class="uk-container"> <h3>Раздел : Section Primary</h3> <div class="uk-grid-match uk-child-width-1-3@m" uk-grid> <div> <p>Таким образом, человеческое сознание, поскольку оно сообразуется с требованиями действия.</p> </div> <div> <p>Понятно поэтому, что после проведенная цель очень близка. Но капризы богачей необъяснимы.</p> </div> <div> <p>Концентрируясь таким образом на повторяющемся, занимаясь только соединением следствий.</p> </div> </div> </div> </div> <div class="uk-section uk-section-secondary uk-light"> <div class="uk-container"> <h3>Раздел : Section Secondary</h3> <div class="uk-grid-match uk-child-width-1-3@m" uk-grid> <div> <p>Изучение фактов показывает с таким же успехом как раз обратное.</p> </div> <div> <p>Эти положения, в сущности, разрушают прежнюю концепцию конечных целей.</p> </div> <div> <p>Все его элементы, говорят нам, участвуют в достижении наибольшего блага целого.</p> </div> </div> </div> </div>
-
Раздел с фоновым изображением
Мы изложили, однако, теоретические доводы, не позволяющие нам объединять.
Мы не согласны также, что эволюционная гипотеза явно приводит к воззрению на жизнь.
Мы сказали, что механические объяснения пригодны для систем, которые целого.
-
<div class="uk-section-default"> <div class="uk-section uk-light uk-background-cover" style="background-image: url(/demo/img/dark.jpg)"> <div class="uk-container"> <h3>Раздел с фоновым изображением</h3> <div class="uk-grid-match uk-child-width-1-3@m" uk-grid> <div> <p>Мы изложили, однако, теоретические доводы, не позволяющие нам объединять.</p> </div> <div> <p>Мы не согласны также, что эволюционная гипотеза явно приводит к воззрению на жизнь.</p> </div> <div> <p>Мы сказали, что механические объяснения пригодны для систем, которые целого.</p> </div> </div> </div> </div> </div>
Preserve color
Классы .uk-section-primary
и .uk-section-secondary
автоматически инвертируют стиль,
подобно компоненту Инверсия. Если вы хотите предотвратить такое поведение, например,
потому что вы используете карты в этих разделах, добавьте класс .uk-preserve-color
.
<div class="uk-section uk-section-primary uk-preserve-color"></div>
-
Раздел Primary с карточками
-
<div class="uk-section uk-section-primary uk-preserve-color"> <div class="uk-container"> <div class="uk-panel uk-light uk-margin-medium"> <h3>Раздел <span data-as-qw>Primary</span> с карточками</h3> </div> <div class="uk-grid-match uk-child-width-expand@m" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body"> <p>Единственный вопрос состоит в том, должны системы.</p> </div> </div> <div> <div class="uk-card uk-card-default uk-card-body"> <p>Такое целое должно быть, по нашему мнению, нераздельно.</p> </div> </div> </div> </div> </div>
Модификатор «Размер»
Вы можете добавить различные внутренние отступы к каждому созданному разделу или удалить их полностью.
Класс | Описание |
---|---|
.uk-section-xsmall |
Добавьте этот класс, чтобы уменьшить до минимума внутренние отступы раздела. |
.uk-section-small |
Добавьте этот класс, чтобы уменьшить внутренние отступы раздела. |
.uk-section-large |
Добавьте этот класс, чтобы увеличить внутренние отступы раздела. |
.uk-section-xlarge |
Добавьте этот класс, чтобы сильно увеличить внутренние отступы раздела. |
.uk-padding-remove-vertical |
Добавьте этот класс из компонента Padding, чтобы удалить внутренние отступы раздела. |
-
Раздел : Section Large
В свою очередь ты можешь предложить мне молодость, стройность и шелковистость твоего тела.
Подсознательно ты чувствуешь, что секс между нами будет просто феерическим.
Если ты этого не сделаешь, я запущу скандальную информацию в газеты и буду со стороны наблюдать.
-
<div class="uk-section uk-section-large uk-section-muted"> <div class="uk-container"> <h3>Раздел : Section Large</h3> <div class="uk-grid-match uk-child-width-1-3@m" uk-grid> <div> <p> В свою очередь ты можешь предложить мне молодость, стройность и шелковистость твоего тела.</p> </div> <div> <p>Подсознательно ты чувствуешь, что секс между нами будет просто феерическим.</p> </div> <div> <p>Если ты этого не сделаешь, я запущу скандальную информацию в газеты и буду со стороны наблюдать.</p> </div> </div> </div> </div>
Модификатор «Overlap»
Некоторые темы UIkit используют более расширенные стили, включая текстурированный фон и границы (borders).
В этом случае вы можете добавить класс .uk-section-overlap
,
чтобы применить изображение границы и отрицательное смещение к следующему разделу.
Обратите внимание, это работает только в стилях реализующих эту функцию, а также, если присутствуют последующие разделы.
<div class="uk-section uk-section-overlap"></div>