Компонент Раздел 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(/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>