BootStrap导航条表单，搜索，固定，下拉式按钮

来源：互联网发布：淘宝密码修改中心编辑：程序博客网时间：2024/05/01 02:19
摘自《极客学院》
1、效果图：
2、html代码：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" href="bootstrap.min.css">    <title>BootStrap navbar</title></head><body>    <!--class=navbar-fixed-top导航条固定在顶部，class=navbar-inverse黑色背景-->    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">        <div class="container-fluid">            <div class="navbar-header">                <a class="navbar-brand" href="#">匆匆</a>            </div>            <div class="collapse navbar-collapse">                <ul class="nav navbar-nav" id="mytab">                    <li class="active"><a href="#">LINK</a></li>                    <li><a href="#">LINK</a></li>                    <li><a href="#">LINK</a></li>                </ul>                <form class="narbar-form navbar-left" role="search">                    <div class="form-group col-xs-9" style="margin-top: 10px;">                        <input type="text" placeholder="搜索" class="form-control">                    </div>                    <button type="submit" class="btn btn-default col-xs-3" style="margin-top: 10px">搜索</button>                </form>                <ul class="nav navbar-nav navbar-right">                    <li><a href="#">Link</a></li>                    <li class="dropdown">                        <!--data-toggle与JS文件有关-->                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">                            点我`                           <span class="caret"></span>                        </a>                        <ul class="dropdown-menu" role="menu">                            <li><a href="" role="menuitem">fff</a></li>                            <li><a href="" role="menuitem">fff</a></li>                            <li><a href="" role="menuitem">fff</a></li>                            <li><a href="" role="menuitem">fff</a></li>                        </ul>                    </li>                </ul>            </div>        </div>    </nav>    hello    <br><br><br><br><br><br><br><br><br><br><br><br><br>    <br><br><br><br><br><br><br><br><br><br><br><br><br>    <br><br><br><br><br><br><br><br><br><br><br><br><br>    <br><br><br><br><br><br><br><br><br><br><br><br><br>    <br><br><br><br><br><br><br><br><br><br><br><br><br>    <br><br><br><br><br><br><br><br><br><br><br><br><br>    <br><br><br><br><br><br><br><br><br><br><br><br><br>    hheefd    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">        <ol class="breadcrumb">            <li><a href="">home</a></li>            <li><a href="">library</a></li>            <li><a href="">data</a></li>        </ol>    </nav>    <script src="jquery-2.1.1.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