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

基本框架

<nav>
    <a href="#">Navbar</a>
    <button type="button">
        <span></span>
    </button>
    <div id="navtop">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">标题1</a>
            </li>
            <li>
                <a href="#">标题2</a>
            </li>
            <li>
                <a href="#">标题3</a>
            </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"