章节

创建具有不同背景颜色和样式的水平布局部分。

用法

章节用于将页面的内容分隔成不同样式的块。要应用此组件，只需将 .uk-section 类添加到容器元素。您可以放置来自容器组件的容器来修改章节内部内容的宽度并添加水平填充。请注意，嵌套容器的填充将被重置。

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

默认情况下，章节是空白的。这就是为什么添加样式修饰符类非常重要的原因。在我们的示例中，我们正在使用 .uk-section-muted 类。通常，章节是页面的最外层元素，因此此示例并不能完全反映此组件的实际用法。

章节

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

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

        <h3>Section</h3>

        <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</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>

默认章节

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

柔和章节

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

主要章节

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

辅助章节

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

带有图像的章节

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>

    </div>
</div>

<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</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>Section with Images</h3>

            <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>

        </div>
    </div>
</div>

保留颜色

.uk-section-primary 和 .uk-section-secondary 类会自动扩展来自反色组件的反色样式。如果您想阻止此行为，例如因为您在这些章节中使用卡片，请添加 .uk-preserve-color 类。

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

带有卡片的主要章节

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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

        <div class="uk-panel uk-light uk-margin-medium">
            <h3>Section Primary with cards</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>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
            <div>
                <div class="uk-card uk-card-default uk-card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>

    </div>
</div>

尺寸修饰符

您可以为每个章节添加不同的填充，或完全删除它。

类	描述
`.uk-section-xsmall`	添加此类以将章节的填充减小到最小。
`.uk-section-small`	添加此类以减小章节的填充。
`.uk-section-large`	添加此类以增加章节的填充。
`.uk-section-xlarge`	添加此类以进一步增加章节的填充。
`.uk-padding-remove-vertical`	从内边距组件添加此类以删除章节的填充。

大型章节

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </div>
    </div>
</div>

重叠修饰符

一些 UIkit 主题使用更丰富的样式，包括纹理背景和边框。在这种情况下，您可以添加 .uk-section-overlap 类，以将边框图像和负偏移应用于以下章节。请注意，这仅在实现该功能的样式中有效，如果存在后续章节。

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

文档

章节

用法

章节

样式修饰符

默认章节

柔和章节

主要章节

辅助章节

带有图像的章节

保留颜色

带有卡片的主要章节

尺寸修饰符

大型章节

重叠修饰符