header.html

<header>
    <div class=" w-100 navbar navbar-expand-sm navbar-dark w-100 ">
        <!--1.最前面不折叠的菜单-->
        <img class="img-fluid " src="img/index/zaha-logo.gif" alt=""/>
        <!--2.在小屏幕时出现的按钮，按钮上有三条线-->
        <button data-toggle="collapse" data-target="#content" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!--3.折叠的菜单，小屏以上横向显示，下屏幕以下垂直-->
        <div id="content" class="collapse navbar-collapse ">
            <ul class="navbar-nav ">
                <li class="nav-item"><a class="nav-link" href="index.html">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="place.html">培训地点</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"><a class="nav-link" href="videos.html">视频</a></li>
                <li class="nav-item"><a class="nav-link" href="">常见问题</a></li>
                <li class="nav-item"><a class="nav-link" href="">在线报名</a></li>
            </ul>
        </div>
    </div>
</header>