Question

通过将内容片段打包成拥有不同样式的块来分割内容。

用法

只需要为容器元素添加 .uk-block 类，就能使用这个组件了。

Example

Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Markup

<div class="uk-block">...</div>

---

修饰

使用不同的背景颜色和 padding ，添加以下类中的一个就行了。当两个连续的块拥有相同的背景色时，padding 会自动被分开。

Class	描述
.uk-block-default	添加默认的背景色彩，通常是白色或类似的颜色。
.uk-block-muted	添加亮背景色。
.uk-block-primary	添加表示着重的背景色。
.uk-block-secondary	添加另一种背景色，通常是暗色。

注意 为了在有色的块中恰到好处地显示色彩、border和其他元素，你可能需要使用对比度组件中的 .uk-contrast 类。

Example

Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Markup

<div class="uk-block uk-block-primary">...</div>

---

Padding

为块添加较大的 padding ，只需添加一个 .uk-block-large 类。你还可以使用效果组件中的 .uk-padding-* 类，来设置块中 padding 。

Example

Large

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Markup

<div class="uk-block uk-block-large">...</div>