标签式导航
1.标签式导航css
在<ul>无序列表中添加 .nav nav-tabs 第一个<li>默认是选中状态html
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">house1</a></li>
<li><a href="#">house2</a></li>
</ul>jquery
2.设置标签页对应的内容随标签的切换而更改bootstrap
1.在<li>中加入 data-toggle="tab" href="#home" href中存放对应tab的IDspa
2.下面插入一个带有 .tab-contant的 div htm
3.ip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标签页与胶囊式标签页</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#house1">house1</a></li>
<li><a data-toggle="tab" href="#house2">house2</a></li>
</ul>utf-8
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>home页</h3>
</div>
<div id="house1" class="tab-pane fade ">
<h3>house1页</h3>
</div>
<div id="house2" class="tab-pane fade ">
<h3>house2页</h3>
</div>
</div>it
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">house1</a></li>
<li><a href="#">house2</a></li>
</ul>
</body>
</html>class
- 1. bootstrap标签页与导航
- 2. 标签页-导航 负margin
- 3. 我的中心标签页导航
- 4. 完成我的中心—导航标签
- 5. 个人中心标签页导航
- 6. 完成我的中心 导航标签
- 更多相关文章...
- • ionic 导航 - ionic 教程
- • jQuery Mobile 导航栏 - jQuery Mobile 教程
- • 委托模式
- • IntelliJ IDEA代码格式化设置
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. bootstrap标签页与导航
- 2. 标签页-导航 负margin
- 3. 我的中心标签页导航
- 4. 完成我的中心—导航标签
- 5. 个人中心标签页导航
- 6. 完成我的中心 导航标签