Bootstrap CSS——导航

来源：互联网发布：淘宝刷手是什么意思编辑：程序博客网时间：2024/04/25 07:21
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>
0 0