Оживите компоненты Bootstrap — теперь с помощью 12 настраиваемых плагинов jQuery .
Оптимизированный, но гибкий вариант традиционного модального плагина javascript с минимальной необходимой функциональностью и умными настройками по умолчанию.
Скачать файлНиже представлено статически отрисованное модальное окно.
Одно прекрасное тело…
Переключите модальное окно с помощью javascript, нажав кнопку ниже. Он будет скользить вниз и исчезать в верхней части страницы.
Запустить демо-модалВызов модального окна через javascript:
- $ ( '#myModal' ). модальный ( варианты )
Имя | тип | дефолт | описание |
---|---|---|---|
фон | логический | истинный | Включает элемент модального фона |
клавиатура | логический | истинный | Закрывает модальное окно при нажатии клавиши escape |
Вы можете легко активировать модальные окна на своей странице, не написав ни одной строки javascript. Просто установите data-toggle="modal"
элемент контроллера с data-target="#foo"
или href="#foo"
, который соответствует идентификатору модального элемента, и при нажатии он запустит ваш модальный.
Кроме того, чтобы добавить параметры к модальному экземпляру, просто включите их в качестве дополнительных атрибутов данных либо в элемент управления, либо в саму модальную разметку.
- <a class = "btn" data-toggle = "modal" href = "#myModal" > Запустить модальное окно </a>
- <div класс = "модальный" >
- <div класс = "модальный заголовок" >
- <a class = "close" data-dismiss = "modal" > × </a>
- <h3> Модальный заголовок </h3>
- </div>
- <div class = "модальное тело" >
- <p> Одно прекрасное тело… </p>
- </div>
- <div class = "модальный нижний колонтитул" >
- <a href = "#" class = "btn btn-primary" > Сохранить изменения </a>
- <a href = "#" class = "btn" > Закрыть </a>
- </div>
- </div>
.fade
класс к
.modal
элементу (см. демонстрацию, чтобы увидеть это в действии) и включите bootstrap-transition.js.
Активирует ваш контент как модальный. Принимает необязательные параметры object
.
- $ ( '#myModal' ). модальный ({
- клавиатура : ложь
- })
Вручную переключает модальное окно.
- $ ( '#myModal' ). модальный ( «переключить» )
Вручную открывает модальное окно.
- $ ( '#myModal' ). модальный ( «показать» )
Вручную скрывает модальное окно.
- $ ( '#myModal' ). модальный ( «скрыть» )
Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям.
Мероприятие | Описание |
---|---|
показывать | Это событие срабатывает сразу же при show вызове метода экземпляра. |
показано | Это событие запускается, когда модальное окно становится видимым для пользователя (будет ждать завершения переходов css). |
Спрятать | Это событие запускается сразу после hide вызова метода экземпляра. |
скрытый | Это событие запускается, когда модальное окно больше не скрыто от пользователя (будет ждать завершения переходов css). |
- $ ( '#myModal' ). на ( 'скрытый' , функция () {
- // сделай что-нибудь…
- })
Добавляйте выпадающие меню почти ко всему в Bootstrap с помощью этого простого плагина. Bootstrap имеет полную поддержку выпадающего меню на панели навигации, вкладках и планшетах.
Скачать файлНажмите на раскрывающиеся навигационные ссылки в навигационной панели и на панели ниже, чтобы протестировать раскрывающиеся списки.
Вызовите раскрывающиеся списки через javascript:
- $ ( '.dropdown-toggle' ). раскрывающийся список ()
Чтобы быстро добавить функциональность выпадающего списка к любому элементу, просто добавьте его, data-toggle="dropdown"
и любой действительный раскрывающийся список начальной загрузки будет автоматически активирован.
data-target="#fat"
или
href="#fat"
.
- <ul class = "навигационные таблетки" >
- <li class = "active" ><a href = "#" > Обычная ссылка </a></li>
- <li class = "раскрывающийся список" id = "menu1" >
- <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >
- Падать
- <b class = "вставка" ></b>
- </a>
- <ul class = "раскрывающееся меню" >
- <li><a href = "#" > Действие </a></li>
- <li><a href = "#" > Другое действие </a></li>
- <li><a href = "#" > Здесь что-то еще </a></li>
- <li класс = "разделитель" ></li>
- <li><a href = "#" > Отдельная ссылка </a></li>
- </ul>
- </li>
- ...
- </ul>
Программный API для активации меню для данной панели навигации или навигации с вкладками.
Плагин ScrollSpy предназначен для автоматического обновления целей навигации в зависимости от положения прокрутки.
Скачать файлПрокрутите область ниже и посмотрите обновление навигации. Выпадающие подэлементы также будут выделены. Попытайся!
Рекламные леггинсы Keytar, бранч ID Art Party Dolor Labore. Pitchfork yr enim lo-fi до того, как они были распроданы. Права на велосипед от фермы к столу в Tumblr на что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit Seitan McSweeney 3 wolf moon irure. Свитер Cosby, джинсы-ломо, джинсовые шорты, минималистичная толстовка с капюшоном Williamsburg, о которой вы, вероятно, не слышали, и кардиган трастового фонда culpa biodiesel Wes Anderson, эстетика. Nihil татуированный accusamus, cred ирония биодизель куфия ремесленник ullamco consequat.
Скейтборд с усами Veniam marfa, борода с вилами adipisicing fugiat velit. Борода Фригана, также известная как купидат Максуини. Cupidatat четыре loko nisi, ea Helvetica nulla carles. Татуированный фургончик с едой в свитере косби, винил McSweeney's quis non freegan. Ло-фай Уэс Андерсон +1 портной. Carles неэстетическое упражнение quis gentrify. Бруклинское крафтовое пиво
Occaecat commodo aliqua delectus. Fap крафтовое пиво десантируется на скейтборде. Ломо велосипедные права adipisicing banh mi, velit ea sunt next level locavore кофе одного происхождения в больших количествах. Высококачественный винил id, эхо-парк, созданный с помощью вил. Vero VHS предназначен для чтения. Создайте мини-сумку своими руками. Cred ex in, устойчивое создание поясной сумки 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 what delectus food truck. Предполагается, что Sapiente synth ID. Ирония клише Locavore sed Helvetica, громовые коты, о которых вы, вероятно, не слышали, conequat hoodie без глютена lo-fi fap aliquip. Labore elit placeat прежде, чем они были распроданы, Terry Richardson proident brunch nesciunt quis cosby свитер pariatur keffiyeh ut Helvetica artisan. Джемпер крафтовый пивной сейтан готовый велит. VHS Chambray Laboris Tempor Veniam. Anim mollit minim commodo ullamco Thundercats.
Вызовите scrollspy через javascript:
- $ ( '#navbar' ). прокрутка ()
Чтобы легко добавить поведение прокрутки в навигацию на верхней панели, просто добавьте data-spy="scroll"
к элементу, за которым вы хотите следить (чаще всего это будет тело).
- <body data-spy = "scroll" > ... </body>
<a href="#home">home</a>
должен соответствовать чему-то в доме, например
<div id="home"></div>
.
Имя | тип | дефолт | описание |
---|---|---|---|
компенсировать | количество | 10 | Пиксели для смещения сверху при расчете положения прокрутки. |
Этот плагин добавляет быстрые, динамические функции вкладок и пилюль для перехода через локальный контент.
Скачать файлНажмите на вкладки ниже, чтобы переключаться между скрытыми панелями, даже через раскрывающиеся меню.
Raw denim вы, наверное, не слышали о джинсовых шортах Austin. Nesciunt tofu stumptown aliqua, мастер очищения ретро-синтеза. Усы клише временные, Уильямсбург Карлес веганский Helvetica. Reprehenderit мясник ретро кефия ловец снов синтезатор. Свитер Cosby eu banh mi, qui irure Terry Richardson ex squid. Место Aliquip на шалфее для iphone. Seitan aliquip quis кардиган американская одежда, мясник 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Включить вкладки с вкладками через javascript:
- $ ( '#myTab' ). вкладка ( «показать» )
Вы можете активировать навигацию по вкладкам или таблеткам без написания какого-либо javascript, просто указав data-toggle="tab"
или data-toggle="pill"
на элементе.
- <ul class = "вкладки" >
- <li><a href = "#home" data-toggle = "tab" > Главная страница </a></li>
- <li><a href = "#profile" data-toggle = "tab" > Профиль </a></li>
- <li><a href = "#messages" data-toggle = "tab" > Сообщения </a></li>
- <li><a href = "#ettings" data-toggle = "tab" > Настройки </a></li>
- </ul>
Активирует элемент вкладки и контейнер содержимого. Tab должен иметь либо `data-target`, либо `href`, указывающий на узел-контейнер в dom.
- <ul class = "вкладки" >
- <li class = "active" ><a href = "#home" > Домашняя страница </a></li>
- <li><a href = "#profile" > Профиль </a></li>
- <li><a href = "#messages" > Сообщения </a></li>
- <li><a href = "#settings" > Настройки </a></li>
- </ul>
- <div класс = "вкладка-контент" >
- <div class = "вкладка активна" 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>
- <скрипт>
- $ ( функция () {
- $ ( '.tabs a:последний' ). вкладка ( «показать» )
- })
- </скрипт>
Мероприятие | Описание |
---|---|
показывать | Это событие срабатывает при показе вкладки, но до того, как будет показана новая вкладка. Используйте event.target и event.relatedTarget для выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно. |
показано | Это событие срабатывает при показе вкладки после того, как вкладка была показана. Используйте event.target и event.relatedTarget для выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно. |
- $ ( 'a[data-toggle="tab"]' ). на ( 'показано' , функция ( e ) {
- э . цель // активированная вкладка
- э . relatedTarget // предыдущая вкладка
- })
Вдохновленный превосходным плагином jQuery.tipsy, написанным Джейсоном Фреймом; Всплывающие подсказки — это обновленная версия, которая не использует изображения, CSS3 для анимации и атрибуты данных для локального хранения заголовков.
Скачать файлНаведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:
Узкие штаны следующего уровня куфии , вы, наверное , о них не слышали. Фотобудка с бородой из необработанного денима, высокой печатью, веганская сумка через плечо, Stumptown. Сейтан от фермы к столу, 8-битная американская одежда McSweeney's Fixie из устойчивой лебеды имеет виниловое шамбре Terry Richardson. Бородатый тупиковый город, кардиганы банх ми ломо тандеркэтс. Биодизель с тофу Уильямсбург Марфа, очищающий веганский шамбре четырех локо Максуини. По - настоящему ироничный ремесленник, какой бы кейтар ни был, сценастер, от фермы до стола, Бэнкси Остин, твиттер, ручка , фриган, кредо, сырой деним, вирусный кофе одного происхождения.
Активировать всплывающую подсказку через javascript:
- $ ( '#пример' ). подсказка ( варианты )
Имя | тип | дефолт | описание |
---|---|---|---|
анимация | логический | истинный | применить переход css затухания к всплывающей подсказке |
размещение | нить | 'Топ' | как расположить всплывающую подсказку - сверху | дно | слева | Правильно |
селектор | нить | ЛОЖЬ | Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. |
заглавие | строка | функция | '' | значение заголовка по умолчанию, если тег `title` отсутствует |
курок | нить | 'парить' | как срабатывает всплывающая подсказка - наведите курсор | фокус | руководство |
задерживать | номер | объект | 0 | задержка отображения и скрытия всплывающей подсказки (мс) Если указано число, задержка применяется как к скрытию, так и к показу. Структура объекта: |
По соображениям производительности API-интерфейсы данных Tooltip и Popover включены. Если вы хотите использовать их, просто укажите параметр селектора.
Присоединяет обработчик всплывающей подсказки к коллекции элементов.
Отображает всплывающую подсказку элементов.
- $ ( '#элемент' ). всплывающая подсказка ( «показать» )
Скрывает всплывающую подсказку элемента.
- $ ( '#элемент' ). всплывающая подсказка ( «скрыть» )
Переключает всплывающую подсказку элементов.
- $ ( '#элемент' ). всплывающая подсказка ( «переключить» )
Добавляйте небольшие наложения контента, как на iPad, к любому элементу для размещения вторичной информации.
* Требуется наличие всплывающей подсказки
Скачать файлНаведите указатель мыши на кнопку, чтобы вызвать всплывающее окно.
Включить всплывающие окна через javascript:
- $ ( '#пример' ). всплывающее окно ( варианты )
Имя | тип | дефолт | описание |
---|---|---|---|
анимация | логический | истинный | применить переход css затухания к всплывающей подсказке |
размещение | нить | 'Правильно' | как расположить всплывающее окно - сверху | дно | слева | Правильно |
селектор | нить | ЛОЖЬ | если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям |
курок | нить | 'парить' | как срабатывает всплывающая подсказка - наведите курсор | фокус | руководство |
заглавие | строка | функция | '' | значение заголовка по умолчанию, если атрибут `title` отсутствует |
содержание | строка | функция | '' | значение содержимого по умолчанию, если атрибут `data-content` отсутствует |
задерживать | номер | объект | 0 | задержка показа и скрытия всплывающего окна (мс) Если указано число, задержка применяется как к скрытию, так и к показу. Структура объекта: |
По соображениям производительности API-интерфейсы данных Tooltip и Popover включены. Если вы хотите использовать их, просто укажите параметр селектора.
Инициализирует всплывающие окна для коллекции элементов.
Открывает всплывающее окно элементов.
- $ ( '#элемент' ). всплывающее окно ( «показать» )
Скрывает всплывающее окно элементов.
- $ ( '#элемент' ). всплывающее окно ( «скрыть» )
Переключает всплывающее окно элементов.
- $ ( '#элемент' ). всплывающее окно ( «переключение» )
Плагин оповещений — это крошечный класс для добавления близких функций к оповещениям.
СкачатьПлагин оповещений работает с обычными предупреждающими сообщениями и блокирует сообщения.
Измените это и это и попробуйте еще раз. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Включить отклонение оповещения через javascript:
- $ ( ".alert-сообщение" ). предупреждение ()
Просто добавьте data-dismiss="alert"
к своей кнопке закрытия, чтобы автоматически дать предупреждение о закрытии.
- <a class = "close" data-dismiss = "alert" href = "#" > × </a>
Обертывает все оповещения с закрытой функциональностью. Чтобы ваши оповещения анимировались при закрытии, убедитесь, что к ним уже применен класс .fade
и ..in
Закрывает оповещение.
- $ ( ".alert-сообщение" ). предупреждение ( «закрыть» )
Класс предупреждений Bootstrap предоставляет несколько событий для подключения к функциям предупреждений.
Мероприятие | Описание |
---|---|
Закрыть | Это событие срабатывает сразу же при close вызове метода экземпляра. |
закрыто | Это событие запускается, когда оповещение было закрыто (будет ждать завершения переходов css). |
- $ ( '#мое-предупреждение' ). привязать ( 'закрыто' , функция () {
- // сделай что-нибудь…
- })
Получите базовые стили и гибкую поддержку складных компонентов, таких как аккордеоны и навигация.
Скачать файлИспользуя плагин сворачивания, мы создали простой виджет в стиле аккордеона:
Включить через javascript:
- $ ( ".collapse" ). коллапс ()
Имя | тип | дефолт | описание |
---|---|---|---|
родитель | селектор | ЛОЖЬ | Если селектор, то все сворачивае��ые элементы под указанным родителем будут закрыты при отображении этого сворачиваемого элемента. (аналогично традиционному поведению аккордеона) |
переключать | логический | истинный | Переключает сворачиваемый элемент при вызове |
Просто добавьте data-toggle="collapse"
и data-target
к элементу, чтобы автоматически назначить управление складным элементом. Атрибут data-target
принимает селектор css, к которому применяется свертывание. Обязательно добавьте класс collapse
к складному элементу. Если вы хотите, чтобы он открывался по умолчанию, добавьте дополнительный класс in
.
- <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
- простой складной
- </кнопка>
- <div id = "demo" class = "collapse in" > … </div>
data-parent="#selector"
. Обратитесь к демо, чтобы увидеть это в действии.
Активирует ваш контент как складной элемент. Принимает необязательные параметры object
.
- $ ( '#myCollapsible' ). коллапс ({
- переключить : ложь
- })
Отображает или скрывает сворачиваемый элемент.
Показывает разборный элемент.
Скрывает складной элемент.
Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.
Мероприятие | Описание |
---|---|
показывать | Это событие срабатывает сразу же при show вызове метода экземпляра. |
показано | Это событие запускается, когда элемент свертывания становится видимым для пользователя (будет ожидать завершения переходов css). |
Спрятать | Это событие запускается сразу после вызова hide метода. |
скрытый | Это событие запускается, когда элемент свертывания был скрыт от пользователя (будет ожидать завершения переходов css). |
- $ ( '#myCollapsible' ). на ( 'скрытый' , функция () {
- // сделай что-нибудь…
- })
Посмотрите слайд-шоу ниже.
Звонок через javascript:
- $ ( '.карусель' ). карусель ()
Имя | тип | дефолт | описание |
---|---|---|---|
интервал | количество | 5000 | Количество времени задержки между автоматическим циклом элемента. |
Атрибуты данных являются неотъемлемой частью плагина карусели. Посмотрите приведенный ниже пример кода для различных типов разметки.
- <div класс = "карусель" >
- <!-- Элементы карусели -->
- <div class = "carousel-inner" >
- ...
- </div>
- <!-- Карусельная навигация -->
- <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>
- <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>
- </div>
Инициализирует карусель с дополнительными параметрами object
и начинает циклически перемещаться по элементам.
- $ ( '.myCarousel' ). карусель ({
- интервал : 2000
- })
Перебирает элементы карусели слева направо.
Запрещает карусели циклически перемещаться по элементам.
Циклически перемещает карусель к определенному кадру (на основе 0, подобно массиву).
Переход к предыдущему элементу.
Переход к следующему элементу.
Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям.
Мероприятие | Описание |
---|---|
горка | Это событие срабатывает немедленно при slide вызове метода экземпляра. |
соскользнул | Это событие запускается, когда карусель завершила переход слайдов. |
Базовый, легко расширяемый плагин для быстрого создания элегантных шрифтов с любой формой ввода текста.
Скачать файлНачните вводить текст в поле ниже, чтобы отобразить результаты ввода.
Вызовите typeahead через javascript:
- $ ( '.typeahead' ). печатать вперед ()
Имя | тип | дефолт | описание |
---|---|---|---|
источник | множество | [ ] | Источник данных для запроса. |
Предметы | количество | 8 | Максимальное количество элементов для отображения в раскрывающемся списке. |
сопоставитель | функция | без учета регистра | Метод, используемый для определения соответствия запроса элементу. Принимает один аргумент, item против которого проверяется запрос. Получите доступ к текущему запросу с помощью this.query . Возвращает логическое значение true , если запрос соответствует. |
сортировщик | функция | точное совпадение, с учетом регистра, без учета регистра |
Метод, используемый для сортировки результатов автозаполнения. Принимает один аргумент items и имеет область действия экземпляра typeahead. Ссылка на текущий запрос с помощью this.query . |
маркер | функция | выделяет все совпадения по умолчанию | Метод, используемый для выделения результатов автозаполнения. Принимает один аргумент item и имеет область действия экземпляра typeahead. Должен вернуть html. |
Добавьте атрибуты данных, чтобы зарегистрировать элемент с функцией опережающего ввода.
- <input type = "text" data-provide = "typeahead" >
Инициализирует ввод с типом заголовка.