部分
创建具有不同背景颜色和样式的水平布局部分。
用法
部分用于将页面内容分成不同样式的块。要应用此组件，只需将 .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.
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>
样式修改器
要应用不同的背景颜色和填充，请添加以下类之一。
| 类 | 描述 |
|---|---|
.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.
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.
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>带有卡片的主要部分
<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.
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 类，以将边框图像和负偏移应用于后续部分。请注意，这仅在实现此功能的样式中有效，如果存在后续部分。
<div class="uk-section uk-section-overlap"></div>