Bootstrap导航nav

太过爱你忘了你带给我的痛 2021-09-15 01:44 527阅读 0赞

如果你想创建一个简单的水平导航栏，可以在 **<ul>** 元素上添加 **.nav**类，在每个 **<li>** 选项上添加 **.nav-item** 类，在每个链接上添加 **.nav-link** 类:

<div class="container">  
  <h2>导航</h2>  
  <p>简单的水平导航:</p>  
  <ul class="nav">  
    <li class="nav-item">  
      <a href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>

</div>

![Image 1][]

## 导航对齐方式 ##

**.justify-content-center** 类设置导航居中显示， **.justify-content-end** 类设置导航右对齐。

<div class="container">  
  <h2>导航</h2>  
  <p>左对齐导航 (默认):</p>  
  <ul class="nav">  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
    
  <p class="text-center">居中对齐导航:</p>  
  <ul class="nav justify-content-center">  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
      
  <p class="text-right">右对齐导航:</p>  
  <ul class="nav justify-content-end">  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>

</div>

![Image 1][]

垂直居中

<div class="container">  
  <h2>垂直导航</h2>  
  <p>.flex-column 类用于创建垂直导航：</p>  
  <ul class="nav flex-column">  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>

</div>

![70][]

使用 **.nav-tabs** 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

<div class="container">  
  <h2>选项卡</h2>  
  <p>选项卡导航:</p>  
  <ul class="nav nav-tabs">  
    <li class="nav-item">  
      <a class="nav-link active" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>

</div>

![70 1][]

disbled对按钮使用 该按钮会被禁止

胶囊样式     nav-pills"

<h2>胶囊</h2>  
  <p>胶囊导航:</p>  
  <ul class="nav nav-pills">  
    <li class="nav-item">  
      <a class="nav-link active" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>

</div>

![70 2][]

##     ##

## 导航等宽 ##

**.nav-justified** 类可以设置导航项齐行等宽显示。

<div class="container">  
  <h2>导航等宽</h2>  
  <p>.nav-justified 类可以设置导航项齐行等宽显示。</p>  
  <ul class="nav nav-pills nav-justified">  
    <li class="nav-item">  
      <a class="nav-link active" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul><br>  
  
  
  <p>Justified tabs:</p>  
  <ul class="nav nav-tabs nav-justified">  
    <li class="nav-item">  
      <a class="nav-link active" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>

</div>

![70 3][]

胶囊导航带下拉菜单

<div class="container">  
  <h2>胶囊导航带下拉菜单</h2>  
  <ul class="nav nav-pills">  
    <li class="nav-item">  
      <a class="nav-link active" href="\#">Active</a>  
    </li>  
    <li class="nav-item dropdown">  
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="\#">Dropdown</a>  
      <div class="dropdown-menu">  
        <a class="dropdown-item" href="\#">Link 1</a>  
        <a class="dropdown-item" href="\#">Link 2</a>  
        <a class="dropdown-item" href="\#">Link 3</a></div>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>

</div>

## 动态选项卡案例 ##

<div class="container">  
  <h2>选项卡切换</h2>  
  <br>  
    
  <ul class="nav nav-tabs" role="tablist">  
    <li class="nav-item">  
      <a class="nav-link active" data-toggle="tab" href="\#home">Home</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" data-toggle="tab" href="\#menu1">Menu 1</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" data-toggle="tab" href="\#menu2">Menu 2</a>  
    </li>  
  </ul>  
  
  
    
  <div class="tab-content">  
    <div id="home" class="container tab-pane active"><br>  
      <h3>HOME</h3>  
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
    </div>  
    <div id="menu1" class="container tab-pane fade"><br>  
      <h3>Menu 1</h3>  
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
    </div>  
    <div id="menu2" class="container tab-pane fade"><br>  
      <h3>Menu 2</h3>  
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>  
    </div>  
  </div>

</div>

![70 4][]

<div class="container">  
  <h2>胶囊选项卡切换</h2>  
  <br>  
    
  <ul class="nav nav-pills" role="tablist">  
    <li class="nav-item">  
      <a class="nav-link active" data-toggle="pill" href="\#home">Home</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" data-toggle="pill" href="\#menu1">Menu 1</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" data-toggle="pill" href="\#menu2">Menu 2</a>  
    </li>  
  </ul>  
  
  
    
  <div class="tab-content">  
    <div id="home" class="container tab-pane active"><br>  
      <h3>HOME</h3>  
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
    </div>  
    <div id="menu1" class="container tab-pane fade"><br>  
      <h3>Menu 1</h3>  
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
    </div>  
    <div id="menu2" class="container tab-pane fade"><br>  
      <h3>Menu 2</h3>  
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>  
    </div>  
  </div>

</div>

![70 5][]

[Image 1]: 
[70]: /images/20210813/4f0268bd75b6487884c5c2638956bc91.png
[70 1]: /images/20210813/fbf66c8e248a4f9097e9b1431612f396.png
[70 2]: /images/20210813/0cffc04b348142c595ba579d9fa1dc59.png
[70 3]: /images/20210813/425a313073d14fbe91890cd059b4314f.png
[70 4]: /images/20210813/a13c56024b4e46e2bddb1393bd1c124d.png
[70 5]: /images/20210813/bf04f40117444ad6a4fed343c8d1f176.png