bootstrap導航欄.nav與.navbar區別
阿新 • • 發佈：2018-12-17
一、簡單的ul,li組成的導航：
<ul class="nav nav-pills justify-content-center bg-dark nav-dark"> <li class="nav-item"> <a href="#" class="nav-link">1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">3</a> </li> </ul>
//解析：.nav .nav-item .nav-link表示ul li是導航——.nav-pills表示膠囊狀導航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示導航欄在瀏覽器上居中顯示
在瀏覽器上顯示為：
縮小瀏覽器視窗顯示為：
二、導航欄——<nav>標籤中class="navbar navbar-expand-sm"——<ul>中class="navbar-nav"——<li>中class="nav-item"
程式碼為：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a href="#" class="nav-link">link1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">link1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">link1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">link1</a> </li> </ul> </nav>
正常視窗顯示為：
縮小視窗小於576px時：
三、摺疊導航欄
當視窗小於576px的時候，不僅僅是簡單的程式設計垂直導航；顯示為一個button按鈕，導航連結隱藏，點選button顯示；
程式碼為：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <a href="#" class="navbar-brand"> <img src="" alt="logo" style="width:70px;height:30px;"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsible"> <ul class="navbar-nav"> <li class="nav-item active"> <a href="#" class="nav-link">link1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">link1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">link1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">link1</a> </li> </ul> </nav>
//注意：.navbar-brand是品牌logo；
視窗大於576的時候，顯示為：
視窗小於576的時候，顯示為：
四、導航欄加上form表單表示搜尋框：【？？？？？】
程式碼如下：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a href="#" class="navbar-brand">
<img src="" alt="logo" style="width:70px;height:30px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsible">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
</ul>
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon">@</span>
<input list="dl" type="text" class="form-control" placeholder="Search"/>
<datalist id="dl">
<option value="IE"></option>
<option value="Firefox"></option>
<option value="chrome"></option>
<option value="safari"></option>
</datalist>
</div>
<button class="btn btn-success" type="submit">search</button>
</form>
</nav>如圖所示，如何使得導航欄中的form表單右對齊，移到最右邊？？？？？float：eight應該也行吧。。
emmmm.....知道了上面的解決方法了：利用網格系統，將左邊的ul,li和右邊的form表單分別排列；.col-sm-6;然後再給form表單右浮動；
程式碼如下：
<div class="container-fluid">
2 <div class="row">
3 <!-- 導航欄 -->
4 <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">
5 <div class="col-lg-4">
6 <ul class="navbar-nav">
7 <li class="nav-item">
8 <a class="nav-link" href="#">link1</a>
9 </li>
10 <li class="nav-item">
11 <a class="nav-link" href="#">link2</a>
12 </li>
13 <li class="nav-item">
14 <a class="nav-link" href="#">link3</a>
15 </li>
16 </ul>
17 </div>
18 <!-- 導航欄表單與按鈕 -->
19 <div class="col-lg-8">
20 <form class="form-inline" style="float:right;">
21 <div class="input-group">
23 <span class="input-group-addon">@</span>
24 <input list="dl" type="text" class="form-control" placeholder="Search"/>
25 <datalist id="dl">
26 <option value="IE"></option>
27 <option value="Firefox"></option>
28 <option value="chrome"></option>
29 <option value="safari"></option>
30 </datalist>
31 <button class="btn btn-success" type="submit">search</button>
32 </div>
33 </form>
34 </div>
35 </nav>
36 </div>
37 </div>