boostrap框架下的導航欄切換
阿新 • • 發佈:2019-02-17
導航欄是一個很好的功能,是 Bootstrap 網站的一個突出特點。導航欄在您的應用或網站中作為導航頁頭的響應式基礎元件。導航欄在移動裝置的檢視中是摺疊的,隨著可用視口寬度的增加,導航欄也會水平展開。在 Bootstrap 導航欄的核心中,導航欄包括了站點名稱和基本的導航定義樣式。
基本的標籤頁
- <ulclass="nav nav-tabs">
- <liclass="active">
- <ahref="#">首頁</a>
- </li>
- <li><ahref="#">...</a></li>
- <li><a
- </ul>
- <ulclass="nav nav-pills">
- <liclass="active">
- <ahref="#">Home</a>
- </li>
- <li><ahref="#">...</a></li>
- <li><ahref="#">...</a></li>
- </ul>
不可用狀態
在任何的導航元件(標籤, 圓角或列表)新增 .disabled
, 連結將變成灰色
href
屬性. 或者你也可用JavaScript來防止點選.
- <ulclass="nav nav-pills">
- ...
- <liclass="disabled"><ahref="#">Home</a></li>
- ...
- </ul>
疊放式導航 豎直排放標籤和圓角連結
預設情況下標籤和圓角連結是水平排放的,使用 .nav-stacked
就可以將其變成豎直疊放。
- <ulclass="nav nav-tabs nav-stacked">
- ...
- </ul>
下拉選單 改良的導航元件
- <ulclass="nav nav-tabs">
- <liclass="dropdown">
- <aclass="dropdown-toggle"
- data-toggle="dropdown"
- href="#">
- Dropdown
- <bclass="caret"></b>
- </a>
- <ulclass="dropdown-menu">
- <!-- links -->
- </ul>
- </li>
- </ul
導航列表 構建簡單的疊放式導航,適用於側邊欄
導航列表可以便捷地建立帶有標頭(可選)的導航連結組,非常適合用做側邊欄(與OS X中的Finder類似)。
導航列表例子
對存放一組連結的列表使用 class="nav nav-list"
:
水平分隔符
新增一個水平分隔符, 只需在空列表項新增.divider
標籤頁切換導航 通過javascript讓標籤生動起來
我們使用一個簡單的外掛切換標籤頁對應的內容,從而讓標籤頁變得生動。 Bootstrap 提供了四種樣式的標籤頁:置頂(預設),居右,置底,居左。應用時只需修改很少的標記。
標籤頁切換的例子
讓標籤可切換, 需在.tab-content裡建立.tab-pane, 並對每個標籤設定一個唯一的ID.
- <divclass="tabbable"><!-- Only required for left/right tabs -->
- <ulclass="nav nav-tabs">
- <liclass="active"><ahref="#tab1"data-toggle="tab">Section 1</a></li>
- <li><ahref="#tab2"data-toggle="tab">Section 2</a></li>
- </ul>
- <divclass="tab-content">
- <divclass="tab-pane active"id="tab1">
- <p>I'm in Section 1.</p>
- </div>
- <divclass="tab-pane"id="tab2">
- <p>Howdy, I'm in Section 2.</p>
- </div>
- </div>
- </div>
淡入
要讓內容淡入, 需在每個.tab-pane
新增.fade
.
各個方向的標籤
底部
反轉HTML的順序,用 .tabs-below
將標籤居底。
左邊
,用 .tabs-left
將標籤居底。
右邊
使用 .tabs-right
將標籤居右。