基本导航条
<!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed-top滚动时固定在顶部 (根据导航条的高度 给body的margin-top可以解决导航条遮盖问题) navbar-fixed-bottom滚动时固定在底部 --> <nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-fixed-top"> <!-- 把容器写在导航里(常用做法) --> <div class="container"> <!-- navbar-brand用来存放logo (需要一个容器navbar-header包裹住) --> <div class="navbar-header"> <a href="" class="navbar-brand">此处存放logo</a> </div> <!-- nav navbar-nav 菜单 --> <!-- 导航左浮动navbar-left 右浮动navbar-right --> <!-- navbar-btn使导航中的按钮垂直居中 --> <!-- navbar-link 改变链接颜色 --> <!-- navbar-text使文字垂直居中 --> <!-- navbar-form用于form表单 --> <ul class="nav navbar-nav"> <li class="active"><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> </div> </nav>
响应式导航条
<nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <!-- navbar-toggle导航条点击切换 --> <!-- data-target指定要切换的菜单 --> <button class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse"> <!-- icon-bar 横条 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="" class="navbar-brand">此处存放logo</a> </div> <!-- collapse navbar-collapse 折叠 --> <div class="collapse navbar-collapse" id="myCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> </div> </div> </nav>
滚动监听
<!-- data-offset='200'距离顶端200px时发生变化 --> <!-- data-target 指定监听的元素 --> <!-- data-spy 指定监听事件 --> <body data-spy="scroll" data-target="#myNavbar" data-offset="200"> <!-- 滚动监听 在监听的元素必须有相对定位 --> <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 class="collapse navbar-collapse" id="myCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#aa">one</a></li> <li><a href="#bb">two</a></li> <li><a href="#cc">three</a></li> </ul> </div> </div> </nav> <div id="aa" class="pos">aaaaaaaa</div> <div id="bb" class="pos">bbbbbbbb</div> <div id="cc" class="pos">cccccccc</div> </body>