(文章已過時)navigation navbar 導航條或叫導覽列
一、navigation bar原理拆解
<!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 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <label>當寬度小於768px就會隱藏</label> </div> </div> </nav> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
(1)使用<nav>來宣告導航範圍。
(2)導航條預設都會套用navbar-default樣式，navbar-default樣式主要影響文字顏色。
(3)navbar-header為導航條的特異部分，通常會放navbar-toggle與navbar-brand。
(4)navbar-brand與navbar-toggle兩部分所放的位置可不分先後順序，因為navbar-toggle裡有一個屬性為float:right。
(5)上例的
<label>當寬度小於768px就會隱藏</label>
樣式有點醜，該改成
<p class="navbar-text">當寬度小於768px就會隱藏</p>
(6)navbar-header、navbar-brand、navbar-toggle(hamburger)為樣式
(7)藉由data-toggle="collapse"來綁定click事件，來添加collapsed樣式
(8)藉由data-target="#bs-example-navbar-collapse-1"來綁定click事件，來指向目標id
(9)data-target="#bs-example-navbar-collapse-1"可以改寫成
data-target=".bs-example-navbar-collapse-1"，當然其標的物也要改成
<div class="collapse navbar-collapse bs-example-navbar-collapse-1">
二、其他導覽列範例
1、導覽列預設範例
<!DOCTYPE html> <html> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <style type="text/css"> html, body { height: 100%; } .height-100 { height: 100%; border: 1px blue solid; } #a { background: #FF5; } #b { background: #F5F; } #c { background: #5FF; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#a">Page 1</a></li> <li><a href="#b">Page 2</a></li> <li><a href="#c">Page 3</a></li> </ul> </div> </div> </nav> <div class="height-100" id="a">a</div> <div class="height-100" id="b">b</div> <div class="height-100" id="c">c</div> <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </body> </html>
其版面有預設navbar-default樣式與navbar-inverse兩種
2、navbar動作
navbar有四種動作分別是
navbar-fixed-top與navbar-fixed-bottom與navbar-static-top與navbar-static-bottom
navbar-fixed-top：不管滑鼠怎麼捲動，navigation bar 為固定在視窗上。
navbar-static-top：為navigation bar會隨著滑鼠捲動消失在視窗上。
<!DOCTYPE html> <html> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav> <p>1</P> <p>2</P> <p>3</P> <p>4</P> <p>5</P> <p>6</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <p>1</P> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
官方建議搭配以下CSS，以免body內容被遮到
<style>
body {padding-top:50px;}
</style>
3、navbar-left與navbar-right
於navigation bar右側加入兩個項目signUp&Login
<!DOCTYPE html> <html> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li> </ul> </div> </div> </nav> <p>1</P> <p>1</P> <p>1</P> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
4、navbar-form
form-inline與navbar-form的不同
<!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 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <form class="form-inline navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
5、自訂navbar特效
<!DOCTYPE html> <html> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <style type="text/css"> html, body { height: 100%; } .height-100 { height: 100%; border: 1px blue solid; } #a { background: #FF5; } #b { background: #F5F; } #c { background: #5FF; } .navbar-custom .nav li a { transition: background .3s ease-in-out; } .navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus, .navbar-custom .nav li a:active { background-color: rgba(100,255,100,1); } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top navbar-custom"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#a">Page 1</a></li> <li><a href="#b">Page 2</a></li> <li><a href="#c">Page 3</a></li> </ul> </div> </div> </nav> <div class="height-100" id="a">a</div> <div class="height-100" id="b">b</div> <div class="height-100" id="c">c</div> <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </body> </html>
6、其他
如navbar-btn、navbar-text、navbar-link
參考網址：