使用boostrap制作导航栏

小咪咪 2024-03-30 13:30 80阅读 0赞

## 使用boostrap制作导航栏 ##

**效果展示**  
我们常常看见这样的导航栏的结构，基本上都是一个模板里面做出来的，现在就教大家怎么制作这样的模板。  
![在这里插入图片描述][a8f26eba4aea427882df6fc4ae8bd83a.png]

### 引入boostrap组件 ###

import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min'

进入boostrap官网去寻找组件  
官网：https://v5.bootcss.com/docs/components/navbar/

在官网里面我们可以根据左边的导航栏快速的匹配到，我们需要的组价的地方，  
通过观察找到我们需要的组件，然后复制代码到，自己的页面，进行一定的修改  
![在这里插入图片描述][2ea66fe2aabe4abb82687260b9f24c04.png]  
但是这个代码的一个问题是我们希望导航栏的背景是黑色的，这个时候我们就需要在最顶端的类里面加上`navbar-dark`属性，然后再把`bg-light`改为`bg-dark`这样文字就成了白色的了。

我们现在还需要一段可以下拉的代码，然后就寻找到了，这一段，只是复制的时候我们需要注意一下，需要复制完整的`<ul>`标签，然后在此基础上进行修改。  
得到这样的结果。

<ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                极客李华
            </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">我的Bot</a></li>
                <li><a class="dropdown-item" href="#">退出</a></li>
                
              </ul>
            </li>
          </ul>

![在这里插入图片描述][0b6cbcdb82f54f39b18cdd1b8cd8a1d0.png]

最后的结果但代码是这样的。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">King Of Bots</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">对战</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">对局列表</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">排行榜</a>
            </li>
          </ul>
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                极客李华
            </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">我的Bot</a></li>
                <li><a class="dropdown-item" href="#">退出</a></li>
                
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

[a8f26eba4aea427882df6fc4ae8bd83a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/14128ae5641a4e49a6d2c19aa60dcf96.png
[2ea66fe2aabe4abb82687260b9f24c04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c4ea1ad177ca47f08a8f79623f57d81b.png
[0b6cbcdb82f54f39b18cdd1b8cd8a1d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7cb2cf7402c54b7fad10ff5e24013935.png