Спойлер bootstrap 3: Спойлер на Bootstrap 3

Leave a Comment / Разное / By /

Содержание

Компоненты

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

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

Содержание

  • Содержание
  • Пример
  • Пример аккордеона
  • Доступность
  • Применение
    • Через атрибуты данных
    • Через JavaScript
    • Опции
    • Методы
      • .collapse(options)
      • .collapse('toggle')
      • .collapse('show')
      • .collapse('hide')
    • События

Пример

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

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

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

Link with href

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…
})

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Please enable JavaScript to view the comments powered by Disqus.

Поддержать проект

Bootstrap | WebReference

Практически любая веб-страница содержит множество похожих компонентов, которые встречаются и на других сайтах. Это меню, навигация, элементы форм, заголовки и колонки. Чтобы меньше писать кода и по максимуму задействовать уже готовые решения применяются специализированные библиотеки, их часто называют фреймворками. Одним из таких фреймворков для вёрстки является Bootstrap.

Адаптивным дизайном называется способ вёрстки, когда ширина макета веб-страницы подстраивается под ширину устройства. Самый простой вариант — это пропорциональное изменение масштаба, но на деле лучше менять и расположение элементов и их размеры. Так мы получим наиболее оптимальный вид для смартфонов, планшетов и мониторов.

Bootstrap включает несколько десятков иконок, которые можно применять в тексте, для кнопок, в формах, в навигации и в других местах. Иконки сделаны в виде символов шрифта, поэтому могут масштабироваться в больших пределах без ухудшения качества и занимают при этом небольшой объём. Для добавления желаемой иконки обычно используется пустой элемент <i>, внутри которого пишем класс иконки. Вот, например, как на кнопку добавить символ лупы, она обычно символизирует поиск.

Кнопки применяются не только как элементы форм, в кнопку вполне можно превратить и ссылку, придав ей прямоугольный вид. Она по прежнему останется ссылкой со всем доступным функционалом, но по своему оформлению будет напоминать ту же кнопку. Аналогично и обратное — кнопке допустимо придать вид ссылки.

Bootstrap характерен своей продуманной и гибкой системой модульных сеток, в основе которой лежит 12-колоночный макет.

Колонки одинаковой ширины

Иконки из набора Font Awesome прекрасно сочетаются с фреймворками вроде Bootstrap. Хотя этот фреймворк уже содержит необходимый набор иконок, его можно расширить за счёт сторонних комплектов.

Bootstrap 4 капитально переработал Bootstrap 3 и многое поменял в его функционировании. Множество изменений было внесено в компоненты, таких как таблицы, формы, сетки, выпадающие списки, панели навигации и многое другое.

Boostrap содержит множество готовых стилей для оформления элементов. Применять их достаточно просто, всего то надо добавить к элементу определённый в стилях класс. Это сокращает время на разработку проекта, поскольку не приходится задумываться о дизайне отдельных элементов. Стиль некоторых элементов, вроде заголовков <h2> также отличается от исходного, это надо учитывать.

По умолчанию размер шрифта основного текста установлен как 14px, а межстрочное расстояние (значение свойства line-height) — 1.428. Между абзацами текста (элемент <p>) введено дополнительное расстояние в 10 пикселей.

Для начала необходимо скачать Bootstrap с сайта разработчика по следующему адресу:

http://getbootstrap.com/getting-started/#download

Это полная версия, содержащая все необходимые скрипты и стили. Внутри находится три папки: css, fonts и js.

Структура файлов Bootstrap

Свернуть · Bootstrap v4.5

Просмотреть на GitHub

Переключите видимость контента в вашем проекте с помощью нескольких классов и наших подключаемых модулей JavaScript.

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

Подключаемый модуль JavaScript для сворачивания используется для отображения и скрытия контента. Кнопки или якоря используются в качестве триггеров, которые сопоставляются с определенными элементами, которые вы переключаете. Сворачивание элемента анимирует высоту от текущего значения до 0 . Учитывая, как CSS обрабатывает анимацию, вы не можете использовать padding в элементе .collapse . Вместо этого используйте класс как независимый элемент-оболочку.

Пример

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

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

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

Ссылка с href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, ремесленное пиво 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, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.