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

1、導覽列基本應用

1）建立nav添加.navbar和其他類.navbar-default
2）nav裡面包裹兩個div，是.navbar-header和.navbar-collapse
3）.navbar-header裡面有button和a
4）button是小屏時的菜單折疊觸發器，需要添加.navbar-toggle和data-toggle="collapse"和data-target="#菜單ID"
5）a是.navbar-brand
6）.navbar-collapse裡面可以放文本、連接配接、按鈕、輸入框、導航等
由于當小屏的時候初始狀态是折疊的，是以需要添加.collapse
           

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarcollapse">
            <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">Brand</a>
    </div>
    <div class="navbar-collapse  collapse" id="navbarcollapse">
        <button type="button" class="btn btn-default  navbar-btn">submit</button>
        <a href="#" class="navbar-link">Mark Otto</a>
    </div>
</nav>
           

2、Brand添加圖檔

<a href="#" class="navbar-brand">
    <img alt=brand src="">
</a>
           

3、表單

.navbar-form

form需要添加.navbar-form和.navbar-left.navbar-right

必須添加.navbar-left.navbar-right，否則後面的元素會被放置在下一行

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
           

4、按鈕

.navbar-btn

<button type="button" class="btn btn-default navbar-btn">Sign in</button>
           

5、文本

.navbar-text

<p class="navbar-text">Signed in as Mark Otto</p>
           

6、連結

.navbar-link

7、導航

.navbar-nav

<ul class="nav navbar-nav">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>
           

8、元件排列

通過添加 .navbar-left 和 .navbar-right 工具類讓導航連結、表單、按鈕或文本對齊。兩個類都會通過 CSS 設定特定方向的浮動樣式。

9、固定在頂部

添加 .navbar-fixed-top 類可以讓導覽列固定在頂部

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>
           

10、固定在底部

添加 .navbar-fixed-bottom 類可以讓導覽列固定在底部

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container">
    ...
  </div>
</nav>
           

11、靜止在頂部

通過添加 .navbar-static-top 類即可建立一個與頁面等寬度的導覽列，它會随着頁面向下滾動而消失。

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>