📌  相关文章
📜  如何在 Bootstrap 中使用 navbar-inverse 创建菜单？(1)

📅  最后修改于: 2023-12-03 15:38:13.201000             🧑  作者: Mango

如何在 Bootstrap 中使用 navbar-inverse 创建菜单？

在 Bootstrap 中，可以使用 navbar-inverse 类来创建一个黑色的菜单栏（反色）。

步骤
  1. 在 HTML 中定义菜单栏结构，一般包括三个部分：navbar 标签、navbar-header 段和 navbar-collapse 段。具体可见下面示例。
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">菜单标题</a>
    </div>
    <div class="navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="#">菜单项1</a></li>
            <li><a href="#">菜单项2</a></li>
            <li><a href="#">菜单项3</a></li>
        </ul>
    </div>
  </div>
</nav>
  1. 引用 Bootstrap 的 CSS 文件，确保样式可以生效。
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
</head>
  1. 引用 Bootstrap 的 JavaScript 文件，确保菜单栏具有适当的下拉和切换动作功能。
<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
</body>
示例

以下是一个使用 navbar-inverse 样式的简单菜单栏示例。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Bootstrap</a>
    </div>
    <div class="navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">介绍</a></li>
            <li><a href="#">教程</a></li>
            <li><a href="#">样式库</a></li>
            <li><a href="#">组件</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
        </ul>
    </div>
  </div>
</nav>

效果如下：

总结

以上是使用 navbar-inverse 类在 Bootstrap 中创建菜单栏的详细步骤和示例。开发者可以根据自身需求对菜单栏进行样式和功能扩展。