导航栏制作
使用Boostrap制作基础导航栏主要分为以下步骤:
1.事先引入jquery.js、boostrap.min.js和boostrap.min.css文件。
2.添加一个<div>
标签或者一个容器<nav>
,使用.navbar类和.navbar-default类,并添加role=“navigation”(增加可访问性)。
3.在上面的标签或容器内再添加一个div标签,使用.navbar-header类,内部包含带有.navbar-brand类的<a>
标签,可用来定义品牌Logo,当然也可以写文字的。
4.也是在第二步的容器或者标签内添加带有.nav类、.navbar-nav类的无序列表即可。
虽然步骤看起来比较繁琐,但看代码理解一下就会啦:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>汉堡菜单</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">网页首页</a>
</div>
<ul class="navbar-nav nav">
<li class="active"><a href="#">名师指教</a></li>
<li><a href="#">教程报名</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">精彩回顾</a></li>
</ul>
</div>
<script src="lib/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
效果图如下:
当页面缩小的一定程度时,导航栏会竖直排布,是不是很智能呢,这就是我们的响应式啦。
汉堡按钮制作
当我们用手机浏览网页时,有时候会看到一个汉堡模样的按钮,当按一下时,隐藏的菜单会出现,再按时又会隐藏,这就是传说中的菜单折叠和隐藏效果。
实现菜单折叠效果如下步骤:
1.把小屏幕显示时需要折叠的内容包裹在一个div标签内,并且为这个div标签使用
.collapse和.navbar-collapse两个类,最后为这个标签添加一个id。
2.当小屏幕时,要显示的汉堡按钮的固定写法如下:
<button class="navbar-toggle" type="button" data-toggle="collapse" >
<span class="sr-only">汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
完整代码如下:
<body>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#kaiguan">
<span class="sr-only">汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">网页首页</a>
</div>
<div class="navbar-collapse collapse" id="kaiguan">
<ul class="navbar-nav nav">
<li class="active"><a href="#">名师指教</a></li>
<li><a href="#">教程报名</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">精彩回顾</a></li>
</ul>
</div>
</div>
<script src="lib/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>
button标签的data-target="#id"中的id对应的是要折叠部门的div标签内的id。建议读者多实践,并特意去掉某个类名,然后对比效果,观察这个类在代码中的作用,这样印象才更深刻。