码迷,mamicode.com
首页 > 编程语言 > 详细

bootstrap导航栏.nav与.navbar区别

时间:2020-06-22 14:41:28      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:list   get   pre   nts   ber   bsp   ogg   链接   nta   

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>

技术图片

bootstrap导航栏.nav与.navbar区别

标签:list   get   pre   nts   ber   bsp   ogg   链接   nta   

原文地址:https://www.cnblogs.com/zbliao/p/13176463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!