Twitter Bootstrap html 标签如何工作?

Posted

技术标签:

【中文标题】Twitter Bootstrap html 标签如何工作?【英文标题】:How do Twitter Bootstrap html tabs work? 【发布时间】:2013-04-30 21:05:13 【问题描述】:

在以下示例中(取自here),就各个选项卡而言,幕后发生了什么?例如,它们是否在页面加载时根本不呈现,并且仅在选择选项卡时被创建/初始化为 DOM 对象?还是它们都是从页面加载时呈现的,但在被选中之前是隐藏的或不可见的?

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

谢谢!

【问题讨论】:

这些标签特定于您在链接中提到的引导库。在那个库之外没有什么特别的事情发生(它使用 javascript 来实现标签)。 【参考方案1】:

这些是Bootstrap 选项卡。它们都在页面加载时呈现和可见。在它们被渲染后,如果您包含来自 Bootstrap (bootstrap-tab.js) 的正确 JavaScript 文件,则会将一些事件附加到它们。然后这些事件处理单击选项卡时发生的情况,默认样式,:active:hover 状态在 Bootstrap CSS 文件中设置。您可以在问题中提供的链接中找到如何实现它的示例 - 以及如何在单击选项卡时添加自己的功能的示例。

【讨论】:

以上是关于Twitter Bootstrap html 标签如何工作?的主要内容,如果未能解决你的问题,请参考以下文章

页面标签上的 Twitter Bootstrap:不隐藏标签内容

拆分 Twitter Bootstrap 标签

Twitter Bootstrap Typeahead - 标识和标签

Twitter Bootstrap标签输入在onfocus时不会删除占位符

Twitter Bootstrap:如何为收音机和复选框添加标签?

无法在 Django 模板标签、Twitter Bootstrap 中嵌入 YouTube 链接