缩略图导航/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>