Про модальні

Спрощений, але гнучкий варіант традиційного модального плагіна JavaScript із лише мінімальними необхідними функціями та інтелектуальними параметрами за замовчуванням.

Статичний приклад

Нижче наведено статично візуалізований модаль.

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

Перемкніть модаль за допомогою javascript, натиснувши кнопку нижче. Він зсунеться вниз і зникне з верхньої частини сторінки.

Використання bootstrap-modal

Виклик модального за допомогою javascript:

$ ( '#myModal' ). модальний ( параметри )

Опції

Розмітка

Ви можете легко активувати моди на своїй сторінці без необхідності писати жодного рядка javascript. Просто встановіть data-toggle="modal"елемент контролера з data-target="#foo"або , href="#foo"який відповідає ідентифікатору модального елемента, і після натискання він запустить ваш модальний.

Крім того, щоб додати параметри до свого модального екземпляра, просто включіть їх як додаткові атрибути даних або в елемент керування, або в саму модальну розмітку.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Запустити Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Модальний заголовок </h3>
  </div>
  <div class = "modal-body" > 
    <p> Одне чудове тіло… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Закрити </a>   
    <a href = "#" class = "btn btn-primary" > Зберегти зміни </a>  
  </div>
</div>

методи

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

Активує ваш вміст як модальний. Приймає додаткові параметри object.

$ ( '#myModal' ). модальний ({
  клавіатура : false 
})

.modal('перемикати')

Вручну перемикає режим.

$ ( '#myModal' ). модальний ( 'перемикач' )

.modal('показати')

Вручну відкриває модаль.

$ ( '#myModal' ). модальний ( 'показати' )

.modal('сховати')

Вручну приховує модаль.

$ ( '#myModal' ). модальний ( 'сховати' )

Події

Модальний клас Bootstrap надає кілька подій для підключення до модальної функціональності.

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // робити щось…
})

Про спадні списки

Додайте спадні меню майже до будь-чого в Bootstrap за допомогою цього простого плагіна. Bootstrap підтримує повну підтримку спадного меню на навігаційній панелі, вкладках і таблетках.

Приклади

Клацніть спадні навігаційні посилання на панелі навігації та таблетки нижче, щоб перевірити спадні меню.

• Звичайне посилання
• спадний список
  • Action
  • Another action
  • Something else here
  • Separated link
• Випадний список 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Випадний список 3
  • Action
  • Another action
  • Something else here
  • Separated link

Використання bootstrap-dropdown.js

Викликати випадаючі меню за допомогою javascript:

$ ( '.dropdown-toggle' ). спадний список ()

Розмітка

Щоб швидко додати функціональність спадного меню до будь-якого елемента, просто додайте data-toggle="dropdown", і будь-яке дійсне спадне меню початкового завантаження буде автоматично активовано.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Звичайне посилання </a></li>  
  <li class = "dropdown " id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      спадний список
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Дія </a></li> 
      <li><a href = "#" > Інша дія </a></li> 
      <li><a href = "#" > Тут ще щось </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Окреме посилання </a></li> 
    </ul>
  </li>
  ...
</ul>

Щоб зберегти URL-адреси недоторканими, використовуйте data-targetатрибут замість href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      спадний список
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

методи

$().dropdown()

Програмний API для активації меню для певної панелі навігації або навігації з вкладками.

Плагін ScrollSpy призначений для автоматичного оновлення цілей навігації на основі положення прокрутки.

Приклад панелі навігації з ScrollSpy

Прокрутіть область нижче та подивіться оновлення навігації. Підпункти спадного списку також будуть виділені. Спробуй це!

Використання bootstrap-scrollspy.js

Викличте scrollspy через javascript:

$ ( '#navbar' ). ScrollSpy ()

Розмітка

Щоб легко додати шпигунську поведінку до вашої верхньої панелі навігації, просто додайте data-spy="scroll"до елемента, який ви хочете стежити (найчастіше це буде тіло).

<body data-spy = "scroll" > ... </body>  

методи

.scrollspy('оновити')

Під час використання Scrollspy разом із додаванням або видаленням елементів із DOM вам потрібно буде викликати метод refresh таким чином:

$ ( '[data-spy="scroll"]' ). кожний ( функція () {  
  var $spy = $ ( це ). scrollspy ( 'оновити' )
});

Опції

Події

Цей плагін додає швидку динамічну вкладку та функціональність таблетки для переходу між локальним вмістом.

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

Натисніть вкладки нижче, щоб перемикатися між прихованими панелями, навіть за допомогою спадних меню.

• додому
• Профіль
• спадний список
  • @fat
  • @mdo

Використання bootstrap-tab.js

Увімкнути вкладки з можливістю вкладок через javascript (кожну вкладку потрібно активувати окремо):

$ ( '#myTab a' ). натисніть ( функція ( e ) {  
  e . preventDefault ();
  $ ( це ). вкладка ( 'показати' );
})

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

$ ( '#myTab a[href="#profile"]' ). вкладка ( 'показати' ); // Виберіть вкладку за назвою 
$ ( '#myTab a:first' ). вкладка ( 'показати' ); // Виберіть першу вкладку 
$ ( '#myTab a:last' ). вкладка ( 'показати' ); // Виберіть останню вкладку 
$ ( '#myTab li:eq(2) a' ). вкладка ( 'показати' ); // Виберіть третю вкладку (з індексом 0) 

Розмітка

Ви можете активувати навігацію вкладками або таблетками без написання JavaScript, просто вказавши data-toggle="tab"або data-toggle="pill"на елементі. Додавання класів navі nav-tabsдо вкладки ulзастосує стиль початкової вкладки.

<ul class = "nav nav-tabs" > 
  <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 = "#settings" data-toggle = "tab" > Налаштування </a></li>  
</ul>

методи

$().таб

Активує елемент вкладки та контейнер вмісту. Вкладка повинна мати або data-targetабо hrefорієнтований на вузол контейнера в DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <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 class = "tab-content" > 
  <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>
 
<сценарій>
  $ ( функція () {  
    $ ( '#myTab a:last' ). вкладка ( 'показати' );
  })
</script>

Події

$ ( 'a[data-toggle="tab"]' ). on ( 'показано' , функція ( e ) {   
  e . target // активована вкладка
  e . relatedTarget // попередня вкладка
})

Про підказки

Натхненний чудовим плагіном jQuery.tipsy, написаним Джейсоном Фреймом; Підказки — це оновлена ​​версія, яка не покладається на зображення, використовує css3 для анімації та атрибути даних для локального зберігання заголовків.

Приклад використання підказок

Наведіть курсор на посилання нижче, щоб переглянути підказки:

Використання bootstrap-tooltip.js

Запустити спливаючу підказку через javascript:

$ ( '#приклад' ). підказка ( параметри )

Опції

Розмітка

З міркувань продуктивності підказка та Popover data-apis доступні. Якщо ви хочете використовувати їх, просто вкажіть параметр вибору.

<a href = "#" rel = "tooltip" title = "перша підказка" > наведіть на мене курсор </a>   

методи

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

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

.tooltip('show')

Показує спливаючу підказку елемента.

$ ( '#element' ). підказка ( 'показати' )

.tooltip('сховати')

Приховує спливаючу підказку елемента.

$ ( '#element' ). підказка ( 'сховати' )

.tooltip('перемикати')

Перемикає спливаючу підказку елемента.

$ ( '#element' ). підказка ( 'перемикач' )

Про поповери

Додайте невеликі накладки вмісту, як на iPad, до будь-якого елемента для розміщення вторинної інформації.

* Потрібна підказка _

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

Наведіть курсор на кнопку, щоб запустити спливаюче вікно.

Використання bootstrap-popover.js

Увімкнути спливаючі вікна через javascript:

$ ( '#приклад' ). popover ( параметри )

Опції

Розмітка

З міркувань продуктивності підказка та Popover data-apis доступні. Якщо ви хочете використовувати їх, просто вкажіть параметр вибору.

методи

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

Ініціалізує спливаючі вікна для колекції елементів.

.popover('показати')

Розкриває спливаюче вікно елементів.

$ ( '#element' ). popover ( 'показати' )

.popover('сховати')

Приховує спливаюче вікно елементів.

$ ( '#element' ). popover ( 'сховати' )

.popover('перемикати')

Перемикає спливаюче вікно елементів.

$ ( '#element' ). popover ( 'перемикач' )

Про оповіщення

Плагін сповіщень — це невеликий клас для додавання функціональних можливостей до сповіщень.

Приклад сповіщень

Плагін сповіщень працює зі звичайними повідомленнями сповіщень і блокує повідомлення.

Використання bootstrap-alert.js

Увімкнути відхилення попередження через javascript:

$ ( ".alert" ). сповіщення ()

Розмітка

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

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

методи

$().alert()

Обгортає всі сповіщення з наближеною функціональністю. Щоб ваші сповіщення анімувалися після закриття, переконайтеся, що до них уже застосовано клас .fadeі ..in

.alert('закрити')

Закриває сповіщення.

$ ( ".alert" ). сповіщення ( 'закрити' )

Події

Клас сповіщень Bootstrap надає кілька подій для підключення до функції сповіщень.

$ ( '#my-alert' ). bind ( 'закрито' , функція () {   
  // робити щось…
})

про

Робіть більше за допомогою кнопок. Кнопка керування визначає стани або створює групи кнопок для додаткових компонентів, наприклад панелей інструментів.

Приклад використання

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

Використання bootstrap-button.js

Увімкнути кнопки через javascript:

$ ( '.nav-tabs' ). кнопка ()

Розмітка

Атрибути даних є невід’ємною частиною плагіна кнопки. Перегляньте наведений нижче приклад коду для різних типів розмітки.

<!-- Додайте data-toggle="button", щоб активувати перемикання однієї кнопки -->
<button class = "btn" data-toggle = "button" > Один перемикач </button>  
 
<!-- Додайте data-toggle="buttons-checkbox" для перемикання стилю прапорця в btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Ліворуч </button> 
  <button class = "btn" > Середній </button> 
  <button class = "btn" > Праворуч </button> 
</div>
 
<!-- Додайте data-toggle="buttons-radio" для перемикання стилю радіо в btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Ліворуч </button> 
  <button class = "btn" > Середній </button> 
  <button class = "btn" > Праворуч </button> 
</div>

методи

$().button('toggle')

Перемикає стан натискання. Надає кнопці вигляд, що вона була активована.

<button class = "btn" data-toggle = "button" > … </button>   

$().button('завантаження')

Встановлює стан кнопки на завантаження - вимикає кнопку та замінює текст на текст завантаження. Текст для завантаження має бути визначений на елементі кнопки за допомогою атрибута data data-loading-text.

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().button('reset')

Скидає стан кнопки - замінює текст оригінальним текстом.

$().button(рядок)

Скидає стан кнопки - змінює текст на будь-який текстовий стан, визначений даними.

<button class = "btn" data-complete-text = "finished!" > ... </button>   
<сценарій>
  $ ( '.btn' ). кнопка ( 'завершено' )
</script>

про

Отримайте базові стилі та гнучку підтримку складних компонентів, таких як гармошки та навігація.

* Необхідно включити плагін Transitions.

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

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

Використання bootstrap-collapse.js

Увімкнути через javascript:

$ ( ".collapse" ). згорнути ()

Опції

Розмітка

Просто додайте data-toggle="collapse"до data-targetелемента, щоб автоматично призначити керування елементом, що згортається. Атрибут data-targetприймає селектор CSS для застосування згортання. Обов’язково додайте клас collapseдо розбірного елемента. Якщо ви хочете, щоб він відкривався за умовчанням, додайте додатковий клас in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  простий розбірний
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

методи

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

Активує ваш вміст як складний елемент. Приймає додаткові параметри object.

$ ( '#myCollapsible' ). згорнути ({
  перемикати : false 
})

.collapse('переключити')

Перемикає елемент, що згортається, на показаний або прихований.

.collapse('показати')

Показує розбірний елемент.

.collapse('сховати')

Приховує розбірний елемент.

Події

Клас згортання Bootstrap надає кілька подій для підключення до функціональності згортання.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // робити щось…
})

про

Загальний плагін для переміщення елементів. Карусель.

Приклад каруселі

Перегляньте слайд-шоу нижче.

Перша мітка ескізу

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Друга мітка ескізу

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Третя мітка ескізу

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Використання bootstrap-carousel.js

Виклик через javascript:

$ ( '.carousel' ). карусель ()

Опції

Розмітка

Атрибути даних використовуються для попереднього та наступного елементів керування. Перегляньте приклад розмітки нижче.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Предмети каруселі -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Карусель nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

методи

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

Ініціалізує карусель із додатковими параметрами objectта починає переміщатися між елементами.

$ ( '.carousel' ). карусель ({
  інтервал : 2000 
})

.carousel('цикл')

Переглядає елементи каруселі зліва направо.

.carousel('пауза')

Зупиняє карусель від циклу між предметами.

.carousel(число)

Перемикає карусель до певного кадру (на основі 0, подібно до масиву).

.carousel('попередній')

Перехід до попереднього пункту.

.carousel('наступний')

Перехід до наступного елемента.

Події

Клас каруселі Bootstrap надає дві події для підключення до функції каруселі.

про

Базовий, легко розширюваний плагін для швидкого створення елегантних текстових текстів із будь-якою формою введення тексту.

приклад

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

Використання bootstrap-typeahead.js

Викличте typeahead через javascript:

$ ( '.typeahead' ). наперед ()

Опції

Розмітка

Додайте атрибути даних, щоб зареєструвати елемент із функцією попереднього введення.

<input type = "text" data-provide = "typeahead" >  

методи

.typeahead(параметри)

Ініціалізує введення за допомогою попереднього введення.