Наш модальний плагін — це надтонка версія традиційного модального плагіна js, у якому особливо ретельно включаються лише ті функції, які нам потрібні тут у twitter.

Завантажити

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

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

Опції

Ім'я	типу	за замовчуванням	опис
фон	логічний, рядок	помилковий	Включає елемент модального фону. Встановіть фон, "static"якщо ви не бажаєте, щоб модальний режим закривався, коли натискається фон.
клавіатура	логічний	помилковий	Закриває модаль, коли натиснуто клавішу виходу
шоу	логічний	помилковий	Відкриває модаль під час ініціалізації класу

Розмітка

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

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Запустити Modal </a>    

Примітка . Якщо ви бажаєте, щоб ваш модальний анімував вхід і вихід, просто додайте .fadeклас до свого .modalелемента (зверніться до демонстрації, щоб побачити це в дії).

методи

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

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

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

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

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

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

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

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

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

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

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

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

.modal(true)

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

$ ( '#my-modal' ). модальний ( правда )

Примітка Крім того, це можна отримати за допомогою $().data('modal').

Події

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

Подія	опис
шоу	Ця подія запускається негайно, коли showвикликається метод екземпляра.
показано	Ця подія запускається, коли модаль стає видимою для користувача (чекатиме завершення переходів css).
приховати	Ця подія запускається негайно після hideвиклику методу екземпляра.
прихований	Ця подія запускається, коли модаль закінчується приховуванням від користувача (буде чекати завершення переходів css).

$ ( '#my-modal' ). bind ( 'прихований' , функція () {   
  // робити щось ...
})

Демо

Запустіть Modal

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

Завантажити

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

$ ( '#topbar' ). спадний список ()

Розмітка

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

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Домашня сторінка </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Розкривне меню </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Додаткове посилання </a></li> 
      <li><a href = "#" > Тут ще щось </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Ще одне посилання </a></li> 
    </ul>
  </li>
</ul>

Примітка . Якщо у вашому інтерфейсі є кілька спадних меню, подумайте про додавання data-dropdownатрибута до більш важливого елемента контейнера, наприклад .tabsабо .topbar.

методи

$().dropdown()

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

Демо

Цей плагін призначений для додавання взаємодії Scrollspy (автоматичне оновлення навігації) до верхньої панелі початкового завантаження.

Завантажити

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

$ ( '#topbar' ). scrollSpy ()

Розмітка

Щоб легко додати поведінку ScrollSpy до вашої навігації, просто додайте data-scrollspyатрибут до .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

методи

$().scrollSpy()

Автоматично активує кнопки навігації за позицією прокручування користувача.

$ ( 'body > .topbar' ). scrollSpy ()

Зауважте , що теги прив’язки верхньої панелі повинні мати цілі ідентифікатора, які можна розпізнати. Наприклад, <a href="#home">home</a>повинен відповідати чомусь у домі, як <div id="home"></div>.

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

Scrollspy кешує навігаційні кнопки та координати розділів для продуктивності. Якщо вам потрібно оновити цей кеш (імовірно, якщо у вас є динамічний вміст), просто викличте цей метод оновлення. Якщо ви використовували атрибут data для визначення вашого Scrollspy, просто викличте refresh у тілі.

$ ( 'тіло' ). scrollSpy ( 'оновити' )

Демо

Перегляньте навігаційну панель у верхній частині цієї сторінки.

Цей плагін пропонує додаткові функції для керування станом кнопки.

Завантажити

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

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

методи

$().button('toggle')

Перемикає стан натискання. Надає btn вигляду того, що його активовано.

Примітка Ви можете ввімкнути автоматичне перемикання кнопки за допомогою data-toggleатрибута.

<button class = "btn" data-toggle = "toggle" > ... </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').button('complete')
</script>

Демо

Завантаження демо Перемкнути демо

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

Завантажити

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

$ ( '.tabs' ). вкладки ()

Розмітка

Ви можете активувати навігацію вкладками або таблетками без написання JavaScript, просто вказавши їм атрибут data-tabsабо .data-pills

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

методи

$().tabs або $().pills

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

<ul class = "tabs" > 
  <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 = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "settings" > ... </div> 
</div>
 
<сценарій>
  $ ( функція () {  
    $ ( '.tabs' ). вкладки ()
  })
</script>

Події

Подія	опис
змінити	Ця подія запускається під час зміни вкладки. Використовуйте event.targetта event.relatedTargetдля націлювання на активну вкладку та попередню активну вкладку відповідно.

$ ( '#.tabs' ). bind ( 'зміна' , функція ( e ) {   
  e . target // активована вкладка
  e . relatedTarget // попередня вкладка
})

Демо

• додому
• Профіль
• Повідомлення
• Налаштування
• спадний список
  • @жирний
  • @mdo

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

Завантажити

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

$ ( '#приклад' ). twipsy ( варіанти )

Опції

Ім'я	типу	за замовчуванням	опис
оживити	логічний	правда	застосувати перехід CSS Fade до підказки
delayIn	номер	0	затримка перед показом підказки (мс)
delayOut	номер	0	затримка перед приховуванням підказки (мс)
відступати	рядок	''	текст для використання, коли немає заголовка підказки
розміщення	рядок	"вище"	як розмістити підказку - вище | нижче | ліворуч | правильно
html	логічний	помилковий	дозволяє вміст html у підказці
жити	логічний	помилковий	використовувати делегування подій замість окремих обробників подій
зсув	номер	0	піксельне зміщення підказки від цільового елемента
назва	рядок, функція	'title'	атрибут або метод для отримання тексту заголовка
тригер	рядок	"висати"	як запускається підказка - наведіть | фокус | посібник
шаблон	рядок	[розмітка за замовчуванням]	Шаблон html, який використовується для візуалізації twipsy.

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

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Деякий текст заголовка' > текст </a>    

методи

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

Приєднує обробник twipsy до колекції елементів.

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

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

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

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

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

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

.twipsy(правда)

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

$ ( '#element' ). тупий ( правда )

Примітка Крім того, це можна отримати за допомогою $().data('twipsy').

Демо

Плагін popover надає простий інтерфейс для додавання спливаючих вікон до вашої програми. Він розширює плагін bootstrap-twipsy.js , тож обов’язково візьміть цей файл, коли додасте спливаючих зображень у свій проект!

Примітка Ви повинні включити файл bootstrap-twipsy.js перед bootstrap-popover.js.

Завантажити

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

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

Опції

Ім'я	типу	за замовчуванням	опис
оживити	логічний	правда	застосувати перехід CSS Fade до підказки
delayIn	номер	0	затримка перед показом підказки (мс)
delayOut	номер	0	затримка перед приховуванням підказки (мс)
відступати	рядок	''	текст для використання, коли немає заголовка підказки
розміщення	рядок	"право"	як розмістити підказку - вище | нижче | ліворуч | правильно
html	логічний	помилковий	дозволяє вміст html у підказці
жити	логічний	помилковий	використовувати делегування подій замість окремих обробників подій
зсув	номер	0	піксельне зміщення підказки від цільового елемента
назва	рядок, функція	'title'	атрибут або метод для отримання тексту заголовка
вміст	рядок, функція	'data-content'	рядок або метод для отримання тексту вмісту. якщо вони не надані, вміст буде отримано з атрибута data-content.
тригер	рядок	"висати"	як запускається підказка - наведіть | фокус | посібник
шаблон	рядок	[розмітка за замовчуванням]	HTML-шаблон, який використовується для відтворення спливаючого вікна.

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

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > текст </a>    

методи

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

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

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

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

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

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

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

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

Демо

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

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

Завантажити

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

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

Розмітка

Просто додайте data-alertатрибут до своїх сповіщень, щоб автоматично надати їм близьку функціональність.

Опції

Ім'я	типу	за замовчуванням	опис
селектор	рядок	'.close'	Який селектор вибрати для закриття сповіщення.

методи

$().alert()

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

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

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

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

Демо