//解析：.nav .nav-item .nav-link表示ul li是导航——.nav-pills表示胶囊状导航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示导航栏在浏览器上居中显示

在浏览器上显示为：

缩小浏览器窗口显示为：

二、导航栏——

代码为：

2. class="navbar-nav">
4. class="nav-item active">
5. "#" class="nav-link">link1
8. class="nav-item">
9. "#" class="nav-link">link1
12. class="nav-item">
13. "#" class="nav-link">link1
16. class="nav-item">
17. "#" class="nav-link">link1

正常窗口显示为：

缩小窗口小于576px时：

三、折叠导航栏

当窗口小于576px的时候，不仅仅是简单的编程垂直导航；显示为一个button按钮，导航链接隐藏，点击button显示；

 代码为：

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">link1a>
12. li>
13. li class="nav-item">
14. a href="#" class="nav-link">link1a>
15. li>
16. li class="nav-item">
17. a href="#" class="nav-link">link1a>
18. li>
19. li class="nav-item">
20. a href="#" class="nav-link">link1a>
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">link1a>
12. li>
13. li class="nav-item">
14. a href="#" class="nav-link">link1a>
15. li>
16. li class="nav-item">
17. a href="#" class="nav-link">link1a>
18. li>
19. li class="nav-item">
20. a href="#" class="nav-link">link1a>
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">searchbutton>
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="#">link1a>
9. 9 li>
10. 10 li class="nav-item">
11. 11 a class="nav-link" href="#">link2a>
12. 12 li>
13. 13 li class="nav-item">
14. 14 a class="nav-link" href="#">link3a>
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">searchbutton>
31. 32 div>
32. 33 form>
33. 34 div>
34. 35 nav>
35. 36 div>
36. 37 div>

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |

搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。

特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：

Copyright © 2025 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1