前端之家收集整理的这篇文章主要介绍了
Bootstrap CSS组件之导航(nav),
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_0@本文实例为大家分享了Bootstrap导航的具体代码,供大家参考,具体内容如下
<div class="jb51code">
<pre class="brush:css;">
//源码
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
.nav > li.disabled > a {
color: #777;
}
.nav > li.disabled > a:hover,.nav > li.disabled > a:focus {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
@H_301_0@1.选项卡导航(nav nav-tabs)
2.胶囊式选项卡导航(nav nav-pills)
3.堆叠式导航(nav nav-pills nav-stacked)
4.自适应导航(nav nav-tabs/nav-pills nav-justified)
5.二级导航(nav nav-tabs dropdown dropdown-menu)
@H_301_0@例子见导航.html
<
Meta charset="utf-8">
<
Meta http-equiv="X-UA-Compatible" content="IE=edge">
<
Meta name="viewport" content="width=device-width,initial-scale=1">
Bootstrap 101 Template
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<ul class="nav nav-pills">
<li class="active"><a href="#">主页
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">主页
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">主页
<ul class="nav nav-tabs">
<li class="active"><a href="#">主页
菜单
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js">