Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（一）

。 _ 。

已于 2022-01-24 16:10:09 修改

阅读量1.9k

点赞数

文章标签： bootstrap html 前端 css myeclipse

于 2022-01-24 11:53:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_55945754/article/details/122663079

版权

本文介绍如何在Bootstrap中结合使用胶囊式标签页nav-pills和iframe，通过JavaScript插件实现标签页效果，并利用fade类添加淡入淡出动画。详细步骤和代码示例见文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Bootstrap的组件中，有个胶囊式标签页。在这里记录一下。怎么将这个胶囊是标签页和我们H5的<iframe>结合起来。

查看Bootstrap帮助文档

组件

在Bootstrap帮助文档的组件中，可以找到导航 -> 胶囊式标签页，在这里可以看到这部分的代码。
在这里插入图片描述
但是，这里只有如图所示的三个标签页的按钮，只能按，没有任何实际的效果。怎么办捏。于是我找啊找，就到了下面这个步骤了。

JavaScript插件

于是，找到了帮助文档 -> JavaScript插件 -> 标签页，在其用法中，有提到怎样才能有标签页的效果。
在这里插入图片描述
于是，就有了帮助文档上的这段代码：

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role

最低0.47元/天解锁文章