当前位置：网站首页 > IT知识 > 正文

bootstrap的tab标签页的使用

liuian 2024-12-11 15:43 47 浏览

标签tab页在，当前的web中应用十分广泛，君不见，在博客的右侧出现的最新文章和随机文章中有它的身影，在大型门户网站中也有它的身影，可以说其无处不在的刷着存在感。

既然其如此嚣张的存在，我们没有理由不应用呀。

来吧。让bootstrap赐予我力量，用它来简单的，毫无压力的应用吧。

先上个某易网站的效果：

下面让我们开始吧：

1、用data属性来调用：

您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。
为标签页设置淡入淡出效果，添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容。
示例来了：
第一步引入css和js文件。
第二步HTML结构之页面标签：
注意，可以用ul来表示，li中a的href 一定要和下面div的id相呼应，data-toggle必须为tab。
第三步，要显示的内容：
ps：div的ID一定要和上面ul下的li的a的href对应。错不得。
搞定了，相关样式的修改，需要修改对应的css即可。

2、用JavaScript来调用：

$('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show')})

一般情况下，我用第一种方法，不知道你怎么用？来评论告诉我？

这是click改变显示内容的，你知道如何用hover方式吗？

bootstrap label

上一篇：Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
下一篇：前端程序员不得不爱的bootstrap

相关推荐

eino v0.4.5版本深度解析:接口类型处理优化与错误机制全面升级: 近日，eino框架发布了v0.4.5版本，该版本在错误处理、类型安全、流处理机制以及代理配置注释等方面进行了多项优化与修复。本次更新共包含6个提交，涉及10个文件的修改，由2位贡献者共同完成。本文将详...

SpringBoot异常处理_springboot异常注解: 在SpringBoot中，异常处理是构建健壮、可维护Web应用的关键部分。良好的异常处理机制可以统一返回格式、提升用户体验、便于调试和监控。以下是SpringBoot中处理异常的完整指...

Jenkins运维之路(Jenkins流水线改造Day02-1-容器项目): 这回对线上容器服务器的流水线进行了一定的改造来满足目前线上的需求，还是会将所有的自动化脚本都放置到代码库中统一管理，我感觉一章不一定写的完，所以先给标题加了个-1，话不多说开干1.本次流水线的流程设计...

告别宕机!零基础搭建服务器监控告警系统!小白也能学会!: 前言本文将带你从零开始，一步步搭建一个完整的服务器指标监控与邮件告警系统，使用的技术栈均为业界主流、稳定可靠的开源工具：Prometheus：云原生时代的监控王者，擅长指标采集与告警规则定义Node_...

httprunner实战接口测试笔记，拿走不谢: 每天进步一点点，关注我们哦，每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号：自动化软件测试码同学抖音号：小码哥聊软件测试01开始安装跟创建项目pipinstallhttprunne...

基于JMeter的性能压测平台实现_jmeter压测方案: 这篇文章已经是两年前写的，短短两年时间，JMeter开源应用技术的发展已经是翻天覆地，最初由github开源项目zyanycall/stressTestPlatform形成的这款测试工具也开始慢...

12K+ Star!新一代的开源持续测试工具!: 大家好，我是Java陈序员。在企业软件研发的持续交付流程中，测试环节往往是影响效率的关键瓶颈，用例管理混乱、接口调试复杂、团队协作不畅、与DevOps流程脱节等问题都能影响软件交付。今天，给大家...

Spring Boot3 中分库分表之后如何合并查询: 在当今互联网应用飞速发展的时代，数据量呈爆发式增长。对于互联网软件开发人员而言，如何高效管理和查询海量数据成为了一项关键挑战。分库分表技术应运而生，它能有效缓解单库单表数据量过大带来的性能瓶颈。而在...

离线在docker镜像方式部署ragflow0.17.2: 经常项目上会出现不能连外网的情况，要怎么使用ragflow镜像部署呢，这里提供详细的步骤。1、下载基础镜像根据docker-compose-base.yml及docker-compose.yml中的i...

看，教你手写一个最简单的SpringBoot Starter: 何为Starter？想必大家都使用过SpringBoot，在SpringBoot项目中，使用最多的无非就是各种各样的Starter了。那何为Starter呢？你可以理解为一个可拔插式...

《群星stellaris》军事基地跳出怎么办?解决方法一览: 《群星stellaris》军事基地跳出情况有些小伙伴出现过这种情况，究竟该怎么解决呢？玩家“gmjdadk”分享的自己的解决方法，看看能不能解决。我用英文原版、德语、法语和俄语四个版本对比了一下，结果...

数据开发工具dbt手拉手教程-03.定义数据源模型: 本章节介绍在dbt项目中，如何定义数据源模型。定义并引入数据源通过Extract和Load方式加载到仓库中的数据，可以使用dbt中的sources组件进行定义和描述。通过在dbt中将这些数据集(表)声...

docker compose 常用命令手册_docker-compose init: 以下是DockerCompose常用命令手册，按生命周期管理、服务运维、构建配置、扩缩容、调试工具分类，附带参数解析、示例和关键说明，覆盖多容器编排核心场景：一、生命周期管理（核心命令...

RagFlow与DeepSeek R1本地知识库搭建详细步骤及代码实现: 一、环境准备硬件要求独立显卡（建议NVIDIAGPU，8GB显存以上）内存16GB以上，推荐32GB（处理大规模文档时更高效）SSD硬盘（加速文档解析与检索）软件安装bash#必装组件Docker...

Docker Compose 配置更新指南_docker-compose配置: 高效管理容器配置变更的最佳实践方法重启范围保留数据卷适用场景docker-composeup-d变更的服务常规配置更新--force-recreate指定/所有服务强制重建down→up流程...

一周热门

最近发表

首页
收录
顶部