了解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 状态应用于  标签,或者在向前/向后的箭头处省略 标记,即替换  标签,这样就可以让其保持需要的样式而不能被点击。​

posted @ 2016-04-15 17:16  $button  阅读(209)  评论(0编辑  收藏  举报