Bootstrap导航栏和下拉菜单_bootsrap navbar 下拉菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/tydyz/article/details/76099525

本文详细介绍了如何创建Bootstrap导航栏和下拉菜单。通过使用nav、navbar-default、container、navbar-header等类创建导航栏，以及dropdown、btn、dropdown-menu等类实现下拉菜单功能。提供了一个完整的代码实例，帮助读者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导航栏写法示例：
这里写图片描述

<nav class="nav navbar-default">
    <div class="container">
        <div class="navbar-header">
            <!--此处写导航栏的Header-->
            <p class="navbar-brand">IT</p>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Java</a></li>
            <li><a href="#">C/C++</a></li>
            <li><a href="#">Shell</a></li>
            <li><a href="#">Python</a></li>
        </ul>
    </div>
</nav>

此例中，导航栏有个nav标签作为整个导航栏的容器，它的class是nav navbar-default;下一层则是一个div标签作为一个Bootstrap的container容器，这里的作用是限定容器为页面的中心位置，并左右各据边界一定距离，让页面看起来不偏不倚;里层责包含的两个部分，一部分是导航栏的头（header），div作为导航栏的头部，class为navbar-header，在这个div里可以安排一些内容作为导航栏最左边的头部;还有一部分就是无序表，作为导航menu，ul的class为nav navbar-nav。

下拉菜单示例：
这里写图片描述

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Java</a></li>
        <li><a href="#">C/C++</a></li>
        <li><a href="#">Python</a></li>
        <li><a href="#">Php</a></li>
    </ul>
</div>

在下拉菜单中，它的容器是div，class为dropdown;里层由button构成触发btn，由ul/li无序表构成触发后的下拉菜单列表。button的class为btn btn-primary，还需要设置属性data-toggle=”dropdown”,才能实现下拉的功能;ul的class为dropdown-menu。

完整代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

<nav class="nav navbar-default">
    <div class="container">
        <div class="navbar-header">
            <!--此处写导航栏的Header-->
            <p class="navbar-brand">IT</p>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Java</a></li>
            <li><a href="#">C/C++</a></li>
            <li><a href="#">Shell</a></li>
            <li><a href="#">Python</a></li>
        </ul>
    </div>
</nav>

<hr>
<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Java</a></li>
        <li><a href="#">C/C++</a></li>
        <li><a href="#">Python</a></li>
        <li><a href="#">Php</a></li>
    </ul>
</div>


    <script src="js/jquery-3.1.1.js"></script>
    <script SRC="js/bootstrap.js"></script>
</body>
</html>