首页 > 代码库 > Bootstrap组件之导航

Bootstrap组件之导航

2024-09-16 20:20:21   219人阅读

.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="http://www.mamicode.com/bootstrap.min.css" type="text/css">
    <!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <script src="http://www.mamicode.com/jquery-1.11.1.min.js"></script>
    <script src="http://www.mamicode.com/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <p>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="http://www.mamicode.com/#">首页</a></li>
            <li role="presentation"><a href="http://www.mamicode.com/#">新闻资讯</a></li>
            <li role="presentation"><a href="http://www.mamicode.com/#">关于我们</a></li>
        </ul>
    </p>
    <p>
        <ul class="nav nav-pills nav-justified" role="tablist">
            <li role="presentation" class="active"><a href="http://www.mamicode.com/#">首页</a></li>
            <li role="presentation" class="dropdown">
                <a href="http://www.mamicode.com/#" class="dropdown-toggle" data-toggle="dropdown">
                    新闻资讯
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a href="http://www.mamicode.com/#" role="menuitem" tabindex="-1">集团要闻</a></li>
                    <li role="presentation"><a href="http://www.mamicode.com/#" role="menuitem" tabindex="-1">行业动态</a></li>
                </ul>
            </li>
            <li role="presentation" class="disabled"><a href="http://www.mamicode.com/#">关于我们</a></li>
        </ul>
    </p>
    <p>
        <ul class="nav nav-pills nav-stacked" role="tablist">
            <li role="presentation" class="active"><a href="http://www.mamicode.com/#">首页</a></li>
            <li role="presentation"><a href="http://www.mamicode.com/#">新闻资讯</a></li>
            <li role="presentation"><a href="http://www.mamicode.com/#">关于我们</a></li>
        </ul>
    </p>
    <script>
        $(".nav a").click(function(e){
            e.preventDefault();
            $(this).tab("show");
        })
    </script>
</div>

</body>
</html>
技术分享

Bootstrap组件之导航


联系
我们