21.导航条(二)

来源：互联网发布：公司组建网络设置编辑：程序博客网时间：2024/04/30 20:23

navbar-header      导航的头部，一般情况下用来放置logonavbar-brand       用来放置logo，需要配合navbar-header使用

<!doctype html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Bootstrap</title>    <link rel="stylesheet" href="css/bootstrap.css" /></head><body>    <!--有链接和文字的导航条-->    <nav class="navbar navbar-default">        <div class="container"><!--将外围的div放在nav标签里面-->            <div class="navbar-header">                <a href="#" class="navbar-brand">logo</a><!--navbar-brand 用来放置logo的-->            </div>            <ul class="nav navbar-nav">                <li><a href="#">苹果</a></li>                <li><a href="#">香蕉</a></li>                <li><a href="#">橘子</a></li>            </ul>            <a href="#" class="navbar-link navbar-text">链接</a><!--navbar-link为导航里的链接-->            <p class="navbar-text">这里是一段文字</p><!--navbar-text为导航里的文字-->            <ul class="nav navbar-nav navbar-right"><!--右对齐，而navbar-left为左对齐-->                <li><a href="#">登录</a></li>                <li><a href="#">注册</a></li>            </ul>        </div>    </nav>    <!--有表单的导航条-->    <nav class="navbar navbar-default">        <div class="container">            <div class="navbar-header">                <a href="#" class="navbar-brand">logo</a>            </div>            <ul class="nav navbar-nav">                <li><a href="#">苹果</a></li>                <li><a href="#">香蕉</a></li>                <li><a href="#">橘子</a></li>            </ul>            <button class="btn btn-default navbar-btn navbar-left">搜索</button>            <form action="URL" class="navbar-form navbar-left"><!--navbar-form是在导航条里添加表单，navbar-left使表单左浮动，使其与其他内容在一行显示-->                <input type="text" class="form-control"/>                <button class="btn btn-default">搜索</button>            </form>            <ul class="nav navbar-nav navbar-right">                <li><a href="#">登录</a></li>                <li><a href="#">注册</a></li>            </ul>        </div>    </nav>    <script src="js/jquery-2.1.0.js"></script>    <script src="js/bootstrap.js"></script></body></html>

这里写图片描述

0 0