bootstrap导航栏.nav与.navbar区别

bootstrap导航栏.nav与.navbar区别

 

一、简单的ul,li组成的导航:

    • class="nav nav-pills justify-content-center bg-dark nav-dark">
  1. class="nav-item">
  • class="nav-item">
  • class="nav-item">
  •  

     

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

    在浏览器上显示为:

    bootstrap导航栏.nav与.navbar区别_第1张图片

    缩小浏览器窗口显示为:

    二、导航栏——

     

    正常窗口显示为:

    bootstrap导航栏.nav与.navbar区别_第2张图片

     

    缩小窗口小于576px时:

    bootstrap导航栏.nav与.navbar区别_第3张图片

    三、折叠导航栏

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

     代码为:

     

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

    //注意:.navbar-brand是品牌logo;

    窗口大于576的时候,显示为:

    bootstrap导航栏.nav与.navbar区别_第4张图片

    窗口小于576的时候,显示为:

     bootstrap导航栏.nav与.navbar区别_第5张图片

    bootstrap导航栏.nav与.navbar区别_第6张图片

    四、导航栏加上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>

    bootstrap导航栏.nav与.navbar区别_第7张图片

    你可能感兴趣的:(bootstrap导航栏.nav与.navbar区别)