區塊
建立具有不同背景顏色和樣式的水平佈局區塊。
使用方法
區塊用於將頁面的內容分隔成不同樣式的區塊。要套用此元件，只需將 .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>