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>
  • 相关阅读:
    JS项目快速压缩(windows平台)
    Maven工程的POM继承
    Docker构建一个node镜像
    win10家庭版安装Docker for Windows
    linux,vim和bash命令小册
    vue文档阅读笔记——计算属性和侦听器
    nodejs的jekins部署
    `vue-router`的`History`模式下的项目发布
    花式图表,炫技时刻!PPT技能
    在创业之路上不断创新
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6896276.html
Copyright © 2011-2022 走看看