码迷,mamicode.com
首页 > 其他好文 > 详细

了解bootstrap导航条

时间:2016-04-15 17:59:32      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(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 状态应用于  标签,或者在向前/向后的箭头处省略 标记,即替换  标签,这样就可以让其保持需要的样式而不能被点击。?

了解bootstrap导航条

标签:

原文地址:http://www.cnblogs.com/Eplayed/p/5396137.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!