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>

這里寫圖片描述