缩略图导航/Thumbnav

创建可以使用 Flex 进行对齐的弹性缩略图导航。

用法

要使用这个组件的话，就这样做，添加 .uk-thumbnav 类到一个 <ul> 元素，然后将缩略图嵌套在列表条目内部的 <a> 元素中。如果缩略图导航比它的容器宽，并且使用了排水沟（gutter）时，添加 .uk-active 类创建active状态。

要对齐子导航的话，比如使它水平居中，你可以使用 Flex。

Example

Markup

<ul class="uk-thumbnav">
    <li class="uk-active"><a href=""><img src="" alt=""></a></li>
    <li><a href=""><img src="" alt=""></a></li>
</ul>

缩略图导航与网格

你可以使用 网格组件 中的 .uk-grid-width-* 类来实现在同一行中均匀地容纳缩略图导航条目。

Example

Markup

<ul class="uk-thumbnav uk-grid-width-1-5">
    <li>...</li>
</ul>