bootstrap導航欄.nav與.navbar區別

剛剛看了bootstrap的導航欄，發現有點弄混了，如今來整理一下；

1、簡單的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表示導航欄在瀏覽器上居中顯示

在瀏覽器上顯示爲：

縮小瀏覽器窗口顯示爲：

2、導航欄——<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時：

3、摺疊導航欄

當窗口小於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的時候，顯示爲：

　

4、導航欄加上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表單右浮動；

　　　　代碼以下：

 1 <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>