bootstrap 导航栏下拉菜单，居右下拉菜单-Toy模板网

这篇具有很好参考价值的文章主要介绍了bootstrap 导航栏下拉菜单，居右下拉菜单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

bootstrap 导航栏下拉菜单，居右下拉菜单,# html,bootstrap,前端,html