除了制作選項卡和下拉菜單，bootstrap還能編寫出美觀的網站導航欄
一、仿知乎導航欄
<body>
<nav class="navbar navbar-default navbar-fixed-top"> <!-- navbar-default 指導航欄的默認樣式 navbar-fixed-top 指導航欄在頂部固定定位 --> <div class=container> <!-- 將contianer放在 nav標簽內可以保證導航欄在 左右方向上覆蓋住整個窗口 --> <div class="navbar-header"> <a href="#" class="navbar-brand"><img src="img/zhihulogo.png" /></a> <!-- logo應該放在類名為 navbar-header 的div元素里 --> </div> <form class="navbar-form navbar-left"> <!-- navbar-left 指元素向左浮動 --> <div class="input-group"> <input type="text" class="form-control" style="320px" placeholder="search your xxx"/> <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-search"></span></a></span> </div> </form> <ul class="nav navbar-nav navbar-left"> <li><a href="#">首頁</a></li> <li><a href="#">話題</a></li> <li><a href="#">發現</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span>注冊知乎</a></li> <li><a href="#">登錄</a></li> </ul> <button class="btn btn-primary navbar-btn navbar-right">提問</button> </div> </nav> </body>
<style>
body{margin-top: 50px;}
.myBtnStyle .dropdown-menu span{
margin:5px;
}
.myBtnStyle .dropdown-menu {
animation: 0.5s linear fadeIn;
}
@keyframes fadeIn {
0%{opacity:0;transform: translateY(-20);}
100%{opacity: 1;transform: translateY(0);}
}
tab-content {
border:1px solid #999; border-top: none;border-radius: 0 0 5px 5px;
}
.container {
width: 960px
}
.navbar-default{
background: linear-gradient(to bottom,#086ed5, #055db5) !important;
}
.navbar-header{
margin-top: -3px;
}
.navbar-nav a {
color:snow !important;
}
</style>
樣式如圖所示
二、響應式導航
方便移動端，在窗口縮小的時候，可以將導航欄中的內容隱藏，點擊導航欄中按鈕后展開
<body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse"> //窗口縮小后顯示的按鈕也放在navbar-header中，和logo元素 navbar-brand 類同級； <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> //用三個icon-bar做出的按鈕，三道杠，每個span各代表一條杠 </button> <a href="#" class="navbar-brand">logo</a> </div> <div class="collapse navbar-collapse" id="myCollapse"> //將需要隱藏的內容放入collapse，設置一個id，和上面的data-target關聯 <ul class="nav navbar-nav"> <li><a href="#a">第一個</a></li> <li><a href="#b">第二個</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">第三個 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#c">child1</a></li> <li><a href="#d">child2</a></li> </ul> </li> </ul> </div> </div> </nav> </body>
如圖：
三、滾動監聽導航
對於比較長的網頁，可以做出導航欄內元素和網頁內容位置相對應的效果
<style> body{padding-top: 50px;} //因為導航欄固定定位，所以給內容一個paddingTop讓導航欄不擋住網頁內容 body{position: relative;height: 2000px;} //body需要相對定位 .pos{margin-bottom: 500px;padding-top: 50px;} //填充內容 無實際意義 </style> </head> <body data-spy="scroll" data-target="#myNavbar" data-offset="200"> //用data-spy="scroll" 來設置滾動監聽， data-offset是用來調整元素對應的相應位置，對該數值嘗試做出調整就可以體會到其作用 <nav id="myNavbar" class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">logo</a> </div> <div id="myCollapse" class="navbar-collapse"> //此處復制了上面部分的代碼，collapse這里可以忽略 - -！ <ul class="nav navbar-nav"> <li><a href="#a">first</a></li> //href 和 需要對應的位置的元素id 要對應 <li><a href="#b">second</a></li> <li><a href="#c">third</a></li> </ul> </div> </div> </nav> <div id="a" class="pos">aaaa</div> <div id="b" class="pos">bbbb</div> <div id="c" class="pos">cccc</div> </body>