步骤导航

在主导航的基础上叠加.nav-step即显示为步骤导航。

基本样式

    <ul class="nav nav-step">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

数字显示

    <ul class="nav nav-step">
      <li class="active" title="1"><a href="javascript:;">第1步</a></li>
      <li class="active" title="2"><a href="javascript:;">第2步</a></li>
      <li title="3"><a href="javascript:;">第3步</a></li>
      <li title="4"><a href="javascript:;">第4步</a></li>
    </ul>

颜色设置

    <ul class="nav nav-step nav-block text-dark">
      <li class="active text-danger" title="1"><a href="javascript:;">第1步</a></li>
      <li class="active text-danger" title="2"><a href="javascript:;">第2步</a></li>
      <li title="3"><a href="javascript:;">第3步</a></li>
      <li title="4"><a href="javascript:;">第4步</a></li>
    </ul>