zoukankan      html  css  js  c++  java
  • Bootstrap基础10(标签页)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>标签页</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.2.1.js"> </script>
    <script src="js/bootstrap.js"></script>
    <script src="js/holder.js"></script>
    </head>
    <body>
    <div class="container">
    <h2 class="page-header">标签页</h2>
    <ul class="nav nav-tabs">
    <li><a href="#overwatch" data-toggle="tab"class="nav nav-success">守望先锋</a></li>
    <li><a href="#palading"data-toggle="tab">枪火游侠</a></li>
    <li><a href="#palagong"data-toggle="tab">虚幻争霸</a></li>
    <li><a href="#stormheros"data-toggle="tab">风暴英雄</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane" id="overwatch">
    <table class="table table-striped table-bordered table-condensed">
    <tr class="success">
    <th>虚幻争霸</th>
    <th>守望先锋</th>
    <th>枪火游侠</th>
    <th>英雄联盟</th>
    <th>神之浩劫</th>
    </tr>
    <tr class="info">
    <th>腾讯代理</th>
    <th>网易代理</th>
    <th>腾讯代理</th>
    <th>腾讯代理</th>
    <th>腾讯代理</th>
    </tr>
    <tr class="active">
    <th>上市:2017年</th>
    <th>上市:2016年</th>
    <th>上市:2017年</th>
    <th>上市:2011年</th>
    <th>上市:2015年</th>
    </tr>
    <tr class="warning">
    <th>游戏类型:MOBA+FPS</th>
    <th>游戏类型:FPS</th>
    <th>游戏类型:FPS</th>
    <th>游戏类型:MOBA</th>
    <th>游戏类型:MOBA+FPS</th>
    </tr>
    <tr class="danger">
    <th>制作商:Epic Games</th>
    <th>制作商:暴雪</th>
    <th>制作商:Hi-Rez</th>
    <th>制作商:拳头</th>
    <th>制作商:Hi-Rez</th>
    </tr>

    </table>



    </div>
    <div class="tab-pane" id="palading">
    <table class="table table-striped table-bordered table-condensed">
    <tr class="success">
    <th>虚幻争霸</th>
    <th>守望先锋</th>
    <th>枪火游侠</th>
    <th>英雄联盟</th>
    <th>神之浩劫</th>
    </tr>

    <tr class="warning">
    <th>游戏类型:MOBA+FPS</th>
    <th>游戏类型:FPS</th>
    <th>游戏类型:FPS</th>
    <th>游戏类型:MOBA</th>
    <th>游戏类型:MOBA+FPS</th>
    </tr>
    <tr class="danger">
    <th>制作商:Epic Games</th>
    <th>制作商:暴雪</th>
    <th>制作商:Hi-Rez</th>
    <th>制作商:拳头</th>
    <th>制作商:Hi-Rez</th>
    </tr>

    </table>

    </div>
    <div class="tab-pane" id="palagong">
    <table class="table table-striped table-bordered table-condensed">
    <tr class="success">
    <th>虚幻争霸</th>
    <th>守望先锋</th>
    <th>枪火游侠</th>
    <th>英雄联盟</th>
    <th>神之浩劫</th>
    </tr>
    <tr class="info">
    <th>腾讯代理</th>
    <th>网易代理</th>
    <th>腾讯代理</th>
    <th>腾讯代理</th>
    <th>腾讯代理</th>
    </tr>
    <tr class="active">
    <th>上市:2017年</th>
    <th>上市:2016年</th>
    <th>上市:2017年</th>
    <th>上市:2011年</th>
    <th>上市:2015年</th>
    </tr>
    <tr class="warning">
    <th>游戏类型:MOBA+FPS</th>
    <th>游戏类型:FPS</th>
    <th>游戏类型:FPS</th>
    <th>游戏类型:MOBA</th>
    <th>游戏类型:MOBA+FPS</th>
    </tr>
    <tr class="danger">
    <th>制作商:Epic Games</th>
    <th>制作商:暴雪</th>
    <th>制作商:Hi-Rez</th>
    <th>制作商:拳头</th>
    <th>制作商:Hi-Rez</th>
    </tr>

    </table>
    </div>
    <div class="tab-pane" id="stormheros">
    <table class="table table-striped table-bordered table-condensed">
    <tr class="success">
    <th>虚幻争霸</th>
    <th>守望先锋</th>
    <th>枪火游侠</th>
    <th>英雄联盟</th>
    <th>神之浩劫</th>
    </tr>
    <tr class="info">
    <th>腾讯代理</th>
    <th>网易代理</th>
    <th>腾讯代理</th>
    <th>腾讯代理</th>
    <th>腾讯代理</th>
    </tr>
    <tr class="active">
    <th>上市:2017年</th>
    <th>上市:2016年</th>
    <th>上市:2017年</th>
    <th>上市:2011年</th>
    <th>上市:2015年</th>
    </tr>

    </table>


    </div>
    </div>

    </div>

    </body>
    </html>
  • 相关阅读:
    Selenium 验证
    Flask 拓展(flask-admin)
    读取 xlsx中数据
    OSS 上传内容
    Tornado 端口绑定方式
    Tornado 基础
    Flask 懒人版分页(未完善)
    kafka事务原理、事务API和使用场景(转)
    jvm几种垃圾回收机制小结
    理解Semaphore及其用法详解(转)  -实现一个文件允许的并发访问数
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6896276.html
Copyright © 2011-2022 走看看