20.导航条(一)

2024-04-27 15:12:09

字体：大中小

来源：转载

供稿：网友

navbar 导航条的基础样式nav navbar-nav 导航条里菜单的的固定样式组合的classnavbar-default 导航条的默认样式navbar-inverse 黑色的导航条navbar-static-top 直角导航navbar-fixed-top 导航条固定在最上边navbar-fixed-bottom 导航条固定在最下边，不会随滚动条的移动而移动<!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>

这里写图片描述