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>
  • 相关阅读:
    (转)PHP 的 __FILE__ 常量
    smarty半小时快速上手教程(转)
    Namespace declaration statement has to be the very first
    ThinkPhp3.2 无法加载模块:Index
    注意mysql中的编码格式和php中的编码格式一致
    MySQL数据库备份与恢复方法(转)
    phpmyadmin设置id自增(AUTO_INCREMENT)(转)
    (转)用eclipse创建一个j2ee的web工程后,左面projects窗口中的项目如何没有显示webRoot文件夹,除了src的文件夹,其他都不显示
    CentOS6.8 安装 Nginx
    Eclipse Java注释模板设置详解
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6896276.html
Copyright © 2011-2022 走看看