# 圓點導航 創建水平或垂直布局的圓點導航，通過幻燈片或者滾動的方式導航到頁面的不同部分。 ## 用法 創建帶有圓點的導航，只需要添加 `.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> ```