块/Block
最后更新于:2022-04-01 22:21:18
# 块/Block
通过将内容片段打包成拥有不同样式的块来分割内容。
## 用法
只需要为容器元素添加 `.uk-block` 类,就能使用这个组件了。
### Example

### Markup
```
';
...
```
* * *
## 修饰
使用不同的背景颜色和 padding ,添加以下类中的一个就行了。当两个连续的块拥有相同的背景色时,padding 会自动被分开。
| Class | 描述 |
| --- | --- |
| `.uk-block-default` | 添加默认的背景色彩,通常是白色或类似的颜色。 |
| `.uk-block-muted` | 添加亮背景色。 |
| `.uk-block-primary` | 添加表示着重的背景色。 |
| `.uk-block-secondary` | 添加另一种背景色,通常是暗色。 |
注意 为了在有色的块中恰到好处地显示色彩、border和其他元素,你可能需要使用[对比度组件](contrast.html)中的 `.uk-contrast` 类。
### Example

### Markup
```
...
```
* * *
## Padding
为块添加较大的 padding ,只需添加一个 `.uk-block-large` 类。你还可以使用[效果组件](utility.html#padding)中的 `.uk-padding-*` 类,来设置块中 padding 。
### Example

### Markup
```
...
```