Компонент Раздел

Разделы макета с различными фонами и стилями. Создание горизонтальных разделов (секций) макета с применением внутренних отступов.

Section: Разметка. Использование

Разделы используются для разделения содержимого страницы на блоки с использованием разных стилей. Чтобы применить этот компонент фреймворка UIkit 3, просто добавьте класс .uk-section к элементу контейнера. Вы можете разместить контейнер из компонента Контейнер, чтобы изменить ширину содержимого внутри разделов и добавить горизонтальные отступы внурти. Обратите внимание, что внутренние отступы вложенного контейнера в контейнер будут сброшены.

<div class="uk-section">
    <div class="uk-container"></div>
</div>

По умолчанию раздел пуст. Вот почему важно добавить класс-модификатор для стиля. В примере ниже используется класс .uk-section-muted.
Обычно раздел является самым внешним элементом страницы, поэтому этот пример не совсем отражает реалистичное использование этого компонента.

Раздел

Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад.

По дороге встретил текст рукопись. Она предупредила его: «В моей стране все переписывается по несколько раз.

Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну».

<div class="uk-section uk-section-muted">
    <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>

Модификатор «Стиль»

Чтобы применить разные цветные фоны и внутренние отступы, добавьте один из следующих классов.

Класс	Описание
`.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(images/dark.webp)">
        <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>