今天向大家介绍一些bootstrap的导航类型，包括响应式导航，多级导航等。内容有些长，还请点击阅读更多
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
<script src="bootstrap-3.3.7-dist/js/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<!--标签页导航元素-->
<ul class="nav nav-tabs " >
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<!--胶囊式的导航元素-->
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<!--垂直的胶囊式导航元素-->
<ul class="nav nav-pills nav-stacked" style="width: 300px;">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<!--自适应的导航元素-->
<!--注意大于768px,宽度会与父级宽度相同；小于768px,会自动变成垂直导航元素-->
<ul class="nav nav-pills nav-justified" >
<li class="active"><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<!--导航元素的禁用状态-->
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">介绍</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<!--带下拉的导航元素-->
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li class="dropdown">
<a href="#" type="button" class="btn"
data-toggle="dropdown">
前端开发<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li class="divider"></li>
<li><a href="#">1</a></li>
</ul>
</li>
</ul>
<!--面包屑导航-->
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">HTML</a></li>
<li class="active">CSS</li>
</ol></body></html>
class="divider"这个是下拉导航里面每一个li标签之间的横线，需要加一个空的li标签，长什么样子见下图
接下来是一些响应式的导航和特殊导航
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
<script src="bootstrap-3.3.7-dist/js/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style type="text/css">
</style>
</head>
<body>
<!--默认的导航栏-->
<nav class="navbar navbar-default " >
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">前端</a>
</div>
<div>
<ul class="nav navbar-nav">
<li ><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
JavaScript <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Jquery</a></li>
<li class="divider"></li>
<li><a href="#">Jquery</a></li>
<li class="divider"></li>
<li><a href="#">Jquery</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--响应式的导航栏-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">123</a>
<button class="navbar-toggle"
data-toggle="collapse" data-target="#111">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="111">
<ul class="nav navbar-nav ">
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
</ul>
</div>
</div>
</nav>
<!--响应式的导航栏-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<!--<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="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li ><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
JavaScript <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Jquery</a></li>
<li class="divider"></li>
<li><a href="#">Jquery</a></li>
<li class="divider"></li>
<li><a href="#">Jquery</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--带表单和按钮的导航栏-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">前端开发</a>
</div>
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键字"/>
<button type="submit" class="btn btn-default">搜索</button>
</div>
</form>
</div>
</nav>
<!--导航条辅助样式-->
<!--navbar-inverse反转样式-->
<!--navbar-fixed-top顶部对齐-->
<!--navbar-fixed-bottom底部对齐-->
<nav class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">前端开发</a>
</div>
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键字"/>
<button type="submit" class="btn btn-default">搜索</button>
</div>
</form>
</div>
</nav>
</body>
</html>
当当当，接下来三级导航隆重出场
铿锵铿锵铿锵铿锵，，，，，，
<li class="dropdown">
<a href="#" data-toggle="dropdown">
VUE <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">1</a>
</li>
<li class="divider"></li>
<li>
<a href="#">1</a>
</li>
<li class="divider"></li>
<li>
<a href="#">1</a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="javascript:;">一级菜单</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="javascript:;">二级菜单</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="javascript:;">二级菜单</a>
<ul class="dropdown-menu">
<li>
<a href="javascript:;">三级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
三级菜单只写这些是不行的，还要添加一些css样式
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
background: rgba(0,0,0,0.5);
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
