块/Block

最后更新于:2022-04-01 22:21:18

# 块/Block 通过将内容片段打包成拥有不同样式的块来分割内容。 ## 用法 只需要为容器元素添加 `.uk-block` 类,就能使用这个组件了。 ### Example ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f2a40f80.jpg) ### Markup ```
...
``` * * * ## 修饰 使用不同的背景颜色和 padding ,添加以下类中的一个就行了。当两个连续的块拥有相同的背景色时,padding 会自动被分开。 | Class | 描述 | | --- | --- | | `.uk-block-default` | 添加默认的背景色彩,通常是白色或类似的颜色。 | | `.uk-block-muted` | 添加亮背景色。 | | `.uk-block-primary` | 添加表示着重的背景色。 | | `.uk-block-secondary` | 添加另一种背景色,通常是暗色。 | 注意 为了在有色的块中恰到好处地显示色彩、border和其他元素,你可能需要使用[对比度组件](contrast.html)中的 `.uk-contrast` 类。 ### Example ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f2a57f51.jpg) ### Markup ```
...
``` * * * ## Padding 为块添加较大的 padding ,只需添加一个 `.uk-block-large` 类。你还可以使用[效果组件](utility.html#padding)中的 `.uk-padding-*` 类,来设置块中 padding 。 ### Example ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f2a6bba1.jpg) ### Markup ```
...
```
';