官方位址

https://v3.bootcss.com/components/#navbar

整體結構

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">BootStrap</a>
        </div>

        <div id="example" class="navbar-collapse collapse">
            <!-- 導航菜單 -->
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">菜單項1</a>
                </li>
                <li>
                    <a href="#">菜單項2</a>
                </li>
                <li>
                    <a href="#">菜單項3</a>
                </li>
                <li class="dropdown">
                    <a role="button" class="dropdown-toggle" data-toggle="dropdown">
                        Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜單項1</a>
                        </li>
                        <li>
                            <a href="#">菜單項1</a>
                        </li>
                        <li>
                            <a href="#">菜單項1</a>
                        </li>
                    </ul>
                </li>
            </ul>

            <!-- 導航表單

                一定要加navbar-left

            -->
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <label for="search"></label>
                    <input id="search" type="search" class="form-control"/>
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>

            <!--

                1. 非導航連結和導航文字，必須包裹在p中；
                2. 非導航連結的p要添加navbar-text類，連結a要添加navbar-link
                3. 導航文字的p要添加navbar-text類
                4. 非表單按鈕一定會出現在非導航連結以及導航文字的後面，不管它的代碼寫在哪裡

            -->

            <!-- 非導航連結 -->
            <p class="navbar-text">
                <a href="#" class="navbar-link">navbar-link</a>
            </p>

            <!-- 導航文字 -->
            <p class="navbar-text">
                <span>navbar-text</span>
            </p>

            <!-- 非表單按鈕 -->
            <button type="button" class="btn btn-primary navbar-btn navbar-right">Login</button>
        </div>
    </div>
</nav>

導航頭

.navbar-header

<div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
     </button>
     <a href="#" class="navbar-brand">BootStrap</a>
 </div>

響應式圖示

.navbar-toggle

data-toggle

data-target

.collapsed

.icon-bar

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
 </button>

品牌圖示

.navbar-brand

導航體

.navbar-collapse

.collapse

導航菜單

.nav

.navbar-nav

<!-- 導航菜單 -->
  <ul class="nav navbar-nav">
      <li>
          <a href="#">菜單項1</a>
      </li>
      <li>
          <a href="#">菜單項2</a>
      </li>
      <li>
          <a href="#">菜單項3</a>
      </li>
      <li class="dropdown">
          <a role="button" class="dropdown-toggle" data-toggle="dropdown">
              Dropdown
              <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
              <li>
                  <a href="#">菜單項1</a>
              </li>
              <li>
                  <a href="#">菜單項1</a>
              </li>
              <li>
                  <a href="#">菜單項1</a>
              </li>
          </ul>
      </li>
  </ul>

導航表單

.navbar-form

注意：導航表單一定要加

.navbar-left

<form class="navbar-form navbar-left">
      <div class="form-group">
          <label for="search"></label>
          <input id="search" type="search" class="form-control"/>
      </div>
      <button type="submit" class="btn btn-info">Submit</button>
  </form>

非導航連結

.navbar-link

非導航連結的

要添加

navbar-text

類，連結

要添加

navbar-link

<!-- 非導航連結 -->
  <p class="navbar-text">
      <a href="#" class="navbar-link">navbar-link</a>
  </p>

導航文字

.navbar-text

導航文字的

要添加

navbar-text

類

<!-- 非導航連結 -->
  <p class="navbar-text">
      <a href="#" class="navbar-link">navbar-link</a>
  </p>

非導航按鈕

.navbar-btn

<!-- 非表單按鈕 -->
  <button type="button" class="btn btn-primary navbar-btn navbar-right">Login</button>

特别說明

非導航連結和導航文字，必須包裹在 p 中；
非導航連結的 p 要添加 navbar-tex t類，連結 a 要添加 navbar-link
導航文字的 p 要添加 navbar-text 類
非表單按鈕一定會出現在非導航連結以及導航文字的後面，不管它的代碼寫在哪裡

導覽列元件固定在頂部

.navbar-fixed-top

但需要為

body

元素設定内補（

padding

）

body { padding-top: 70px; }

導覽列的預設高度是 50px。

導覽列元件固定在底部

.navbar-fixed-bottom

但需要為

body

元素設定内補（

padding

）

body { padding-bottom: 70px; }

導覽列的預設高度是 50px。

導覽列元件靜止在頂部

.navbar-static-top

導覽列反色

.navbar-reverse

元件排列

.navbar-left

.navbar-right

整體代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
    <title>32導覽列</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        <!--

        body {
            padding-top: 70px;
        }

        -->
    </style>
    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支援 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協定（就是直接将 html 頁面拖拽到浏覽器中）通路頁面時 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body class="">

<pre class="pre-scrollable">

    導覽列：
        導覽列元件

            固定在頂部
            固定在底部
            靜止在頂部
            導覽列顔色

            導航頭
                響應式圖示
                品牌圖示
            導航體
                1. 導航菜單
                2. 導航表單
                3. 非導航連結
                4. 導航文字
                5. 非表單按鈕
                6. 元件排列
</pre>

<nav class="navbar navbar-default">
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
    <!--<nav class="navbar navbar-inverse navbar-fixed-bottom">-->
    <!--<nav class="navbar navbar-inverse navbar-static-top">-->
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">BootStrap</a>
        </div>

        <div id="example" class="navbar-collapse collapse">
            <!-- 導航菜單 -->
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">菜單項1</a>
                </li>
                <li>
                    <a href="#">菜單項2</a>
                </li>
                <li>
                    <a href="#">菜單項3</a>
                </li>
                <li class="dropdown">
                    <a role="button" class="dropdown-toggle" data-toggle="dropdown">
                        Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">菜單項1</a>
                        </li>
                        <li>
                            <a href="#">菜單項1</a>
                        </li>
                        <li>
                            <a href="#">菜單項1</a>
                        </li>
                    </ul>
                </li>
            </ul>

            <!-- 導航表單

                一定要加navbar-left

            -->
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <label for="search"></label>
                    <input id="search" type="search" class="form-control"/>
                </div>
                <button type="submit" class="btn btn-info">Submit</button>
            </form>

            <!--

                1. 非導航連結和導航文字，必須包裹在p中；
                2. 非導航連結的p要添加navbar-text類，連結a要添加navbar-link
                3. 導航文字的p要添加navbar-text類
                4. 非表單按鈕一定會出現在非導航連結以及導航文字的後面，不管它的代碼寫在哪裡

            -->

            <!-- 非導航連結 -->
            <p class="navbar-text">
                <a href="#" class="navbar-link">navbar-link</a>
            </p>

            <!-- 導航文字 -->
            <p class="navbar-text">
                <span>navbar-text</span>
            </p>

            <!-- 非表單按鈕 -->
            <button type="button" class="btn btn-primary navbar-btn navbar-right">Login</button>
        </div>
    </div>
</nav>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，是以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要隻加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

BootStrap3 導覽列元件官方位址整體結構導航頭導航體導覽列元件固定在頂部導覽列元件固定在底部導覽列元件靜止在頂部導覽列反色元件排列整體代碼

目錄

官方位址

整體結構

導航頭

響應式圖示

品牌圖示

導航體

導航菜單

導航表單

非導航連結

導航文字

非導航按鈕

特别說明

導覽列元件固定在頂部

導覽列元件固定在底部

導覽列元件靜止在頂部

導覽列反色

元件排列

整體代碼

繼續閱讀

Bootstrap3 （Label）和徽章（Badges）

iOS開發上下滑動UIScrollview隐藏或者顯示導航欄的執行個體

Bootstrap 4将導航欄項目向右對齊

xq_navbar簡單實作依賴于jQuery自定義快捷的炫酷導覽列效果 xq_navbar

Bootstrap單擊Navbar導覽列下的li菜單後，自動收回折疊

微信小程式 navbar

小程式 - 底部navbar導航欄效果元件化

NavigationBar透明時黑線處理

具有左，中或右對齊項的Bootstrap NavBar Bootstrap 4 引導程式4 Bootstrap 3 引導程式3

bootstrap——元件（六、導覽列）

angular4自适應navbar

擁有一個屬于自己的個性地圖名片

響應式前端架構Bootstrap系列（15）面闆

響應式前端架構Bootstrap系列（9）導覽列與導航欄

響應式前端架構Bootstrap系列（3）段落、文字相關

響應式前端架構Bootstrap系列（20）附加導航（Affix）插件