Bootstrap CSS——导航

最新推荐文章于 2023-02-07 00:30:00 发布

Tarkzeng

最新推荐文章于 2023-02-07 00:30:00 发布

阅读量445

点赞数

分类专栏： Bootstrap 文章标签： bootstrap css 导航

本文链接：https://blog.csdn.net/u011350527/article/details/48951493

版权

Bootstrap 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

http://v3.bootcss.com/components/#nav
mark

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航的创建</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!--标签页-->
        <!--<ul id="mytab" class="nav nav-tabs" role="tablist">-->
            <!--<li role="presentation" class="active"><a href="">Home</a> </li>-->
            <!--<li role="presentation"><a href="">Hello</a> </li>-->
            <!--<li role="presentation"><a href="">World</a> </li>-->
        <!--</ul>-->

        <!--胶囊式标签页 nav-pills-->
        <!--在ul的class中添加nav-stacked即可将其垂直展示-->
        <!--<ul id="mytab" class="nav nav-pills nav-stacked" role="tablist">-->
        <!--<ul id="mytab" class="nav nav-pills" role="tablist">-->
            <!--<li role="presentation" class="active"><a href="">Home</a> </li>-->
            <!--<li role="presentation"><a href="">Hello</a> </li>-->
            <!--<li role="presentation"><a href="">World</a> </li>-->
        <!--</ul>-->


        <!--两端对齐 nav-justified-->
        <!--<ul id="mytab" class="nav nav-pills nav-justified" role="tablist">-->
            <!--<li role="presentation" class="active"><a href="">Home</a> </li>-->
            <!--<li role="presentation"><a href="">Hello</a> </li>-->
            <!--<li role="presentation"><a href="">World</a> </li>-->
        <!--</ul>-->


        <!--禁用的链接 disabled-->
        <!--<ul id="mytab" class="nav nav-pills nav-justified" role="tablist">-->
            <!--<li role="presentation" class="active"><a href="">Home</a> </li>-->
            <!--<li role="presentation"><a href="">Hello</a> </li>-->
            <!--<li role="presentation" class="disabled"><a href="">World</a> </li>-->
        <!--</ul>-->

        <!--添加下拉菜单-->
        <ul id="mytab" class="nav nav-pills nav-justified" role="tablist">
            <li role="presentation" class="active"><a href="">Home</a> </li>
            <li role="presentation"><a href="">Hello</a> </li>
            <li role="presentation" class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">
                World
                <span class="caret"></span>
            </a>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1">Hello1</a> </li>
                    <li role="presentation"><a role="menuitem" tabindex="-1">Hello2</a> </li>
                    <li role="presentation"><a role="menuitem" tabindex="-1">Hello3</a> </li>
                </ul>
            </li>
        </ul>
    </div>


    <script src="jquery-2.1.4.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script>
        $("#mytab a").click(function(e){
            e.preventDefault();
            $(this).tab("show");
        })
    </script>
</body>
</html>