21.导航条(二)

2024-04-27 15:12:14

字体：大中小

来源：转载

供稿：网友

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 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> <a href="#" class="navbar-link navbar-text">链接</a> <p class="navbar-text">这里是一段文字</p> <ul class="nav navbar-nav navbar-right"> <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"> <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>

这里写图片描述