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
<a href="#" class="navbar-link">Mark Otto</a>
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>