부트스트랩은 간단한 측면 탐색 모음 효과를 구현합니다.

    <!--手机导航栏-->
    <div>
        <ul>
            <li><a>首页</a></li>
            <li><a>Java</a></li>
            <li><a>SVN</a></li>
            <li><a>iOS</a></li>
        </ul>
    </div>
    <!--pc导航栏-->
    <nav>
        <div>
            <div>
                <a>菜鸟教程</a>
            </div>
            <div>
                <ul>
                    <li><a>iOS</a></li>
                    <li><a>SVN</a></li>
                    <li><a>Java</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--手机导航栏侧滑-->
    <div>
        <a>
            <span></span>
        </a>
    </div>

         * {margin:0;padding:0;}
         #mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;background-color:#373737;z-index:9999;}
         a:hover ,a:focus{text-decoration:none}
        .mobile-nav ul li a {color:gray;display:block;padding:1em 5%;    border-top:1px solid #4f4f4f;border-bottom:1px solid #292929;transition:all 0.2s ease-out;cursor:pointer;#mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;background-color:#373737;z-index:9999;transition:all 0.3s ease-in;}}
        .mobile-nav ul li a:hover {background-color: #23A1F6;color: #ffffff;}
        .show-nav {transform:translateX(0);}
        .hide-nav {transform:translateX(-220px);} /*侧滑关键*/
        .mobile-nav-taggle {height:35px;line-height:35px;width:35px;background-color:#23A1F6;color:#ffffff;display:inline-block;text-align:center;cursor:pointer}
        .nav.avbar-inverse{position:relative;}
        .nav-btn {position:absolute;right:20px;top:20px;}