Bootstarp4 导航

落日映苍穹つ 2021-11-15 12:31 274阅读 0赞

**1：水平导航**

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

<div class="container">
    
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Python</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Java</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">PHP</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Bootstarp</a>
            </li>
        </ul>
    </div>

![1354320-20190726150146688-526198608.png][]

**2：导航对齐方式**

class="nav"　　默认向左对齐
    class="nav justify-content-center"  居中对齐
    class="nav justify-content-end“    向右对齐

<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>

**3：垂直导航**

**.flex-column** 类用于创建垂直导航：

<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>

![1354320-20190726151033958-1328729625.png][]

**4：选项卡**

使用 .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 nav-tabs">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item nav-tabs">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item nav-tabs">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>

![1354320-20190726151506301-1591007544.png][]

**5：胶囊导航**

**.nav-pills 类可以将导航项设置成胶囊形状。**

<div class="container">
      <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>

![1354320-20190729115325102-479766442.png][]

** 6：导航等宽**

<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>

![1354320-20190729115432144-1243801667.png][]

**7：胶囊下拉菜单**

<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>

![1354320-20190729115550264-638593589.png][]

**8：选项卡下拉菜单**

<div class="container">
      <h2>选项卡下拉菜单</h2>
      <ul class="nav nav-tabs">
        <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>

![1354320-20190729115723091-635033464.png][]

** 9：动态选项卡**

如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。
    
    如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

<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>

![1354320-20190729115926079-752547866.png][]

**10：胶囊状动态选项卡**

<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>

![1354320-20190729120051925-1605160522.png][]

转载于:https://www.cnblogs.com/gjh99/p/11250561.html

[1354320-20190726150146688-526198608.png]: /images/20211115/060bd2169b734c048d009875065735c8.png
[1354320-20190726151033958-1328729625.png]: /images/20211115/599620d521404f169577bfec25ee5359.png
[1354320-20190726151506301-1591007544.png]: /images/20211115/64f286c7ad8b440cb82c7c532b738cfa.png
[1354320-20190729115325102-479766442.png]: /images/20211115/5b6a0987c0984b5790ec044498cc4ec4.png
[1354320-20190729115432144-1243801667.png]: /images/20211115/f9ca1a94ce924edbbd3faab7f158c3ae.png
[1354320-20190729115550264-638593589.png]: /images/20211115/e82769acc2b1457e8d8adb11f0f01dee.png
[1354320-20190729115723091-635033464.png]: /images/20211115/38cff39c16f14efd8d1a331ccfcf86b5.png
[1354320-20190729115926079-752547866.png]: /images/20211115/ba3d064c30cc4781b0a76705cec8c875.png
[1354320-20190729120051925-1605160522.png]: /images/20211115/c1361128f5b447b7affb9747bc24b2ce.png