<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                ## 導航條 Bootstrap中的導航條(navbar)是放在應用或網站的頭部,作為導航的響應式基礎組件,它能夠根據瀏覽器窗口寬度,自動調整導航條的顯示狀態,在移動設備上折疊(并且可開可關),在視口(viewport)寬度增加時逐漸變為水平展開模式。 **默認樣式的導航條** Bootstrap的導航條包含兩部分內容:一部分用來放置圖標按鈕,由`.navbar-header`的容器定義;另一部分用來放置導航組件,由`.nav-collapse.collapse`的容器定義。 .navbar-header 容器中通常包含站點名稱和圖標按鈕,站點名稱總是可見的,而圖標按鈕卻只在小屏幕下可見。站點名稱是一個 .navbar-brand 的鏈接。圖標按鈕是一個.navbar-toggle類的按鈕,其中包含三個 class="icon-bar" 的 <span> 元素。定義按鈕時,還要為它提供 data-toggle 和 data-target?屬性。data-toggle 屬性告訴 JavaScript 這個按鈕要做什么,data-target?屬性指示點擊按鈕時要顯示的菜單元素。 **.nav-collapse.collapse** 容器中通常只包含導航組件,如導航鏈接、表單、按鈕、下拉菜單、文本、非導航鏈接等,導航組件只在大屏幕下水平展開,在小屏幕下要點擊圖標按鈕后才顯示出來。對于簡單的導航條,這里通常只包含導航鏈接。導航鏈接使用 .nav.navbar 的列表元素定義。 為了讓導航條具有響應式特性,通常使用一個 .navbar 的 \<nav\>元素來包裹它。當然,你也可以使用\<div\>元素,但務必要設置role="navigation"屬性,以確保讓使用輔助設備的用戶明確知道這是一個導航區域。另外,為了獲得適當的對齊和內邊距,可以把整個導航條放在 .container或 .container-fluid 的容器中。 ```html <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="navbar1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="##" class="navbar-brand">logo</a> </div> <div class="collapse navbar-collapse" id="navbar1"> <ul class="nav navbar-nav"> <li class="active"><a href="##">link<span class="sr-only"></span></a></li> <li><a herf="##">link</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Messages <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> </ul> </li> </ul> <form action="" class="navbar-form navbar-left"> <div class="form-group"> <input type="text" name="" id="" placeholder="search" class="form-control"/> </div> <button type="submit" class="btn btn-default">提交</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="##">link</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Messages <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> </ul> </li> </ul> </div> </div> </nav> ``` 隨著瀏覽器窗口寬度逐步增大,當大于 768px 時,導航菜單就會顯示出來,而按鈕圖標則自動隱藏。如圖所示: ![](https://img.kancloud.cn/57/4c/574c695877dc32cec420623dca3bfad4_950x84.png) Bootstrap中,響應式導航條的默認屏幕分界點是 768px。在視口寬度小于 768px 時,導航菜單將被隱藏起來,導航條將表現為三條短橫線組成的圖標按鈕,即所謂的漢堡按鈕。如圖所示: ![](https://img.kancloud.cn/df/55/df557b5bf197ad4fc55b15f8289935e9_950x86.png) 點擊圖標按鈕,隱藏的導航菜單就會顯示出來。如圖所示: ![](https://img.kancloud.cn/1c/80/1c8054d9eef97a6a5072e8583d75f228_752x496.png) ***** **品牌圖標** 將導航條內放置品牌標志( .navbar-brand )的地方替換為`<img>`元素即可展示自己的品牌圖標。由于`.navbar-brand`已經被設置了內補(padding)和高度(height),你需要根據實際需求添加一些 CSS樣式從而覆蓋默認設置。 ```html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="##" class="navbar-brand"> <img src="../img/boot.png" alt="logo" width="20" height="20"/> </a> </div> </div> </nav> ``` ![](https://img.kancloud.cn/70/e2/70e248ef0554e23c072af713afdf08eb_751x79.png) ***** **表單** 將表單放置于`.navbar-form`之內可以呈現很好的垂直對齊,并在較窄的視口(viewport)中呈現折疊狀態。使用對齊方式選項來決定導航欄中的內容放置在哪里。 ```html <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="##" class="navbar-brand"> <img src="../img/boot.png" alt="logo" width="20" height="20"/> </a> </div> <form action="" class="navbar-form navbar-left"> <div class="form-group"> <input type="text" name="" id="" placeholder="search" class="form-control"/> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div> </nav> ``` ![](https://img.kancloud.cn/02/fe/02febccf8b9014d298cf37d9c28e6079_994x83.png) ***** **按鈕** 對于不包含在`<form>`中的`<button>`元素,加上`.navbar-btn`后,可以讓它在導航條里垂直居中。 ```html <button type="button" class="btn btn-default navbar-btn">Sign in</button> ``` ![](https://img.kancloud.cn/bb/b5/bbb516c1e457e8f4f21f52e6be243699_994x80.png) 就像標準的[按鈕類](https://v3.bootcss.com/css/#buttons)一樣,`.navbar-btn`可以被用在`<a>`和`<input>`元素上。然而,在`.navbar-nav`內,`.navbar-btn`和標準的按鈕類都不應該被用在`<a>`元素上。 ***** **文本** 把文本包裹在`.navbar-text`中時,為了有正確的行距和顏色,通常使用`<p>`標簽。 ```html <p class="navbar-text">把文本包裹在 .navbar-text中時,為了有正確的行距和顏色,通常使用 p標簽。</p> ``` ![](https://img.kancloud.cn/69/51/6951808c1c1f5acfdb4a3b008f131698_994x78.png) ***** **非導航的鏈接** 如果你希望在標準的導航組件之外添加標準鏈接,那么,使用`.navbar-link`類可以讓鏈接有正確的默認顏色和反色設置。 ```html <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">非導航的鏈接</a></p> ``` ![](https://img.kancloud.cn/ed/c1/edc199c76283ac35eb71391e62b94836_994x79.png) ***** **組件排列** 通過添加`.navbar-left`和`.navbar-right`工具類讓導航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設置特定方向的浮動樣式,就是對導航條中的元素進行左右浮動。 注意:向右側對齊多個組件。導航條目前不支持多個`.navbar-right`類。為了讓內容之間有合適的空隙,給最后一個`.navbar-right`元素使用負邊距(margin)。如果有多個元素使用這個類,它們的邊距(margin)將不能按照你的預期正常展現。 ***** **固定導航條** **1.** 導航條固定在頂部 添加`.navbar-fixed-top`類可以讓導航條固定在頂部,還可包含一個`.container`或`.container-fluid`容器,從而讓導航條居中,并在兩側添加內補(padding)。 ![](https://img.kancloud.cn/d8/ba/d8ba8adedc10798a67bd14d190915ebe_994x318.png) **2.** 導航條固定在底部 添加`.navbar-fixed-bottom`類可以讓導航條固定在底部,并且還可以包含一個`.container`或`.container-fluid`容器,從而讓導航條居中,并在兩側添加內補(padding)。 ![](https://img.kancloud.cn/41/bd/41bdd673eacf3b17e834a9a5c3ee4c14_988x912.png) 以上兩種固定方式的導航條會遮住頁面上的其它內容,除非你給`<body>`元素底部設置了`padding`。用你自己的值,或用下面給出的代碼都可以。提示:導航條的默認高度是 50px。 ***** **導航條靜止在頂部** 通過添加`.navbar-static-top`類即可創建一個與頁面等寬度的導航條,它會隨著頁面向下滾動而消失。還可以包含一個`.container`或`.container-fluid`容器,用于將導航條居中對齊并在兩側添加內補(padding)。 ***** **反色的導航條** 通過添加`.navbar-inverse`類可以改變導航條的外觀。 ```html <nav class="navbar navbar-default navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a href="##" class="navbar-brand"> <img src="../img/boot.png" alt="logo" width="20" height="20"/> </a> </div> <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">非導航的鏈接</a></p> </div> </nav> ``` ![](https://img.kancloud.cn/54/71/54713569d0a3d92d26acf9b8d7b22e42_995x83.png)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看