Bootstrap常用的导航栏_bootsharp tab-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_27905183/article/details/71105577

本文介绍了几种常见的网页导航设计样式，包括普通tabs选项卡导航栏、pills胶囊导航栏、垂直导航栏、自适应导航栏及二级导航菜单等。通过这些实例可以帮助开发者更好地理解和应用不同类型的导航设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <!-- 设计页面导航 -->
    <div class="container">
        <!-- 普通tabs选项卡导航栏 -->
        <ul class="nav nav-tabs">
            <li><a href="javascript:void(0);">网页</a></li>
            <li><a href="javascript:void(0);">音乐</a></li>
            <li><a href="javascript:void(0);">视频</a></li>
            <li><a href="javascript:void(0);">贴吧</a></li>
        </ul>，，                   
        <!-- pills胶囊导航栏 -->
        <ol class="nav nav-pills">
            <li class="active"><a href="javascript:void(0);">网页</a></li>
            <li><a href="javascript:void(0);">音乐</a></li>
            <li><a href="javascript:void(0);">视频</a></li>
            <li><a href="javascript:void(0);">贴吧</a></li>
        </ol>
        <!-- 垂直导航栏 -->
        <ol class="nav nav-pills nav-stacked">
            <li class=""><a href="javascript:void(0);">网页</a></li>
            <li class=""><a href="javascript:void(0);">音乐</a></li>
            <li class=""><a href="javascript:void(0);">视频</a></li>
            <li class=""><a href="javascript:void(0);">贴吧</a></li>
        </ol>
        <!-- 自适应导航栏 -->
        <ol class="nav nav-pills nav-justified">
            <li class="active"><a href="javascript:void(0);">网页</a></li>
            <li><a href="javascript:void(0);">音乐</a></li>
            <li><a href="javascript:void(0);">视频</a></li>
            <li><a href="javascript:void(0);">贴吧</a></li>
        </ol>
        <!-- 二级导航栏菜单 -->
        <ol class="nav nav-pills nav-justified">
            <li><a href="javascript:void(0);">网页</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                    音乐<span class="caret"></span>
                </a>
                <ul class="dropdown-menu nav-pills">
                    <li><a href="javascript:void(0);">网页</a></li>
                    <li><a href="javascript:void(0);">音乐</a></li>
                    <li><a href="javascript:void(0);">视频</a></li>
                    <li><a href="javascript:void(0);">贴吧</a></li>
                </ul>
            </li>
            <li><a href="javascript:void(0);">视频</a></li>
            <li><a href="javascript:void(0);">贴吧</a></li>
        </ol>
        <!-- 面包屑导航 -->
        <ol class="breadcrumb">
            <li><a href="javascript:void(0);">网页</a></li>
            <li><a href="javascript:void(0);">音乐</a></li>
            <li><a href="javascript:void(0);">视频</a></li>
            <li class="active"><a href="javascript:void(0);">贴吧</a></li>
        </ol>
    </div>
</body>

这里写图片描述