Detailed explanation of the difference between .nav and .navbar in bootstrap

The navigation bar is a great feature and a prominent feature of Bootstrap websites. The navigation bar serves as the responsive foundational component of the navigation header in your app or website. The navigation bar collapses in mobile viewports and expands horizontally as the available viewport width increases. At the core of the Bootstrap navigation bar, the navigation bar includes the site name and basic navigation definition styles. This article mainly introduces the detailed explanation of the difference between .nav and .navbar in the bootstrap navigation bar. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help everyone.

1. Simple navigation composed of ul and li:

<ul class="nav nav-pills justify-content-center bg-dark nav-dark">
    <li class="nav-item">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">1</a>
    </li>
    <li class="nav-item">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">2</a>
    </li>
    <li class="nav-item">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">3</a>
    </li>
  </ul>

 

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

is displayed on the browser as:

Reduce the browser window Displayed as:

2. Navigation bar - class="navbar navbar-expand-sm" in

tag - class=" in

navbar-nav"——
• class="nav-item"

  The code is:

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>  
    </ul>
  </nav>

  The normal window display is:

  

  When the window is smaller than 576px:

  

  3. Fold the navigation bar

  When the window is smaller than 576px, it is not just a simple vertical programming Navigation; displayed as a button button, the navigation link is hidden, click the button to display;

  The code is:

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>
    <p class="collapse navbar-collapse" id="collapsible">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>  
    </ul>
    
  </nav>

  //Note: .navbar-brand is the brand logo;

  When the window is larger than 576, it is displayed as:

  

  When the window is smaller than 576, it is displayed as:

  

  

  4. Add a form to the navigation bar to represent the search box: [? ? ? ? ? 】

  The code is as follows:

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>
    <p class="collapse navbar-collapse" id="collapsible">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>
      <li class="nav-item">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
      </li>  
    </ul>
    <form class="form-inline">
          <p 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>
          </p>
          
          <button class="btn btn-success" type="submit">search</button>
        </form>
  </nav>

  As shown in the picture, how to make the form in the navigation bar right-aligned and moved to the far right? ? ? ? ? float:eight should also work. .

  

  emmmm...I know the above solution: use the grid system to arrange the ul and li on the left and the form on the right respectively; .col -sm-6; Then float the form to the right;

  The code is as follows:

  <p class="container-fluid">
    <p class="row">
      <!-- 导航栏 -->
      <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">
        <p class="col-lg-4">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link3</a>
          </li>
        </ul>
        </p>
  <!-- 导航栏表单与按钮 -->
      <p class="col-lg-8">
        <form class="form-inline" style="float:right;">
          <p 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>
            <button class="btn btn-success" type="submit">search</button>
          </p>              
        </form>
        </p>      
      </nav>
      </p>
        </p>

  

  Have you learned it? I believe that everyone has a better understanding of the difference between .nav and .navbar in Bootstrap navigation bar. If you find this article useful, please quickly save it.

  Related recommendations:

  Analysis of the bootstrap navigation bar and its responsive implementation

  How to operate each element of the Bootstrap navigation bar (form , button, text)_javascript skills

  bootstrap drop-down search plug-in usage detailed explanation

  The above is the detailed content of Detailed explanation of the difference between .nav and .navbar in bootstrap. For more information, please follow other related articles on the PHP Chinese website!