UIkit3.x文档

区段

创建具有各种背景颜色和样式的水平布局的section区段。

用法

区段用于将页面内容分拆到各种样式的块中。要应用此组件，只需将.uk-section添加到容器元素。可以使用Container 组件 添加容器来调整区段内内容的宽度并添加水平方向的padding。注意，嵌套容器的padding会被重置。

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

默认情况下，区段是空白的。所以必须为它添加一个样式修饰。在下方示例中我们使用.uk-section-muted class。通常section是页面的最外层元素，因此下面示例的并不能完整展示区段组件的实际用法。

  • Section

    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-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>

样式修饰

使用以下class为区段应用各种背景颜色和padding。

Class Description
.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.

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

    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.

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

    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.

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

    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.

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

    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.

    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(/skin/ukv3/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 这两个 class 自动地扩展了Inverse 组件 的反相样式。如果要防止这种情况发生（例如在区段中使用了 卡片），请添加.uk-preserve-color class。

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

  • Section Primary with cards

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    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>

尺寸修改

您可以为每个区段添加不同大小的padding或将padding全部移除。

Class Description
.uk-section-xsmall 将区段的 padding 缩到最小
.uk-section-small 将区段的 padding 缩小一些
.uk-section-large 将区段的 padding 增大
.uk-section-xlarge 将区段的 padding 增大更多
.uk-padding-remove-vertical 来源于Padding 组件 ，可以移除区段的padding。

  • Section Large

    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-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 class在区段上应用边框图片，，并且在下一个区段上应用负偏移量。注意这只能在该区段后面还有其他区段时才能实现此特性。

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