问题是否有Twitter Bootstrap类意味着“最初隐藏”？

使用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应该最初隐藏。是否有一些正常/最佳实践方式使用bootstrap执行此操作？

是的，我确实知道我可以在search_results上放置style =“display：none”，但这是最好的方法吗？拥有一种语义上意味着“最初隐藏”的风格似乎要好一些。（注意：隐藏或隐藏类不会这样做！重要和show（），toggle（）等使用不覆盖它们的内联样式，即设置“隐藏”，因为类使其无法显示来自jQuery。）

4209

2017-08-21 04:08

起源

有一节课 hidden 您可以添加，并在需要时删除该类 show。 getbootstrap.com/css/#helper-classes-show-hide - karthikr

答案:

通过消息来源查看建议 .collapse 要么 .invisible 是选项，取决于你是否想要 display: none; 行为或 visibility: hidden; 行为，分别。

更新，2016-03-08：Bootstrap v4的早期采用者应注意规则 .invisible 就是现在 visibility: hidden !important;。（.collapse 没有改变。）

2017-08-21 04:18

太好了！ “崩溃” - 具有完美意义，与“最初隐藏”非常相似的概念。（它有效） - Brad Peabody

你可以使用 hidden class，隐藏元素

<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');
});

演示：小提琴

显示和隐藏内容

2017-08-21 04:09

这不起作用，因为隐藏有重要的东西（在链接中也有注明）。而jQuery的show（）设置了一个内联样式但不重要！这个不太具体。即它不起作用。 - Brad Peabody

是的 - 它当然可以通过删除课程来实现 - 我看到你的编辑。只是想知道是否有一个类实际意味着它最初是隐藏的，然后可以被另一个内联样式覆盖。看起来不像。如果没有人能得到更好的答案，我会接受。 - Brad Peabody

@bgp，我不这么认为......当然你可以自己写一个吧？ :) - Arun P Johny

哦，你知道这些风格是怎样的，这么多额外的击键......;） - Brad Peabody

问题 是否有Twitter Bootstrap类意味着“最初隐藏”？

答案:

热门问题

问题是否有Twitter Bootstrap类意味着“最初隐藏”？