“BootStrap Nav Bar”的版本间的差异
(Created page with " <div class="col-md-12"> <div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active">Home</li>...") |
小 |
||
第1行: | 第1行: | ||
− | + | __NOTOC__ | |
+ | <div class="navbar navbar-default" role="navigation"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="active">[[Main Page|Home]]</li> | ||
+ | <li>[[Main Page|About]]</li> | ||
+ | <li>[[Main Page|Services]]</li> | ||
+ | <li>[[Main Page|Article 1]]</li> | ||
+ | <li>[[Main Page|Article 2]]</li> | ||
+ | <li>[[Main Page|Article 3]]</li> | ||
+ | <li>[[Main Page|default]]</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="navbar navbar-lighter" role="navigation"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="active">[[Main Page|Home]]</li> | ||
+ | <li>[[Main Page|About]]</li> | ||
+ | <li>[[Main Page|Services]]</li> | ||
+ | <li>[[Main Page|Article 1]]</li> | ||
+ | <li>[[Main Page|Article 2]]</li> | ||
+ | <li>[[Main Page|Article 3]]</li> | ||
+ | <li>[[Main Page|lighter]]</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="navbar navbar-light" role="navigation"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="active">[[Main Page|Home]]</li> | ||
+ | <li>[[Main Page|About]]</li> | ||
+ | <li>[[Main Page|Services]]</li> | ||
+ | <li>[[Main Page|Article 1]]</li> | ||
+ | <li>[[Main Page|Article 2]]</li> | ||
+ | <li>[[Main Page|Article 3]]</li> | ||
+ | <li>[[Main Page|light]]</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="navbar navbar-dark" role="navigation"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="active">[[Main Page|Home]]</li> | ||
+ | <li>[[Main Page|About]]</li> | ||
+ | <li>[[Main Page|Services]]</li> | ||
+ | <li>[[Main Page|Article 1]]</li> | ||
+ | <li>[[Main Page|Article 2]]</li> | ||
+ | <li>[[Main Page|Article 3]]</li> | ||
+ | <li>[[Main Page|dark]]</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="navbar navbar-darker" role="navigation"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="active">[[Main Page|Home]]</li> | ||
+ | <li>[[Main Page|About]]</li> | ||
+ | <li>[[Main Page|Services]]</li> | ||
+ | <li>[[Main Page|Article 1]]</li> | ||
+ | <li>[[Main Page|Article 2]]</li> | ||
+ | <li>[[Main Page|Article 3]]</li> | ||
+ | <li>[[Main Page|darker]]</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="navbar navbar-neutral" role="navigation"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="active">[[Main Page|Home]]</li> | ||
+ | <li>[[Main Page|About]]</li> | ||
+ | <li>[[Main Page|Services]]</li> | ||
+ | <li>[[Main Page|Article 1]]</li> | ||
+ | <li>[[Main Page|Article 2]]</li> | ||
+ | <li>[[Main Page|Article 3]]</li> | ||
+ | <li>[[Main Page|neutral]]</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <h4 class="subtitle-black">Using Nav Bar</h4> | ||
+ | <p>Nav Bar 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 navbar-default to navbar-light or your prefered variant.</p> | ||
+ | <pre> | ||
+ | <div class="col-md-12"> | ||
<div class="navbar navbar-default" role="navigation"> | <div class="navbar navbar-default" role="navigation"> | ||
<ul class="nav navbar-nav"> | <ul class="nav navbar-nav"> | ||
第11行: | 第81行: | ||
</ul> | </ul> | ||
</div> | </div> | ||
− | </div | + | </div> |
+ | </pre> |
2016年12月7日 (三) 10:53的最新版本
Nav Bar 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 navbar-default to navbar-light or your prefered variant.
<div class="col-md-12"> <div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active">[[Home]]</li> <li>[[About]]</li> <li>[[Services]]</li> <li>[[Article 1]]</li> <li>[[Article 2]]</li> <li>[[Article 3]]</li> <li>[[Article 4]]</li> </ul> </div> </div>