bootstrap 导航学习

参考网站：www.bootcss.com

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

 

实现效果：

 

实例代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="utf-8">
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
 6     <link href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
 7     <title>title</title>
 8 </head>
 9 <body>
10 <div class="bs-docs-example">
11             <div class="tabbable tabs-left">
12               <ul class="nav nav-tabs">
13                 <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
14                 <li><a href="#lB" data-toggle="tab">Section 2</a></li>
15                 <li><a href="#lC" data-toggle="tab">Section 3</a></li>
16               </ul>
17               <div class="tab-content">
18                 <div class="tab-pane active" id="lA">
19                   <p>I'm in Section A.</p>
20                 </div>
21                 <div class="tab-pane" id="lB">
22                   <p>Howdy, I'm in Section B.</p>
23                 </div>
24                 <div class="tab-pane" id="lC">
25                   <p>What up girl, this is Section C.</p>
26                 </div>
27               </div>
28             </div> <!-- /tabbable -->
29           </div>
30 <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
31 <script src="bootstrap.js" type="text/javascript"></script>
32 </body>
33 </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好坏差异，希望有懂的人能够更好分析一下~
posted @ 2014-06-12 13:50  testForever  阅读(392)  评论(0)  编辑  收藏  举报