Разделы

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

Компонент служит для создания разделов с различными стилями, таких как новости, контакты, главы, преимущества и так далее. Если в хотите применить стиль раздела к тегу <section>, учтите, что по стандарту W3C в теге <section>обязательно должен присутствовать заголовок любого уровня. Вложение одного раздела в другой допускается.

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

Для начала работы с компонентом добавьте класс .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>

  • Стиль по умолчанию

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Приглушенный стиль

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Основной стиль

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Дополнительный стиль

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Раздел с фоновым изображением

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

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

<div class="uk-section uk-section-primary uk-light">
    <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 class="uk-section uk-section-secondary uk-light">
    <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 class="uk-section-default">
    <div class="uk-section uk-light uk-background-cover" style="background-image: url(images/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>

Сохранение цвета

Классы .uk-section-primary and .uk-section-secondary автоматически расширяют стиль, обратный компоненту Инверсия. Если вы хотите предотвратить такое поведение, например, потому что вы используете карточки в этих разделах, добавьте класс .uk-preserve-color.

<div class="uk-section uk-section-primary uk-preserve-color"></div>

  • Основной стиль раздела с компонентом Карточки

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

  • <div class="uk-section uk-section-primary uk-preserve-color">
    <div class="uk-container">

        <div class="uk-panel uk-light uk-margin-medium">
            <h3>Основной стиль раздела с компонентом Карточки</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 для удаления отступов.

  • Раздел с увеличенными отступами

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

    Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

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

Модификатор перекрытия

Некоторые темы UIkit 3 используют более продвинутые стили, включющие текстурированные фоны и границы. В этом случае вы можете добавить класс .uk-section-overlap, применить изображение границы и отрицательное смещение к следующему разделу. Обратите внимание, что это работает только в том случае, если есть в макете есть последующие разделы.

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