Section

创建带有不同背景色和样式的水平布局区块。

用法

Section 用于把页面内容分隔成样式各异的区块。要应用该组件，只需为容器元素添加 .uk-section 类。你可以把 Container 组件中的容器放进去，以调整区块内内容的宽度并添加水平内边距。请注意，嵌套容器的内边距会被重置。

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

默认情况下，一个区块是空白的。这就是为什么添加用于设定样式的修饰符类很重要。在我们的示例中使用了 .uk-section-muted 类。通常区块是页面最外层的元素，所以这个示例并不能完全反映该组件的实际用法。

Section

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>

Section Default

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

Section Muted

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

Section Primary

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

Section Secondary

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

Section with Images

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 类会自动继承 Inverse 组件的反色样式。如果你想阻止这一行为，例如因为你在这些区块中使用了卡片，请添加 .uk-preserve-color 类。

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

Section Primary with cards

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`	添加 Padding 组件中的该类可去掉区块的内边距。

添加下面这些类中的某一个，可以只修改某一个方向上的内边距。

类	说明
`.uk-section-xsmall-top`	添加超小尺寸的上内边距。
`.uk-section-xsmall-bottom`	添加超小尺寸的下内边距。
`.uk-section-small-top`	添加小尺寸的上内边距。
`.uk-section-small-bottom`	添加小尺寸的下内边距。
`.uk-section-medium-top`	添加中等尺寸的上内边距。
`.uk-section-medium-bottom`	添加中等尺寸的下内边距。
`.uk-section-large-top`	添加大尺寸的上内边距。
`.uk-section-large-bottom`	添加大尺寸的下内边距。

Section Large

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>

文档

Section

用法

Section

样式修饰符

Section Default

Section Muted

Section Primary

Section Secondary

Section with Images

保留颜色

Section Primary with cards

尺寸修饰符

Section Large

重叠修饰符