Обзор

Отдельно или в сборке

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

Использование скомпилированого JavaScript

bootstrap.js и bootstrap.min.js содержат все плагины в одном файле. Используйте только один файл в проекте.

Атрибуты данных компонента

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

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

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

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

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

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

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

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

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

Программный 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

Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel="popover"%5D').data('popover').

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

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

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

События

Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is triggered on the completion of an action.

В версии 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 does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own.

Переходы transition.js

О переходах

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

В чем смысл

Transition.js is a basic helper for transitionEnd events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.

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

Примеры

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

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

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

Размещение разметки модальных окон.

Старайтесь всегда помещать HTML-код модального окна в верхней части документа, чтобы другие компоненты не влияли на вид и/или работу модального окна.

Сложности при работе с мобильными устройствами

There are some caveats regarding using modals on mobile devices. See our browser support docs for details.

Статический пример

Отображается модальное окно с шапкой, основным блоком и набором действий в футере.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Живая демонстрация

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

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Доступность модальных окон

Обязательно добавляйте role="dialog" к .modal, атрибут aria-labelledby="myModalLabel" для заголовка модального окна и aria-hidden="true", чтобы специальные возможности пропускали элементы DOM модального окна.

Кроме того, вы можете добавлять описание своих модальных диалоговых окон с помощью aria-describedby на .modal.

Embedding YouTube videos

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.

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

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

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</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>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</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>

Remove animation

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>

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

Плагин модальных окон включает скрытое содержимое по требованию через атрибуты данных или JavaScript. Он также добавляет .modal-open к <body>, чтобы изменить прокручивание по умолчанию и создает .modal-backdrop, чтобы можно было закрыть отображаемые модальные окна, нажав на пространство вокруг него.

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

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Активируйте модальное окно идентификатором myModal с помощью единственной строки JavaScript:

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

Дополнительно

Дополнительные характеристики можно применять с помощью атрибутов данных или JavaScript. При использовании атрибутов данных добавьте имя дополнительной характеристики перед data-, как в data-backdrop="".

Имя тип по умолчанию описание
фон логическое или строка 'static' истина добавляет элемент фона модального окна. Кроме того, вы можете указать static, чтобы получить фон, который не закрывает модальное окно по щелчку.
клавиатура логическое истина Закрывает модальное окно при нажатии на клавишу Escape
показ логическое истина Отображает модальное окно при нажатии.
удаленный путь ложь

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

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

Методы

.modal(options)

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

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

.modal('toggle')

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

$('#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 Данное событие запускается, когда модальное окно загружает содержимое удаленным способом.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

Выпадающие меню можно добавить практически к любому элементу, включая панели навигации, вкладки и pill-элементы, с помощью этого простого плагина.

В панели навигации

В пределах pill-элементов

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">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown <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 или API данных, data-toggle="dropdown" всегда должен присутствовать в элементе, который запускает выпадающее меню.

Дополнительно

Отсутствует

Методы

$().dropdown('toggle')

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

События

All dropdown events are fired at the .dropdown-menu's parent element.

Тип события Описание
show.bs.dropdown Данное событие запускается сразу же после вызова метода отображения. Элемент привязки выключателя становится свойством события relatedTarget.
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.
hide.bs.dropdown Данное событие запускается сразу после вызова метода сворачивания. Элемент привязки выключателя становится свойством события relatedTarget.
hidden.bs.dropdown Данное событие запускается, когда выпадающее меню закрывается (сначала должны завершиться переходы CSS). Элемент привязки выключателя становится свойством события relatedTarget.
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy 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.

one

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.

two

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.

three

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 relative positioning

No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>.

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

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

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

After adding position: relative; in your CSS, call the scrollspy via JavaScript:

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

Требуются разрешимые цели ID

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

Non-:visible target elements ignored

Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

Методы

.scrollspy('refresh')

Если вы используете ScrollSpy при добавлении или удалении элементов из DOM, вам нужно будет вызвать метод обновления, например:

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

Дополнительно

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

Имя тип по умолчанию описание
смещение число 10 Длина отступа сверху в пикселях при расчете позиции прокрутки.

События

Тип события Описание
activate.bs.scrollspy Данное событие запускается каждый раз при активации нового элемента 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 nisi qui.

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.

Расширение навигации по вкладкам

This plugin extends the tabbed navigation component to add tabbable areas.

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

Создавайте вкладки через 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)

Разметка

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

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

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Эффект выцветания

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

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

Методы

$().tab

Активация элемента вкладки и контейнера содержимого. Вкладки должны содержать либо data-target, либо href, указывающие на узел контейнера в DOM.

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

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

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

События

Тип события Описание
show.bs.tab Данное событие запускается при отображении вкладки, но до отображения новой вкладки. Используйте event.target и event.relatedTarget для указания активной вкладки и предыдущей активной вкладки (по возможности) соответственно.
shown.bs.tab Данное событие запускается при отображении вкладки после закрытия вкладки. Используйте event.target и event.relatedTarget для указания активной вкладки и предыдущей активной вкладки (по возможности) соответственно.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

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

Создано на основе замечательного плагина JQuery.tipsy, написанного Джейсоном Фреймом. Подсказки — это обновленная версия, которая не зависит от изображений, использует 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.

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

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Дополнительные функции

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

Требуется специальная настройка подсказок в группах кнопок и ввода

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

Don't try to show tooltips on hidden elements

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

Для размещения подсказок на отключенных элементах требуются внешние элементы

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

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

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

Запускайте подсказки через JavaScript:

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

Разметка

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

Многострочные ссылки

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

 1 <!-- HTML to write -->
 2 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
 3 
 4 <!-- Generated markup by the plugin -->
 5 <div class="tooltip top" role="tooltip">
 6   <div class="tooltip-arrow"></div>
 7   <div class="tooltip-inner">
 8     Some tooltip text!
 9   </div>
10 </div>

Дополнительно

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

Имя Тип По умолчанию Описание
анимация логическое истина Apply a CSS fade transition to the tooltip
контейнер строка | ложь ложь

Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.

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

Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

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

Object structure is: delay: { "show": 500, "hide": 100 }

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

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.

селектор строка ложь If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example.
template строка '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML to use when creating the tooltip.

The tooltip's title will be injected into the .tooltip-inner.

.tooltip-arrow will become the tooltip's arrow.

The outermost wrapper element should have the .tooltip class.

заголовок строка | функция ''

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.

триггер строка «при наведении курсора» How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
viewport string | object { selector: 'body', padding: 0 }

Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

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

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

Методы

$().tooltip(options)

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

.tooltip('show')

Отображение подсказки для элемента.

$('#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.

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

Popovers require the tooltip plugin to be included in your version of Bootstrap.

Дополнительные функции

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

Требуется специальная настройка уведомлений в группах кнопок и группах ввода

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

Don't try to show popovers on hidden elements

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?">Click to toggle popover</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.">
  Popover on left
</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.">
  Popover on top
</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.">
  Popover on bottom
</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.">
  Popover on right
</button>

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

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" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

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

Включите уведомления через JavaScript:

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

Дополнительно

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

Имя Тип По умолчанию Описание
анимация логическое истина Apply a CSS fade transition to the popover
контейнер строка | ложь ложь

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

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

Default content value if data-content attribute isn't present.

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

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

Delay showing and hiding the popover (ms) - does not apply to manual trigger type

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

Object structure is: delay: { "show": 500, "hide": 100 }

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

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.

селектор строка ложь If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template строка '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-title.

The popover's content will be injected into the .popover-content.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.

заголовок строка | функция ''

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 popover is attached to.

триггер строка «Щелчок» How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
viewport string | object { selector: 'body', padding: 0 }

Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

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

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

Методы

$().popover(options)

запуск уведомлений для коллекции элементов.

.popover('show')

Отображение уведомлений для элементов.

$('#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

Примеры оповещений

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

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

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

$(".alert").alert()

Разметка

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

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

Методы

$().alert()

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

.alert('close')

Закрывает оповещение

$(".alert").alert('close')

События

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

Тип события Описание
close.bs.alert Данное событие запускается сразу после вызова метода close.
closed.bs.alert Данное событие запускается при закрытии оповещения (сначала должны завершиться переходы CSS).
$('#my-alert').on('closed.bs.alert', function () {
  // do something…
})

Кнопки button.js

Примеры использования

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

Переменные

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

<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Одинарный переключатель

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

<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>

Флажок

Добавьте data-toggle="buttons" к группе флажков, чтобы работать с группой кнопок, как с флажками.

Pre-checked options need .active

For pre-checked options, you must add the .active class to the input's label yourself.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Радиокнопка

Добавьте data-toggle="buttons" к группе радиокнопок, чтобы работать с группой кнопок, как с радиокнопками.

Preselected options need .active

For preselected options, you must add the .active class to the input's label yourself.

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

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

Включайте кнопки через JavaScript:

$('.btn').button()

Разметка

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

Дополнительно

Отсутствует

Методы

$().button('toggle')

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

Автоматическое переключение

Вы можете выбрать автоматическое переключение кнопки с помощью атрибута data-toggle.

<button type="button" class="btn btn-primary" data-toggle="button">...</button>

$().button('loading')

Устанавливает состояние кнопки на загрузку: отключает кнопку и заменяет текст на текст загрузки. Текст загрузки должен быть определен на кнопке с помощью атрибута данных data-loading-text.

<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Совместимость с разными интернет-браузерами

Firefox persists form control states across page loads. A workaround for this is to use autocomplete="off".

$().button('reset')

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

$().button(string)

Сбрасывает состояние кнопки — меняет текст на любой текст, определяемый данными.

<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

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

Что это такое

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

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

Collapse requires the transitions plugin to be included in your version of Bootstrap.

Пример гармошки

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

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">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

Плагин также можно использовать без разметки гармошки. Разворачивайте и сворачивайте разные элементы с помощью кнопок.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>

<div id="demo" class="collapse in">...</div>

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

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

  • .collapse hides the content
  • .collapse.in shows the content
  • .collapsing is added when the transition starts, and removed when it finishes

Эти классы находятся в component-animations.less.

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

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

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

Через JavaScript

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

$('.collapse').collapse()

Дополнительно

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

Имя тип по умолчанию описание
материнский элемент селектор ложь При наличии селектора все сворачиваемые элементы внутри указанного материнского элемента будут закрыты, если закрыт этот сворачиваемый элемент (как обычная гармошка — зависит от класса panel).
переключатель логическое истина Включает сворачиваемый элемент по запросу

Методы

.collapse(options)

Activates your content as a collapsible element. Accepts an optional 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…
})

Карусель carousel.js

На слайд-шоу ниже показан базовый плагин и компонент для вращения элементов, как в карусели.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <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>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

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

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

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

Проблемы с доступностью

Карусель, как правило, не соответствует стандартам доступности. Если вам нужно соответствовать им, используйте другие функции для презентации своего содержимого.

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

Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.

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

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

Атрибут data-ride="carousel" нужен, чтобы карусель была анимирована при загрузке страницы.

Через JavaScript

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

$('.carousel').carousel()

Дополнительно

Дополнительные характеристики можно присваивать с помощью атрибутов данных или JavaScript. При работе с атрибутами данных помещайте имя характеристики перед data-, как в data-interval="".

Имя тип по умолчанию описание
интервал число 5000 Длительность задержки перед переключением элементов. В противном случае карусель не будет «вращаться» автоматически.
пауза строка «наведение» Вращение карусели останавливается, когда на нее наведен курсор, и возобновляется, когда курсор убран.
задержки логическое истина Определяет, должна ли карусель вращаться непрерывно или с остановками.

Методы

.carousel(options)

Запускает карусель с помощью дополнительных характеристик объекта object и начинает показ элементов.

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

.carousel('cycle')

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

.carousel('pause')

Останавливает вращение карусели.

.carousel(number)

Отображает элементы карусели определенным образом (подобно сетке).

.carousel('prev')

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

.carousel('next')

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

События

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

Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
Тип события Описание
slide.bs.carousel Данное событие запускается сразу после вызова метода slide.
slid.bs.carousel Данное событие запускается, когда карусель завершает переход по слайдам.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Аффикс affix.js

Пример

Субнавигация справа — пример использования плагина аффикса.


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

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

Размещение с помощью CSS

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

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

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

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

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

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

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

Через JavaScript

Вызов плагина аффикса через Java Script:

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

Дополнительно

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

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

События

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

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