html - 使用 BootStrap 的 HTML 选项卡
问题描述
我正在尝试遵循本教程。我将以下代码放入我的 HTML 文档中。
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
我得到如下输出
为什么会这样?
解决方案
供将来参考(这是解决@abu abu 问题的评论):
另请注意,在您的链接中,它使用的是 bootstrap 3.3.7 版本(出于某种原因,使用了不同版本的 JS)。在 bootstrap 4 中,导航使用类名 '
nav
' 和 'nav-link
' 代替: getbootstrap.com/docs/4.0/components/navs
来自引导站点的示例:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
推荐阅读
- excel - 从 Matlab 导出日期到 excel
- node.js - Nestjs 和 TypeOrm:使用 getOne() / getMany() 的查询生成器没有结果
- bash - 使用 bash 调用 Go 和 Python 脚本
- tensorflow - tensorflow 以行向量还是列向量为中心?
- python - 使用 Pytube 下载 youtube 视频
- javascript - Vue.js – 如何使用 Vuetify 构建像 Doodle 这样的表格?
- php - 如何在 php 中按不同语言(西班牙语、法语、俄语等)的字母顺序对数组进行排序?
- firebird - Firebird 为 sysdba 用户更改默认密码后不会忘记默认密码
- php - 从 PHP 数组中提取值并回显来自 Curl 脚本的 HTML 页面多维响应
- python - Python:请求 ID 线程本地日志记录