Есть ли класс 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>

Сначала должен быть скрыт div search_results. Есть ли нормальный/лучший способ сделать это с помощью бутстрапа?

Да, я понимаю, что могу просто поставить style = "display: none" на search_results, но это лучший способ сделать это? Казалось бы, немного лучше иметь стиль, который семантически означает "изначально скрытый". (ПРИМЕЧАНИЕ. Скрытые или скрытые классы не делают это так, как они есть! Important и show(), toggle() и т.д. Используют встроенный стиль, который не переопределяет их, то есть устанавливает "скрытый", поскольку класс делает его недоступным из jQuery.)

Ответ 1

Просмотр источника предполагает, что .collapse или .invisible являются параметрами, в зависимости от того, хотите ли вы display: none; поведение или visibility: hidden; соответственно.

Обновление, 2016-03-08: Ранние пользователи Bootstrap v4 должны заметить, что правило для .invisible теперь .invisible visibility: hidden !important; .invisible visibility: hidden !important; , (.collapse не изменилось.)

Ответ 2

Вы можете использовать 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');
});

Демо: скрипка

Отображение и скрытие содержимого