Javascript для Bootstrap

Оживіть компоненти Bootstrap за допомогою нових спеціальних плагінів, які працюють із jQuery та Ender .

← Повернутися на головну сторінку Bootstrap

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

Завантажити

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

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

Розмітка

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

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

методи

$().scrollspy()

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

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

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

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

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

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

Демо

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

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

Завантажити

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

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

Розмітка

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

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

методи

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

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

  1. <ul class = "tabs" >
  2. <li class = "active" ><a href = "#home" > Домашня сторінка </a></li>
  3. <li><a href = "#profile" > Профіль </a></li>
  4. <li><a href = "#messages" > Повідомлення </a></li>
  5. <li><a href = "#settings" > Налаштування </a></li>
  6. </ul>
  7.  
  8. <div class = "pill-content" >
  9. <div class = "active" id = "home" > ... </div>
  10. <div id = "profile" > ... </div>
  11. <div id = "messages" > ... </div>
  12. <div id = "settings" > ... </div>
  13. </ul>
  14.  
  15. <сценарій>
  16. $ ( функція () {
  17. $ ( '.tabs' ). вкладки ()
  18. })
  19. </script>

Демо

Необроблений денім, напевно, ви не чули про них джинсові шорти Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Вуса cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Светр Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat шавлія 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.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

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

Завантажити

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

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

Опції

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

методи

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

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

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

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

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

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

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

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

.twipsy(правда)

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

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

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

Демо

Вузькі штани наступного рівня , ви, напевно , не чули про них. Стенд для фотографій, борода, веганська сумка для високого друку з необробленого деніму. Сейтан від ферми до столу, 8-бітний американський одяг McSweeney's fixie sustainable quinoa має вінілове шамбре Террі Річардсона. Борода stumptown, кардигани banh mi lomo thundercats. Тофу біодизель Вільямсбург Марфа, чотири локо mcsweeney's cleanse vegan chambray. Справді іронічний ремісник будь-який кейтар, сценер від ферми до столу, Бенксі Остін, твіттер , обробка фріган-кредиту, необробленого джинсового матеріалу, кави єдиного походження, вірусного.

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

Завантажити

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

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

Опції

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

методи

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

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

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

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

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

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

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

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

Демо

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

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

Завантажити

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

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

Розмітка

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

методи

$().alert()

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

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

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

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

Демо

×

Свято гуакамоле! Краще перевірте себе, ви виглядаєте не дуже добре.

×

Ох, чорт! Ви отримали помилку! Змініть те чи інше та спробуйте ще раз. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.