利用bootstrap实现一个简单的响应式的汉堡式菜单效果

首先,开始布局之前,需要先按照顺序分别引入css、jQuery和js文件;

然后,从最简单的菜单搭建起,利用bootstrap创建一个最基本的导航栏的步骤如下:
1、在<nav>标签上添加class类.navbar、.navbar-default,再向上面的元素添加 role="navigation",有助于增加可访问性。
2、向 <div> 元素添加一个标题.navbar-header,内部包含了带有 .navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
3、为了向导航栏添加链接,只需要在无序列表ul里简单地添加类.nav、.navbar-nav即可。

最后,为了给导航栏添加响应式特性,需要折叠的内容必须包裹在带有.collapse、.navbar-collapse 的 <div> 中。
折叠起来的导航栏实际上是一个带有.navbar-toggle 及两个 data- 元素的按钮:第一个data-toggle,用于调用bootstrap里面JavaScript封装的折叠功能函数;第二个data-target,则是指示要切换到哪一个元素,特别注意的是这里的data-target所对应的是<div class="collapse navbar-collapse" id="example-navbar-collapse"></div>里面的id选择器的值。
而三个带有 .icon-bar 的 <span> 则是创建那个汉堡按钮。
代码实现如下:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复