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>
  • 相关阅读:
    word2vec原理(一) CBOW与Skip-Gram模型基础
    条件随机场CRF(三) 模型学习与维特比算法解码
    条件随机场CRF(二) 前向后向算法评估标记序列概率
    linux下如何强制卸载设备?
    docker build时如何使用代理?
    如何配置docker使用代理?
    linux下tar解压时报"gzip: stdin: unexpected end of file"如何处理?
    ubuntu下如何安装valgrind?
    linux下如何睡眠1ms?
    linux用户空间如何控制gpio?
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6896276.html
Copyright © 2011-2022 走看看