码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-tab

时间:2015-10-06 20:44:34      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:

功能:点击时切换相应的内容或图片

插件:tab.js

要点:tab标签用在导航条上,以data-toggle作被点击者, 以tab-content作内容显示

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" media="screen" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1 class="text-center">Hello World</h1>
        
        <!-- 直接使用bs3-tabs命令即可实现 -->
            <div role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a>
                    </li>
                    <li role="presentation">
                        <a href="#tab" aria-controls="tab" role="tab" data-toggle="tab">tab</a>
                    </li>
                </ul>
            
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home"><p>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                        ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br>
                    </p></div>
                    <div role="tabpanel" class="tab-pane" id="tab"><p>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
                    </p></div>
                </div>
            </div>
        
     

        <script src="../extlib/jquery-1.11.1.min.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
        <!-- Local bootstrap CSS & JS -->
        <script src="../bootstrap-3.3.5-dist/js/collapse.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/scrollspy.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/transition.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/dropdown.js"></script>
        <script src="../bootstrap-3.3.5-dist/js/alert.js"></script>

    </body>
</html>

 

bootstrap-tab

标签:

原文地址:http://www.cnblogs.com/hzijone/p/4857647.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!