Обзор

Индивидуально или сборником

Плагины могут подключаться отдельно (используя отдельные файлы Bootstrap *.js), или все за один раз (используя bootstrap.js или минимизированы bootstrap.min.js).

Используя скомпилированный JavaScript

bootstrap.js и bootstrap.min.js оба содержат все плагины в одном файле. Подключать только один.

Зависимость плагина

Некоторые плагины и CSS и их компоненты имеют зависимость от других плагинов. Если вы включаете плагины отдельно, просмотрите их документацию, чтобы убедиться, что вы учли их зависимость. Также заметьте, что все плагины зависят от jQuery (это означает, что jQuery должен подключаться перед файлами плагинов). Просмотрите наш файл bower.json, чтобы узнать какая версия jQuery поддерживается.

Атрибуты данных

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

Тем не менее, в некоторых ситуациях может быть желанным отключения этой функции. Таким образом, мы также предоставляем возможность отключить API-атрибуты, через отвязке всех событий в пространстве имен (namespaced) документа, при помощи data api. Это выглядит примерно так:

$(document).off('.data-api')

Также вы можете направить выстрела на определенный плагин, просто включив имя плагина рядом с пространством имен data api, как в примере:

$(document).off('.alert.data-api')

Only one plugin per element via data attributes

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

Программный API

Мы также считаем, что вы должны иметь возможность использовать все плагины Bootstrap чисто на JavaScript API. Все публичные API являются одиночными, но их методы могут последовательно связываться и возвращать готовый набор для применения.

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

Каждый плагин также публикует свой собственный конструктор в свойства Constructor: $.fn.popover.Constructor. Если вы хотите получить конкретный экземпляр плагина, загружайте его непосредственно из элемента: $('[rel="popover"]').data('popover').

Default settings

You can change the default settings for a plugin by modifying the plugin's Constructor.DEFAULTS object:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

Без конфликта

Иногда необходимо использовать плагины Bootstrap с другими UI фрейморками. В таком случае иногда могут пересекаться их пространства имен. Если такое случается, вы можете вызвать .noConflict в том плагине, который должен вернуть прежнее значение.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

События

Bootstrap предоставляет пользовательские события для большинства уникальных действий плагина. Как правило, они идут в форме инфинитива или причастия - причем инфинитив (например, show) срабатывает в начале события, а форма причастия (например, shown) срабатывает по завершению действия.

По состоянию на 3.0.0, все события Bootstrap с именованными пространствами.

Все события в інфінітиві предоставляют preventDefault функциональность. Это дает возможность останавливать выполнение действий перед стартом.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

No special fallbacks when JavaScript is disabled

Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

Библиотеки третьих сторон

Bootstrap неофициально поддерживает библиотеки JavaScript третьих сторон, такие как Prototype или jQuery UI. Несмотря на то, что мы предоставляем .noConflict и события с именованными пространствами, все равно могут быть проблемы совместимости, которые вам придется исправлять собственноручно.

Переходы transition.js

О переходах

Для простых эффектов перехода, включите transition.js рядом с другими файлами JS. Но если вы используете общую сборку bootstrap.js (или ее минимизированный вариант), этот файл нет необходимости подключать—код уже включен.

Что внутри

Transition.js является базовым помощником для событий transitionEnd, и для эмулятора переходов CSS. Он используется другими плагинами для проверки поддержки переходов CSS и для восстановления висячих переходов.

Модальные окна modal.js

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

Перекрытия модали не поддерживается

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

Модальные размещения разметки

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

Оговорки в отношении мобильных устройств

Есть определенные предостережения относительно использования модальных окон на мобильных устройствах. Просмотрите наши документы относительно поддержки браузеров для уточнений.

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. Чтобы добиться такого же эффекта, используя пользовательские JavaScript:

  $('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus()
  })
  

Примеры

Пример статического окна

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

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Название модали</h4>
      </div>
      <div class="modal-body">
        <p>Один файл body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Живое демо

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

<!-- Триггер кнопка модали-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Запуск демо
      </button>

<!-- Модаль -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Название модали</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

Сделайте модали доступными

Убедитесь, что добавили role="dialog" - .modal, атрибут aria-labelledby="myModalLabel" для ссылки на название модали, и aria-hidden="true" для оповещения assistive technologies (вспомогательных технологий), чтобы пропускали DOM-элементы модальных окон.

Кроме этого, вы можете предоставить описание диалоговой модали при помощи aria-describedby, .modal.

Вложения видео YouTube

Вложение YouTube видео в модали требует дополнительных настроек не в Bootstrap, автоматически остановки воспроизведение и другое. See this helpful Stack Overflow post для подробной информации.

Дополнительные размеры

Модали имеют два дополнительных размера, доступные через модификаторы классов, которые будут размещены на .modal-dialog.

<!-- Большая модаль -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Большая модаль</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Малая модаль -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Малая модаль</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Удаление анимации

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...
</div>

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget,

...more buttons...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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

Модальный плагин переключает ваш скрытый контент по запросу, через атрибуты данных или JavaScript. Он также добавляет .modal-open к <body> для изменения поведения прокрутки по умолчанию и генерирует .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

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

Активируйте модальные окна без написания JavaScript. Установите data-toggle="modal" в контроллере элемента, такого как кнопка, рядом с data-target="#foo" или href="#foo", чтобы нацелить определенную модаль для переключения.

<button type="button" data-toggle="modal" data-target="#myModal">Запустить модаль</button>

Через JavaScript

Вызывайте модаль с помощью id myModal с лаконичной записью на JavaScript:

$('#myModal').modal(options)

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. В случае передачи через атрибуты данных, добавьте приставку с названием параметра data, как в примере: data-backdrop="".

Название Тип По умолчанию Описание
фон логический или строковый 'static' правда Включает элемент modal-backdrop. Можно также указать static для обстановке, который не закрывается при нажатии на модаль.
клавиатура логический правда Закрытие модали при клике на клавишу escape.
Показать логический правда Показывает модаль при инициализации.
дистанционный путь ложь

This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

Если предоставлен удаленный URL, содержимое будет загружаться через jQuery's load и вставлятись в корневой элемент модали .modal-content. Если вы используете data api, вы можете еще использовать атрибут href для определения удаленного ресурса. Пример такого варианта показан ниже:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Методы

.modal(параметры)

Активизирует содержимое как модальный. Принимает необязательный параметр с типом данных объект.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

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

$('#myModal').modal('toggle')

.modal('show')

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

$('#myModal').modal('show')

.modal('hide')

Ручное сокрытие модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий hidden.bs.modal).

$('#myModal').modal('hide')

События

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

Тип События Описание
show.bs.modal Это событие срабатывает во время вызова метода show. Если вызов происходит за клик, то элемент, на котором был этот клик, доступный как свойство события relatedTarget.
shown.bs.modal Эта подействует срабатывает, когда модаль будет отражена для пользователя (при этом ожидается завершение навигации CSS). Если вызов происходит за клик, то элемент, на котором был этот клик, доступный как свойство события relatedTarget.
hide.bs.modal Это событие срабатывает во время вызова метода hide.
hidden.bs.modal Это событие срабатывает, когда модаль завершит скрытие от пользователя (при этом ожидается завершение навигации CSS).
loaded.bs.modal Это событие генерируется, когда модаль загружена контент использует remote вариант.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Выпадающее меню dropdown.js

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

Внутри навигационной панели

Внутри навигационных кнопок

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.

On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.

Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

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

Добавьте data-toggle="dropdown" ссылок или кнопок для возможности переключения выпадающего меню.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Чтобы оставить URL нетронутой, используйте атрибут data-target вместо href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Через JavaScript

Вызывайте выпадающее меню через JavaScript:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown" still required

Независимо от того, вызываете вы выпадающий эффект через JavaScript или вместо этого использовуете, data-api, data-toggle="dropdown" всегда должен присутствовать на пусковом элементе в выпадающем окне.

Отсутствуют

$().dropdown('toggle')

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

Все выпадающие события сгорают при .dropdown-menu родительского элемента.

All dropdown events have a relatedTarget property, whose value is the toggling anchor element.

Тип События Описание
show.bs.dropdown This event fires immediately when the show instance method is called.
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdown This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown Это событие срабатывает, когда выпадающее меню завершит скрытие пунктов меню от пользователя (при этом ожидается завершение навигации CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Отслеживание прокрукти scrollspy.js

Пример с навигационной панелью

Плагин ScrollSpy (переводится как Отслеживание Прокрутки) предназначен для автоматического обновления навигационного нахождения, которое базируется на позиции прокрутки страницы. В нижнем примере прокрутите область под навигационной панелью и проспостерігайте за переходом активного класса между ее пунктами. Подпункты в ниспадающем меню также будут подсвечены при прокрутке.

@fat

Здесь произвольный текст. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Здесь произвольный текст. Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

один

Здесь произвольный текст. Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in sustainable delectus consectetur fanny pack iphone.

два

Здесь произвольный текст. In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

три

Здесь произвольный текст. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

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

Requires Bootstrap nav

Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

Необходимо соответствие между ID и его линку

Навигационная панель должна иметь соответствие между ID и его ссылке. Например, <a href="#home">home</a> должен иметь соответствие в DOM с <div id="home"></div>.

Non-:visible target elements ignored

Целевые элементы, которые не являются :visible according to jQuery будут проигнорированы и соответствующие им навигационные элементы никогда не будет выделен.

Requires relative positioning

Независимо от того, метод реализации, scrollspy не требует использования position: relative; на элементе вы шпионите. В большинстве случаев это является <body>.

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

Чтобы легко добавить поведение Отслеживающей Прокрутки (ScrollSpy) к вашей верхней навигационной панели, добавьте data-spy="scroll" элемента, по которому вы хотите следить (наиболее типично - это будет <body>). Затем добавьте атрибут data-target с ID или классом родительского элемента, любого компонента Bootstrap с классом .nav.

body {
  position: relative;
}
<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Через JavaScript

После добавления position: relative; в вашу CSS, вызвать scrollspy через JavaScript:

$('body').scrollspy({ target: '.navbar-example' })

Методы

.scrollspy('refresh')

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Параметры

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

Название Тип По умолчанию Описание
offset числовой 10 Пиксели для смещения от верха, при исчислении позиции прокрутки.

События

Тип События Описание
activate.bs.scrollspy Это событие срабатывает каждый раз, когда новый элемент активируется при прокрутке.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Переход по вкладкам tab.js

Пример вкладок

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

Здесь произвольный текст. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate qui nisi.

Здесь произвольный текст. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Расширение навигационных вкладок

Этот плагин расширяет компонент навигационных вкладок, добавляя область переходов.

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

Включение области навигации, вкладок через JavaScript (каждая вкладка требует индивидуальной активации):

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Вы можете индивидуально активировать вкладку несколько способов:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

Разметка

Вы можете активировать вкладку или навигационную кнопку и без написания кода JavaScript, просто указав в элементе data-toggle="tab" или data-toggle="pill". Добавление классов nav и nav-tabs вкладка ul будет внедряться стиль вкладок Bootstrap, при добавлении классов nav и nav-pills будет внедряться стиль навигационных кнопок.

<div role="tabpanel">

  <!-- Навигационные вкладки -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Вкладки панелей -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Эффект угасания

Чтобы создать эффект плавного отображения вкладок, добавьте .fade каждый .tab-pane. Первая панель вкладки должна также иметь .in для правильного плавного отображения содержимого.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Методы

$().tab

Включите элемент вкладки и содержимое контейнера. Вкладка должна иметь или data-targetили href адресный узел контейнера в DOM.

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">...</div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

События

When showing a new tab, the events fire in the following order:

  1. hide.bs.tab (on the current active tab)
  2. show.bs.tab (on the to-be-shown tab)
  3. hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
  4. shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

Тип События Описание
show.bs.tab Это событие срабатывает на отображение вкладки, но перед тем, как новая вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно - на активную вкладку и предыдущую активную вкладку (при наличии).
shown.bs.tab Это событие срабатывает на отображение вкладки, после того, как вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно - на активную вкладку и предыдущую активную вкладку (при наличии).
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Подсказки tooltip.js

Вдохновленные замечательным плагином jQuery.tipsy, написанным Jason Frame; Подсказки является обновленной версией, которая не использует изображение, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.

Tooltips with zero-length titles are never displayed.

Примеры

Наведите курсор мыши на ссылки текста внизу, чтобы увидеть подсказки:

Здесь приведены произвольный текст для примера. Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Static tooltip

Four options are available: top, right, bottom, and left aligned.

Четыре направления

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Подсказка слева</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Подсказка вверху</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Подсказка внизу</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Подсказка справа</button>

Неавтоматическая функциональность

Для улучшения производительности, дата-интерфейсы Подсказок и Информеров (Tooltip and Popover) неавтоматические, то есть вы должны инициализировать их собственноручно.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Подсказки в группах кнопок и группах форм ввода требуют специальных настроек

При использовании подсказок внутри элементов .btn-group или .input-group, вы должны определить параметр container: 'body' (документация ниже), чтобы избежать нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов, при вызове подсказок или информеров).

Не пытайтесь показать подсказки о скрытых элементов

Вызов $(...).tooltip('show') когда цель элемент display: none; вызовет подсказка быть неправильно установлен.

Подсказки на заблокированных элементах нуждаются обертывание

Чтобы добавить подсказку элемента disabled или .disabled, вставьте элемент внутрь <div> и примените подсказку именно к этому <div>.

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

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

Вызов подсказок через JavaScript:

$('#example').tooltip(options)

Разметка

Необходимые для пометки подсказок только атрибут data и title HTML-элементе, на котором вы хотите иметь подсказку. Сгенерированный макет подсказок, довольно проста, хотя и требует позиционирования (по умолчанию установлено top через плагин).

Многолинейные ссылки

Иногда вы хотите добавить всплывающую подсказку к гиперссылке, который заключается несколько строк. По умолчанию плагина подсказка появляется в центре по горизонтали и вертикали. Добавьте white-space: nowrap; для якорей, чтобы избежать этого.

<!-- Написать HTML -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Создание разметки с помощью плагина -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Параметры

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

Название Тип Предупреждение Описание
анимация логический истина Применяет CSS для плавного перехода к подсказки
контейнер строковый | ложь ложь

Добавляет popover на конкретный элемент. Пример: container: 'body'. Эта опция особенно полезна тем, что позволяет позиционировать tooltip в потоке документа возле пускового элемента - который будет препятствовать popover от плавающей пускового элемента во время изменении размера окна.

delay числовой | объект 0

Задержка показа и отображения информеров (ms) - не применяется для ручного типа вызова

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

Такая Структура объекта: delay: { "show": 500, "hide": 100 }

html логический ложь Вставляет HTML в подсказку. При значении false, будет использоваться метод jQuery text для вставки содержимого в DOM. Используйте текст, если побоютесь XSS атаки.
placement строковый | функция 'top'

How to position the tooltip - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.

When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance.

selector строковый ложь Если селектор предоставлено, объект подсказки будет делегировано для указанной цели. На практике это используется для добавления информеров при включении динамического содержимого HTML. Просмотрите это и пример.
template строковый '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

База HTML для использования при создании подсказку.

Всплывающие подсказки title будут введены в .tooltip-inner.

.tooltip-arrow станет стрелка всплывающей подсказке автора.

Внешний оболочкой элемент должен иметь .tooltip class.

title строковый | функция ''

Default title value if title attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the tooltip is attached to.

trigger строковый 'hover focus' Как вызвать подсказку - click | hover | focus | manual. Вы можете передавать несколько параметров, разделенных пробелами.
viewport строковый | объект { selector: 'body', padding: 0 }

Сохраняет подсказки в рамках этого элемента. Пример: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

Атрибуты данных для индивидуальных подсказок

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

Методы

$().tooltip(параметры)

Закрепите обработчик подсказки по набору элементов.

.tooltip('show')

Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.

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

.tooltip('hide')

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

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

.tooltip('toggle')

Переключает подсказку элемента.

$('#element').tooltip('toggle')

.tooltip('destroy')

Скрывает и удаляет подсказку элемента.

$('#element').tooltip('destroy')

События

Тип События Описание
show.bs.tooltip Это событие срабатывает во время вызова метода show.
shown.bs.tooltip Это событие срабатывает, когда подсказка будет отображаться для пользователя (при этом ожидается завершение навигации CSS).
hide.bs.tooltip Это событие срабатывает во время вызова метода hide.
hidden.bs.tooltip Это событие срабатывает, когда сокрытие элемента для пользователя завершится (при этом ожидается завершение навигации CSS).
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Информеры popover.js

Добавьте небольшие накладки содержания, вроде тех, которые показываются в iPad, в любых элементов, для размещения дополнительной информации.

Popovers whose both title and content are zero-length are never displayed.

Зависимость от плагинов

Информеры требуют подключения плагина подсказок в вашей версии Bootstrap.

Неавтоматическая функциональность

Для улучшения производительности, дата-интерфейсы Подсказок и Информеров (Tooltip and Popover) неавтоматические, то есть вы должны инициализировать их собственноручно.

One way to initialize all popovers on a page would be to select them by their data-toggle attribute:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Информеры в группах кнопок и группах ввода требуют специальных настроек

При использовании информеров внутри элементов .btn-group или .input-group, вы должны указывать параметры container: 'body' (документация ниже), чтобы избежать нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов, при вызове информеров).

Не пытайтесь показать Popovers на скрытых элементов

Invoking $(...).popover('show') when the target element is display: none; will cause the popover to be incorrectly positioned.

Информеры на заблокированных элементах нуждаются обертывание

Чтобы добавить подсказку элемента disabled или .disabled, вставьте элемент внутрь <div> и примените подсказку именно к этому <div>.

Многолинейные ссылки

Иногда вы хотите добавить информер к гиперссылке, в который заключается несколько строк. По умолчанию плагина подсказка появляется в центре по горизонтали и вертикали. Добавьте white-space: nowrap; для якорей, чтобы избежать этого.

Примеры

Статические информеры

Доступны четыре варианта информеров: вверху, справа, внизу, и слева.

Информер вверху

Здесь произвольный текст. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Информер справа

Здесь произвольный текст. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Информер внизу

Здесь произвольный текст. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Информер слева

Здесь произвольный текст. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Живое демо

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Кликни для переключения информера</button>

Четыре направления

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
 Информер слева
 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
 Информер вверху
 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
 Информер внизу
 </button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
 Информер справа
 </button>

Прекращать по следующему клику

Используйте focus триггера чтобы прекратить popovers следующим кликом, что делает пользователь.

Specific markup required for dismiss-on-next-click

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.

<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Неотсранимый popover</a>

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

Включите информеры через JavaScript:

$('#example').popover(options)

Параметры

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

Название Тип По умолчанию Описание
анимация логический правда Применяет CSS для плавного перехода к информера
контейнер строковый | ложь ложь

Добавляет popover на конкретный элемент. Пример: container: 'body'. Эта опция особенно полезна тем, что позволяет позиционировать popover в потоке документа возле пускового элемента - который будет препятствовать popover от плавающей пускового элемента во время изменении размера окна.

содержание строковый | функция ''

Содержимое по умолчанию значение, если data-content атрибут отсутствует

Если функция задана, она будет называться с this ссылки на элемент, к которому крепится всплывающее окно.

задержка числовой | объект 0

Задержка показа и отображения информеров (ms) - не применяется для ручного типа вызова

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

Такая Структура объекта: delay: { "show": 500, "hide": 100 }

html логический ложь Вставляет в HTML информер. При значении false, будет использоваться метод jQuery text для вставки содержимого в DOM. Используйте текст, если побоютесь XSS атаки.
размещение строковый | функция 'right'

How to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.

selector строковый ложь если селектор предоставлено, объект подсказки будет делегировано для указанной цели. На практике это используется для добавления информеров при включении динамического содержимого HTML. Просмотрите это и пример.
template строковый '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

База HTML использует при создании всплывающее окно.

The popover's title будет введен в .popover-title.

The popover's content будет выведена на .popover-content.

.arrow станет стрелкой в всплывающем окне.

Самый внешний элемент должен иметь .popover класс.

title строковый | функция ''

Default title value if title attribute isn't present.

Если функция задана, она будет называться с this ссылки на элемент, к которому крепится всплывающее окно.

trigger строковый 'click' Как вызвать подсказку - click | hover | focus | manual. Вы можете передавать несколько параметров, разделенных пробелами.
viewport строковый | объект { selector: 'body', padding: 0 }

Сохраняет всплывающее окно в рамках этого элемента. Пример: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

Атрибуты данных для индивидуальных информеров

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

Методы

$().popover(параметры)

Инициализация информеров для набора элементов.

.popover('show')

Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.

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

.popover('hide')

Скрытие информера элемента.

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

.popover('toggle')

Переключение информера элемента.

$('#element').popover('toggle')

.popover('destroy')

Скрытие и удаление информера элемента.

$('#element').popover('destroy')

События

Тип События Описание
show.bs.popover Это событие срабатывает во время вызова метода show.
shown.bs.popover Это событие срабатывает, когда информер будет отображаться для пользователя (при этом ожидается завершение навигации CSS).
hide.bs.popover Это событие срабатывает во время вызова метода hide.
hidden.bs.popover Это событие срабатывает, когда будет скрыто информер для пользователя (при этом ожидается завершение навигации CSS).
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Уведомления alert.js

Пример уведомлений

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

When using a .close button, it must be the first child of the .alert-dismissible and no text content may come before it in the markup.

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

Просто добавьте data-dismiss="alert", чтобы ваша кнопка закрытия автоматически получала функциональность для закрытия. Закрытие предупреждение, удаление из DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.

Методы

$().alert()

Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api's auto-initialization.)

$().alert('close')

Closes an alert by removing it from the DOM. If the .fade and .in classes are present on the element, the alert will fade out before it is removed.

События

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

Тип События Описание
close.bs.alert Это событие срабатывает во время вызова метода close.
closed.bs.alert Это событие срабатывает, когда уведомление будет закрыто (при этом ожидается завершение навигации CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Кнопки button.js

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

Кросс-браузерная совместимость

Firefox persists form control states (disabledness and checkedness) across page loads. A workaround for this is to use autocomplete="off". See Mozilla bug #654072.

Состояние загрузки

Добавьте data-loading-text="Загружается...", чтобы использовать состояние загрузки на кнопке.

Use whichever state you like!

For the sake of this demonstration, we are using data-loading-text and $().button('loading'), but that's not the only state you can use. See more on this below in the $().button(string) documentation.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
        Состояние загрузки
      </button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Единичное переключение

Добавьте data-toggle="button", чтобы активировать переключение на единичном кнопке.

Pre-toggled buttons need .active and aria-pressed="true"

For pre-toggled buttons, you must add the .active class and the aria-pressed="true" attribute to the button yourself.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Единичное переключение</button>

Checkbox / Radio

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

Заранее выбранные должны быть .active

Для предварительно выбранных опций, необходимо добавить .active класс для инпутов label.

Visual checked state only updated on click

If the checked state of a checkbox button is updated without firing a click event on the button (e.g. via <input type="reset"> or via setting the checked property of the input), you will need to toggle the .active class on the input's label yourself.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> Checkbox 2
      </label>
  <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> Checkbox 3
      </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
      </label>
  <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
      </label>
  <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
      </label>
</div>

Методы

$().button('toggle')

Переключите состояние кнопки. Предоставьте кнопки вид, как будто ее активировано.

$().button('reset')

Сброс состояния кнопки - изменение текста на первоначальный текст.

$().button(string)

Изменение текста на любой указанный текст состояния.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Сворачивание collapse.js

Flexible plugin that utilizes a handful of classes for easy toggle behavior.

Зависимость от плагинов

Сворачивание нуждается подключенного в вашей версии Bootstrap плагина transitions.

Example

Click the buttons below to show and hide another element via class changes:

  • .collapse сокрытие содержимого
  • .collapsing is applied during transitions
  • .collapse.in отображение содержимого

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

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.
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Link with href
      </a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
      </button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Accordion example

Extend the default collapse behavior to create an accordion with the panel component.

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 class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        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 class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </a>
          </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        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 class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </a>
          </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        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>

It's also possible to swap out .panel-bodys with .list-groups.

  • Bootply
  • One itmus ac facilin
  • Second eros

Make expand/collapse controls accessible

Be sure to add aria-expanded to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of aria-expanded="false". If you've set the collapsible element to be open by default using the in class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.

Additionally, if your control element is targetting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you may add an additional aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

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

Плагин свертывания использует несколько классов для обеспечения плавного подъема:

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

Эти классы можно найти в component-animations.less.

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

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

Чтобы до группы элементов, которые могут сворачиваться, добавить управления, похоже на аккордеон, добавьте атрибут данных data-parent="#selector". Посмотрите демонстрацию (выше), чтобы увидеть это в действии.

Через JavaScript

Ручное включение с:

$('.collapse').collapse()

Параметры

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

Название Тип По умолчанию Описание
parent selector false If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class)
toggle логический true При вызове переключает складной элемент

Методы

.collapse(параметры)

Активирует свой ​​контент как складной элемента. Принимает необязательные параметры 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…
})

Карусель carousel.js

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Показатели -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Обертка для слайдов -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Элементы управления -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Дополнительная подпись

Добавлять подпись в ваших слайдов становится легким делом благодаря элементу .carousel-caption внутри любых .item. Это место почти для любого дополнительного HTML, причем содержимое будет автоматически выровнен и форматовано.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Несколько каруселей

Карусели требуют использования id на самой внешнем контейнере, .carousel, для ее управления, и функционости. При добавлении нескольких каруселей, или при изменении карусели id, не забудьте обновить соответствующие элементы управления.

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

Используйте атрибуты данных, чтобы легко контролировать позиционирование карусели. data-slide принимает ключевые слова prev или next, которые меняют позицию слайда относительно его текущей позиции. Также вы можете использовать data-slide-to для передачи исходного индекса слайда для карусели data-slide-to="2", который смещает позицию слайда до определенного индекса начиная от 0.

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

Через JavaScript

Вызывайте карусель вручную с:

$('.carousel').carousel()

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

Название Тип По умолчанию Описание
interval числовой 5000 Количество миллисекунд для задержки между автоматическим зацикливанием элементов. Если в качестве параметра передается false, карусель не будет автоматически зацикливаться.
pause строковый "hover" Пауза в прокрутке карусели при наведении курсора (mouseenter) и продолжения прокрутки, когда курсор мыши забирают (mouseleave) с карусели.
wrap логический true Должна карусель зациклено прокручиваться, должна жестко остановиться.
keyboard логический true Whether the carousel should react to keyboard events.

.carousel(параметры)

Инициализирует карусель с необязательным параметром типа объект, и начинает цикл прокруток элементов.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Прокрутки элементов карусели слева на право.

.carousel('pause')

Прекращения прокрутки элементов карусели.

.carousel(число)

Прокрутки карусели до определенного кадра (начиная с 0, подобно массиву).

.carousel('prev')

Перейти к предыдущему элементу.

.carousel('next')

Перейти к следующему элементу.

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

Оба события имеют следующие дополнительные свойства:

  • direction: Направление, в котором движится карусель (или "left" или "right").
  • relatedTarget: Элемент DOM, что в настоящее время встал на место в качестве активного элемента.
Тип События Описание
slide.bs.carousel Это событие срабатывает во время вызова метода slide.
slid.bs.carousel Это событие срабатывает, когда карусель завершит переход к слайду.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Позиционирование Affix affix.js

Пример

Субнавигация справа является живым примером работы плагина affix.


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

Используйте плагин affix с помощью атрибутов данных, или напишите свой собственный JavaScript. В обоих случаях вы должны предоставить CSS для позиционирования содержимого.

Позиционирование через CSS

Плагин affix переключается между тремя классами, каждый из которых соответствует определенному состоянию: .affix, .affix-topи .affix-bottom. Вы должны самостоятельно создать стили для этих классов (независимо от этого плагина), для обработки текущей позиции.

Вот как работает плагин affix:

  1. Сначала, плагин добавляет .affix-top для обозначения элемента, находящегося выше. На данный момент позиционирования через CSS не требуется.
  2. Прокрутки мимо элемент, который вы хотите закрепить, должно актуализировать закрепления. Это тот момент, когда .affix заменяет .affix-top и устанавливает position: fixed; (обеспеченное кодом Bootstrap CSS).
  3. Если нижнее смещение определено, прокрутки вниз должен заменить .affix, .affix-bottom. Поскольку смещение является необязательным, вам необходимо установить соответствующие CSS. В данном случае, добавьте position: absolute;, когда это необходимо. Плагин использует атрибуты данных или параметры JavaScript для определения позиции элемента.

Следуйте вышеуказанным шагам, чтобы в дальнейшем установить CSS для любого использования опций.

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

Можно легко предоставить поведение affix любому элементу, просто добавив data-spy="affix" к элементу, по которому вы хотите следить. Используйте смещение для определения, когда следует отключать плагин для заданного элемента.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Через JavaScript

Вызов плагина affix через JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием параметра data, как в примере: data offset-top="200".

Название Тип По умолчанию Описание
offset числовой | функция | объект 10 Пиксели для сдвига экрана, при исчислении позиции прокрутки. Если предоставлено единичное число, сдвиг будет применяться и вверху, и внизу. Чтобы придать уникальности сдвига снизу и сверху, просто предоставьте такой объект offset: { top: 10 } или такой offset: { top: 10, bottom: 5 }. Используйте функцию, когда вам нужно динамически вычислять сдвиг.
target selector | node | jQuery element the window object Задает элемент аффиксом.

События

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

Тип События Описание
affix.bs.affix Это событие вызывается непосредственно перед приклепленным элементом.
affixed.bs.affix Это событие возникает после того, как элемент был приклеплен.
affix-top.bs.affix Это событие вызывается непосредственно перед элементом, прикрепленному сверху.
affixed-top.bs.affix Это событие возникает после того, как элемент был приклеплен свверху.
affix-bottom.bs.affix Это событие вызывается непосредственно перед элементом, прикрепленному внизу.
affixed-bottom.bs.affix Это событие возникает после того, как элемент был приклеплен снизу.