bootstrap 导航栏下拉菜单，居右下拉菜单

news2025/11/4 18:01:39 

<!DOCTYPE html>
<html lang="en">
<head>

<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap-5.0.0-beta1-dist/css/bootstrap.min.css">

<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js"></script>


  <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark bg-dark">
  <div class="container-fluid">

    <a class="navbar-brand" href="#">
      <img src="glyph-iconset-master/svg/si-glyph-desktop.svg" alt="" width="30" height="30" class="d-inline-block align-top">
      学生管理系统
    </a>


    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown">

      <ul class="navbar-nav">

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


        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            科目管理
          </a>

          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">语文成绩</a></li>
            <li><a class="dropdown-item" href="#">数学成绩</a></li>
            <li><a class="dropdown-item" href="#">英语成绩</a></li>
          </ul>
        </li>


      </ul>
      


    </div>



<!--            <ul class="nav justify-content-end">-->
<!--        <li class="nav-item">-->
<!--          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>-->
<!--          -->
<!--        </li>-->
<!--      </ul>-->


<div class="dropdown dropdown-menu-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  登出
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">首页</a></li>
    <li><a class="dropdown-item" href="#">注销</a></li>
  </ul>
</div>




  </div>
</nav>



<div class="card text-dark bg-light ">
  <div class="card-header">欢迎登陆，学生管理系统！！！</div>
  <div class="card-body">
    <h5 class="card-title">每日一句</h5>
    <p class="card-text">少壮不努力老大徒伤悲</p>
  </div>
</div>





</body>
</html>

 缩放300% 样式还是很好看的

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/977934.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Ubuntu22.04 LTS 显卡相关命令

Ubuntu22.04 LTS 显卡相关命令

第一部分查看驱显卡信息 一、查看显卡型号 # -i表示不区分大小写 lspci | grep -i nvidia # 必须安装好nvidia驱动 nvidia-smi -L 二、查看显卡驱动版本 cat /proc/driver/nvidia/version 三、查看CUDA、cuDNN版本 # 或者 nvcc -V&#xff08;两个显示的版本一致&#xf…
阅读更多...
指针和字符数组笔试题及其解析(第一组)

指针和字符数组笔试题及其解析(第一组)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 前言&#xff1a; 数组名在寻常情况下表示首元素地址&#xff0c;但有两种情况例外&#xff1a; 1.sizeof(数组名)&#xff0c;这里的数组名表示整个数组&#xff0c;计算的是整个数组的大小 2.&数组名&#xff0c;这里的…
阅读更多...
【KRouter】一个简单且轻量级的Kotlin Routing框架

【KRouter】一个简单且轻量级的Kotlin Routing框架

【KRouter】一个简单且轻量级的Kotlin Routing框架 KRouter&#xff08;Kotlin-Router&#xff09;是一个简单而轻量级的Kotlin路由框架。 具体来说&#xff0c;KRouter是一个通过URI来发现接口实现类的框架。它的使用方式如下&#xff1a; val homeScreen KRouter.route&l…
阅读更多...
C# PSO 粒子群优化算法 遗传算法 随机算法 求解复杂方程的最大、最小值

C# PSO 粒子群优化算法 遗传算法 随机算法 求解复杂方程的最大、最小值

复杂方程可以自己定义&#xff0c;以下是看别人的题目&#xff0c;然后自己来做 以下是计算结果 private void GetMinResult(out double resultX1, out double min){double x1, result;Random random1 new Random(DateTime.Now.Millisecond* DateTime.Now.Second);min 99999…
阅读更多...
创建MyBatis的映射文件模板

创建MyBatis的映射文件模板

Settings->Editor->->Code Style->File and Code Templates <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dt…
阅读更多...
tomcat部署、tomcat虚拟主机及tomcat多实例

tomcat部署、tomcat虚拟主机及tomcat多实例

目录 一、Tomcat概述 tomcat是什么&#xff1f; 什么是 servlet&#xff1f; 什么是 JSP? Tomcat 功能组件结构 Container 结构分析 Tomcat 请求过程 二、Tomcat部署 1、关闭防火墙和selinux&#xff0c;并将Tomcat所需软件包传到/opt目录下 2、安装JDK 3、设置JDK…
阅读更多...
MATLAB 2022b 中设置关闭 MATLAB 之前进行询问

MATLAB 2022b 中设置关闭 MATLAB 之前进行询问

在 MATLAB 2022b 中可以进行设置&#xff0c;在关闭 MATLAB 之前进行询问&#xff0c;防止意外关闭 MATLAB。如图&#xff1a;
阅读更多...
《Effective STL》读书笔记（一）：容器

《Effective STL》读书笔记（一）：容器

容器类型&#xff1a; 标准STL序列容器&#xff1a;vector, string, deque, list标准STL关联容器&#xff1a;set, multiset, map, multimap非标准序列容器slist和rope非标准关联容器&#xff1a;hash_set, hash_multiset, hash_map, hash_multimap标准的非STL容器&#xff1a…
阅读更多...
LabVIEW利用纳米结构干电极控制神经肌肉活动

LabVIEW利用纳米结构干电极控制神经肌肉活动

LabVIEW利用纳米结构干电极控制神经肌肉活动 随着人口老龄化&#xff0c;长期护理的必要性变得更加重要&#xff0c;医疗中心的压力开始达到惊人的水平。全球对所有社会和经济部门的认识对于更好地协调卫生和社会服务之间的护理以及为更多的院外治疗提供条件至关重要。 关于医…
阅读更多...
SSE 和 WebSocket 应用

SSE 和 WebSocket 应用

SSE 和 WebSocket 应用 一.SSE 和 WebSocket 对比二.SSE 和 WebSocket 调试SpringBoot 下 SSE 应用1.依赖2.启动类3.接口类4.Html 测试5.测试结果 SpringBoot 下 WebSocket 应用1.依赖2.启动类3.WS 切点配置4.WS连接类配置5.WS Html 测试6.测试结果 一.SSE 和 WebSocket 对比 …
阅读更多...
数据结构与算法-选择冒泡快排

数据结构与算法-选择冒泡快排

一&#xff1a;选择排序 场景&#xff1a;找出一个班上身高最高的人你会怎么找&#xff1f;A B C D A B 选择排序的思路和插入排序非常相似&#xff0c;也分已排序和未排序区间。但选择排序每次会从未排序区间中找到最小的元素&#xff0c;将其放到已排序区间的末尾。但是不像插…
阅读更多...
浅谈硬件连通性测试方法有哪些

浅谈硬件连通性测试方法有哪些

硬件连通性测试是一种用于验证硬件设备之间连接的稳定性和可靠性的测试过程。那么&#xff0c;硬件连通性测试方法有哪些呢?下面&#xff0c;就来看看具体介绍吧! 1、电气测试&#xff1a;电气测试用于检查硬件设备之间的电源和信号连接。这包括使用万用表或示波器测量电压、电…
阅读更多...
Java开发之Redis（面试篇 持续更新）

Java开发之Redis（面试篇 持续更新）

文章目录 前言一、redis使用场景1. 知识分布2. 缓存穿透① 问题引入② 举例说明③ 解决方案④ 实战面试 3. 缓存击穿① 问题引入② 举例说明③ 解决方案④ 实战面试 4. 缓存雪崩① 问题引入② 举例说明③ 解决方案④ 实战面试 5. 缓存-双写一致性① 问题引入② 举例说明③ 解决…
阅读更多...
面试设计模式-责任链模式

面试设计模式-责任链模式

一 责任链模式 1.1 概述 在进行请假申请&#xff0c;财务报销申请&#xff0c;需要走部门领导审批&#xff0c;技术总监审批&#xff0c;大领导审批等判断环节。存在请求方和接收方耦合性太强&#xff0c;代码会比较臃肿&#xff0c;不利于扩展和维护。 1.2 责任链模式 针对…
阅读更多...
uboot命令解析流程

uboot命令解析流程

uboot命令解析: (1)bootdelay没有打断,跑的是autoboot_command abortboot —>run_command_list (bootcmd) (2)否则走的cli_loop cli_loop –>cli_simple_loop ----> cli_readline —>run_command_repeatable -----> &#xff08;解析命令 匹配命令 运行命令 ) …
阅读更多...
lv3 嵌入式开发-8 linux shell脚本函数

lv3 嵌入式开发-8 linux shell脚本函数

目录 1 函数的定义 2 函数的调用 3 变量的作用域 4 练习 1 函数的定义 基本语法&#xff1a; function name() {statements[return value] }function是 Shell 中的关键字&#xff0c;专门用来定义函数&#xff1b; name是函数名&#xff1b; statements是函数要执行…
阅读更多...
java八股文面试[数据库]——自适应哈希索引

java八股文面试[数据库]——自适应哈希索引

自适应Hash索引&#xff08;Adatptive Hash Index&#xff0c;内部简称AHI&#xff09;是InnoDB的三大特性之一&#xff0c;还有两个是 Buffer Pool简称BP、双写缓冲区&#xff08;Doublewrite Buffer&#xff09;。 1、自适应即我们不需要自己处理&#xff0c;当InnoDB引擎根…
阅读更多...
FOXBORO FBM232 P0926GW 自动化控制模块

FOXBORO FBM232 P0926GW 自动化控制模块

Foxboro FBM232 P0926GW 是 Foxboro&#xff08;福克斯博罗&#xff09;自动化控制系统的一部分&#xff0c;通常用于监测和控制工业过程。以下是关于这种类型的自动化控制模块可能具有的一些常见功能&#xff1a; 数字输入通道&#xff1a; FBM232 P0926GW 控制模块通常具有多…
阅读更多...
2、在Windows 10中安装和配置 PostgreSQL 15.4

2、在Windows 10中安装和配置 PostgreSQL 15.4

一、PostgreSQL 安装前简介 PostgreSQL&#xff08;通常简称为PG SQL&#xff09;是一个强大、开源的关系型数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;它具有广泛的功能和可扩展性&#xff0c;被广泛用于企业和开发项目中,PostgreSQL 具有如下一些关键特点&…
阅读更多...
VUE3+TS项目无法找到模块“../version/version.js”的声明文件

VUE3+TS项目无法找到模块“../version/version.js”的声明文件

问题描述 在导入 ../version/version.js 文件时&#xff0c;提示无法找到模块 解决方法 将version.js改为version.ts可以正常导入 注意&#xff0c;因为version.js是我自己写的模块&#xff0c;我可以直接该没有关系&#xff0c;但是如果是引入的其他的第三方包&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023