是否存在意味着“最初隐藏”的 Twitter Bootstrap 类？

Question

使用 Bootstrap 3，我在页面上有一个元素，我想稍后显示以响应用户单击按钮。示例：

<div id="search_results">
... gets populated from ajax data later ...
</div>

<button id="search_button" type="button" class="btn btn-primary pull-right">Search</button>

<script>
$('#search_button').click(function() {
    // ... do the call to search
    // and in the callback: 
    $('#search_results').show();
});
</script>

search_results div 最初应该是隐藏的。是否有一些正常/最佳实践方法可以使用引导程序执行此操作？

是的，我确实意识到我可以将 style="display:none" 放在 search_results 上，但这是最好的方法吗？拥有一种语义上意味着“最初隐藏”的样式似乎会更好一些。 （注意：隐藏或隐藏类不会这样做，因为它们是 !important 并且 show()、toggle() 等使用不会覆盖它们的内联样式，即设置“隐藏”作为类使其无法显示来自 jQuery。）

Answer 1

您可以使用hidden 类来隐藏元素

<div id="search_results" class="hidden">
... gets populated from ajax data later ...
</div>

然后

$('#search_button').click(function () {
    // ... do the call to search
    // and in the callback: 
    $('#search_results').removeClass('hidden');
});

演示：Fiddle

Showing and hiding content

Answer 2

查看源代码表明.collapse 或.invisible 是选项，具体取决于您是想要display: none; 行为还是visibility: hidden; 行为。

2016 年 3 月 8 日更新：Bootstrap v4 的早期采用者应该注意.invisible 的规则现在是visibility: hidden !important;。 （.collapse 不变。）