bootstrap響應式導航條示例
阿新 • • 發佈：2018-11-07
<!DOCTYPE html> <html lang="zh-cn"> <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></title> <link href="./css/bootstrap.css" rel="stylesheet"> <script src="./js/html5shiv.min.js"></script> <script src="./js/respond.min.js"></script> <style> body{ /*margin-top:50px;*/ margin-bottom:50px; } </style> </head> <body> <!--導航條包含容器,而不是反過來--> <div class="navbar navbar-default"> <div class="container"> <!--第一部分:導航條頭部(品牌+漢堡包)--> <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap</a> <a class="navbar-toggle" data-toggle="collapse" href="#mymenu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <!--第二部分:導航條摺疊部分--> <div id="mymenu" class="navbar-collapse collapse"> <!--導航條中的導航--> <ul class="nav navbar-nav"> <li><a href="">起步</a></li> <li><a href="">全域性Css樣式</a></li> <li><a href="">元件</a></li> <li><a href="">外掛</a></li> </ul> <!--導航條中的導航--> <ul class="nav navbar-nav navbar-right"> <li><a href="">註冊</a></li> <li><a href="">登入</a></li> </ul> <!--導航條中的表單--> <form class="navbar-form navbar-right" action=""> <div class="form-group"></div> <label class="sr-only" for="kw">搜尋關鍵字:</label> <input class="form-control" type="text" id="kw" placeholder="請輸入搜尋關鍵字"> </form> </div> </div> </div> <!--固定定位在底部的導航條--> <div class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="navbar-header"> <!--注意:若logo不是文字而是圖片,需要自己控制margin--> <a class="navbar-brand" href="#"> <img src="./img/tlogo.png" style="margin:-15px;" alt=""> </a> <a href="#" class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <div class="navbar-collapse" ></div> </div> </div> <div class="container"> <h3>bootstrap第三部分:元件---響應式導航條</h3> </div> <script src="./js/jquery-1.11.3.js"></script> <script src="./js/bootstrap.js"></script> </body> </html>