选项卡Tab

<div class="tab">
    <ul class="nav">
        <li>Clothing</li>
        <li>Accessories</li>
        <li>Electronics</li>
    </ul>
    <ul class="content">
        <li>
            <p>Content A</p>
        </li>
        <li>
            <p>Content B</p>
        </li>
        <li>
            <p>Content C</p>
        </li>
    </ul>
</div>

填充Grow

添加class="grow"使导航项自动均分剩余空间

<div class="tab grow">
    ...
</div>

垂直排列Vertical

添加class="left"转换为垂直左侧排列，添加class="right"转换为垂直右侧排列

Left:
<div class="tab left">              
    ...
</div>
Right:
<div class="tab right">      
    ...
</div>

激活与禁用Active and Disabled

为导航项<li>元素添加class="active"使其默认是显示的，添加class="disabled"转换为禁用项

<div class="tab">
    <ul class="nav">
        <li>Clothing</li>
        <li class="active">Accessories</li>
        <li class="disabled">Electronics</li>
    </ul>
    <ul class="content">
        <li>
            <p>Content A</p>
        </li>
        <li>
            <p>Content B</p>
        </li>
        <li>
            <p>Content C</p>
        </li>
    </ul>
</div>

移动选项Move Item

在内容项中添加data-move-item属性的元素会触发移动至设定项

<div class="tab">
    <ul class="nav">
        <li>Clothing</li>
        <li>Accessories</li>
        <li>Electronics</li>
    </ul>
    <ul class="content">
        <li>
            <p>Content A</p>
            <button type="button" class="btn xs" data-move-item="first">First</button>
            <button type="button" class="btn xs" data-move-item="prev">Prev</button>
            <button type="button" class="btn xs" data-move-item="next">Next</button>
            <button type="button" class="btn xs" data-move-item="last">Last</button>
        </li>
        <li>
            <p>Content B</p>
            <button type="button" class="btn xs" data-move-item="first">First</button>
            <button type="button" class="btn xs" data-move-item="prev">Prev</button>
            <button type="button" class="btn xs" data-move-item="next">Next</button>
            <button type="button" class="btn xs" data-move-item="last">Last</button>
        </li>
        <li>
            <p>Content C</p>
            <button type="button" class="btn xs" data-move-item="first">First</button>
            <button type="button" class="btn xs" data-move-item="prev">Prev</button>
            <button type="button" class="btn xs" data-move-item="next">Next</button>
            <button type="button" class="btn xs" data-move-item="last">Last</button>
        </li>
    </ul>
</div>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

<div class="tab mystyle">
    ...
</div>
<div class="tab left mystyle">
    ...
</div>