1. 程式人生 > >bootstrap導航元素(14)

bootstrap導航元素(14)

表格導航或標籤
建立一個標籤式的導航選單:

以一個帶有 class .nav 的無序列表開始。
新增 class .nav-tabs。
<p>標籤式的導航選單</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>
基本的膠囊式導航選單
如果需要把標籤改成膠囊的樣式,
只需要使用 class .nav-pills 代替 .nav-tabs 即可,其他的步驟與上面相同。
垂直的膠囊式導航選單
您可以在使用 class .nav、.nav-pills 的同時使用 class .nav-stacked,讓膠囊垂直堆疊。
兩端對齊的導航
您可以在螢幕寬度大於 768px 時,通過在分別使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同時使用 class .nav-justified,
讓標籤式或膠囊式導航選單與父元素等寬。在更小的螢幕上,導航連結會堆疊。
禁用連結
對每個 .nav class,如果添加了 .disabled class,則會建立一個灰色的連結,同時禁用了該連結的 :hover 狀態
帶有下拉選單的標籤
向標籤新增下拉選單的步驟如下:

以一個帶有 class .nav 的無序列表開始。
新增 class .nav-tabs。
新增帶有 .dropdown-menu class 的無序列表。
<p>帶有下拉選單的標籤</p>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分離的連結</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>
帶有下拉選單的膠囊
步驟與建立帶有下拉選單的標籤相同,只是需要把 .nav-tabs class 改為 .nav-pills,