Bootstrap系列 -- 42. 導航條中的按鈕、文字和連結

賀臣發表於2015-06-29

 

  Bootstrap框架的導航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,還可以使用其他元素。框架提供了三種其他樣式:

  1、導航條中的按鈕navbar-btn

  2、導航條中的文字navbar-text

  3、導航條中的普通連結navbar-link

  但這三種樣式在框架中使用時受到一定的限制,需要和navbar-brand、navbar-nav配合起來使用。而且對數量也有一定的限制,一般情況在使用一到兩個不會有問題,超過兩個就會有問題。

 

  

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">Bootstrap</a>
   </div>
     <ul class="nav navbar-nav">
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
         <li><a href="##" class="navbar-text">Navbar Text</a></li>
     </ul>
</div>

<div class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
       <a href="##" class="navbar-brand">Bootstrap</a>
   </div>
     <div class="nav navbar-nav">
         <a href="##" class="navbar-text">Navbar Text</a>
         <a href="##" class="navbar-text">Navbar Text</a>
         <a href="##" class="navbar-text">Navbar Text</a>
     </div>
</div>

 

相關文章