使用boostrap制作导航栏

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

使用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>
相关文章
|
应用服务中间件 Linux PHP
深入理解Nginx工作原理及优化技巧(上)
深入理解Nginx工作原理及优化技巧
深入理解Nginx工作原理及优化技巧(上)
|
Web App开发 数据安全/隐私保护
Chrome谷歌浏览器密码数据导出与导入管理(实现数据无缝同步)
Chrome谷歌浏览器密码数据导出与导入管理(实现数据无缝同步)
1084 0
五分钟带你玩转sonar(五)教你使用SonarLint插件
五分钟带你玩转sonar(五)教你使用SonarLint插件
5050 0
五分钟带你玩转sonar(五)教你使用SonarLint插件
|
8月前
|
搜索推荐 数据挖掘
优质网络舆情监测系统大盘点
一款出色的网络舆情监测系统,不仅能够助力相关主体迅速捕捉舆情信息,有效应对危机,还能够助力其更好地把握舆论动态,维护自身形象。那么,市场上有哪些比较好的网络舆情监测系统呢?这里,本文有为各位整理了一些好用的舆情检测系统,以供各位参考!
317 0
|
9月前
|
JSON 供应链 搜索推荐
淘宝APP分类API接口:开发、运用与收益全解析
淘宝APP作为国内领先的购物平台,拥有丰富的商品资源和庞大的用户群体。分类API接口是实现商品分类管理、查询及个性化推荐的关键工具。通过开发和使用该接口,商家可以构建分类树、进行商品查询与搜索、提供个性化推荐,从而提高销售额、增加商品曝光、提升用户体验并降低运营成本。此外,它还能帮助拓展业务范围,满足用户的多样化需求,推动电商业务的发展和创新。
276 5
|
11月前
|
存储 Java 应用服务中间件
Java“MissingResourceException”错误解决
Java中的“MissingResourceException”错误通常表示程序在尝试访问资源文件(如属性文件)时未能找到指定的资源。解决此问题的方法包括:确保资源文件存在并位于正确路径,检查文件名和路径是否正确,以及确认类加载器能够访问资源文件。
483 6
|
关系型数据库 MySQL 数据安全/隐私保护
mysql无法启动服务connect to server at ‘localhost‘ failed
mysql无法启动服务connect to server at ‘localhost‘ failed
|
前端开发 API Android开发
|
SQL 安全 网络安全
ED01-CMS v20180505 文件上传(CVE-2022-28525)
ED01-CMS v20180505 文件上传(CVE-2022-28525)
ED01-CMS v20180505 文件上传(CVE-2022-28525)
|
缓存 安全 Java
谷歌Guava LoadingCache介绍
CacheLoader的作用就是为了在Cache中数据缺失时加载数据,其中最重要的方法就是load()方法,你可以在load() 方法中实现对应key加载数据的逻辑。在调用LoadingCache的get(key)方法时,如果key对应的value不存在,LoadingCache就会调起你在创建cache时传入的CacheLoader的load方法。
401 0