JavaScript

Вдъхнете живот на компонентите на Bootstrap – сега с 13 персонализирани jQuery добавки.

Индивидуално или съставено

Приставките могат да бъдат включени индивидуално (въпреки че някои имат необходими зависимости) или всички наведнъж. Както bootstrap.js , така и bootstrap.min.js съдържат всички добавки в един файл.

Атрибути на данните

Можете да използвате всички добавки за Bootstrap само чрез API за маркиране, без да пишете нито един ред JavaScript. Това е първият клас API на Bootstrap и трябва да бъде вашето първо внимание, когато използвате плъгин.

Въпреки това в някои ситуации може да е желателно да изключите тази функционалност. Следователно, ние също така предоставяме възможност за деактивиране на API на атрибута на данните, като развържем всички събития в пространството от имена на тялото с `'data-api'`. Това изглежда така:

  1. $ ( 'тяло' ). изключен ( '.data-api' )

Като алтернатива, за да се насочите към конкретен плъгин, просто включете името на плъгина като пространство от имена заедно с пространството от имена на API за данни по този начин:

  1. $ ( 'тяло' ). изключено ( '.alert.data-api' )

Програмен API

Също така вярваме, че трябва да можете да използвате всички приставки за Bootstrap само чрез JavaScript API. Всички публични API са единични, верижни методи и връщат колекцията, по която са действали.

  1. $ ( ".btn.danger" ). бутон ( "превключване" ). addClass ( "дебел" )

Всички методи трябва да приемат незадължителен обект с опции, низ, който е насочен към определен метод, или нищо (което инициира плъгин с поведение по подразбиране):

  1. $ ( "#myModal" ). модален () // инициализира се със стойности по подразбиране
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // инициализирано без клавиатура
  3. $ ( "#myModal" ). modal ( 'show' ) // инициализира и извиква show веднага

Всеки плъгин също излага своя необработен конструктор на свойството `Constructor`: $.fn.popover.Constructor. Ако искате да получите конкретен екземпляр на приставка, извлечете го директно от елемент: $('[rel=popover]').data('popover').

Без конфликт

Понякога е необходимо да използвате плъгини Bootstrap с други UI рамки. При тези обстоятелства понякога могат да възникнат сблъсъци в пространството на имена. Ако това се случи, можете да извикате .noConflictприставката, на която искате да върнете стойността.

  1. var bootstrapButton = $ . fn . бутон . noConflict () // връщане на $.fn.button към предварително присвоена стойност
  2. $ . fn . bootstrapBtn = bootstrapButton // дайте на $().bootstrapBtn функционалността за стартиране

събития

Bootstrap предоставя персонализирани събития за повечето уникални действия на плъгина. Обикновено те идват във форма на инфинитив и минало причастие - където инфинитивът (напр. show) се задейства в началото на събитие, а неговата форма на минало причастие (напр. shown) се задейства при завършване на действие.

Всички безкрайни събития предоставят функция preventDefault. Това осигурява възможност за спиране на изпълнението на действие, преди то да започне.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. ако (! данни ) върне e . preventDefault () // спира модалното показване
  3. })

Относно преходите

За прости ефекти на преход, включете bootstrap-transition.js веднъж заедно с другите JS файлове. Ако използвате компилирания (или минимизиран) bootstrap.js , няма нужда да включвате това – то вече е там.

Случаи на употреба

Няколко примера за приставката за преход:

  • Плъзгане или избледняване в модали
  • Избледняващи раздели
  • Избледняващи сигнали
  • Плъзгащи се въртележки

Примери

Модалните са рационализирани, но гъвкави диалогови подкани с минимално необходимата функционалност и интелигентни настройки по подразбиране.

Статичен пример

Изобразен модал със заглавка, тяло и набор от действия в долния колонтитул.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Модално заглавие </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Едно хубаво тяло... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Затваряне </a>
  11. <a href = "#" class = "btn btn-primary" > Запазете промените </a>
  12. </div>
  13. </div>

Демо на живо

Превключете модал чрез JavaScript, като щракнете върху бутона по-долу. Той ще се плъзне надолу и ще изчезне от горната част на страницата.

  1. <!-- Бутон за задействане на модал -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Стартиране на демо модал </a>
  3.  
  4. <!-- Модален -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Модална заглавка </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Едно хубаво тяло... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Затваряне </button>
  15. <button class = "btn btn-primary" > Запазване на промените </button>
  16. </div>
  17. </div>

Използване

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

Активирайте модал, без да пишете JavaScript. Задайте data-toggle="modal"елемент на контролер, като бутон, заедно с data-target="#foo"или href="#foo"за насочване към конкретен модал за превключване.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Стартиране на modal </button>

Чрез JavaScript

Извикайте модал с идентификатор myModalс един ред на JavaScript:

  1. $ ( '#myModal' ). модален ( опции )

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-backdrop="".

Име Тип по подразбиране описание
фон булево вярно Включва елемент на модален фон. Като алтернатива, посочете staticза фон, който не затваря модала при щракване.
клавиатура булево вярно Затваря модала, когато се натисне клавиш за изход
шоу булево вярно Показва модала при инициализиране.
дистанционно път невярно

Ако е предоставен отдалечен URL адрес, съдържанието ще бъде заредено чрез loadметода на jQuery и инжектирано в .modal-body. Ако използвате API за данни, можете алтернативно да използвате hrefмаркера, за да посочите отдалечения източник. Пример за това е показан по-долу:

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

Методи

.modal(опции)

Активира вашето съдържание като модално. Приема опции по избор object.

  1. $ ( '#myModal' ). модален ({
  2. клавиатура : невярно
  3. })

.modal('превключване')

Ръчно превключва модал.

  1. $ ( '#myModal' ). модален ( 'превключване' )

.modal('покажи')

Ръчно отваря модал.

  1. $ ( '#myModal' ). модален ( 'покажи' )

.modal('скрий')

Ръчно скрива модал.

  1. $ ( '#myModal' ). модален ( 'скрий' )

събития

Модалният клас на Bootstrap разкрива няколко събития за свързване с модална функционалност.

Събитие Описание
шоу Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано Това събитие се задейства, когато модалът е направен видим за потребителя (ще изчака CSS преходите да завършат).
Крия Това събитие се задейства незабавно, когато hideметодът на екземпляра е извикан.
скрит Това събитие се задейства, когато модалът приключи да бъде скрит от потребителя (ще изчака CSS преходите да завършат).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // направи нещо…
  3. })

Пример в навигационната лента

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

@дебел

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi преди да разпродадат qui. Права за велосипеди от ферма до маса в Tumblr. Жилетка Anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby пуловер lomo jean къси панталони, Williamsburg hoodie мини qui вероятно не сте чували за тях и жилетка trust fund culpa biodiesel wes anderson aesthetic. Nihil татуиран акузамус, cred ирония биодизел keffiyeh занаятчия ullamco consequat.

@mdo

Veniam marfa мустаци скейтборд, adipisicing fugiat velit pitchfork брада. Брадата на Фрийгън е купидата от истината на Максуини. Cupidatat four loko nisi, ea helvetica nulla carles. Татуиран cosby пуловер камион за храна, mcsweeney's quis non freegan винил. Lo-fi wes anderson +1 шивашко. Carles не естетически exercitation quis gentrify. Brooklyn adipisicing занаятчийска бира vice keytar deserunt.

един

Occaecat commodo aliqua delectus. Fap крафт бира deserunt скейтборд ea. Lomo велосипедни права adipisicing banh mi, velit ea sunt следващо ниво locavore кафе с един произход в magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur note Направи си сам минимална пратеска чанта. Cred ex in, sustainable delectus consectetur fanny pack 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.

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. Предполага се, че сапиенте синтезатор. Locavore sed helvetica cliche ирония, thundercats вероятно не сте чували за тях consequat суичър без глутен lo-fi fap aliquip. Labore elit placeat преди да са разпродадени, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Жилетка крафт бира сейтан готов велит. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Използване

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

За да добавите лесно scrollspy поведение към вашата навигация в горната лента, просто добавете data-spy="scroll"към елемента, който искате да шпионирате (най-често това е тялото) и data-target=".navbar"изберете коя навигация да използвате. Ще искате да използвате scrollspy с .navкомпонент.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Чрез JavaScript

Обадете се на scrollspy чрез JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Горе главата! Връзките на лентата за навигация трябва да имат разрешими целеви идентификатори. Например <a href="#home">home</a>трябва да съответства на нещо в dom като <div id="home"></div>.

Методи

.scrollspy('refresh')

Когато използвате scrollspy във връзка с добавяне или премахване на елементи от DOM, ще трябва да извикате метода за опресняване по следния начин:

  1. $ ( '[data-spy="scroll"]' ). всяка ( функция () {
  2. var $spy = $ ( това ). scrollspy ( 'refresh' )
  3. });

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-offset="".

Име Тип по подразбиране описание
изместване номер 10 Пиксели за изместване отгоре при изчисляване на позицията на превъртане.

събития

Събитие Описание
активирате Това събитие се задейства всеки път, когато нов елемент се активира от scrollspy.

Примерни раздели

Добавете бърза, динамична функционалност на раздели за преход през панели с локално съдържание, дори чрез падащи менюта.

Суров деним, вероятно не сте чували за тях дънкови шорти Остин. Nesciunt tofu stumptown aliqua, ретро синт майстор прочистване. Мустаци cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby пуловер eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum 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.


Използване

Активиране на раздели с възможност за разделяне чрез JavaScript (всеки раздел трябва да се активира индивидуално):

  1. $ ( '#myTab a' ). щракнете върху ( функция ( e ) {
  2. д . предотврати по подразбиране ();
  3. $ ( това ). раздел ( 'покажи' );
  4. })

Можете да активирате отделни раздели по няколко начина:

  1. $ ( '#myTab a[href="#profile"]' ). раздел ( 'покажи' ); // Изберете раздел по име
  2. $ ( '#myTab a:first' ). раздел ( 'покажи' ); // Изберете първия раздел
  3. $ ( '#myTab a:last' ). раздел ( 'покажи' ); // Изберете последния раздел
  4. $ ( '#myTab li:eq(2) a' ). раздел ( 'покажи' ); // Изберете трети раздел (0-индексиран)

Маркиране

Можете да активирате навигация в раздел или хапче, без да пишете JavaScript, като просто посочите data-toggle="tab"или data-toggle="pill"върху елемент. Добавянето на класове navи nav-tabsкъм раздела ulще приложи стила на раздела Bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Начало </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Профил </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Съобщения </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Настройки </a></li>
  6. </ul>

Методи

$().tab

Активира разделен елемент и контейнер със съдържание. Разделът трябва да има или , data-targetили , hrefнасочен към контейнерен възел в DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  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 = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <скрипт>
  16. $ ( функция () {
  17. $ ( '#myTab a:last' ). раздел ( 'покажи' );
  18. })
  19. </script>

събития

Събитие Описание
шоу Това събитие се задейства при показване на раздела, но преди новият раздел да бъде показан. Използвайте event.targetи event.relatedTarget, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
показано Това събитие се задейства при показване на раздели, след като даден раздел е бил показан. Използвайте event.targetи event.relatedTarget, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'показан' , функция ( e ) {
  2. д . цел // активиран раздел
  3. д . relatedTarget // предишен раздел
  4. })

Примери

Вдъхновен от отличния плъгин jQuery.tipsy, написан от Jason Frame; Подсказките са актуализирана версия, която не разчита на изображения, използва CSS3 за анимации и атрибути на данни за локално съхранение на заглавия.

От съображения за производителност подсказката и изскачащият API за данни са включени, което означава, че трябва да ги инициализирате сами .

Задръжте курсора на мишката над връзките по-долу, за да видите подсказки:

Тесни панталони следващо ниво keffiyeh вероятно не сте чували за тях. Фото кабина брада необработен деним висок печат веган чанта stumptown. Сейтан от фермата до масата, 8-битовото американско облекло на mcsweeney's fixie устойчива киноа има винил шамбре на Тери Ричардсън. Beard stumptown, cardigans banh mi lomo thundercats. Тофу биодизел уилямсбърг марфа, четири локо mcsweeney's cleanse vegan chambray. Наистина ироничен занаятчия каквото и да е keytar , scenester от ферма до маса banksy Austin twitter handle freegan cred raw denim single-origin coffee virusal.

Четири посоки

Подсказки в групите за въвеждане

Когато използвате подсказки и изскачащи елементи с групите за въвеждане на Bootstrap, ще трябва да зададете опцията container(документирана по-долу), за да избегнете нежелани странични ефекти.


Използване

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

  1. $ ( '#example' ). подсказка ( опции )

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-animation="".

Име Тип по подразбиране описание
анимация булево вярно приложете css избледняващ преход към подсказката
html булево невярно Вмъкнете html в подсказката. Ако е невярно, textметодът на jquery ще се използва за вмъкване на съдържание в dom. Използвайте текст, ако се притеснявате от XSS атаки.
поставяне низ | функция 'Горна част' как да позиционирате подсказката - горе | дъно | наляво | точно
селектор низ невярно Ако е предоставен селектор, обектите с подсказки ще бъдат делегирани на посочените цели.
заглавие низ | функция '' стойност на заглавието по подразбиране, ако тагът `title` не присъства
спусък низ "ховър фокус" как се задейства подсказка - щракнете | кръжи | фокус | ръководство. Обърнете внимание, че регистрационните букви предават множество тригери, разделени с интервали, типове тригери.
забавяне номер | обект 0

забавяне на показването и скриването на подсказката (ms) - не се отнася за тип ръчно задействане

Ако е предоставен номер, забавянето се прилага и за скриване/показване

Структурата на обекта е:delay: { show: 500, hide: 100 }

контейнер низ | невярно невярно

Добавя подсказката към конкретен елементcontainer: 'body'

Горе главата! Опциите за отделни подсказки могат алтернативно да бъдат зададени чрез използването на атрибути на данни.

Маркиране

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > задръжте курсора на мишката над мен </a>

Методи

$().tooltip(опции)

Прикрепя манипулатор на подсказка към колекция от елементи.

.tooltip('покажи')

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

  1. $ ( '#елемент' ). подсказка ( 'покажи' )

.tooltip('скрий')

Скрива подсказка на елемент.

  1. $ ( '#елемент' ). подсказка ( 'скрий' )

.tooltip('превключване')

Превключва подсказката на елемент.

  1. $ ( '#елемент' ). подсказка ( 'превключване' )

.tooltip('destroy')

Скрива и унищожава подсказката на елемент.

  1. $ ( '#елемент' ). подсказка ( 'унищожи' )

Примери

Добавете малки наслагвания на съдържание, като тези на iPad, към всеки елемент за съхраняване на вторична информация. Задръжте курсора на мишката над бутона, за да активирате изскачащия прозорец. Изисква да бъде включена подсказка .

Статично изскачане

Налични са четири опции: подравнени отгоре, отдясно, отдолу и отляво.

Popover горнище

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.

Popover дъно

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.

Не се показва маркиране, тъй като изскачащите екрани се генерират от JavaScript и съдържание в dataатрибут.

Демо на живо

Четири посоки


Използване

Активиране на изскачащи прозорци чрез JavaScript:

  1. $ ( '#example' ). popover ( опции )

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-animation="".

Име Тип по подразбиране описание
анимация булево вярно приложете css избледняващ преход към подсказката
html булево невярно Вмъкнете html в изскачащия прозорец. Ако е невярно, textметодът на jquery ще се изпол��ва за вмъкване на съдържание в dom. Използвайте текст, ако се притеснявате от XSS атаки.
поставяне низ | функция "точно" как да позиционирате popover - горе | дъно | наляво | точно
селектор низ невярно ако е предоставен селектор, обектите с подсказки ще бъдат делегирани на посочените цели
спусък низ 'клик' как се задейства popover - щракнете | кръжи | фокус | ръководство
заглавие низ | функция '' стойност на заглавието по подразбиране, ако атрибутът `title` не присъства
съдържание низ | функция '' стойност на съдържанието по подразбиране, ако атрибутът `data-content` не присъства
забавяне номер | обект 0

забавяне при показване и скриване на popover (ms) - не се отнася за тип ръчно задействане

Ако е предоставен номер, забавянето се прилага и за скриване/показване

Структурата на обекта е:delay: { show: 500, hide: 100 }

контейнер низ | невярно невярно

Добавя изскачащия прозорец към конкретен елементcontainer: 'body'

Горе главата! Опциите за отделни изскачащи екрани могат алтернативно да бъдат определени чрез използването на атрибути на данни.

Маркиране

От съображения за производителност, подсказката и Popover data-apis са включени. Ако искате да ги използвате, просто посочете опция за избор.

Методи

$().popover(опции)

Инициализира изскачащи прозорци за колекция от елементи.

.popover('покажи')

Разкрива изскачащ прозорец на елементите.

  1. $ ( '#елемент' ). popover ( 'покажи' )

.popover('скрий')

Скрива изскачащ прозорец на елементи.

  1. $ ( '#елемент' ). popover ( 'скрий' )

.popover('превключване')

Превключва изскачащ прозорец на елементи.

  1. $ ( '#елемент' ). popover ( 'превключване' )

.popover('унищожи')

Скрива и унищожава popover на елемент.

  1. $ ( '#елемент' ). 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:

  1. $ ( ".alert" ). предупреждение ()

Маркиране

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

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

Методи

$().alert()

Обгръща всички сигнали с близка функционалност. За да анимирате вашите сигнали, когато са затворени, уверете се, че към тях вече е приложен клас .fadeи ..in

.alert('close')

Затваря предупреждение.

  1. $ ( ".alert" ). предупреждение ( 'близо' )

събития

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

Събитие Описание
близо Това събитие се задейства веднага, когато closeсе извика методът на екземпляра.
затворен Това събитие се задейства, когато предупреждението е затворено (ще изчака CSS преходите да завършат).
  1. $ ( '#my-alert' ). свързване ( 'затворено' , функция () {
  2. // направи нещо…
  3. })

Примерни употреби

Правете повече с бутоните. Състояния на бутоните за управление или създаване на групи от бутони за повече компоненти като ленти с инструменти.

Държавен

Добавете data-loading-text="Loading...", за да използвате състояние на зареждане на бутон.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Състояние на зареждане </button>

Единичен превключвател

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

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Единичен превключвател </button>

Квадратче за отметка

Добавете data-toggle="buttons-checkbox"за превключване на стила на полето за отметка в btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Ляво </button>
  3. <button type = "button" class = "btn btn-primary" > Среден </button>
  4. <button type = "button" class = "btn btn-primary" > Вдясно </button>
  5. </div>

Радио

Добавете data-toggle="buttons-radio"за превключване на радио стилове в btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Ляво </button>
  3. <button type = "button" class = "btn btn-primary" > Среден </button>
  4. <button type = "button" class = "btn btn-primary" > Вдясно </button>
  5. </div>

Използване

Активиране на бутони чрез JavaScript:

  1. $ ( '.nav-tabs' ). бутон ()

Маркиране

Атрибутите на данните са неразделна част от приставката за бутони. Вижте примерния код по-долу за различните типове маркиране.

Настроики

Нито един

Методи

$().button('превключване')

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

Горе главата! Можете да активирате автоматично превключване на бутон, като използвате data-toggleатрибута.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('зареждане')

Задава състоянието на бутона на зареждане - деактивира бутона и разменя текста на текст за зареждане. Текстът за зареждане трябва да бъде дефиниран в елемента бутон с помощта на атрибута data data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>
Горе главата! Firefox поддържа деактивирано състояние при зареждания на страници . Заобиколно решение за това е да използвате autocomplete="off".

$().button('reset')

Нулира състоянието на бутона - заменя текста с оригиналния текст.

$().button(низ)

Нулира състоянието на бутона - сменя текста към произволно определено от данните състояние на текст.

  1. <button type = "button" class = "btn" data-complete-text = "finished!" > ... </button>
  2. <скрипт>
  3. $ ( '.btn' ). бутон ( „завършен“ )
  4. </script>

относно

Вземете основни стилове и гъвкава поддръжка за сгъваеми компоненти като акордеони и навигация.

* Изисква приставката Transitions да бъде включена.

Пример за акордеон

Използвайки плъгина за свиване, създадохме проста джаджа в стил акордеон:

Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.
Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.
Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Сгъваем групов елемент #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "collapse-body collapse in" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur клише...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Сгъваем групов елемент #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "collapse body-accordion" >
  21. <div class = "accordion-inner" >
  22. Anim pariatur клише...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Можете също да използвате приставката без маркирането на акордеон. Направете бутон, който превключва разгъването и свиването на друг елемент.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. прост сгъваем
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Използване

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

Просто добавете data-toggle="collapse"и data-targetкъм елемент, за да присвоите автоматично управление на сгъваем елемент. Атрибутът data-targetприема css селектор, към който да се приложи свиването. Не забравяйте да добавите класа collapseкъм сгъваемия елемент. Ако искате да е отворен по подразбиране, добавете допълнителния клас in.

За да добавите подобно на акордеон групово управление към сгъваема контрола, добавете атрибута data data-parent="#selector". Обърнете се към демонстрацията, за да видите това в действие.

Чрез JavaScript

Активирайте ръчно с:

  1. $ ( ".collapse" ). свиване ()

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-parent="".

Име Тип по подразбиране описание
родител селектор невярно Ако селекторът, тогава всички сгъваеми елементи под посочения родител ще бъдат затворени, когато този сгъваем елемент се покаже. (подобно на традиционното поведение на акордеон)
превключвам булево вярно Превключва сгъваемия елемент при извикване

Методи

.collapse(опции)

Активира вашето съдържание като сгъваем елемент. Приема опции по избор object.

  1. $ ( '#myCollapsible' ). свиване ({
  2. превключване : невярно
  3. })

.collapse('превключване')

Превключва сгъваем елемент на показан или скрит.

.collapse('покажи')

Показва сгъваем елемент.

.collapse('скрий')

Скрива сгъваем елемент.

събития

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

Събитие Описание
шоу Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано Това събитие се задейства, когато свит елемент е направен видим за потребителя (ще изчака завършването на css преходите).
Крия Това събитие се задейства веднага след hideизвикване на метода.
скрит Това събитие се задейства, когато свит елемент е бил скрит от потребителя (ще изчака CSS преходите да завършат).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // направи нещо…
  3. })

Пример

Основен, лесно разширим плъгин за бързо създаване на елегантни текстови надписи с всякаква форма на въвеждане на текст.

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

Ще искате да зададете autocomplete="off"да предотвратите показването на менютата на браузъра по подразбиране над падащото меню Bootstrap typeahead.


Използване

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

Добавете атрибути на данни, за да регистрирате елемент с функция за изпреварване, както е показано в примера по-горе.

Чрез JavaScript

Ръчно извикване на typeahead с:

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

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-source="".

Име Тип по подразбиране описание
източник масив, функция [ ] Източникът на данни, към който да се прави заявка. Може да бъде масив от низове или функция. На функцията се предават два аргумента, queryстойността в полето за въвеждане и processобратното извикване. Функцията може да се използва синхронно чрез връщане на източника на данни директно или асинхронно чрез processединствения аргумент на обратното извикване.
елементи номер 8 Максималният брой елементи за показване в падащото меню.
minLength номер 1 Минималната дължина на знаците, необходима преди задействане на предложения за автоматично довършване
съвпадение функция нечувствителен към регистър Методът, използван за определяне дали дадена заявка съответства на елемент. Приема един аргумент, itemспрямо който да се тества заявката. Достъп до текущата заявка с this.query. Връща булево значение true, ако заявката е съвпадение.
сортировач функция точно съвпадение, малки и големи
букви, малки и
големи букви
Метод, използван за сортиране на резултатите от автоматичното довършване. Приема един аргумент itemsи има обхвата на екземпляра с предварителен тип. Посочете текущата заявка с this.query.
актуализатор функция връща избрания елемент Методът, използван за връщане на избрания елемент. Приема един единствен аргумент, itemи има обхвата на екземпляра typeahead.
маркер функция подчертава всички съвпадения по подразбиране Метод, използван за подчертаване на резултатите от автоматичното довършване. Приема един аргумент itemи има обхвата на екземпляра с предварителен тип. Трябва да върне html.

Методи

.typeahead(опции)

Инициализира въвеждане с предварително въвеждане.

Пример

Поднавигацията вляво е демонстрация на живо на приставката за афикс.


Използване

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

За да добавите лесно поведение на афикс към всеки елемент, просто добавете data-spy="affix"към елемента, който искате да шпионирате. След това използвайте отмествания, за да определите кога да включите и изключите фиксирането на даден елемент.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Горе главата! Трябва да управлявате позицията на фиксиран елемент и поведението на неговия непосредствен родител. Позицията се контролира от affix, affix-topи affix-bottom. Не забравяйте да проверите за потенциално свит родител, когато афиксът се включи, тъй като премахва съдържанието от нормалния поток на страницата.

Чрез JavaScript

Извикайте приставката за афикс чрез JavaScript:

  1. $ ( '#navbar' ). афикс ()

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-offset-top="200".

Име Тип по подразбиране описание
изместване номер | функция | обект 10 Пиксели за изместване от екрана при изчисляване на позицията на превъртане. Ако е предоставено едно число, отместването ще се приложи както в горната, така и в лявата посока. За да слушате за една посока или множество уникални отмествания, просто предоставете обект offset: { x: 10 }. Използвайте функция, когато трябва динамично да предоставите отместване (полезно за някои адаптивни дизайни).