默认的导航栏
创建一个默认的导航栏的步骤如下:
向<nav>
标签添加navbar、navbar-default类。
向<nav>
标签添加 role=”navigation”,有助于增加可访问性。
向<div>
元素添加一个标题 class=”navbar-header”,内部包含了带有navbar-brand类 的<a>
元素。这会让文本看起来更大一号。
为了向导航栏添加链接,只需要简单地添加带有nav、navbar-nav类的无序列表即可。
代码如下:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">内容</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</nav>
在浏览器宽度超过768px时,效果如下所示。
把窗口缩小后到768px以下后,效果如下。
响应式导航栏
为了给导航栏添加响应式特性,我们要折叠的内容必须放在一个带有navbar-collapse、collapse类的<div>
中。
折叠起来的导航栏实际上是一个带有navbar-toggle类和两个data-元素的按钮。第一个是data-toggle,用于告诉JavaScript需要对按钮做什么,第二个是data-target,指示要切换到哪一个元素。
三个带有icon-bar类的<span>
创建所谓的汉堡按钮。这些会切换为.nav-collapse <div>
中的元素。
代码如下:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">内容</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</nav>
在浏览器窗口大于768px时,可以发现,与默认的没什么区别。
但是,当窗口缩小到768px以下后,可以看到,在页面的右上角出现了一个小图标,并且将内容折叠起来了。
点击图标就可以看到折叠的内容,如下所示。
在导航栏中加入下拉菜单
在上述代码的基础上,向需要下拉的内容的<li>
中添加dropdown类,向其中加入一个无序列表,并在<ul>
中添加class="dropdown-menu" role="menu"
。
向<li>
下的<a>
中添加一个带有caret类的<span>
,用来表示一个倒三角。
在<a>
中添加dropdown-toggle类,data-toggle和role。
下面只显示上述代码中修改的部分。
<div class="navbar-collapse collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">内容<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
</div>
浏览器窗口大于768px时的效果如下。
把窗口缩小到768px以下后,效果如下所示。