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>
  • 相关阅读:
    linux一切皆文件之tcp socket描述符(三)
    linux一切皆文件之Unix domain socket描述符(二)
    linux一切皆文件之文件描述符(一)
    k8s之使用secret获取私有仓库镜像
    https、ssl、tls协议学习
    k8s网络之calico学习
    泛型的原理、应用、约束、缓存
    C#中Unity对象的注册方式与生命周期解析
    监听EF执行的sql语句及状态
    递归一个List<T>,可自己根据需要改造为通用型。
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6896276.html
Copyright © 2011-2022 走看看