使用boostrap制作导航栏

GeekLiHua

发布于 2025-01-21 19:40:35

35900

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

使用boostrap制作导航栏

效果展示 我们常常看见这样的导航栏的结构，基本上都是一个模板里面做出来的，现在就教大家怎么制作这样的模板。

引入boostrap组件

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

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

在官网里面我们可以根据左边的导航栏快速的匹配到，我们需要的组价的地方，通过观察找到我们需要的组件，然后复制代码到，自己的页面，进行一定的修改

但是这个代码的一个问题是我们希望导航栏的背景是黑色的，这个时候我们就需要在最顶端的类里面加上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>

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-01-12，如有侵权请联系 cloudcommunity@tencent.com 删除

nav