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