Bootstrap实现基本导航栏折叠效果

基本框架

<nav>
    <a href="#">Navbara>
    <button type="button">
        <span>span>
    button>
    <div id="navtop">
        <ul>
            <li>
                <a href="#">首页a>
            li>
            <li>
                <a href="#">标题1a>
            li>
            <li>
                <a href="#">标题2a>
            li>
            <li>
                <a href="#">标题3a>
            li>
        ul>
    div>
nav>

引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css" />

引入JS

<script src="js/popper.min.js" type="text/javascript" charset="utf-8">script>
<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript" charset="utf-8">script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8">script>

nav标签

class="navbar bg-dark navbar-expand-sm navbar-dark"

标题a标签

class="navbar-brand" 

button标签

 class="navbar-toggler" data-toggle="collapse" data-target="#navtop"

span标签

class="navbar-toggler-icon"

div标签

class="show collapse navbar-collapse" 

ul标签

class="navbar-nav"

li标签

class="nav-item"

li中a标签

class="nav-link"