Bootstrap组件之导航

最新推荐文章于 2025-05-15 15:43:53 发布

bboyjoe

最新推荐文章于 2025-05-15 15:43:53 发布

阅读量927

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签：前端 html5 响应式 bootstrap

本文链接：https://blog.youkuaiyun.com/bboyjoe/article/details/47160317

bootstrap 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了Bootstrap中用于创建导航组件的多种样式，包括不同类型的导航条（nav-tabs、nav-pills、nav-stacked、nav-justified）、禁用状态（disabled），以及如何通过JavaScript实现导航项的动态显示。

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

.nav——指定列表元素为导航组件；

.nav-tabs——指定导航组件的样式为标签页；

.nav-pills——指定导航组件的样式为胶囊式标签页；

.nav-stacked——指定标签页的样式为垂直堆叠排列；

.nav-justified——指定标签页的样式为两端对齐；

.disabled——设置导航栏组件的菜单项为禁用样式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>组件_导航</title>
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <script src="jquery-1.11.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <p>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#">首页</a></li>
            <li role="presentation"><a href="#">新闻资讯</a></li>
            <li role="presentation"><a href="#">关于我们</a></li>
        </ul>
    </p>
    <p>
        <ul class="nav nav-pills nav-justified" role="tablist">
            <li role="presentation" class="active"><a href="#">首页</a></li>
            <li role="presentation" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    新闻资讯
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a href="#" role="menuitem" tabindex="-1">集团要闻</a></li>
                    <li role="presentation"><a href="#" role="menuitem" tabindex="-1">行业动态</a></li>
                </ul>
            </li>
            <li role="presentation" class="disabled"><a href="#">关于我们</a></li>
        </ul>
    </p>
    <p>
        <ul class="nav nav-pills nav-stacked" role="tablist">
            <li role="presentation" class="active"><a href="#">首页</a></li>
            <li role="presentation"><a href="#">新闻资讯</a></li>
            <li role="presentation"><a href="#">关于我们</a></li>
        </ul>
    </p>
    <script>
        $(".nav a").click(function(e){
            e.preventDefault();
            $(this).tab("show");
        })
    </script>
</div>

</body>
</html>