Bootstrap-导航栏组件

来源：互联网发布：侠客风云传前传优化编辑：程序博客网时间：2024/06/07 22:08
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="css/bootstrap.min.css"></head><body>    <nav class="navbar navbar-default  navbar-fixed-top"><!--下面的文字会被压到-->        <div class="container">            <div class="navbar-header"><!--标题区域 多个标题可用-->            <a href="#" class="navbar-brand">标题</a>            </div>            <ul class="nav navbar-nav">                <li class="active"><a href="#">首页</a></li>                <li ><a href="#">资讯</a></li>                <li><a href="#">产品</a></li>                <li><a href="#">关于</a></li>            </ul>            <form action="" class="navbar-form navbar-right">                <div class="input-group">                    <input type="text" class="form-control" />                    <div class="input-group-btn">                        <button class="btn btn-default">提交</button>                    </div>                </div>            </form>            <button class="btn btn-default navbar-btn navbar-right">按钮</button>            <p class="navbar-text ">哈哈<a href="#" class="navbar-link">oo </a></p><!--需要和文本配合起来-->        </div>    </nav>    <!--导航固定-->    <p>1</p> <p>2</p> <p>1</p> <p>1</p> <p>0</p> <p>1</p>    <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>    <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>    <!--静态导航：navbar-static-top/bottom：去掉圆角--><script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html>
阅读全文
0 0