Bootstrap 導航

時間 2019-12-05

原文原文鏈接

摘要：主要是關於bootstrap中導航元素和導航欄的內容。javascript

1.導航元素

bootstrap提供的導航元素使用相同的基類.nav。根據類的不一樣，能夠建立兩種不一樣類型的導航：表格導航菜單（標籤式導航菜單 .nav-tabs）和膠囊式導航菜單(.nav-pills)。其中膠囊式導航菜單包括基本的膠囊式導航菜單((.nav-pills)和垂直膠囊式菜單(.nav-pills + .nav-stacked)。php

1.1 表格導航菜單（標籤 .nav-tabs）

在無序列表中使用類 .nav-tabs.注意別忘了基類 .nav。代碼示例：css

1 <p>標籤式導航菜單</p>
2 <ul class="nav nav-tabs">
3     <li><a href="#">Home</a></li>
4     <li><a href="#">HTML</a></li>
5     <li class="active"><a href="#">CSS</a></li>
6     <li><a href="#">javascript</a></li>
7     <li><a href="#">Java</a></li>
8 </ul>

顯示：
html

1.2 膠囊式導航菜單

膠囊式導航菜單，除了使用基類.nav以外。使用類 .nav-pills 。java

基本的膠囊式導航菜單

代碼示例：ios

<p>標籤式導航菜單</p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">javascript</a></li>
    <li><a href="#">Java</a></li>
</ul>

顯示：web

垂直的膠囊式導航菜單（.nav-stacked）

代碼示例：bootstrap

1 <p>垂直的膠囊式導航菜單</p>
2 <ul class="nav nav-pills nav-stacked">
3     <li class="active"><a href="#">Home</a></li>
4     <li><a href="#">HTML</a></li>
5     <li><a href="#">CSS</a></li>
6     <li><a href="#">javascript</a></li>
7     <li><a href="#">Java</a></li>
8 </ul>

顯示：dom

1.3 兩端對齊

爲了讓導航菜單的寬度與父元素等寬，可使用類 .nav-justified.例如：網站

 1 <p>標籤式導航菜單</p>
 2 <ul class="nav nav-tabs nav-justified">
 3     <li><a href="#">Home</a></li>
 4     <li><a href="#">HTML</a></li>
 5     <li class="active"><a href="#">CSS</a></li>
 6     <li><a href="#">javascript</a></li>
 7     <li><a href="#">Java</a></li>
 8 </ul>
 9 <p>基本的膠囊式導航菜單</p>
10 <ul class="nav nav-pills nav-justified">
11     <li class="active"><a href="#">Home</a></li>
12     <li><a href="#">HTML</a></li>
13     <li><a href="#">CSS</a></li>
14     <li><a href="#">javascript</a></li>
15     <li><a href="#">Java</a></li>
16 </ul>

結果顯示：

1.4 禁用連接（disabled）

在無序列表的選項<li>中添加類 .disabled .該選項就會是禁用，呈現灰色狀態，同時禁用了該選項的 :hover 狀態。例如:

1 <p>標籤式導航菜單</p>
2 <ul class="nav nav-tabs">
3     <li class="active"><a href="#">Home</a></li>
4     <li><a href="#">HTML</a></li>
5     <li><a href="#">CSS</a></li>
6     <li><a href="#">javascript</a></li>
7     <li class="disabled"><a href="#">Java禁用</a></li>
8 </ul>

顯示：

1.5 帶有下拉菜單的導航菜單

帶有下拉菜單的標籤式導航菜單

把列表選項<li>中的錨元素做爲下拉菜單的觸發器便可。代碼示例：

 1 <ul class="nav nav-tabs">
 2     <li class="active"><a href="#">Home</a></li>
 3     <li><a href="#">SVN</a></li>
 4     <li><a href="#">ios</a></li>
 5     <li class="dropdown">
 6         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 7             web <span class="caret"></span>
 8         </a>
 9         <ul class="dropdown-menu">
10             <li class="active"><a href="#">html</a></li>
11             <li><a href="#">css</a></li>
12             <li><a href="#">javascript</a></li>
13             <li><a href="#">php</a></li>
14         </ul>
15     </li>
16 </ul>

顯示：

帶有下拉菜單的膠囊式導航菜單

把上述程序中第一行中的 nav-tabs 換成 nav-pills 便可。顯示結果：

2. 導航欄（.navbar）

導航欄在應用或網站中做爲導航頁頭，是一種響應式組件。導航欄在移動設備的視圖中是摺疊的，隨着可用視口寬度的增長，導航欄也會水平展開。在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式。分爲默認的導航欄和響應式的導航欄。

2.1 默認的導航欄（.navbar-default）

 1 <nav class="navbar navbar-default" role="navigation">
 2     <div class="navbar-header">
 3         <a class="navbar-brand" href="#">home</a>
 4     </div>
 5     <div>
 6         <ul class="nav navbar-nav">
 7             <li><a href="#">school</a></li>
 8             <li><a href="#">restraunt</a></li>
 9             <li><a href="#">domistry</a></li>
10             <li class="dropdown">
11                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
12                     library <span class="caret"></span>
13                 </a>
14                 <ul class="dropdown-menu">
15                     <li><a href="#">F1</a></li>
16                     <li><a href="#">F2</a></li>
17                     <li><a href="#">F3</a></li>
18                 </ul>
19             </li>
20         </ul>
21     </div>
22 </nav>

顯示結果：

其中，第1行：<nav>元素是導航欄標籤，添加類.navbar 和.navbar-default 能夠得到默認的導航欄樣式。向<nav>元素添加 role="navigation" ，有助於增長可讀性。
第2行：帶有類.navbar-header的<div>元素，是導航欄的標題部分。在錨元素中使用類.navbar-brand是爲了讓標題連接的文本看起來大一些。

第6行：是爲導航欄添加連接，就像第一部分的導航菜單。使用無序列表（.nav + .navbar-nav(注意不是nav-tabs, 這裏表示是導航欄的菜單)）表示。

2.2 響應式的導航欄 (collapse)

代碼示例：

 1 <nav class="navbar navbar-default" role="navigation">
 2     <div class="navbar-header">
 3         <button class="navbar-toggle" data-toggle="collapse" data-target="#example">
 4             <span class="sr-only">漢堡按鈕切換導航</span>
 5             <span class="icon-bar"></span>
 6             <span class="icon-bar"></span>
 7             <span class="icon-bar"></span>
 8         </button>
 9         <a href="#" class="navbar-brand">web</a>
10     </div>
11     <div class="collapse navbar-collapse" id="example">
12         <ul class="nav navbar-nav">
13             <li class="active"><a href="#">HTML</a></li>
14             <li><a href="#">CSS</a></li>
15             <li><a href="#">javascript</a></li>
16             <li class="dropdown">
17                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
18                     java<span class="caret"></span>
19                 </a>
20                 <ul class="dropdown-menu">
21                     <li><a href="#">jmeter</a></li> 
22                     <li><a href="#">EJB</a></li> 
23                     <li><a href="#">Jasper Report</a></li>
24                 </ul>
25             </li>
26         </ul>
27     </div>
28 </nav>

顯示結果：

點擊漢堡按鈕以前：點擊右邊的漢堡按鈕以後：

解釋分析：

默認的導航欄的導航菜單是直接顯示在導航欄中，而響應式導航欄是經過點擊右邊的漢堡按鈕來得到導航菜單選項的。上述程序中

第3~8行：建立一個漢堡按鈕，做爲摺疊的觸發器。其中<span class="icon-bar">是漢堡按鈕中的橫。三句表明三橫。data-toggle="collapse"表示該按鈕具備摺疊的做用。　　 data-target="#id"表示要摺疊的內容元素鎖定到該按鈕上。其中第四行的<span class="sr-only">漢堡按鈕切換導航</span>中的類 .sr-only可使包含的文本隱　　　　　　藏，即漢堡按鈕切換導航並不在按鈕中顯示。

第11~27行：是摺疊的內容。包裹在帶有類 .collapse + .navbar-collapse 的<div>容器中。摺疊的內容與默認導航欄的建立方式相同，不在贅述。

2.3 導航欄中的表單（.navbar-form）

能夠嚮導航欄中添加表單，也就是把導航欄中導航菜單部分換成導航欄表單（.navbar-form）便可。代碼示例：

 1 <nav class="navbar navbar-default" role="navigation">
 2     <div class="navbar-header">
 3         <a href="#" class="navbar-brand">導航欄標題</a>
 4     </div>
 5     <form class="navbar-form navbar-left">
 6         <div class="form-group">
 7             <input type="text" class="form-control" placeholder="請輸入文本">
 8             <button type="submit" class="btn btn-default">提交</button>
 9         </div>
10     </form>
11 </nav>

第5行中的 navbar-left 是讓表單向左對齊。顯示結果以下：

2.4 導航欄中按鈕（.navbar-btn）

代碼示例：

1 <nav class="navbar navbar-default" role="navigation">
2     <div class="navbar-header">
3         <a href="#" class="navbar-brand">導航欄標題</a>
4     </div>
5     <button type="button" class="btn btn-default navbar-btn">導航欄中的按鈕</button>
6 </nav>

顯示結果以下：

2.5 導航欄中文本（.navbar-text）

即把上述程序的第5行按鈕部分，換成帶有類 .navbar-text 的文本，例如：<p class="navbar-text">導航欄文本</p>。

2.6 結合圖標的導航連接

代碼示例：

1 <nav class="navbar navbar-default" role="navigation">
2     <div class="navbar-header">
3         <a href="#" class="navbar-brand">導航欄標題</a>
4     </div>
5     <ul class="nav navbar-nav navbar-right">
6         <li><a href="#"><span class="glyphicon glyphicon-user"></span>註冊</a></li>
7         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>登陸</a></li>
8     </ul>
9 </nav>

結果顯示以下：

2.7 固定導航欄（.navbar-fixed-top、.navbar-fixed-bottom）

固定到頂部，在導航元素<nav>中添加類 .navbar-fixed-top，就能夠把導航欄固定到頁面的頂部。一樣的在導航元素<nav>中添加類 .navbar-fixed-bottom，就能夠把導航欄固定到頁面的底部。

靜態的頂部：導航欄能隨着頁面一塊兒滾動。在<nav>嚴肅中添加類.navbar-staitc-top

2.8 倒置的導航欄(.navbar-inverse)

倒置的導航欄是指黑色背景白色文本的導航欄。用類 .navbar-inverse 替換<nav>元素中的類 .navbar-default

形如：

3.麪包屑導航（.breadcrumbs）

麪包屑導航是用來顯示網站的層次信息。能夠顯示博客的發佈日期、類別或者標籤。表示當前頁面在導航層次結構內的位置。是一個簡單的帶有 .breadcrumb class 的無序列表。

代碼示例：

1 <ul class="breadcrumb"> 
2     <li><a href="#">21世紀</a></li> 
3     <li><a href="#">2016年</a></li> 
4     <li class="active">8月</li> 
5 </ul>

顯示結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。