了解bootstrap导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
两端对齐的导航条导航链接已经被弃用了。
nav class="navbar navbar-default navbar-fixed-top" role="navigation"
div class="container"
div class="navbar-header"
button type="button" class="navbar-toggle" 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="#" 百度 /a
/div
div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"
ul class="nav navbar-nav"
li class="active">
li class="dropdown" a href="" class="dropdown-toggle" data-toggle="dropdown" QQ span class="caret" /span /a
ul class="dropdown-menu" role="menu"
li 11 /li
li 22 /li
li 33 /li
li class="divider" /li
li 44 /li
/ul
/li
/ul
/div
/div
/nav
添加 .navbar-fixed-top
类可以让导航条固定在顶部,还可包含一个 .container
或 .container-fluid
容器,从而让导航条居中,并在两侧添加内补(padding)。
通过添加 .navbar-inverse
类可以改变导航条的外观。
你还可以将 active 或 disabled 状态应用于 标签,或者在向前/向后的箭头处省略
标记,即替换 标签,这样就可以让其保持需要的样式而不能被点击。