bootstrap02導航菜單
阿新 • • 發佈：2017-06-29
nav control 浮動 ges js庫 文字 glyphicon navbar script
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>登錄界面</title> <!--01.引入需要的css樣式文件--> <link rel="stylesheet" href="css/bootstrap.css"> <!--02.引入我們的jQuery庫--> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <!--03.引入bootstrap的js庫--> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <!--導航菜單 默認的高度是50px navbar-fixed-top 始終位於網頁的頭部--> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!--設置文字不顯示時候的標簽--> <div class="navbar-header"> <!--這裏網頁中也可以設置成一個圖片 但是 需要設置圖片的大小--> <a class="navbar-brand">請選擇姓名</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <!--書寫 橫線--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <!-- navbar-nav 這是我們的li左浮動--> <ul class="nav navbar-nav"> <li><a href="#">小強</a></li> <li><a href="#">小紅</a></li> <li><a href="#">小白</a></li> </ul> <!--書寫登錄 註冊 搜索框--> <div class="navbar-form navbar-right"> <a href="#">登錄</a> <a href="#">註冊</a> <input type="text" class="form-control" placeholder="請輸入關鍵字"> <button class="btn btn-primary">搜索</button> </div> </div> </nav> <!--為了不遮蓋後面的內容 設置一個div高度為50px--> <div style="height: 50px"></div> <!--container:我們的代碼寫在這個容器中 就會具有一些樣式--> <div class="container"> <!--設置字體圖標 class="glyphicon glyphicon-user"--> <h1 class="page-header"><span class="glyphicon glyphicon-user"></span> 用戶登錄</h1> <form class="form-horizontal"> <div class="form-group"> <div class="col-md-5"> <input type="text" class="form-control" placeholder="請輸入用戶名/email"> </div> </div> <div class="form-group"> <div class="col-md-5"> <input type="text" class="form-control" placeholder="請輸入密碼"> </div> </div> <div class="form-group"> <div class="col-md-5"> <input type="button" class="btn btn-primary" value="登錄"> </div> </div> </form> <!--驗證能固定在網頁的頂部--> <div style="height: 1000px"></div> </div> </body> </html>
效果圖
bootstrap02導航菜單