bootstrap導航欄.nav與.navbar區別

 

一、簡單的ul,li組成的導航：

1. <ul class="nav nav-pills justify-content-center bg-dark nav-dark">
2. <li class="nav-item">
3. <a href= "#" class="nav-link">1</a>
4. </li>
5. <li class="nav-item">
6. <a href= "#" class="nav-link">2</a>
7. </li>
8. <li class="nav-item">
9. <a href= "#" class="nav-link">3</a>
10. </li>
11. </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"

代碼為：

1. <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
2. <ul class="navbar-nav">
3. <li class="nav-item active">
4. <a href= "#" class="nav-link">link1</a>
5. </li>
6. <li class="nav-item">
7. <a href= "#" class="nav-link">link1</a>
8. </li>
9. <li class="nav-item">
10. <a href= "#" class="nav-link">link1</a>
11. </li>
12. <li class="nav-item">
13. <a href= "#" class="nav-link">link1</a>
14. </li>
15. </ul>
16. </nav>

正常窗口顯示為：

 

縮小窗口小於576px時：

三、折疊導航欄

當窗口小於576px的時候，不僅僅是簡單的編程垂直導航；顯示為一個button按鈕，導航鏈接隱藏，點擊button顯示；

 代碼為：

 

1. <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
2. <a href="#" class="navbar-brand">
3. <img src="" alt="logo" style="width:70px;height:30px;">
4. </a>
5. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
6. <span class="navbar-toggler-icon"></span>
7. </button>
8. <div class="collapse navbar-collapse" id="collapsible">
9. <ul class="navbar-nav">
10. <li class="nav-item active">
11. <a href="#" class="nav-link">link1</a>
12. </li>
13. <li class="nav-item">
14. <a href="#" class="nav-link">link1</a>
15. </li>
16. <li class="nav-item">
17. <a href="#" class="nav-link">link1</a>
18. </li>
19. <li class="nav-item">
20. <a href="#" class="nav-link">link1</a>
21. </li>
22. </ul>
23.  
24. </nav>

//注意：.navbar-brand是品牌logo；

窗口大於576的時候，顯示為：

窗口小於576的時候，顯示為：

　

四、導航欄加上form表單表示搜索框：【？？？？？】

代碼如下：

1. <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
2. <a href="#" class="navbar-brand">
3. <img src="" alt="logo" style="width:70px;height:30px;">
4. </a>
5. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
6. <span class="navbar-toggler-icon"></span>
7. </button>
8. <div class="collapse navbar-collapse" id="collapsible">
9. <ul class="navbar-nav">
10. <li class="nav-item active">
11. <a href="#" class="nav-link">link1</a>
12. </li>
13. <li class="nav-item">
14. <a href="#" class="nav-link">link1</a>
15. </li>
16. <li class="nav-item">
17. <a href="#" class="nav-link">link1</a>
18. </li>
19. <li class="nav-item">
20. <a href="#" class="nav-link">link1</a>
21. </li>
22. </ul>
23. <form class="form-inline">
24. <div class="input-group">
25. <span class="input-group-addon">@</span>
26. <input list="dl" type="text" class="form-control" placeholder="Search"/>
27. <datalist id="dl">
28. <option value="IE"></option>
29. <option value="Firefox"></option>
30. <option value="chrome"></option>
31. <option value="safari"></option>
32. </datalist>
33. </div>
34.  
35. <button class="btn btn-success" type="submit">search</button>
36. </form>
37. </nav>

 

 

 

如圖所示，如何使得導航欄中的form表單右對齊，移到最右邊？？？？？float：eight應該也行吧。。

 　　　　emmmm.....知道了上面的解決方法了：利用網格系統，將左邊的ul,li和右邊的form表單分別排列；.col-sm-6;然后再給form表單右浮動；

　　　　代碼如下：

 

1. <div class="container-fluid">
2. 2 <div class="row">
3. 3 <!-- 導航欄 -->
4. 4 <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">
5. 5 <div class="col-lg-4">
6. 6 <ul class="navbar-nav">
7. 7 <li class="nav-item">
8. 8 <a class="nav-link" href="#">link1</a>
9. 9 </li>
10. 10 <li class="nav-item">
11. 11 <a class="nav-link" href="#">link2</a>
12. 12 </li>
13. 13 <li class="nav-item">
14. 14 <a class="nav-link" href="#">link3</a>
15. 15 </li>
16. 16 </ul>
17. 17 </div>
18. 18 <!-- 導航欄表單與按鈕 -->
19. 19 <div class="col-lg-8">
20. 20 <form class="form-inline" style="float:right;">
21. 21 <div class="input-group">
22. 23 <span class="input-group-addon">@</span>
23. 24 <input list="dl" type="text" class="form-control" placeholder="Search"/>
24. 25 <datalist id="dl">
25. 26 <option value="IE"></option>
26. 27 <option value="Firefox"></option>
27. 28 <option value="chrome"></option>
28. 29 <option value="safari"></option>
29. 30 </datalist>
30. 31 <button class="btn btn-success" type="submit">search</button>
31. 32 </div>
32. 33 </form>
33. 34 </div>
34. 35 </nav>
35. 36 </div>
36. 37 </div>