圆点导航
最后更新于：2022-04-01 22:22:57
# 圆点导航
创建水平或垂直布局的圆点导航，通过幻灯片或者滚动的方式导航到页面的不同部分。
## 用法
创建带有圆点的导航，只需要添加 `.uk-dotnav` 类到 `<ul>` 元素中，再将 `<a>` 元素嵌套进列表即可。于是，完美地创建咯一个典型的幻灯片导航。这个组件使用Flex进行构建，所以，你可以使用 [Flex](flex.html) 调整圆点导航。注意 使用此组件需要额外添加 `dotnav.css` 文件，在`css/components`文件夹中。
### Example
### Markup
```
```
* * *
## 圆点导航与图片
为了能在图片上有更好的可见性，比如使用圆点导航作为幻灯片的导航时，只需要添加 `.uk-dotnav-contrast` 类。
### Example
注意 在这个例子中，我们还用了[Flex 组件](flex.html) 中的`.uk-flex-center`类来居中圆点导航。
### Markup
```
```
* * *
## 垂直的圆点导航
圆点导航可以垂直对齐。只需添加 `.uk-flex-column` 类即可。这对于使用 [滚动监听](scrollspy.html) 进行页面滚动导航是非常有用的。
### Example
### Markup
```
```
';