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

Содержание

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.

 <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> 
     (adsbygoogle = window.adsbygoogle || []).push({});

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

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

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.

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 позволяет вам переключать контент на ваших страницах с помощью нескольких классов благодаря некоторому полезному 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>

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

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

<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 на русском

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

Содержание

Пример

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

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

Вы можете использовать ссылку с 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>

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

Унаследовать collapse по умолчанию, чтобы создать аккордеон.

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

Доступность

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

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

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

Плагин распада использует несколько классов для обработки тяжелую работу:

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

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

С помощью данных атрибутов

Просто добавьте data-toggle="collapse" и data-target для элемента, чтобы автоматически назначить управление складной элемент. На data-target атрибут принимает CSS селектор применять коллапс. Будьте уверены, чтобы добавить класс collapse складной элемент. Если вы хотите по умолчанию открыть, добавить дополнительный класс in.

Чтобы добавить гармошкой управления группа складной-контроль, добавьте атрибут Data data-parent="#selector". Ознакомьтесь с демо, чтобы увидеть это в действии.

Через 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 () {
  // сделать что-то...
})

Bootstrap 4 Свернутое руководство — Hoow.ru

div itemprop=”articleBody”>

Свертывание имени – это общий термин, используемый для демонстрации элементов, которые могут быть показаны или скрыты щелчком мыши. Аккордеон, спойлер и переключатели – хорошие примеры компонентов разрушения. Он использует JavaScript для отображения или скрытия содержимого при нажатии на элемент. В этом руководстве мы подробнее рассмотрим добавление компонента сворачивания на ваш сайт Bootstrap.

Bootstrap 4 Свернутое руководство

Введение в Bootstrap 4 свернуть
Создание коллапса с атрибутом href
Свернуть с помощью функции Data-toogle
Свертывание нескольких целей
Коллапс аккордеона
Сворачиваемое тело содержимого

1. Введение в Collapse

Компонент сворачивания состоит из двух элементов:

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

Он использует следующие три класса CSS:

«.collapse»Используется для сокрытия содержимого.
«.collapsing»Используется для применения эффекта перехода.
«.collapse.show»Используется для отображения содержимого.

Здесь мы обсудим создание трех типов коллапса – с использованием атрибута href, с использованием переключения данных и стиля аккордеона.

2. Свернуть с атрибутом Href

В этом случае тег привязки используется с классами кнопок в качестве триггера. Он должен иметь «переключение данных»Со значением«коллапс«. Атрибут href должен иметь уникальный идентификатор. Для атрибута «aria-extended» установлено значение «false», чтобы гарантировать, что содержимое скрыто при начальной загрузке страницы.

После триггера коллапса фактическое содержимое должно быть добавлено с отдельным тегом

div>, идентифицируемым с тем же идентификатором атрибута href. Вы также должны добавить «.collapse»К тегу div. Вы можете добавить любой тип содержимого в теги div. В этом примере мы использовали карточный блок с текстом.

Полный код коллапса с атрибутом href показан ниже:

<p>
<a data-toggle="collapse" href="https://www.webnots.com/bootstrap-4-collapse-tutorial/#linkcollapse" aria-expanded="false" aria-controls="Collapse">
Link with Href
</a>
</p>
<div>
<div>
Here is the content for block which will be shown when the button is clicked. This uses the link with href attribute for collapsing.
</div>
</div>

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

Вы всегда должны использовать код внутри основного раздела начального шаблона Bootstrap 4, который включает необходимый фреймворк CSS и JavaScript.

3. Свернуть с переключением данных.

Вместо атрибута href можно использовать «data-toggle = свернуть”С элементом кнопки для создания триггера, как показано ниже:

<p>
<button type="button" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false" aria-controls="Collapse">
Button with data-target
</button>
</p>
<div>
<div>
Here is the content for block which will be shown when the button.  This uses button with data-target attribute for collapsing.
</div>
</div>

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

Предлагает: Получите 97% скидку на конструктор сайтов Mobirise Bootstrap.

4. Свертывание нескольких тегов

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

<p>
  <a data-toggle="collapse" href="https://www.webnots.com/bootstrap-4-collapse-tutorial/#multipleCollapse1" aria-expanded="false" aria-controls="multipleCollapse1">Toggle First Element</a>
  <button type="button" data-toggle="collapse" data-target="#multipleCollapse2" aria-expanded="false" aria-controls="multipleCollapse2">Toggle Second Element</button>
  <button type="button" data-toggle="collapse" data-target=". multi-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2">Toggle Both Elements</button>
</p>
<div>
  <div>
    <div>
      <div>
            Here is the content for block which will be shown when the first button is clicked. This uses button with data-target attribute for collapsing.
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
            Here is the content for block which will be shown when the second button is clicked. This uses button with data-target attribute for collapsing.
      </div>
    </div>
  </div>
</div>

5. Разрушение аккордеона

Последний и самый популярный вариант – создание аккордеона с использованием компонента сворачивания. Ниже приведен код аккордеона с тремя ползунками – первый имеет макет группы карточек, а остальные два имеют заголовок карточки с некоторым текстовым содержимым.

<div role="tablist" aria-multiselectable="true">
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="https://www. webnots.com/bootstrap-4-collapse-tutorial/#collapse1" aria-expanded="true" aria-controls="collapse1">
          Heading 1
        </a>
      </h5>
    </div>

    <div role="tabpanel" aria-labelledby="Firstheading">
<div>
        <div>
  <div>
    <img src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1">
    <div>
      <h5>Card Title</h5>
      <p>Here is a longer description of the card and the height will be auto aligned with flex box.</p>
    </div>
    <div>
      <small>Here is a footer</small>
    </div>
  </div>
  <div>
    <img src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2">
    <div>
      <h5>Card Title</h5>
      <p>Here is a shorter description of the card.</p>
    </div>
    <div>
      <small>Here is a footer</small>
    </div>
  </div>
</div>
</div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
          Heading 2
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="secondheading">
      <div>
        Here is the content for the second section. 
      </div>
    </div>
  </div>
  <div>
    <div role="tab">
      <h5>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
          Heading 3
        </a>
      </h5>
    </div>
    <div role="tabpanel" aria-labelledby="headingThree">
      <div>
        Here is the content for the third section.
      </div>
    </div>
  </div>
</div>

div class=”page” title=”Page 193″>

Это длинный блок кода в основном из-за раздела группы карт для первого свертывания. Давайте рассмотрим все элементы этого кода:

5.1. Аккордеон

Аккордеон заключен в теги div с уникальным идентификатором (#accordion в этом примере). А атрибут роли следует использовать как список вкладок.
Всего используются три складных раздела, и каждый раздел должен начинаться со своего собственного div. Мы использовали класс «.card» для каждого из этих разделов.
Каждый раздел карточки состоит из заголовка и сворачиваемого содержимого.

5.2. Заголовок

Класс “.card-header”Используется для заголовка вместе с уникальным идентификатором (Firstheading) и атрибутом роли со значением табуляции.
Внутри заголовка добавьте теги заголовка, в данном случае мы использовали h5.
Опять же, внутри тегов заголовков добавьте ссылку привязки со следующими классами / атрибутами:
Добавить “.collapsed»Класс по аккордеону.
Добавить переключение данных атрибут со значением как коллапс.
Добавить родитель данных атрибут с тем же идентификатором, который использовался для первого
(в данном случае #accordion).
Атрибут Href должен иметь идентификатор сворачиваемого содержимого: «# collapse1«.
Задайте для aria-extended значение true, чтобы этот раздел открывался при загрузке страницы (вы должны установить значение false для второго и последующих разделов, чтобы они закрывались при загрузке).
Установите значение атрибута aria-controls с тем же идентификатором значения атрибута Href (collapse1).
6. Сворачиваемое тело содержимого

Откройте новый тег после заголовка с тем же идентификатором, который соответствует значению атрибута href заголовка (collapse1).
Добавьте класс «.collapse показать», Чтобы показать содержимое открытым. Вы не должны использовать “.Показать»Для остальных разделов, поскольку они должны быть закрыты.
Добавьте роль как tabpanel и назначьте атрибуту aria-labelledby то же значение, что и идентификатор заголовка карты (Firstheading).
Теперь вы можете добавить любой контент, который хотите добавить. В этом случае мы открыли еще один div и добавили группу карточек для первого раздела и блоки карточек для оставшихся двух секций.

Выполните тот же процесс для двух других разделов, и окончательный аккордеон должен выглядеть примерно так:

JS collapse, спойлери, згортання блоків – Tokar.

ua
У Bootstrap є плагін, який відповідає за плавне згортання і розгортання блоків. Ця функція вкрай зручна і може використовуватися де завгодно:
в навігації,
для спойлерів,
для блоків з прихованим текстом,
згорнутих пунктів меню,
відповідей на часті запитання.
Зі свого досвіду можу сказати, що якщо ваш проект працює з використанням бутстрапа то collapse ви будете використовувати постійно. Плагін дуже простий в роботі, не вимагає особливої настройки і дозволяє згортати будь-які блокові елементи. Зараз я розповім, як його використовувати.
Приклад
Для прикладу я створив кнопку і прихований текстовий блок. По кліку на кнопці блок буде або видимим, або згорнутим.
Посилання Кнопка
Нострадамус народився в селі Сен-Ремі, що у Франції, в родині власних батьків. Уже в юності пророк міг передбачити настання наступного дня, погоду на Марсі й інші цікаві речі. Однак до 1518 року, вкрай замучивши селян швидким пророкуванням кінця світу, його вигнали в Авіньйон з метою навчання. Прикинувшись нащадком великих людей, швидко отримав ступінь магістра мистецтв.
Налаштування
Вам потрібні два об’єкти, де перший буде управляти видимістю другого. Першим може бути посилання або кнопка.
Щоб “вказати” керуючому елементу, який блок потрібно згортати, є два методи:
атрибут href для посилання,
кнопка або будь-який інший об’єкт з атрибутом data-target.
В обох випадках цей елемент повинен мати атрибут data-toggle="collapse". Другого блоку, який повинен бути прихований, потрібно призначити клас .collapse.
Налаштування через data-* атрибути
Додайте атрибути data-toggle="collapse" і data-target керівному елементу. Атрибут data-target має містити CSS-селектор елемента, видимість якого треба міняти. Також керованого елементів потрібно призначити клас .collapse.
За замовчуванням такий елемент буде прихованим при завантаженні сторінки. Якщо ви хочете, щоб він був видимим, додайте йому додатково клас .in.
Налаштування через javaScript
Якщо data-* атрибути вам не підходять, можна обійтись без них, підключивши колапс за допомоги js:
$('.collapse').collapse()
Автоматичне приховування останніх блоків (accordion)
Щоб автоматично згортати всі інші елементи при показі нового, передайте параметр data-parent="#selector", де #selector може бути ідентифікатором, класом або будь-яким іншим css-селектором батьківського елемента. Це зручно для показу відповідей на актуальні питання. Так, після вибору одного з відповідей, всі інші автоматично будуть згорнуті. Код такого блоку ви знайдете в прикладах нижче.
Методи collapse в Bootstrap.js
Метод Опис
.collapse(options) Ініціалізує приховуваний елемент з параметрами options. У наступній таблиці представлені варіанти параметрів.
.collapse("toggle") Згортає або розгортає елемент. Залежить від поточного стану.
.collapse("show") Розгортає елемент.
.collapse("hide") Згортає елемент.
Параметри bootstrap collapse
Параметри, як і ініціалізацію об’єкта, можна передавати за допомоги data-* атрибутів або через JavaScript. У першому випадку ім’я атрибута йде після data-, наприклад, data-parent=".container".
Параметр Тип Default Опис
parent selector false Якщо ви передаєте селектор, то все приховані елементи всередині його будуть приховані при показі батьківського блоку.
toggle boolean true Міняти чи видимість елементу при виклику
Приклад: просте приховування елементів
Це найпростіший приклад роботи скрипта:
<button data-toggle="collapse" data-target="#hide-me">Collapse Bootstrap. js</button> <div> Анонімуси - відвідувачі анонімних борд, які майже всі є анонімами. </div>
Зверніть увагу: завдяки класу .in елемент, що згортається, за замовчуванням видно.
Collapse Bootstrap.js
Анонімуси – відвідувачі анонімних борд, які майже всі є анонімами.
Приклад: згортання інших блоків всередині батьківського (ефект accordion)
<div> <div> <div> <h5> <a data-toggle="collapse" data-parent="#collapse-group" href="#el1">Перший елемент</a> </h5> </div> <div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> </div> <div> <div> <h5> <a data-toggle="collapse" data-parent="#collapse-group" href="#el2">Другий елемент</a> </h5> </div> <div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div> <div> <h5> <a data-toggle="collapse" data-parent="#collapse-group" href="#el3">Третій елемент</a> </h5> </div> <div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> </div> </div>
У цьому прикладі при показі нового блоку всі інші, які знаходяться в тому ж батьківському блоці, будуть згорнуті.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Бажаю успіхів у вивченні!
БНИОС — Что такое Bootstrap
Что такое Bootstrap
Создан в застенках компании Twitter, сначала использовался для собственных продуктов и назывался «Twitter Bootstrap», а позже был выпущен на волю. За это у него забрали слово Twitter из названия.
Bootstrap — это CSS/HTML фреймворк для создания сайтов. Другими словами, это набор инструментов для вёрстки. В нём есть ряд преимуществ, благодаря которым BS считается самым популярным из себе подобных.
Преимущества бутстрапа:
Скорость работы — благодаря множеству готовых элементов вёрстка с бутстрапом занимает значительно меньше времени;
Масштабируемость — добавление новых элементов не нарушает общую структуру;
Лёгкая настраиваемость — редактирование стилей производится путём создания новых css-правил, которые исполняются вместо стандартных. При этом не требуется использовать атрибуты типа «!important»;
Большое количество шаблонов;
Огромное сообщество разработчиков;
Широкая сфера применения — Bootstrap используется в создании тем для практически любой CMS (OpenCart, Prestashop, Magento, Joomla, Bitrix, WordPress и любые другие), в том числе для одностраничных приложений.
Особой популярностью пользуется Bootstrap для создания одностраничников или «лендингов» (landing page).
Уроки Bootstrap Верстка | #1.Введение
Уроки Bootstrap Верстка | #2. Система сетки. Grid
Уроки Bootstrap Верстка | #3. Настройка сетки
Уроки Bootstrap 3 Верстка | #4. Как сделать адаптивное меню
Уроки Bootstrap 3 Верстка | #5. Положение меню и как сделать dropdown меню
Уроки Bootstrap 3 Верстка | #6. Как сделать слайдер
Уроки Bootstrap 3 Верстка | #7. Что такое Glyphicons и как ими управлять
Уроки Bootstrap 3 Верстка | #8. Классы кнопок в бутстрап
Уроки Bootstrap 3 Верстка | #9. Группы кнопок в бутстрап
Уроки Bootstrap 3 Верстка | #10. Кнопки с выпадающим меню ( Dropdown menu)
Уроки Bootstrap 3 Верстка | #11. Как сделать вкладки табы (Tabs)
Уроки Bootstrap 3 Верстка | #12. Как сделать спойлер
Уроки Bootstrap 3 Верстка | #13. Как сделать аккордеон
Уроки Bootstrap 3 Верстка | #14. Как сделать модальное или диалоговое окно
Уроки Bootstrap 3 Верстка | #15. Как сделать форму регистрации или авторизации
Уроки Bootstrap 3 Верстка | #16. Создаем индикаторы прогресса
Уроки Bootstrap 3 Верстка | #17. Пагинация
Уроки Bootstrap 3 Верстка | #18. Как сделать tooltip и всплывающие окна
Уроки Bootstrap 3 Верстка | #19. Создаем breadcrumbs
Что нового в Bootstrap 4. Все изменения сетки
Bootstrap 4 — Обзор бета версии. Что ожидать от релиза?

Bootstrap 4 Свернуть руководство »WebNots
Свернуть имя — это общий термин, используемый для демонстрации элементов, которые могут быть показаны или скрыты при щелчке мышью. Аккордеон, спойлер и переключатели — хорошие примеры компонентов разрушения. Он использует JavaScript для отображения или скрытия содержимого при нажатии на элемент. В этом руководстве мы подробнее рассмотрим добавление компонента сворачивания на ваш сайт Bootstrap.
Bootstrap 4 Свернуть руководство
Введение в Bootstrap 4 свернуть
Создание сворачивания с атрибутом href
Свернуть с переключением данных
Обрушение множественных целей
Разрушение аккордеона
Сворачиваемое тело содержимого
1.
Введение в Collapse
Компонент сворачивания состоит из двух элементов:
Базовый элемент для отображения или скрытия сворачивания.
Фактическое содержимое в свернутом контейнере.
Он использует следующие три класса CSS:
« .collapse » используется для скрытия содержимого.
« .collapsing » используется для применения эффекта перехода.
« .collapse.show » используется для отображения содержимого.
Здесь мы обсудим создание трех типов сворачивания — с использованием атрибута href, с использованием переключения данных и стиля аккордеона.
2. Свернуть с атрибутом Href
В этом случае тег привязки используется с классами кнопок в качестве триггера. Он должен иметь атрибут « data-toggle » со значением « collapse ». Атрибут href должен иметь уникальный идентификатор. Для атрибута «aria-extended» установлено значение «false», чтобы гарантировать, что содержимое скрыто при начальной загрузке страницы.
После триггера свертывания фактическое содержимое должно быть добавлено с отдельным тегом
, идентифицируемым с тем же идентификатором атрибута href.Вы также должны добавить к тегу div класс « .collapse ». Вы можете добавить любой тип содержимого в теги div. В этом примере мы использовали карточный блок с текстом.
Полный код сворачивания с атрибутом href показан ниже:

Связь с Href

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

Результат должен выглядеть как кнопка, а сворачиваемое содержимое должно отображаться при нажатии на кнопку.
Вы всегда должны использовать код внутри основного раздела начального шаблона Bootstrap 4, который включает необходимый фреймворк CSS и JavaScript.
3. Свернуть с переключением данных
Вместо атрибута href вы можете использовать « data-toggle = collapse » с элементом кнопки для создания триггера, как показано ниже:

Вот контент для блока, который будет отображаться при нажатии кнопки.Для сворачивания используется кнопка с атрибутом data-target.

Результат выполнения приведенного выше кода будет выглядеть, как показано ниже, аналогично примеру href.
Предложение: Получите 97% скидку на конструктор сайтов Mobirise Bootstrap.
4. Свернуть несколько тегов
В приведенном выше примере один компонент сворачивания переключается с помощью кнопки. Вы также можете переключать несколько компонентов сворачивания, используя один элемент. Например, в приведенном ниже коде есть три кнопки.Первая и вторая кнопки используются для переключения первого и второго сворачивания соответственно. Третья кнопка используется для переключения первого и второго сворачиваний вместе.

Переключить первый элемент

Вот содержимое блока, которое будет показано при нажатии первой кнопки. Для сворачивания используется кнопка с атрибутом data-target.

Вот содержимое блока, которое будет показано при нажатии второй кнопки. Для сворачивания используется кнопка с атрибутом data-target.

5. Разрушение аккордеона
Последний и самый популярный вариант — создание аккордеона с использованием компонента сворачивания. Ниже приведен код аккордеона с тремя ползунками — первый имеет макет группы карточек, а остальные два имеют заголовок карточки с некоторым текстовым содержимым.

Заголовок 1

Название карточки

Вот более подробное описание карточки, и высота будет автоматически выровнена по гибкой рамке.

Вот нижний колонтитул

Название карточки

Вот краткое описание карты.

Вот нижний колонтитул

Заголовок 2

Вот содержание второго раздела.

Заголовок 3

Вот содержание третьего раздела.

Это длинный кодовый блок, в основном из-за секции группы карт для первого свертывания.Давайте рассмотрим все элементы этого кода:
5.1. Аккордеон
Аккордеон заключен в теги div с уникальным идентификатором (#accordion в этом примере). А атрибут роли следует использовать как список вкладок.
Всего используются три складных раздела, и каждый раздел должен начинаться со своего собственного div. Мы использовали класс «.card» для каждого из этих разделов.
Каждый раздел карточки состоит из заголовка и сворачиваемого содержимого.
5.2. Товарная позиция
.
Класс « .card-header » используется для заголовка вместе с уникальным идентификатором (Firstheading) и атрибутом роли со значением в виде табуляции.
Внутри заголовка добавьте теги заголовка, в данном случае мы использовали h5.
Снова внутри тегов заголовков добавьте ссылку привязки со следующим классом / атрибутами:
Добавить класс « . collapsed » для аккордеона.
Добавьте атрибут data-toggle со значением collapse .
Добавьте атрибут data-parent с тем же идентификатором, который использовался для первого
(в данном случае #accordion).
Атрибут
Href должен иметь идентификатор сворачиваемого содержимого « # collapse1 ».
Установите для aria-extended значение true, чтобы раздел открывался при загрузке страницы (вы должны установить значение false для второго и последующих разделов, чтобы они закрывались при загрузке).
Установить значение атрибута aria-controls с тем же идентификатором, что и значение атрибута Href ( collapse1 ).
6. Тело складного содержимого
Откройте новый тег
после заголовка с тем же идентификатором, который соответствует значению атрибута href заголовка ( collapse1 ).
Добавьте класс « .collapse show », чтобы отображать содержимое открытым. Вы не должны использовать « .show » для остальных разделов, так как они должны быть закрыты.
Добавьте роль как tabpanel и назначьте атрибуту aria-labelledby то же значение, что и идентификатор заголовка карты (Firstheading).
Теперь вы можете добавить любой контент, который хотите добавить. В этом случае мы открыли еще один блок и добавили группу карточек для первого раздела и блоки карточек для оставшихся двух разделов.
Повторите тот же процесс для двух других секций, и окончательный аккордеон должен выглядеть примерно так:
Свернуть · Bootstrap v5.0
Как это работает
Плагин JavaScript сворачивания используется для отображения и скрытия содержимого.Кнопки или якоря используются в качестве триггеров, которые сопоставляются с определенными элементами, которые вы переключаете. Сворачивание элемента приведет к анимации высоты от текущего значения до 0 . Учитывая, как CSS обрабатывает анимацию, вы не можете использовать заполнение в элементе .collapse . Вместо этого используйте класс как независимый элемент оболочки.
Пример
Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:
.свернуть скрывает содержимое
. Свертывание применяется во время переходов
.collapse.show показывает содержимое
Как правило, мы рекомендуем использовать кнопку с атрибутом data-bs-target . Хотя это не рекомендуется с семантической точки зрения, вы также можете использовать ссылку с атрибутом href (и role = "button" ). В обоих случаях требуется data-bs-toggle = "collapse" .
Ссылка на href Кнопка с data-bs-target
Некоторый заполнитель для компонента сворачивания.Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
Ссылка на href Некоторый заполнитель для компонента сворачивания.Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
Несколько целей

Некоторое содержимое-заполнитель для первого компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер. Некоторое содержимое заполнителя для второго компонента сворачивания в этом примере множественного сворачивания.Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
Доступность
Не забудьте добавить aria-extended к элементу управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-extended = "false" .Если вы настроили открывать складной элемент по умолчанию с помощью класса show , вместо этого установите aria-extended = "true" в элементе управления. Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же складному элементу). Если элемент HTML элемента управления не является кнопкой (например, или
), к элементу следует добавить атрибут role = "button" .
Если ваш элемент управления нацелен на один сворачиваемый элемент — т. Е. Атрибут data-bs-target указывает на селектор id — вы должны добавить атрибут aria-controls к элементу управления, содержащий идентификатор разборного элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу.
Обратите внимание, что текущая реализация Bootstrap не охватывает различные необязательные взаимодействия с клавиатурой, описанные в WAI-ARIA Authoring Practices 1. 1 шаблон аккордеона — вам нужно будет включить их самостоятельно в собственный JavaScript.
Использование
Плагин коллапса использует несколько классов для работы с тяжелыми грузами:
.collapse скрывает содержимое
.collapse.show показывает содержимое
.collapsing добавляется при запуске перехода и удаляется при его завершении
Эти классы можно найти в _transitions.scss .
Через атрибуты данных
Просто добавьте data-bs-toggle = "collapse" и data-bs-target к элементу, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-bs-target принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу свернутый элемент класса . Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show .
Чтобы добавить управление группами в виде гармошки в сворачиваемую область, добавьте атрибут данных data-bs-parent = "# selector" .Обратитесь к демонстрации, чтобы увидеть это в действии.
Через JavaScript
Включить вручную с помощью:
var collapseElementList = [] .slice.call (document.querySelectorAll ('. Collapse')) var collapseList = collapseElementList.map (function (collapseEl) { вернуть новый bootstrap.Collapse (collapseEl) })
Опции
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs- , как в data-bs-parent = "" .
Селектор
Имя Тип По умолчанию Описание
родитель | объект jQuery | Элемент DOM ложный Если указан родительский элемент, то все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента. (аналогично традиционному поведению аккордеона — это зависит от класса карты ).Атрибут должен быть установлен в целевой складной области.
переключатель логический правда Переключает складной элемент при вызове
Методы
Асинхронные методы и переходы
Все методы API асинхронные и запускают переход . Они возвращаются к вызывающему, как только начинается переход, но до его завершения .Кроме того, вызов метода переходного компонента будет проигнорирован .
См. Нашу документацию по JavaScript для получения дополнительной информации.
Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры , объект .
Вы можете создать экземпляр сворачивания с помощью конструктора, например:
var myCollapse = document. getElementById ('myCollapse') var bsCollapse = новый bootstrap.Collapse (myCollapse, { toggle: false })
Метод Описание
переключатель Переключает складной элемент на показанный или скрытый. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (т.е. до того, как произойдет событие shown.bs.collapse или hidden.bs.collapse ).
показать Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (например, до того, как произойдет событие shown.bs.collapse ).
скрыть Скрывает складной элемент. Возвращается к вызывающей стороне до того, как сворачиваемый элемент был фактически скрыт (например, до того, как произойдет событие hidden. bs.collapse ).
утилизировать Уничтожает обрушение элемента. (Удаляет сохраненные данные в элементе DOM)
getInstance Статический метод, позволяющий получить экземпляр сворачивания, связанный с элементом DOM.
События
Класс collapse
Bootstrap предоставляет несколько событий для подключения к функциональности свертывания.
Тип события Описание
show.bs.collapse Это событие запускается немедленно при вызове метода экземпляра show .
показано свернуть Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (будет ожидать завершения переходов CSS).
скрыть.bs.collapse Это событие запускается сразу после вызова метода hide .
hidden.bs.collapse Это событие вызывается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
var myCollapsible = document.getElementById ('myCollapsible') myCollapsible.addEventListener ('hidden.bs.collapse', function () { // сделай что-нибудь... })
30 HTML и CSS
Коллекция бесплатных HTML
&
с примерами кода CSS (с небольшим JS). Обновление июньской коллекции 2019. 5 новинок.
Аккордеоны CSS
Аккордеоны jQuery
Аккордеоны React
О коде
TreeView Подробности / сводка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: ionicons.css
Автор
Гарет МакКинли
1 августа 2019
О коде
Выпадающее меню на чистом CSS
Выпадающее меню на чистом CSS с подробностями и сводкой .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
Фредерик Аллен
3 июля 2019 г.
О коде
Только HTML Accordion
Изучение стиля HTML детализирует теги и summary для создания функционального аккордеона без какого-либо JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Детали Элемент
A детализирует элемент HTML с настраиваемой стрелкой в SVG, без JavaScript.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
Мерт Цукурен
17 марта 2019
О коде
Анимированные
Детали Элемент
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
Тони Бэник
13 февраля 2019
Сделано с
HTML (мопс) / CSS (SCSS) / JS
О коде
Панель результатов модульного тестирования
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome. css
Автор
Джеймс Штайнбах
10 октября 2018
О коде
Подробности Пример элементов
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
HTML5 Подробная информация и сводка
подробности работает как аккордеон, но без скриптов, поддерживаемых большинством основных браузеров (кроме IE и Edge).
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Сделано с
HTML / CSS (SCSS) / JavaScript
О коде
Детали / Резюме Анимированный аккордеон
Вы можете использовать это без JS, и он отлично работает, за исключением анимации закрытия.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: jquery. js, шрифт-awesome.js
Автор
Джессика Паоли
2 июня 2018 г.
Сделано с
HTML / CSS (SCSS) / JavaScript
О коде
HTML
<подробности> & <резюме>
HTML <подробности> и <резюме> : шутки плохих детей.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: jquery.js, jquery.color.js
О коде
HTML5
Подробности и Сводка Дерево файлов
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: bootstrap.css
Автор
Халида Астатин
21 мая 2018 г.
Сделано с
HTML / CSS (Меньше) / JavaScript
О коде
Подробная информация и сводка
Экспериментируйте с подробностями и сводкой HTML-тегов.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: jquery.js
Автор
Лина Лаванья
20 мая 2018
О коде
<подробности> и <резюме>: Выбор номера в отеле
Щелкните один, и остальные закроются.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: jquery.js
О коде
Подробности + Резюме
<подробности> и
с чистым CSS. Не поддерживаются браузеры IE и Edge.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Спойлер с
<подробностями> и <резюме>
Использование <детали> и <резюме> для скрытия / раскрытия спойлеров.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Рецепт с
<подробностями> и <резюме>
Использование
и
для создания рецепта энчилад.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
Питер Бисеманс
17 мая 2018
Сделано с
HTML / CSS (SCSS) / JavaScript
О коде
Репозиторий фрагментов кода
Репозиторий фрагментов кода с HTML <подробности> и
.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: darcula.css, highlight.js, scss.js, list.js,
О коде
Подробная информация и сводка
Часто задаваемые вопросы с HTML подробные и сводные теги .
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: tailwind.css
О коде
Подробная информация и сводка
Пример кода с подробностями HTML и сводными тегами .
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
Моника Уиллер
15 мая 2018
О коде
Подробная информация и сводка
HTML макет часто задаваемых вопросов.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Разделенный экран адаптивной веб-страницы
Адаптивная веб-страница в стиле «Разделенный экран» с использованием только CSS. Сделано с использованием HTML
и
. Попробуйте на маленьком экране.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
Аллистэр Ли
15 мая 2018
О коде
Подробная информация и сводка в формате HTML
Простой шаблон часто задаваемых вопросов.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: bootstrap.css, font-awesome.css
Автор
Винсент Данна
15 мая 2018
О коде
<подробности> и <резюме>
Простой пример с деталями HTML и примерами .
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Сделано с
HTML (Haml) / CSS (Sass) / JavaScript (Babel)
О коде
<подробности> и <резюме>
Быстрый и грязный набросок из деталей гармошка.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
Янелы Рамирес
14 мая 2018
О коде
Назначения списка ведра
Еще один пример с подробностями HTML и сводными тегами .
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Свойства цифровой монополии
Идея для использования тегов подробностей и сводок .
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Подробное описание жизни
Подробное описание жизни с <детали> и <резюме> .
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: bootstrap.css, font-awesome.css
Автор
Кейт Пикеринг
14 мая 2018
Сделано с
HTML / CSS (SCSS) / JavaScript
О коде
Изящно унижающие
<подробности> Аккордеон
Элемент details обеспечивает очень простую и доступную реализацию аккордеона, одного из наиболее распространенных компонентов пользовательского интерфейса. Проблема в том, что функциональность по умолчанию совсем не гладкая. Здесь я попытался решить эту проблему с помощью красивого класса ES6, который расширяет функциональность элемента без нарушения доступности.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Функция переключения и плавная прокрутка Чистый HTML и CSS
Макет сетки + подробности и сводка + поведение прокрутки.Все на чистом CSS3.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
Элиор Табека
3 ноября 2017 г.
О коде
Анимированный компонент свертывания / расходования
Свернуть / Расходовать с HTML подробности и сводки .
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Распаковка концовки и еще 2 загадки
Тьма Сезон 3 поднял и без того сложную серию на совершенно новую высоту, но может быть трудно точно проследить, что произошло. В частности, кажется, что последняя сцена возникла из ниоткуда. Добавьте сюда путешествия во времени и параллельный мир, и легко заблудиться. Вот краткое изложение этой последней сцены и еще два острых вопроса из 3-го сезона.
Впереди спойлеры для всего 3-го сезона Dark
Праздничный обед в эпилоге Netflix
Что произошло в финале 3-го сезона
Dark ?
После того, как Джонас и Марта принесли необходимую жертву и положили конец всем путешествиям во времени, многие персонажи вообще исчезают: мы видим, как каждая итерация Джонаса и Марты растворяется в своих конкретных временных линиях, но это все.Но в Dark все взаимосвязано, поэтому существование многих других персонажей будет уничтожено этим действием.
Это никогда не показывается явно, но мы получаем хорошее представление об эффекте в эпилоге, состоящем из одной сцены, когда Регина Тидеманн устраивает званый обед для своих друзей. Они тосты под эмбиентные мелодии «You Spin Me Round (Like a Record)» Dead or Alive, песни, показанной в сегменте 1986 года в первом сезоне. Присутствующие гости — Катарина, Питер, Бенни, Торбен и Ханна.Это эклектичная группа, но в каком-то смысле они пережили временную петлю.
Другие главные взрослые персонажи были стерты: Шарлотта не может существовать, поскольку ее дочь Элизабет не может быть ее собственной матерью, Ульрих не может существовать, поскольку его внук Джонас не может быть отцом Неизвестного (также известного как Трио с заячьей губой), который затем становится дедушкой Ульриха. Да, это сложно, но те закрытые дыры в сюжете демонстрируют истинное внимание Dark к деталям.
Из персонажей за столом кажется, что Питер и Бенни находятся в отношениях, а также Торбен и Ханна, а Ханна беременна.Однако ни один из этих персонажей не носит обручальных колец. Добавление братьев и сестер Веллер в качестве романтических партнеров, по крайней мере, обеспечивает некоторое закрытие для Питера и Ханны, одних из самых неудачливых персонажей 3 сезона.
Монета пфенниг Netflix
Что такое парадокс бутстрапа?
Парадокс бутстрапа уже кратко объяснялся в сериале, но в третьем сезоне эта концепция используется почти постоянно. Лучшим примером парадокса бутстрапа является монета пфенниг, найденная на шее Мэдса, когда он появляется в 2019 году еще в первом сезоне.В третьем сезоне, когда персонажи спешат «заполнить пробелы», они берут монету из улик полиции и отправляются в прошлое, чтобы положить ее на тело Мэдса.
Откуда взялась монета? У нее нет происхождения. Это просто живет в вечной временной петле, перемещаясь вперед и назад во времени. Эта петля вечна, пока ее наконец не разорвут Джонас и Марта в финале.
Появление Киллиана из ниоткуда Netflix
Кто такой Киллиан в сезоне
Dark 3?
В премьере 3 сезона Альт-Марта живет жизнью, совершенно отличной от той, что была в мире Джонаса.Ее брат Миккель надоедает, второй ее брат Магнус сейчас гот, а главное, у нее челка. Она ходит в школу в знаменитом желтом пиджаке Джонаса, где ее встречает парень Киллиан. Если мне показалось, что появление Киллиана было внезапным, так оно и было.
В шоу, где все взаимосвязано, его роль на удивление независима. Он там, чтобы заменить Джонаса в Альт-Мире, а потом его нет. Для Dark это нехарактерный ход, но он показывает связь между Мартой и Джонасом: она бросает Киллиана ради Джонаса, поскольку они идеально подходят друг другу.
Все три сезона сериала Dark транслируются на Netflix.
Эксперименты с альтернативами Bootstrap — Сообщество разработчиков
В настоящее время я прохожу половину 6-месячного учебного лагеря по полной веб-разработке. С первого дня мы используем Bootstrap как фреймворк HTML. Не стыжусь признаться, я влюбился в него с тех пор. Благодаря этому мой веб-дизайн «это должно было быть сделано примерно в 2002 году» выглядит современно и актуально в сегодняшней среде как на настольных компьютерах, так и на мобильных устройствах без особых усилий.
Однако в последнее время я экспериментировал с новыми фреймворками, так что я не скрепил в голове один метод проектирования с синтаксисом Bootstrap. Я хотел поделиться своими мыслями по каждому из них. Во-первых, вот список плюсов и минусов продолжения использования Bootstrap для каждого проекта:
Бутстрап 4
https://getbootstrap.com
Плюсы
Невероятная документация — Страница документации Bootstrap соответствует мировому уровню с точки зрения организации и простоты использования.Для нового разработчика это установило высокий стандарт, который редко встречается в моем опыте.
Полнофункциональный — Есть причина, по которой одним из главных недостатков BS4 (предупреждение о спойлерах) является его размер. В этой структуре есть практически все, что касается сложных и многофункциональных веб-дизайнов.
Интуитивно понятная система сеток — Я не могу переоценить, насколько полезен Bootstrap, помогая мне понять концепцию сеток CSS. Строки, которые делятся на 12 столбцов, выглядят настолько элегантно, насколько это возможно.
Минусы
Это огромно — Одна из самых больших жалоб, о которых я читал при изучении альтернатив BS, — это размер кодовой базы. Я лично не сталкивался с проблемами здесь, но мои приложения все еще относительно рудиментарны. Я вижу, что это становится проблемой в масштабе и по причинам доступности, учитывая объем данных, необходимых для рендеринга в браузере с медленным подключением или устаревшим оборудованием.
Это слишком много. — Иногда мне нужно больше контроля над мельчайшими деталями моего дизайна.Bootstrap обрабатывает так много элементов дизайна и предлагает массу встроенных компонентов, но они могут вызвать конфликты стилей при создании моей собственной таблицы стилей. Для некоторых проектов было бы неплохо больше полагаться на мой собственный стиль и опираться на фреймворк для основ, например, на интуитивно понятную систему сеток.
Встречаем альтернативы:
Материализовать
https://materializecss.com/
Знакомый, может быть, слишком знакомый — Для пояснения: я не откладывал навсегда ни один из этих вариантов. Я только пробовал себя в каждом из них и поэтому вернусь по мере развития моих навыков и изучу более тонкие детали каждого из этих инструментов. С учетом сказанного, Materialize казался слишком похожим на Bootstrap, чтобы требовать изучения различий в синтаксисе. В нем также отсутствовали некоторые встроенные компоненты, на которые я привык полагаться.
Все, что я читал о Materialise, указывало на то, что это полнофункциональный фреймворк, но с меньшим объемом, чем Bootstrap. Как упоминалось выше, я еще не видел случаев снижения производительности ни в одном из моих проектов, так что это преимущество не было очевидным.Поскольку в настоящее время я использую только 20-30% мощностей, предлагаемых BS, мне показалось, что с использованием Materialize происходит много дублирования, и поэтому не стоит тратить время на продолжение копания.
Невероятно чистый вид Materialize был одной из его выдающихся особенностей. Квадратные углы и чистые линии придали HTML очень элегантный, современный вид из коробки. Это, а также потенциальный прирост производительности определенно заставят пересмотреть эту структуру в будущем проекте.
Фонд
https: // получить.Foundation /
Американские горки эмоций — Тональный крем — это инструмент, который я хотел больше всего любить, но в конечном итоге вызвал изжогу. Эта структура устраняет большую часть сложности синтаксиса Bootstrap, оставаясь при этом достаточно модульной, чтобы предлагать надежный каталог фрагментов и компонентов, многие из которых созданы сторонними участниками.
Я просто почувствовал себя немного не в своей тарелке. Были ожидаемые растущие боли при работе с новым фреймворком или библиотекой, когда можно часами изучать документацию и уроки YouTube, чтобы разобраться в основах.Момент, когда это стало слишком большим препятствием для моего проекта, было при попытке назначить атрибут font-family.
Я тестировал Foundation на третьей версии моего профиля разработчика между проектами домашних заданий для буткемпов. Я хотел импортировать шрифт Google Font на свою целевую страницу для заголовка, но не смог найти способ присвоить ему атрибут в таблице стилей. При поиске в Google проблема была решена, но для этого потребовалось внести изменения в конфигурацию файлов CSS пакета.В этом проекте я полагаюсь на CDN для внешних библиотек и фреймворков, и поэтому Foundation возвращается на полку, чтобы дождаться следующего дня.
Возможность быстро создать мобильную адаптивность и легко поддерживать согласованность дизайна была очень привлекательной. Мне также очень нравится, как в Foundation обрабатывается сетка. Я считаю, что было бы сложно изучить сетку, но с «фундаментальным» (извините, ничего не могу поделать) пониманием сетки, управление, которое Foundation обеспечивает по осям x и y, было долгожданным изменением.Когда у меня будет больше опыта в развертывании на стороне сервера и я больше не буду полагаться только на CDN, я вернусь к Foundation.
Простая сетка
https://simplegrid. io/
Радостно голые кости — Simple Grid — наименее надежный, ограниченный по возможностям и мой личный фаворит из всех фреймворков, которые я пробовал, за исключением, конечно, моего любимого Boostrap. Этот фреймворк ориентирован исключительно на адаптивность страниц через CSS Grid. Система сеток SG очень похожа на синтаксис Bootstrap, но менее громоздка.Вместо класса необходим простой , а SG выполнит все остальное. Здесь нет готовых компонентов и очень мало, кроме самой сетки.
Так почему он мой любимый? Потому что он предоставляет широко открытый холст для разработки и создания моей собственной библиотеки CSS и имеет полный контроль над настройкой HTML проекта. Из-за такого скелетного подхода Simple Grid не будет иметь смысла для каждого проекта. Иногда из-за нехватки времени требуется более полнофункциональный фреймворк.Последовательность дизайна также является отличным поводом для работы с более надежным фреймворком. Но для побочных проектов и некоторых других задач характеристики гоночного автомобиля и детализация стиля, которые позволяет SG, делают его постоянным дополнением к моему набору инструментов.
Суть
В конечном счете, я по-прежнему предпочитаю Bootstrap. Я вижу потенциал во всех фреймворках, и опыт мышления о сетке и дизайне по-разному стоил экспериментов. Но BS4 просто все делает хорошо.Я с нетерпением жду того дня, когда производительность станет достаточно серьезной проблемой, чтобы искать более производительное решение. У меня есть несколько отличных идей для функциональных приложений, которые идеально подошли бы для минимальной эффективности Simple Grid, когда наш класс погрузится в React. Но пока я продолжу совершенствовать свои навыки с помощью их, как вы уже догадались, Bootstraps.
Что ты используешь?
Какие фреймворки вы используете в настоящее время? Мне бы хотелось увидеть предложения по изучению других фреймворков.
Приходите поздороваться на https://lucsedirae.github.io/
Я всегда за сотрудничество и конструктивную критику.
прошлых серий | Создайте свой SaaS — начальная загрузка в 2021 году
26 января 2021 г. • 38 минут
Просто странность этого
Воспроизвести эпизод 19 января 2021 • 44 минуты
2021 год, а летающих машин все еще нет
Воспроизвести эпизод 29 декабря 2020 • 54 минуты
Несогласие в Твиттере приводит к звонку в Skype
Воспроизвести эпизод 15 декабря 2020 • 53 минуты
Спойлер: он увеличил выручку вдвое!
Воспроизвести эпизод 17 ноября 2020 • 47 минут
Ян Ландсман рассказывает о своей 15-летней истории создания HelpSpot
Воспроизвести эпизод 10 ноября 2020 • 30 минут
Джастин потерял голос и звучит как Стив-О.
Воспроизвести эпизод 22 сентября 2020 • 69 минут
Джастин был гостем подкаста Framework
Воспроизвести эпизод 15 сентября 2020 • 40 минут
Джастин обеспокоен. Джон говорит «расслабься».
Воспроизвести эпизод 8 сентября 2020 • 81 минута
Успех обратного инжиниринга
Воспроизвести эпизод 4 августа 2020 • 46 минут
Что вы делаете, если не можете решить проблему самостоятельно?
Воспроизвести эпизод 30 июня 2020 г. • 52 минуты
Был приобретен один из наших конкурентов; что это значит для нас?
Воспроизвести эпизод 16 июня 2020 г. • 39 минут
Что произойдет, если ваш SaaS вырастет на 300% из-за карантина?
Воспроизвести эпизод 9 июня 2020 г. • 26 минут
Сопротивление угнетению и сопротивление угнетению
Воспроизвести эпизод 26 мая 2020 • 4 минуты
Быстрое обновление от Джастина
Воспроизвести эпизод 19 мая 2020 • 46 минут
Будем ли мы поддерживать Internet Explorer через десять лет?
Воспроизвести эпизод 13 мая 2020 г. • 56 минут
Саймон увольняется с работы и полностью использует SnapShooter
Воспроизвести эпизод 5 мая 2020 • 48 минут
Что вы делаете, когда конкурент ворует у вас?
Воспроизвести эпизод 28 апреля 2020 • 59 минут
Знакомство с реальными вещами, происходящими на
Воспроизвести эпизод 14 апреля 2020 • 62 минуты
Джош Пигфорд видит много аналитики доходов от SaaS; что он видит, чего нет?
Воспроизвести эпизод 7 апреля 2020 • 76 минут
«Это как разоблачение Бэнкси.«
Воспроизвести эпизод 31 марта 2020 г. • 44 минуты
Мы все еще в нем
Воспроизвести эпизод 24 марта 2020 • 44 минуты
Пробуждение от коронавируса
Воспроизвести эпизод 17 марта 2020 • 52 минуты
Беседа с Мари Пулен, Оки Доки
Воспроизвести эпизод 10 марта 2020 • 45 минут
«Извините за задержку»
Воспроизвести эпизод 3 марта 2020 г. • 52 минуты
Микеле и Матиас основали свою компанию с надеждой на лучшее будущее
Воспроизвести эпизод 25 февраля 2020 • 59 минут
«Всем нужно создать сайт для дяди Ларри»
Воспроизвести эпизод 18 февраля 2020 г. • 40 минут
Стоит ли пересобрать приложение?
Воспроизвести эпизод 11 февраля 2020 • 35 минут
О чем вы беспокоитесь, когда владеете компанией-разработчиком программного обеспечения?
Воспроизвести эпизод 4 февраля 2020 г. • 31 минута
Вам нужно выбраться за город
Воспроизвести эпизод
Почему я перестал использовать Bootstrap и вместо этого перешел на Tailwind | Рик Тиббе — Skrypt
Фото Ли Кэмпбелла на Unsplash
Пару лет назад я влюбился в Bootstrap.Тогда, когда у меня почти не было опыта работы с HTML, CSS или любым другим языком программирования, Bootstrap казался идеальным фреймворком, который я буду использовать всю оставшуюся жизнь. Он прост в использовании, документы очень понятны, он использовался на огромном количестве веб-сайтов, и в Интернете было множество учебных пособий по нему. За последние несколько лет я слышал о других фреймворках CSS, но они никогда не казались мне интересными, поэтому я просто придерживался Bootstrap.
Однако пару недель назад, когда я проходил курс VueJS, чтобы освежить свои знания, репетитор познакомил меня с Tailwind CSS.Хотя этот фреймворк не был для меня полностью новым (я слышал о нем раньше), на самом деле я никогда не углублялся в него. При использовании Bootstrap я использовал множество пользовательских классов CSS, что часто приводило к очень непоследовательному и беспорядочному коду (что в основном было моей собственной ошибкой, но все же). По мере того, как я следил за курсом, я решил попробовать Tailwind, просто чтобы посмотреть, действительно ли это будет проще или улучшит мой рабочий процесс. И, предупреждаем о спойлере, это произошло!
Для людей, которые не знакомы с Tailwind: это CSS-фреймворк, ориентированный на служебные программы и обладающий широкими возможностями настройки (об этом говорится на их сайтах). Сравнивать его с Bootstrap на самом деле нечестно, поскольку Bootstrap — это скорее набор пользовательского интерфейса. У Tailwind действительно нет темы по умолчанию, и она не содержит готовых шаблонов или компонентов. Идея Tailwind заключается в том, что все можно легко изменить. Если вы раньше работали с Bootstrap, как и я, вы, вероятно, обнаружили, что создаете классы, которые близки к классам Bootstrap, но их просто нужно было немного корректировать слишком часто. Этого (почти) не происходит с Tailwind. Например, когда вы указываете цвет в Tailwind, он автоматически генерирует полный список классов для этого цвета.Допустим, мы хотим добавить # C7EA46 (Lime) в качестве цвета, мы просто добавляем его к объекту цветов в файле конфигурации Tailwind. После этого будут автоматически сгенерированы такие классы, как bg-lime и text-lime . На самом деле это намного больше, чем просто цвета, так как вы также можете указать варианты, точки останова и почти любое другое свойство CSS. Если вы действительно хотите узнать о силе попутного ветра, я просто рекомендую вам испытать его!
Вернемся к тому, почему я перешел.Я хотел сделать что-то простое с помощью Tailwind, поэтому я начал с разработки базового дизайна приборной панели в Adobe XD, просто чтобы иметь представление о том, что я хочу создать. В прошлом я много использовал Bootstrap для создания подобных сайтов, поэтому было неплохо сравнить возможности Tailwind и Bootstrap. Когда первоначальный дизайн был завершен, я создал новый проект Vue и установил Tailwind. Я не буду вдаваться в подробности того, как все это сделать, поскольку исходные документы Vue и Tailwind довольно просты.Я хочу отметить одну вещь: я выполнил команду npx tailwindcss init --full , чтобы получить полный файл конфигурации. Я предпочел этот вариант, потому что, как человек, не имеющий опыта работы с Tailwind, он дал мне хорошее представление о многих функциях фреймворка, что немного облегчило процесс обучения.
Как только я начал писать код, я заметил, насколько более расширенный Tailwind по сравнению с Bootstrap. Опять же, сравнивать их нельзя, но все же.С таким количеством доступных новых классов можно было бы подумать, что будет легко потеряться во всех разных именах, но поскольку имена классов очень согласованы (и я использовал IDE с автозаполнением), это было действительно легко найти подходящие классы. Конечно, иногда мне приходилось искать что-то в документации Tailwind или выполнять поиск в Google, но в целом я чувствовал, что мой рабочий процесс был намного быстрее, чем когда я использовал Bootstrap. Когда я закончил первоначальный дизайн, я заметил, что написал всего 3 (!) Настраиваемых класса для создания полной темы приборной панели, которая также была отзывчивой и включала такие детали, как переходы, анимация и т. Д.С Bootstrap это обычно стоило бы мне намного больше времени, чем с Tailwind.
Помимо улучшения рабочего процесса, он также сохраняет ваш код чистым и легким для чтения. Да, иногда вам нужно добавить много классов только к одному элементу, но вы сразу знаете, для чего предназначен каждый класс, и вы можете легко изменить элемент, когда вам нужно, вместо того, чтобы просматривать 5 разных файлов, чтобы наконец найти местонахождение недвижимости.
No related posts.

Метод	Опис
`.collapse(options)`	Ініціалізує приховуваний елемент з параметрами options. У наступній таблиці представлені варіанти параметрів.
`.collapse("toggle")`	Згортає або розгортає елемент. Залежить від поточного стану.
`.collapse("show")`	Розгортає елемент.
`.collapse("hide")`	Згортає елемент.

Параметр	Тип	Default	Опис
`parent`	`selector`	`false`	Якщо ви передаєте селектор, то все приховані елементи всередині його будуть приховані при показі батьківського блоку.
`toggle`	`boolean`	`true`	Міняти чи видимість елементу при виклику

Имя	Тип	По умолчанию	Описание
`родитель`	\| объект jQuery \| Элемент DOM	`ложный`	Если указан родительский элемент, то все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента. (аналогично традиционному поведению аккордеона — это зависит от класса `карты` ).Атрибут должен быть установлен в целевой складной области.
`переключатель`	логический	`правда`	Переключает складной элемент при вызове

Метод	Описание
`переключатель`	Переключает складной элемент на показанный или скрытый. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (т.е. до того, как произойдет событие `shown.bs.collapse` или `hidden.bs.collapse` ).
`показать`	Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (например, до того, как произойдет событие `shown.bs.collapse` ).
`скрыть`	Скрывает складной элемент. Возвращается к вызывающей стороне до того, как сворачиваемый элемент был фактически скрыт (например, до того, как произойдет событие `hidden. bs.collapse` ).
`утилизировать`	Уничтожает обрушение элемента. (Удаляет сохраненные данные в элементе DOM)
`getInstance`	Статический метод, позволяющий получить экземпляр сворачивания, связанный с элементом DOM.

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

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

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

Примеры

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

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

Доступность

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

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

Через JavaScript

Параметры

Методы

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

События

Компоненты

Содержание

Пример

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

Доступность

Применение

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

Через JavaScript

Опции

Методы

События

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

Collapse · Bootstrap на русском

Содержание

Пример

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

Доступность

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

С помощью данных атрибутов

Через JavaScript

Варианты

Методы

События

Bootstrap 4 Свернутое руководство — Hoow.ru

Bootstrap 4 Свернутое руководство

1. Введение в Collapse

2. Свернуть с атрибутом Href

3. Свернуть с переключением данных.

4. Свертывание нескольких тегов

5. Разрушение аккордеона

5.1. Аккордеон

5.2. Заголовок

6. Сворачиваемое тело содержимого

JS collapse, спойлери, згортання блоків – Tokar.

Приклад

Налаштування

Налаштування через data-* атрибути

Налаштування через javaScript

Автоматичне приховування останніх блоків (accordion)

Методи collapse в Bootstrap.js

Параметри bootstrap collapse

Приклад: просте приховування елементів

Приклад: згортання інших блоків всередині батьківського (ефект accordion)

БНИОС — Что такое Bootstrap

Bootstrap 4 Свернуть руководство »WebNots

Bootstrap 4 Свернуть руководство

1.

2. Свернуть с атрибутом Href

3. Свернуть с переключением данных

4. Свернуть несколько тегов

5. Разрушение аккордеона

Название карточки

Название карточки

5.1. Аккордеон

5.2. Товарная позиция

6. Тело складного содержимого

Свернуть · Bootstrap v5.0

Как это работает

Пример

Несколько целей

Доступность

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

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

Через JavaScript

Опции

Методы

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