^{<small id="a7du8"></small>}

20.導(dǎo)航條(一)

2024-04-27 15:12:09

字體：大中小

供稿：網(wǎng)友

navbar 導(dǎo)航條的基礎(chǔ)樣式nav navbar-nav 導(dǎo)航條里菜單的的固定樣式組合的classnavbar-default 導(dǎo)航條的默認(rèn)樣式navbar-inverse 黑色的導(dǎo)航條navbar-static-top 直角導(dǎo)航navbar-fixed-top 導(dǎo)航條固定在最上邊navbar-fixed-bottom 導(dǎo)航條固定在最下邊，不會(huì)隨滾動(dòng)條的移動(dòng)而移動(dòng)<!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> <div class="container"> <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li><a href="#">蘋果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </nav> <nav class="navbar navbar-inverse"> <ul class="nav navbar-nav"> <li><a href="#">蘋果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </nav> <nav class="navbar navbar-default navbar-static-top"> <ul class="nav navbar-nav"> <li><a href="#">蘋果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </nav> <nav class="navbar navbar-inverse navbar-fixed-top"> <ul class="nav navbar-nav"> <li><a href="#">蘋果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </nav> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <ul class="nav navbar-nav"> <li><a href="#">蘋果</a></li> <li><a href="#">香蕉</a></li> <li><a href="#">橘子</a></li> </ul> </nav> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script></body></html>

這里寫圖片描述