21. 制作汉堡菜单

Bootstrap4入门

优酷频道 技术频道

制作汉堡菜单

知识点

  • navbar-toggler

参考网页:

https://getbootstrap.com/docs/4.0/components/navbar/#toggler

实战演习

<header>
    <div class="container">
        <nav class="navbar navbar-expand-md navbar-light">
            <a href="#" class="navbar-brand">KomaVideo</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="menu" class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Youku</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Youtube</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">ITStudy</a></li>
                </ul>
            </div>
        </nav>
    </div>
...
</header>

课程文件

https://gitee.com/komavideo/LearnBootstrap4

小马视频频道

http://komavideo.com