16. 制作Tab菜单

Bootstrap4入门

优酷频道 技术频道

制作Tab菜单

知识点

  • 制作Tab内容布局

参考网页:

https://getbootstrap.com/docs/4.0/components/navs/

实战演习

<section class="py-5">
    <h2 class="text-center">我爱NBA</h2>
    <div class="container">
        <ul>
            <li><a href="#east">东部(East)</a></li>
            <li><a href="#west">西部(West)</a></li>
        </ul>
        <div id="east">
            <p>2018年东部冠军是凯尔特人还是骑士?不会是猛龙吧?</p>
        </div>
        <div id="west">
            <p>西部冠军肯定是勇士了,不过火箭今天也很不错。</p>
        </div>
    </div>
</section>

课程文件

https://gitee.com/komavideo/LearnBootstrap4

小马视频频道

http://komavideo.com