Спойлер bootstrap 3: Спойлер на Bootstrap 3 – Спойлер в Bootstrap.Как сделать, чтобы один открывался, другой закрывался? — Хабр Q&A

Компоненты

Плагин спойлера Bootstrap позволяет вам переключать контент на ваших страницах с помощью нескольких классов благодаря некоторому полезному JavaScript.

Содержание

Пример

Нажмите кнопки ниже, чтобы показать и скрыть другой элемент с помощью изменений класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется data-toggle="collapse".

Link with href Button with data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div>
  <div>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Пример аакордеона

Расширьте режим сворачивания по умолчанию, чтобы создать аккордеон.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

<div role="tablist" aria-multiselectable="true">
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div role="tabpanel" aria-labelledby="headingOne">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingTwo">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingThree">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
  
 
 
 

Доступность

Обязательно добавьте aria-expanded к элементу управления. Этот атрибут явно определяет текущее состояние элемента спойлера для скринридеров и аналогичных вспомогательных технологий. Если элемент спойлера закрыт по умолчанию, он должен иметь значение aria-expanded="false". Если вы создали элемент спойлера открытым по умолчанию с помощью класса show вместо этого установите aria-expanded="true". Плагин автоматически переключит этот атрибут, основываясь на том, был или не был открыт или закрыт элемент спойлера.

Кроме того, если ваш элемент управления нацелен на единый элемент спойлера, т. е. атрибут

data-target указывает на селектор id, вы можете добавить дополнительный атрибут aria-controls для элемента управления, содержащего id элемента спойлера. Современные скринридеры и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для навигации непосредственно к элементу спойлера.

Применение

Плагин collapse использует несколько классов:

• .collapse скрывает содержимое
• .collapse.show показывает содержимое
• .collapsing добавляется, когда начинается переход, и удаляется, когда он заканчивается

Эти классы можно найти в файле _transitions.scss.

Через атрибуты данных

Просто добавьте data-toggle="collapse" и data-target

в элемент, чтобы автоматически назначить управление элементом спойлера. Атрибут data-target принимает селектор CSS для применения спойлера. Обязательно добавьте класс collapse в сворачиваемый элемент. Если вы хотите открыть его по умолчанию, добавьте дополнительный show класса.

Через JavaScript

Включите вручную с помощью:

$('.collapse').collapse()

Опции

Опции могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-parent="".

Название	Тип	По умолчанию	Описаие
parent	selector	false	Если предоставлен селектор, тогда все элементы спойлера под указанным родителем будут закрыты при отображении этого элемента. (аналогично традиционному аккордеонному поведению — это зависит от класса panel)
toggle	boolean	true	Переключает элемент спойлера при вызове

Методы

.collapse(options)

Активирует ваш контент как элемент спойлера. Принимает необязательный object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Включает или отключает элемент спойлера.

.collapse('show')

Показывает элемент спойлера.

.collapse('hide')

Скрывает элемент спойлера.

События

Bootstrap класс спойлера предоставляет несколько событий для подключения к функции сворачивания.

Тип события	Описание
show.bs.collapse	Это событие срабатывает сразу после вызова метода экземпляра show.
shown.bs.collapse	Это событие вызывается, когда элемент спойлера становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.bs.collapse	Это событие вызывается сразу после вызова метода hide.
hidden.bs.collapse	Это событие вызывается, когда элемент спойлера скрыт от пользователя (будет ждать завершения переходов CSS).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Спойлер в Bootstrap.Как сделать, чтобы один открывался, другой закрывался? — Хабр Q&A

Здравствуйте, пытаюсь вставить спойлеры на сайт с Bootstrap, беру пример отсюда, но не выходит сделать, как в примере, чтобы один спойлер открывался, а другой вместе с тем закрывался. На сайте поставил код:

<div role="tablist" aria-multiselectable="true">
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div role="tabpanel" aria-labelledby="headingOne">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingTwo">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingThree">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Сам сайт. Подскажите пожалуйста, как сделать такое?

Collapse. Компоненты · Bootstrap. Версия v4.0.0

Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.

Примеры

Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется атрибут data-toggle="collapse".

Ссылка с href Кнопка с data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Ссылка с href
  </a>
  <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Кнопка с data-target
  </button>
</p>
<div>
  <div>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Взаимодействие со множественными объектами

Кнопки и ссылки <button> и <a> могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href или data-target через селектор jQuery. Несколько <button> или <a> могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href или data-target.

Переключить 1-ый элемент Переключить 2-ой элемент Переключить оба элемента

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
  <button type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</button>
  <button type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Разворачиваемые панели

Используя компонент «карточка», можно расширить стандартное поведение сворачивания для создания «аккордеона», т.е. столбца сворачиваемых панелей (для экономии места).

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

<div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Разворачиваемая панель #1
        </button>
      </h5>
    </div>

    <div aria-labelledby="headingOne" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Разворачиваемая панель #2
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingTwo" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Разворачиваемая панель #3
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingThree" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Доступность

Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded="false". Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show, теперь используйте вместо этого класса aria-expanded="true" в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом).

Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на #id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему #id этого скрываемого элемента.

Использование

Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:

• .collapse прячет содержимое
• .collapse.show показывает содержимое
• .collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss.

Через атрибуты

Добавьте в элемент атрибуты data-toggle="collapse" и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse. Если он должен быть показан по умолчанию, добавьте в него класс show.

Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent="#selector". Обратитесь к демо для просмотра в действии.

Через JavaScript

Активируйте вручную:

$('.collapse').collapse()

Параметры

Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data-, например data-parent="".

Имя	Тип	По умолч.	Описание
parent	selector | jQuery object | DOM element	false	Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» — это зависит от класса card). Атрибут нужно устанавливать в скрываемой зоне.
toggle	boolean	true	Взаимодействует с скрываемым элементом по обращению

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию по JavaScript.

.collapse(options)

Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse или hidden.bs.collapse event occurs).

.collapse('show')

Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse).

.collapse('hide')

Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse).

.collapse('dispose')

Уничтожает «коллпас» элемента.

События

Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».

Тип события	Описание
show.bs.collapse	Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.collapse	Это событие наступает, когда элемент «коллапса» сделан видимым юзеру (будет ждать выполнения CSS-переходов).
hide.bs.collapse	Это событие наступает немедленно по вызову метода hide.
hidden.bs.collapse	Это событие наступает как только элемент «коллапса» скрыт от юзера (будет ждать выполнения CSS-переходов).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Bootstrap Бутстрап Свернуть

---

JS свернуть (свернуть. js)

Получите базовые стили и гибкую поддержку для складных компонентов, таких как аккордеоны и навигация.

Зависимость от плагина: коллапс требует включения плагина Transitions в вашу версию Bootstrap.

Для учебника о складные, прочитайте наш Bootstrap свернуть учебник.

---

Классы плагина свертывания

Класс	Описание
.collapse	Скрывает содержимое
.collapse in	Показывает содержимое
.collapsing	Добавлено, когда начинается переход, и удаляется по завершении

---

Через Data-* атрибуты

Просто добавьте данные-Toggle = «Свернуть» и целевой объект данных к элементу, чтобы автоматически назначить управление складным элементом. Атрибут Data-Target принимает селектор CSS для применения свертывания. Обязательно добавьте коллапс класса в складной элемент. Если вы хотите, чтобы по умолчанию открыть, добавьте дополнительный класс в.

Пример

Collapsible

<div>
Some text..
</div>

Совет: Чтобы добавить управление групповыми аккордеонами в складной элемент управления, добавьте данные атрибута данных-Parent = «#selector».

---

Через JavaScript

Включить вручную с помощью:

$(‘.collapse’).collapse()

---

---

Свернуть параметры

Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как в Data-Parent = «».

Имя	Тип	По умолчанию	Описание
parent	selector	false	Все складные элементы под заданным родителем будут закрыты при отображении этого складного элемента. (аналогично традиционному аккордеонному поведению-это зависит от класса Panel)-смотрите пример ниже
toggle	boolean	true	Переключение складного элемента при вызове

Свернуть методы

В следующей таблице перечислены все доступные методы свертывания.

Collapse. Компоненты · Bootstrap

Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.

Как работает

Плагин свертывания JavaScript используется для показа\скрытия контента. Кнопки или ссылки используются как триггеры, «нацеленные» на определенные элементы, которые надо скрыть\показать. Изменение состояния элемента происходит с помощью height — изменением его с текущего до 0. В связи с тем, как CSS обрабатывает анимации, мы не можете использовать padding в элементе класса .collapse. Вместо padding используйте независимый «оборачивающий» элемент.

Примеры

Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется атрибут data-toggle="collapse".

Ссылка с href Кнопка с data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Ссылка с href
  </a>
  <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Кнопка с data-target
  </button>
</p>
<div>
  <div>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Взаимодействие со множественными объектами

Кнопки и ссылки <button> и <a> могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href или data-target через селектор jQuery. Несколько <button> или <a> могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href или data-target.

Переключить 1-ый элемент Переключить 2-ой элемент Переключить оба элемента

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
  <button type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</button>
  <button type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Разворачиваемые панели

Используя компонент «карточка», можно расширить стандартное поведение сворачивания для создания «аккордеона», т.е. столбца сворачиваемых панелей (для экономии места).

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

<div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Разворачиваемая панель #1
        </button>
      </h5>
    </div>

    <div aria-labelledby="headingOne" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Разворачиваемая панель #2
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Разворачиваемая панель #3
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingThree" data-parent="#accordionExample">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Доступность

Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded="false". Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show, теперь используйте вместо этого класса aria-expanded="true" в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.

Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на #id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему #id этого скрываемого элемента.

Заметим, что текущая версия Bootstrap не работает с различными событиями взаимодействия с клавиатурой, описанными в WAI-ARIA Authoring Practices 1.1 accordion pattern — и вам потребуется подключить эти события с помощью обычного JavaScript.

Использование

Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:

• .collapse прячет содержимое
• .collapse.show показывает содержимое
• .collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss.

Через атрибуты

Добавьте в элемент атрибуты data-toggle="collapse" и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse. Если он должен быть показан по умолчанию, добавьте в него класс show.

Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent="#selector". Обратитесь к демо для просмотра в действии.

Через JavaScript

Активируйте вручную:

$('.collapse').collapse()

Параметры

Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data-, например data-parent="".

Имя	Тип	По умолч.	Описание
parent	selector | jQuery object | DOM element	false	Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» — это зависит от класса card). Атрибут нужно устанавливать в скрываемой зоне.
toggle	boolean	true	Взаимодействует с скрываемым элементом по обращению

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Смотрите документацию по JavaScript.

.collapse(options)

Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse или hidden.bs.collapse event occurs).

.collapse('show')

Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse).

.collapse('hide')

Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse).

.collapse('dispose')

Уничтожает «коллпас» элемента.

События

Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».

Тип события	Описание
show.bs.collapse	Это событие наступает немедленно по вызову экземпляра метода show.
shown.bs.collapse	Это событие наступает, когда элемент «коллапса» сделан видимым юзеру (будет ждать выполнения CSS-переходов).
hide.bs.collapse	Это событие наступает немедленно по вызову метода hide.
hidden.bs.collapse	Это событие наступает как только элемент «коллапса» скрыт от юзера (будет ждать выполнения CSS-переходов).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Всплывающие сообщения. Компоненты · Bootstrap

Легко настраиваемые всплывающие предупреждающие сообщения для уведомления посетителей.

Всплывающие сообщения (Toasts) — это легкие уведомления, разработанные для имитации push-уведомлений, которые были популярны в мобильных и настольных операционных системах. Они построены с flexbox, поэтому их легко выровнять и расположить.

Обзор

Что нужно знать при использовании:

• Если вы создаете наш JavaScript из исходного кода, он потребует использования requires util.js.
• Всплывающие сообщения включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
• Всплывающие сообщения будут автоматически скрываться, если вы не укажете autohide: false.

Примеры

Основной

Чтобы поощрить растяжимые и предсказуемые всплывающие сообщения, мы рекомендуем помещать их в заголовок и тело. В заголовках Всплывающие сообщения используется display: flex что позволяет легко выравнивать содержимое благодаря нашим утилитам margin и flexbox.

Всплывающие сообщения можно гибко настраивать под ваши потребности с минимальными настройками. Как минимум необходимо чтобы один «элемент» содержал ваш контент и настоятельно рекомендуем использовать кнопку закрытия.

Hello, world! This is a toast message.

<div role="alert" aria-live="assertive" aria-atomic="true">
  <div>
    <img src="..." alt="...">
    <strong>Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div>
    Hello, world! This is a toast message.
  </div>
</div>

Полупрозрачность

Всплывающие сообщения также немного полупрозрачные. Для браузеров, поддерживающих CSS свойство фонового фильтра backdrop-filter, будут размыты элементы под всплывающим сообщением.

Hello, world! This is a toast message.

<div role="alert" aria-live="assertive" aria-atomic="true">
  <div>
    <img src="..." alt="...">
    <strong>Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div>
    Hello, world! This is a toast message.
  </div>
</div>

Стек

Если у вас есть несколько всплывающих сообщений, они по умолчанию размещаются вертикально друг под другом в удобочитаемой форме.

Heads up, toasts will stack automatically

<div role="alert" aria-live="assertive" aria-atomic="true">
  <div>
    <img src="..." alt="...">
    <strong>Bootstrap</strong>
    <small>just now</small>
    <button type="button" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div>
    See? Just like this.
  </div>
</div>

<div role="alert" aria-live="assertive" aria-atomic="true">
  <div>
    <img src="..." alt="...">
    <strong>Bootstrap</strong>
    <small>2 seconds ago</small>
    <button type="button" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div>
    Heads up, toasts will stack automatically
  </div>
</div>

Размещение

Размещайте всплывающие сообщения с помощью пользовательских параметров CSS по мере необходимости. Верхний правый угол часто используется для уведомлений, как и верхний средний. Если вы собираетесь показывать только одно сообщение за раз, поместите стили позиционирования прямо на .toast.

Hello, world! This is a toast message.

<div aria-live="polite" aria-atomic="true">
  <div>
    <div>
      <img src="..." alt="...">
      <strong>Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div>
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Для систем, которые генерируют больше уведомлений, рассмотрите возможность использования элемента обтекания, чтобы они могли легко складываться.

Heads up, toasts will stack automatically

<div aria-live="polite" aria-atomic="true">
  <!-- Position it -->
  <div>

    <!-- Then put toasts within -->
    <div role="alert" aria-live="assertive" aria-atomic="true">
      <div>
        <img src="..." alt="...">
        <strong>Bootstrap</strong>
        <small>just now</small>
        <button type="button" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        See? Just like this.
      </div>
    </div>

    <div role="alert" aria-live="assertive" aria-atomic="true">
      <div>
        <img src="..." alt="...">
        <strong>Bootstrap</strong>
        <small>2 seconds ago</small>
        <button type="button" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Вы также можете использовать утилиты flexbox для выравнивания тостов по горизонтали и/или вертикали.

Hello, world! This is a toast message.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true">

  <!-- Then put toasts within -->
  <div role="alert" aria-live="assertive" aria-atomic="true">
    <div>
      <img src="..." alt="...">
      <strong>Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div>
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Доступность

Всплывающие сообщения предназначены для небольших перерывов в работе ваших посетителей или пользователей, поэтому, чтобы помочь тем, у кого есть программы чтения с экрана и аналогичные вспомогательные технологии, вы должны обернуть свои сообщения aria-live своего региона. Читатели экрана автоматически объявляют об изменениях в живых регионах (таких как добавление / обновление компонента-тоста) без необходимости перемещать фокус пользователя или иным образом прерывать его. Кроме того, включите aria-atomic="true", чтобы гарантировать, что весь тост всегда объявляется как единое (атомарное) устройство, вместо того, чтобы объявлять, что было изменено (что может привести к проблемам, если вы обновляете только часть содержимого тоста, или если отображение того же содержимого тоста в более поздний момент времени). Если необходимая информация важна для процесса, например, для списка ошибок в форме, затем используйте компонент уведомления вместо всплывающего сообщения.

Обратите внимание, что регион должен присутствовать в разметке, прежде чем всплывающее сообщение будет создано или обновлено. Если вы динамически генерируете и то и другое одновременно и вставляете их на страницу, они, как правило, не будут анонсированы вспомогательными технологиями.

Вы также должны адаптировать>role и aria-live в зависимости от контента. Если это важное сообщение, такое как ошибка, используйте role="alert" aria-live="assertive", в противном случае используйте атрибуты role="status" aria-live="polite".

Поскольку содержимое, которое вы отображаете, изменяется, не забудьте обновить время ожидания delay timeout, чтобы у людей было достаточно времени, чтобы прочитать сообщение.

<div role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

При использовании autohide: false необходимо добавить кнопку закрытия, чтобы пользователи могли закрыть сообщение.

Hello, world! This is a toast message.

<div role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
  <div>
    <img src="..." alt="...">
    <strong>Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div>
    Hello, world! This is a toast message.
  </div>
</div>

Поведение JavaScript

Использование

Инициализация всплывающих сообщений через JavaScript:

$('.toast').toast(option)

Опции

Опции могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data- как в data-animation="".

Имя	Тип	По умолчанию	Описание
animation	boolean	true	Применить переход CSS исчезновения к всплывающему сообщению
autohide	boolean	true	Авто скрытие
delay	number	500	Задержка сокрытия всплывающего сообщения (мс)

Методы

$().toast(options)

Присоединяет обработчик всплывающих сообщений к коллекции элементов.

.toast('show')

Раскрывает всплывающие сообщения элемента. Возврат к вызывающей стороне до того, как тост будет фактически показан (то есть до того, как произойдет событие shown.bs.toast). Вы должны вручную вызвать этот метод, вместо этого ваше всплывающее сообщение не будет отображаться.

$('#element').toast('show')

.toast('hide')

Скрывает всплывающие сообщения элемента. Возврат к вызывающей стороне до того, как тост будет фактически скрыт (то есть до того, как произойдет событие hidden.bs.toast). Вы должны вручную вызвать этот метод, если вы сделали autohide к false.

$('#element').toast('hide')

.toast('dispose')

Скрывает всплывающие сообщения элемента. Ваше всплывающее сообщение останется в DOM, но больше не будет отображаться.

$('#element').toast('dispose')

События

Тип событий	Описание
show.bs.toast	Это событие вызывается сразу после вызова метода show.
shown.bs.toast	Это событие вызывается, когда всплывающее сообщение видимо для пользователя.
hide.bs.toast	Это событие вызывается сразу после вызова метода экземпляра hide.
hidden.bs.toast	Это событие вызывается, когда всплывающее сообщение уже скрыт от пользователя.

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})

Bootstrap спойлер

Вопрос: расскажите про Bootstrap. где он должен быть, какую среду разработки использовать?

решил поиграться с Bootstrap.
не часто занимался с JS фреймворками, поэтому в недоумении зачем все эта методика инсталлирования которая описана на сайте:
чтоб заинсталлировать нужен «bower», чтоб поставить «bower» нужен «npm», потом еше надо какой то «Grunt» поставить.
врезультате всей написанной методики все залезло в user\appdata\npm\bower\node_modules\bower_components\bootsrap…
еще где то в этой цепочке обязатеьно надо было поставить «git».
и что теперъ с этим всем делать? с какой стороны к этому всему подлезть? что запускать?
не хватило терпения дальше копатъся, взял тот же дистрибутив от Bootstrap и засунул традиционную в папку htdocs в apache, где остальные библиотеки JS. туда же в отдельные папки записал пару Bootstrap-html-шаблонов со стилями.
только тогда все «схватилось» и шаблоны заработали. вроде ничего другого и ненадо.

как правильно работать с Bootstrap, где должны быть его библиотеки, как он должен быть корректно заинсталлирован?
и надо ли все ето npm, bower,git, Grunt?
вообще какой отладчик лучше использовать для Bootstrap и других JS фреимворков?

Ответ:

oaken

Alex123F там конкретно втирают что надо все это делать то что я написал выше. Ты ошибаешся, в самом верху упомянутой страницы есть большая кнопка Download Bootstrap, чуть ниже — раздел Bootstrap CDN. Это именно то что тебе нужно. Все остальные способы установки используются в фреймворках типа NodeJs для облегчения жизни разработчику по отслеживанию версионности и зависимостей между пакетами. Вывод, если ты не знаешь что это — оно тебе не нужно. А так да, бутстрап серьезный пакет, поэтому предоставляет практически любые способы установки под любые фреймврки, а как иначе-то?

ладно, будем считать что я пропустил мимо ушей эту «кнопку» :).. но пока мало что нового, познавательного.
скажитe хоть кто-нибуть какую среду разработки для JS удобно щас использовать?
есть смысл в WebStrom или есть что то более резонное?