您的位置：首页 > Web前端 > BootStrap

bootstrap 导航学习

2014-06-12 13:50 309 查看

参考网站：www.bootcss.com

学习内容：小的导航栏学习，主要通过bootstrap的js以及jquery来学习。

实现效果：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<title>title</title>
</head>
<body>
<div class="bs-docs-example">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
<li><a href="#lB" data-toggle="tab">Section 2</a></li>
<li><a href="#lC" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="lA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="lB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="lC">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div> <!-- /tabbable -->
</div>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
</body>
</html>

示例解释:

1.必不可少文件：bootstrap.min.css/jquery-1.8.2.min.js/bootstrap.js。对应html中的class要设置好。备注：导入js时jquery.js必须在bootstrap.js前面。

2.data-toggle:在HTML5中，任何以data-开始的都是自定义属性，通常它用来实现一些HTML里没有明确定义的元素，把用户自定义的属性应用到代码中。早期html不识别，浏览器忽视，但是jquery能够很好识别，代表其要控制的区域。
3.通过点击不同sectiona/b/c实现不同区域的显示，代替了iframe实现的效果。具体和iframe好坏差异，希望有懂的人能够更好分析一下~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航