bootstrap导航加下拉菜单（二级导航）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs nav-justified">
<li><a href="##">Home</a></li>
<li><a href="##">CSS</a></li>
<li><a href="##">JS</a></li>
<li><a href="##">PHP</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="##">商品介绍</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">规格参数<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">HTML</a></li>
<li><a href="##">JS</a></li>
</ul>
</li>
<li><a href="##">商品评价</a></li>
<li><a href="##">售后保证</a></li>
</ul>
<script src="./bootstrap-3.3.7-dist/js/jquery.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
如图
屏幕快照 2016-08-26 13.09.35.png
说明
在Bootstrap框架中制作二级导航，只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以
面包屑式导航
面包屑导航主要是起的作用是告诉用户现在所处页面的位置（当前位置）
，效果如图
屏幕快照 2016-08-26 13.20.12.png
实现如下
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">我的书</a></li>
<li class="active">《图解CSS3》</li>
</ol>
完整代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>面包屑式导航</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<!--代码-->
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">我的书</a></li>
<li class="active">《图解CSS3》</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">名师简介</a></li>
<li class="active">大漠</li>
</ol>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
网友评论