跳转至: 导航, 搜索

“BootStrap Pill Nav”的版本间的差异

(Created page with " <div class="col-sm-12"> <ul class="nav nav-pills nav-tabs-lighter"> <li class="active">Home</li> <li>Another Title</li> <li>Another...")
 
 
第1行: 第1行:
 +
__NOTOC__
 +
      <div class="col-sm-12">
 +
        <ul class="nav nav-pills nav-tabs-lighter">
 +
          <li class="active">[[Home]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[lighter class]]</li>
 +
        </ul>
 +
      </div>
 +
        <div class="col-sm-12">
 +
        <ul class="nav nav-pills nav-tabs-light">
 +
          <li class="active">[[Home]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[light class]]</li>
 +
        </ul>
 +
      </div>
 +
        <div class="col-sm-12">
 +
        <ul class="nav nav-pills nav-tabs-dark">
 +
          <li class="active">[[Home]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[dark class]]</li>
 +
        </ul>
 +
      </div>
 +
        <div class="col-sm-12">
 +
        <ul class="nav nav-pills nav-tabs-darker">
 +
          <li class="active">[[Home]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[darker class]]</li>
 +
        </ul>
 +
      </div>
 +
        <div class="col-sm-12">
 +
        <ul class="nav nav-pills nav-tabs-neutral">
 +
          <li class="active">[[Home]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[neutral class]]</li>
 +
        </ul>
 +
      </div>
 +
        <div class="col-sm-12">
 +
        <ul class="nav nav-pills nav-tabs-default">
 +
          <li class="active">[[Home]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[Another Title]]</li>
 +
          <li>[[default class]]</li>
 +
        </ul>
 +
      </div>
 +
<div style="margin-bottom:2rem;" class="clearfix"></div>
 +
<h4 class="subtitle-black">Using Pill Nav</h4>
 +
      <p>Pill Nav comes with six colour variations, default, light, lighter, dark, darker and neutral. In our example code below we've used the default colour, to use another colour change nav-tabs-lighter to navbar-light or your prefered variant e.g. nav-tabs-neutral.</p>
 +
      <pre>
 
     <div class="col-sm-12">
 
     <div class="col-sm-12">
 
       <ul class="nav nav-pills nav-tabs-lighter">
 
       <ul class="nav nav-pills nav-tabs-lighter">
第9行: 第74行:
 
       </ul>
 
       </ul>
 
     </div>
 
     </div>
 +
</pre>

2016年12月7日 (三) 10:55的最新版本

Using Pill Nav

Pill Nav comes with six colour variations, default, light, lighter, dark, darker and neutral. In our example code below we've used the default colour, to use another colour change nav-tabs-lighter to navbar-light or your prefered variant e.g. nav-tabs-neutral.

    <div class="col-sm-12">
      <ul class="nav nav-pills nav-tabs-lighter">
        <li class="active">[[Home]]</li>
        <li>[[Another Title]]</li>
        <li>[[Another Title]]</li>
        <li>[[Another Title]]</li>
        <li>[[Another Title]]</li>
        <li>[[Another Title]]</li>
      </ul>
    </div>