杨小杰博客提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

bootstrap无刷选项卡案例

Young小杰2018-6-8 11:48网站搭建(3)588查询中……小标签: 网站源码 源码分享 原创

写骰子游戏是用到了无刷选项卡,源码分享给大家

	 
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" crossorigin="anonymous">

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>


<div class="panel panel-default">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">标题</h3>
        </div>
        <div class="panel-body">
            <ul id="myTab" class="nav nav-tabs">  
                <li class="active"><a href="#shouye" data-toggle="tab">首页</a></li>
                <li><a href="#two" data-toggle="tab">第二</a></li>
                <li><a href="#s" data-toggle="tab">第三</a></li>
                <li><a href="#f" data-toggle="tab">第四</a></li>
            </ul>  

            <div id="myTabContent" class="tab-content">  
                <div class="tab-pane fade in active" id="shouye">
                    这是首页内容
                </div>
                <div class="tab-pane fade" id="two">  
                    这是第二页内容
                </div>
                <div class="tab-pane fade" id="s">
                    这是第三页内容
                </div>
                <div class="tab-pane fade" id="f">  
                    这是第四页内容
                </div>
            </div>
        </div>
    </div>
</div>

bootstrap选项卡.jpg



评论排行榜

(切勿水评,一经发现封IP)

评论:

世界杯竞猜 SouGou Browser 2.X Windows 7越南 FPT电信公司 2018-06-08 17:45
bootstrap4是好些
小智 Google Chrome 56.0.2924.90 Windows 7广东省揭阳市 电信 2018-06-08 12:02
看了bootstrap4是真的比bootstrap3好看
Young小杰四川省 联通 2018-06-08 14:11
@小智:boot4更加立体,动画渲染更加好看

发表评论: