Twitter Bootstrap html标签如何工作？

在下面的示例中（取自here），单个标签出现在幕后会发生什么？例如，它们在页面加载时是否完全不呈现，并且仅在选择该选项卡时才作为DOM对象创建/初始化？或者它们全部是从页面加载渲染的，但隐藏或隐藏直到选中？Twitter Bootstrap html标签如何工作？

<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>

谢谢！

来源

2013-05-07 exxodus7

这些标签特定于您在链接中提到的Bootstrap库。在该库之外没有什么特别的事情发生（使用JavaScript来实现标签）。 – 2013-05-07 02:01:51

这些是Bootstrap选项卡。它们全部在页面加载时呈现并可见。渲染后，如果您从Bootstrap（bootstrap-tab.js）中包含正确的JavaScript文件，则会附加一些事件。然后，这些事件处理在单击标签时发生的情况，在引导CSS文件中设置默认样式:active和:hover状态。你可以找到如何实现它的例子 - 以及当点击标签时如何添加你自己的功能的例子 - 你在问题中提供的链接。

来源

2013-05-07 02:10:21

Twitter Bootstrap html标签如何工作？

回答

相关问题