Bootstrap基础10（标签页）

最新推荐文章于 2022-02-14 21:38:22 发布
最新推荐文章于 2022-02-14 21:38:22 发布
阅读量64 收藏
点赞数
原文链接：http://www.cnblogs.com/YoogaChan/p/6896276.html
版权 
<!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>

转载于:https://www.cnblogs.com/YoogaChan/p/6896276.html

dibisha5159
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap标签
秋城落叶的博客
03-31 291
可用的变体 用下面的任何一个类即可改变标签的外观。 样式(悬停可选中) 说明 label label-default 默认标签 label label-primary 强调标签 label label-success 成功标签 label label-info 信息标签 label label-warning 警告标...
bootstrap标签页的使用
weixin_47935275的博客
04-21 383
1、进入bootstrap官网 https://bootstrap.css88.com/ 点击下载 2、点击js插件 3、找到标签页 4、引入jquery，js，css文件 ⚠️先引入jquery，在引入js <link rel="stylesheet" href="css/bootstrap.css"> <script src='js/jquery.min.js'></script> <script src='js/bootstra
vue2.* element tabs tab-pane 动态加载组件
热门推荐
风中追风
06-05 1万+
一、重要部分 1、 注意<component :is=item.content></component> ：表明模板 <el-tab-pane v-for="(item) in editableTabs" :key="item.name" :label="item.title" ...
BootStrap之标签页切换
席木木的博客
02-14 5453
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码fade in效果函数介绍前提条件：data-target/href数据指向设置tab("show")函数-显示内容查看事件响应的新旧对象 标签页切换     标签页切换，就是通过点击菜单/选项卡中的文字标签，使其达到局部内容更换的效果。以下给出标签页切换的最简化代码实现。 <!DOCTYPE html> <html&gt
零基础Bootstrap入门教程(23)--标签页
程序员大阳
03-07 832
本文目录1. 概述2. 使用方法3. 小结 1. 概述 标签页使用频率不算高，也不算太低，主要用于同一显示区域内切换不同的内容。本篇来简单讲一下如何使用标签页。 2. 使用方法 首先我们先来看一个标准的标签页代码： <ul class="nav nav-tabs"> <li><a href="#section1" data-toggle="tab">春晓</a></li>
Bootstrap实现的标签页内容切换显示效果示例
08-30
Bootstrap 实现标签页内容切换显示效果示例 Bootstrap 是一个流行的前端框架，提供了许多有用的组件和插件来帮助开发者快速构建网页应用程序。在该示例中，我们将介绍 Bootstrap 实现标签页内容切换显示效果的方法...
简单实现Bootstrap标签页
08-31
Bootstrap标签页是网页设计中常用的一种交互元素，用于组织和展示多块内容，用户可以通过点击不同的标签切换查看不同部分的信息。在本实例中，我们将学习如何简单地使用Bootstrap框架实现一个基本的标签页功能。 ...
Bootstrap标签页（Tab）插件使用方法
12-29
您可以通过以下两种方式启用标签页： 1、通过 data 属性：您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 ...
基于Bootstrap的多标签页设计源码
04-12
本Bootstrap多标签页设计源码包含102个文件，主要使用CSS、HTML和JavaScript编写。它允许用户增加、关闭和折叠标签页，提供了智能、快速搭建和多种样式选择。适用于各种Web应用程序，易于集成和定制。
基于Bootstrap5的Tab标签页的小组件，能让HTML5表单验证的提示信息在Bootstrap5的Tab标签页能正常显示
02-14
在这个基于Bootstrap5的Tab标签页小组件中，我们专注于如何让HTML5表单验证的提示信息在Tab标签页内正确地显示，这对于提升用户体验至关重要。 HTML5是现代网页开发的标准，它引入了许多新的元素和功能，其中就包括...
004.Python爬虫系列-web请求全过程剖析(重点)
最新发布
08-30
前言 * 本小节给各位好好剖析一下web请求的全部过程,这样有助于后面我们遇到的各种各样的网站就有了入手的基本准则了. * 那么到底我们浏览器在输入完网址到我们看到网页的整体内容,这个过程中究竟发生了些什么? * 这里我们以百度为例 * 在访问百度的时候,浏览器会把这一次请求发送到百度的服务器(百度的一台电脑),由服务器接收到这个请求, 然后加载一些数据. 返回给浏览器， 再由浏览器进行显示 * 听起来好像是个废话...但是这里蕴含着一个极为重要的东西在里面 * 注意 * 百度的服务器返回给浏览器的不直接是页面, 而是页面源代码(由html, css, js组成) * 由浏览器把页面源代码进行执行, 然后把执行之后的结果展示给用户 * 所以我们能看到在上一节的内容中,我们拿到的是百度的源代码(就是那堆看不懂的鬼东西)
程度副词.txt
08-30
文本分析
JEP143C.pdf
08-30
JEP143C
工业相机CameraLink v2.0协议文档
08-30
1.本协议为最新的cameralink协议文档； 2.协议详细接收了camera link协议的接口设计内容； 3.介绍了POCL供电要注意的问题； 4.协议介绍了lite,base,medium,full,full+五种模式配置和开发要点； 5.协议介绍了硬件设计外围电路。
时序预测-基于卷积神经网络CNN的数据时间序列预测Matlab程序 单变量
08-30
时序预测|基于卷积神经网络CNN的数据时间序列预测Matlab程序 单变量 1.程序功能已完成调试，用户可以通过一键操作生成图形和评价指标。 2.数据输入以Excel格式保存，只需更换文件，即可运行以获得个人化的实验结果。 3.代码中包含详细注释，具有较强的可读性，特别适合初学者和新手。 4.在实际数据集上的效果可能较差，需要对模型参数进行微调。 CSDN：机器不会学习CL 时序预测|基于卷积神经网络CNN的数据时间序列预测Matlab程序 单变量 1.程序功能已完成调试，用户可以通过一键操作生成图形和评价指标。 2.数据输入以Excel格式保存，只需更换文件，即可运行以获得个人化的实验结果。 3.代码中包含详细注释，具有较强的可读性，特别适合初学者和新手。 4.在实际数据集上的效果可能较差，需要对模型参数进行微调。 CSDN：机器不会学习CL
# openssl适用Android以及OpenHarmony的支持32位以及64位arm64-v8a armeabi-v7a
08-30
# openssl适用Android以及OpenHarmony的支持32位以及64位arm64-v8a armeabi-v7a; 包括了so动态库，.a静态库，头文件 include。下载直接可以使用
基于springboot房产销售系统设计与实现.docx
08-30
基于springboot房产销售系统设计与实现.docx
stopwords.txt
08-30
文本分析
根据不同的地区和个人口味，月饼的制作方法也有很大的区别 下面提供几种经典月饼的制作步骤，包括广式月饼、苏式月饼和冰皮月饼
08-30
每一种都有其特点和风味。制作月饼时要注意各个步骤的细节，尤其是温度控制和材料配比，这样才能做出美味的月饼。希望你能成功制作出自己满意的月饼！
用Bootstrap实现Tab标签页切换显示
06-09
使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用 Bootstrap 的 Tab 插件和一些基本的 HTML 和 CSS 代码即可。以下是一个基本的示例： HTML 代码： ``` <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>这是 Tab 1 中的内容。</p> </div> <div class="tab-pane" id="tab2"> <p>这是 Tab 2 中的内容。</p> </div> <div class="tab-pane" id="tab3"> <p>这是 Tab 3 中的内容。</p> </div> </div> ``` 在这个示例中，我们使用了 Bootstrap 的 nav 和 tab 样式来创建了一个 Tab 标签页。每个 Tab 都是一个链接，点击链接可以切换到对应的标签页。我们使用了 data-toggle 属性来告诉 Bootstrap 使用 Tab 插件来处理这些链接。每个标签页都是一个 div 元素，使用了 tab-pane 样式。其中，第一个标签页使用了 active 样式来标记为默认显示的标签页。 CSS 代码： ``` .nav-tabs { margin-bottom: 15px; } .tab-content { padding: 15px; border: 1px solid #ddd; border-top: none; } ``` 在这个示例中，我们使用了一些基本的 CSS 样式来调整 Tab 标签页的外观。我们设置了一个 margin-bottom 样式来增加 Tab 标签页和其他元素之间的间距，以及一个 padding 和 border 样式来设置标签页的边框和内边距。 JavaScript 代码： ``` $(function() { $('.nav-tabs a').click(function() { $(this).tab('show'); }); }); ``` 在这个示例中，我们使用了 jQuery 库来管理 Tab 插件。当用户点击 Tab 标签页中的链接时，我们使用 tab('show') 方法来显示对应的标签页。 总之，使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用一些基本的 HTML、CSS 和 JavaScript 代码即可。通过使用 Tab 插件，我们可以轻松创建漂亮且易于使用的 Tab 标签页，为用户提供更好的体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值