Javascript за Bootstrap

Оживувајте ги компонентите на Bootstrap - сега со 12 прилагодени приклучоци за jQuery .

Модали

Рационализиран, но флексибилен, го прифаќа традиционалниот модален приклучок за Javascript со само минималната потребна функционалност и паметни стандардни поставки.

Паѓања

Додајте паѓачки менија на речиси сè во Bootstrap со овој едноставен приклучок. Bootstrap вклучува целосна поддршка од паѓачкото мени во лентата за навигација, табовите и таблетите.

Scrollspy

Користете scrollspy за автоматско ажурирање на врските во лентата за навигација за да се прикаже моменталната активна врска врз основа на позицијата на лизгање.

Јазичиња што се префрлаат

Користете го овој приклучок за да ги направите јазичињата и апчињата покорисни со тоа што ќе им дозволите да се префрлаат низ панелите со табли со локална содржина.

Совети за алатки

Ново гледиште за приклучокот jQuery Tipsy, Tooltips не се потпираат на слики - тие користат CSS3 за анимации и атрибути на податоци за локално складирање на наслови.

поповери *

Додајте мали преклопувања на содржината, како оние на iPad, на кој било елемент за сместување секундарни информации.

* Потребно е да бидат вклучени совети за алатки

Пораки за предупредување

Приклучокот за предупредување е мала класа за додавање блиска функционалност на предупредувањата.

Копчиња

Направете повеќе со копчињата. Контролирајте ги состојбите на копчињата или креирајте групи на копчиња за повеќе компоненти како што се алатниците.

Колапс

Добијте основни стилови и флексибилна поддршка за склопливи компоненти како хармоника и навигација.

Рингишпил

Создадете вртење од која било содржина што сакате да ја обезбедите интерактивна слајд-шоу на содржината.

Тип напред

Основен, лесно проширен приклучок за брзо креирање елегантни печатени глави со внесување текст во која било форма.

Транзиции *

За едноставни ефекти на транзиција, вклучете го bootstrap-transition.js еднаш за да се лизнете во модали или да се избледат предупредувањата.

* Потребно е за анимација во приклучоците

Главите горе! Сите додатоци за Javascript бараат најнова верзија на jQuery.

За модали

Рационализиран, но флексибилен, го прифаќа традиционалниот модален приклучок за Javascript со само минималната потребна функционалност и паметни стандардни поставки.

Преземете ја датотеката

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

Подолу е статички прикажан модал.

Демо во живо

Вклучете модал преку Javascript со кликнување на копчето подолу. Ќе се лизне надолу и ќе избледи од врвот на страницата.

Стартувајте демо модал

Користење на bootstrap-modal

Повикајте го модалот преку Javascript:

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

Опции

Име тип стандардно опис
позадина булови вистина Вклучува елемент на модална заднина. Алтернативно, наведете staticзаднина која не го затвора модалот при кликнување.
тастатура булови вистина Го затвора модалот кога ќе се притисне копчето за бегство
покажуваат булови вистина Го прикажува модалот кога е иницијализиран.

Означување

Можете лесно да активирате модали на вашата страница без да треба да напишете ниту една линија Javascript. Само поставете data-toggle="modal"го елементот на контролорот со data-target="#foo"или href="#foo"што одговара на ID на модален елемент, и кога ќе се кликне, тој ќе го стартува вашиот модал.

Исто така, за да додадете опции на вашиот модален примерок, само вклучете ги како дополнителни атрибути на податоци или на контролниот елемент или на самата модална ознака.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Стартувај модал </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Модално заглавие </h3>
  5. </div>
  6. <div class = „модално тело“ >
  7. <p> Едно убаво тело... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Затвори </a>
  11. <a href = "#" class = "btn btn-primary" > Зачувај промени </a>
  12. </div>
  13. </div>
Главите горе! Ако сакате вашиот модал да анимира внатре и надвор, само додајте .fadeкласа на .modalелементот (погледнете во демо за да го видите ова во акција) и вклучете bootstrap-transition.js.

Методи

.modal(опции)

Ја активира вашата содржина како модална. Прифаќа изборни опции object.

  1. $ ( „#myModal“ ). модален ({
  2. тастатура : неточно
  3. })

.modal('toggle')

Рачно менува модал.

  1. $ ( „#myModal“ ). модален ( „префрли“ )

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

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

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

.modal ('скриј')

Рачно крие модал.

  1. $ ( „#myModal“ ). модален ( „скриј“ )

Настани

Модалната класа на Bootstrap изложува неколку настани за приклучување во модалната функционалност.

Настан Опис
покажуваат Овој настан се вклучува веднаш кога showќе се повика методот на пример.
прикажани Овој настан се активира кога модалот е видлив за корисникот (ќе чека да се завршат транзициите на css).
крие Овој настан се активира веднаш кога hideќе се повика методот на пример.
скриени Овој настан се активира кога модалот ќе заврши со криење од корисникот (ќе чека да се завршат транзициите на css).
  1. $ ( „#myModal“ ). на ( 'скриено' , функција () {
  2. // направи нешто…
  3. })

Приклучокот ScrollSpy е за автоматско ажурирање на навигациските цели врз основа на позицијата на лизгање.

Преземете ја датотеката

Пример лента за навигација со scrollspy

Скролувајте ја областа подолу и гледајте го ажурирањето на навигацијата. Ќе бидат означени и паѓачките подставки. Пробај!

@масти

Рекламни хеланки keytar, бранч id art party dolor labore. Pitchfork yr enim lo-fi пред да го распродадат qui. Права за велосипеди од фарма до маса на Tumblr без разлика. Кардиган аним кефије карлес. Фото кабина на Velit seitan mcsweeney 3 wolf moon irure. Козби џемпер lomo џин шорцеви, Вилијамсбург hoodie миним qui веројатно не сте слушнале за нив et cardigan trust fund culpa биодизел Вес Андерсон естетски. Нихил истетовиран accusamus, cred иронија биодизел keffiyeh занаетчија ullamco consequat.

@mdo

Скејтборд со мустаќи Veniam marfa, адиписицирана фугиатска вила брада. Freegan брада aliqua cupidatat веро на Mcsweeney. Купидатат четири локо ниси, еа хелветица нула карлес. Истетовиран камион за храна со џемпер Козби, квис нон фриган винил на Mcsweeney. Ло-фи Вес Андерсон +1 сарториал. Карлес неестетско вежбање quis gentrify. Бруклин адаписинг занаетчиско пиво заменик keytar deserunt.

еден

Occaecat commodo aliqua delectus. Fap craft пиво deserunt скејтборд ea. Ломо правата за велосипеди адиписицинг банх ми, велит еа сонт следното ниво локаворно кафе со едно потекло во magna veniam. Винил со висок животен век, ехо парк е последица на quis aliquip banh mi pitchfork. Vero VHS е адиписциинг. Направете ја минимум чантата за гласник DIY. Кредит екс во, одржлив производ консултант фанни пакет 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 блог, culpa messenger bag marfa што и да е камион за храна за храна. Sapiente synth id assumenda. Locavore sed helvetica клише иронија, громови веројатно не сте слушнале за нив, како последица на дуксери без глутен lo-fi fap aliquip. Labore elit placeat пред да се распродадат, Тери Ричардсон proident brunch nesciunt quis cosby џемпер pariatur keffiyeh ut helvetica artisan. Кардиган занаетчиски пиво сејтан готов велит. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.


Користење на bootstrap-scrollspy.js

Повикајте го scrollspy преку Javascript:

  1. $ ( „#navbar“ ). scrollspy ()

Означување

За лесно додавање на однесувањето на лизгачот во навигацијата на горната лента, само додајте data-spy="scroll"го елементот што сакате да го шпионирате (најчесто ова е телото).

  1. <body data-spy = "scroll" > ... </body>
Главите горе! Врските на Navbar мора да имаат решливи цели за идентификација. На пример, <a href="#home">home</a>мора да одговара на нешто во домот како <div id="home"></div>.

Методи

.scrollspy ('освежи')

Кога користите scrollspy во врска со додавање или отстранување на елементи од DOM, ќе треба да го повикате методот на освежување вака:

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

Опции

Име тип стандардно опис
офсет број 10 Пиксели за поместување од врвот при пресметување на позицијата на лизгање.

Настани

Настан Опис
активирај Овој настан се вклучува секогаш кога ќе се активира нова ставка од скролспионот.

Овој приклучок додава брза, динамична функционалност на јазичиња и таблети за транзиција низ локална содржина.

Преземете ја датотеката

Пример јазичиња

Кликнете на јазичињата подолу за да се префрлате помеѓу скриените окна, дури и преку паѓачкото мени.

Сиров тексас веројатно не сте слушнале за нив џин шорцеви Остин. Nesciunt тофу stumptown aliqua, ретро-синтетик мастер чистење. Мустаќи клише темпор, Вилијамсбург карлес вегански хелветица. Reprehenderit месар ретро keffiyeh сонфаќач синт. Козби џемпер eu banh mi, qui irure Тери Ричардсон екс лигњи. Поставете го вашиот телефон за iPhone. Seitan aliquip quis cardigan американска облека, месар 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.


Користење на bootstrap-tab.js

Овозможете јазичиња со јазичиња преку Javascript (секоја картичка треба да се активира поединечно):

  1. $ ( '#myTab a' ). кликнете ( функција ( д ) {
  2. д . preventDefault ();
  3. $ ( ова ). табот ( 'покажи' );
  4. })

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

  1. $ ( '#myTab a[href="#профил"]' ). табот ( 'покажи' ); // Изберете јазиче по име
  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ќе го примени стилот на јазичето за подигање.

  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>

Методи

$().таб

Активира елемент на картичката и контејнер за содржина. Јазичето треба да има или 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 = „таб-содржина“ >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "пораки" > ... </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"]' ). на ( 'прикажани' , функција ( e ) {
  2. д . цел // активиран таб
  3. д . relatedTarget // претходен таб
  4. })

За совети за алатки

Инспириран од одличниот приклучок jQuery.tipsy напишан од Џејсон Фрејм; Советите за алатки се ажурирана верзија, која не се потпира на слики, користи css3 за анимации и атрибути на податоци за локално складирање на наслови.

Преземете ја датотеката

Пример за употреба на совети за алатки

Лебдете над линковите подолу за да ги видите советите за алатки:

Тесни панталони од следното ниво keffiyeh веројатно не сте слушнале за нив. Фото кабина брада суров тексас летерпрес вегански гласник торба stumptown. Сејтанот од фарма до маса, 8-битната американска облека за одржлива киноа на Mcsweeney's fixie има винилна комора од Тери Ричардсон. Брада трупец, кардигани бан ми ломо громови. Тофу биодизел Вилијамсбург марфа, четири loko mcsweeney's cleanse vegan chambray. Навистина ироничен занаетчија без разлика на тастатурата, сценска сцена од фарма до маса, банкарскиот твитер Остин се справува со фриган кред суров тексас кафе со едно потекло вирално.


Користење на bootstrap-tooltip.js

Активирајте го советот за алатка преку Javascript:

  1. $ ( „#пример“ ). совет за алатки ( опции )

Опции

Име тип стандардно опис
анимација булови вистина примени транзиција на css fade на советот за алатки
поставување стринг|функција 'врв' како да го поставите советот за алатки - врвот | дното | лево | право
селектор низа лажни Доколку е обезбеден избирач, објектите за совети за алатки ќе бидат делегирани на наведените цели.
Наслов низа | функција '' стандардна вредност на насловот ако ознаката `title` не е присутна
чкрапало низа „лебдиш“ како се активира советот за алатки - лебди | фокус | прирачник
одложување број | објект 0

одложување на прикажување и криење на советот за алатка (ms) - не важи за рачниот тип на активирање

Ако е доставен број, одложувањето се применува и на двете сокриј/прикажи

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

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

Означување

Од причини за изведба, се избираат „Tooltip“ и „Popover data-apis“. Доколку сакате да ги користите, само наведете опција за избирање.

  1. <a href = "#" rel = "tooltip" title = "прв совет за алатка" > лебди над мене </a>

Методи

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

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

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

Го открива советот за алатка на елементот.

  1. $ ( „#елемент“ ). совет за алатка ( „покажи“ )

.tooltip('скриј')

Го крие советот за алатка за елемент.

  1. $ ( „#елемент“ ). совет за алатка ( „скриј“ )

.tooltip('toggle')

Го исклучува советот за алатка на елементот.

  1. $ ( „#елемент“ ). совет за алатки ( „прекинувај“ )

За поповерите

Додајте мали преклопувања на содржината, како оние на iPad, на кој било елемент за сместување секундарни информации.

* Потребно е да се вклучи совет за алатки

Преземете ја датотеката

Пример лебди поповер

Лебдите над копчето за да го активирате поповерот.


Користење на bootstrap-popover.js

Овозможете поповери преку Javascript:

  1. $ ( „#пример“ ). поповер ( опции )

Опции

Име тип стандардно опис
анимација булови вистина примени транзиција на css fade на советот за алатки
поставување стринг|функција 'право' како да се позиционира поповер - топ | дното | лево | право
селектор низа лажни ако е обезбеден избирач, објектите за совети за алатки ќе бидат делегирани на наведените цели
чкрапало низа „лебдиш“ како се активира советот за алатки - лебди | фокус | прирачник
Наслов низа | функција '' стандардна вредност на насловот ако атрибутот „title“ не е присутен
содржина низа | функција '' стандардната вредност на содржината ако атрибутот „податоци-содржина“ не е присутен
одложување број | објект 0

одложување на прикажување и криење на попов��р (ms) - не важи за рачниот тип на активирач

Ако е доставен број, одложувањето се применува и на двете сокриј/прикажи

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

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

Означување

Од причини за изведба, се избираат „Tooltip“ и „Popover data-apis“. Доколку сакате да ги користите, само наведете опција за избирање.

Методи

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

Иницијализира поповери за колекција на елементи.

.popover ('шоу')

Открива елементи поповер.

  1. $ ( „#елемент“ ). поповер ( „шоу“ )

.popover ('скриј')

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

  1. $ ( „#елемент“ ). поповер ( „скриј“ )

.popover ('toggle')

Вклучува поповер на елементи.

  1. $ ( „#елемент“ ). поповер ( „префрлање“ )

За предупредувањата

Приклучокот за предупредување е мала класа за додавање блиска функционалност на предупредувањата.

Преземи

Примери за предупредувања

Приклучокот за предупредувања работи на редовни пораки за предупредување и блокира пораки.

Свето гуакамоле! Најдобро проверете се, не изгледате премногу добро.

О, брзо! Добивте грешка!

Променете го ова и она и обидете се повторно. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Преземете ја оваа акција Или направете го ова


Користење на bootstrap-alert.js

Овозможете отфрлање на предупредување преку Javascript:

  1. $ ( ".alert" ). алармирање ()

Означување

Само додадете data-dismiss="alert"го копчето за затворање за автоматски да дадете функционалност за затворање на предупредување.

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

Методи

$().alert()

Ги обвива сите предупредувања со затворена функционалност. За да може вашите предупредувања да се анимираат кога се затворени, проверете дали ја имаат веќе применето класата и на нив .fade..in

.alert ('затвори')

Затвора предупредување.

  1. $ ( ".alert" ). предупредување ( „затвори“ )

Настани

Класата за предупредување на Bootstrap изложува неколку настани за приклучување на функционалноста за предупредување.

Настан Опис
затвори Овој настан се вклучува веднаш кога closeќе се повика методот на пример.
затворена Овој настан се активира кога предупредувањето е затворено (ќе чека да се завршат транзициите на css).
  1. $ ( '#my-alert' ). bind ( 'затворено' , функција () {
  2. // направи нешто…
  3. })

За

Направете повеќе со копчињата. Контролирајте ги состојбите на копчињата или креирајте групи на копчиња за повеќе компоненти како што се алатниците.

Преземете ја датотеката

Примери за употреба

Користете го приклучокот за копчиња за состојби и менувачи.

Државен
Единечно преклопување
Поле за избор
Радио

Користење на bootstrap-button.js

Овозможи копчиња преку Javascript:

  1. $ ( '.nav-tabs' ). копче ()

Означување

Атрибутите на податоци се составен дел на приклучокот за копчиња. Проверете го примерот на кодот подолу за различните типови на обележување.

  1. <!-- Додајте data-toggle="button" за да активирате преклопување на едно копче -->
  2. <button class = "btn" data-toggle = "button" > Едно вклучување </button>
  3.  
  4. <!-- Додај data-toggle="buttons-checkbox" за менување стил на полето за избор на btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Лево </button>
  7. <button class = "btn" > Средно </button>
  8. <button class = "btn" > Десно </button>
  9. </div>
  10.  
  11. <!-- Додај data-toggle="buttons-radio" за менување стил на радио на btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Лево </button>
  14. <button class = "btn" > Средно </button>
  15. <button class = "btn" > Десно </button>
  16. </div>

Методи

$().button('toggle')

Ја вклучува состојбата на туркање. На копчето му дава изглед дека е активирано.

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

$().button('се вчитува')

Ја поставува состојбата на копчето на вчитување - го оневозможува копчето и го заменува текстот со текстот што се вчитува. Вчитувањето на текстот треба да се дефинира на елементот на копчето користејќи го атрибутот податоци data-loading-text.

  1. <button class = "btn" data-loading-text = "вчитувам работи..." > ... </button>
Главите горе! Firefox ја задржува оневозможената состојба при вчитување на страници . Резолуција за ова е да се користи autocomplete="off".

$().button('ресетирање')

Ресетира состојбата на копчето - го заменува текстот со оригиналниот текст.

$().копче(низа)

Ресетира состојбата на копчето - го заменува текстот во која било состојба на текст дефинирана со податоци.

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

За

Добијте основни стилови и флексибилна поддршка за склопливи компоненти како хармоника и навигација.

Преземете ја датотеката

* Потребно е да се вклучи приклучокот Transitions.

Пример хармоника

Користејќи го приклучокот за колапс, изградивме едноставен додаток во стилот на хармоника:

Аним париатур клише репрехендерит, enim eiusmod висок живот accusamus Тери Ричардсон и лигњи. 3 Wolf Moon officia aute, non cupidatat скејтборд долор бранч. Камион за храна quinoa nesciunt laborum eiusmod. Бранч 3 волк месечина темпор, sunt aliqua стави птица на неа лигњи кафе со едно потекло nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, занаетчиско пиво лаборе Вес Андерсон cred nesciunt sapiente ea proident. Рекламни вегански месар заменик ломо. Хеланки occaecat занаетчиски пиво од фарма до маса, суров тексас естетски синтетички нешта, веројатно не сте слушнале за нив accusamus labore одржлив VHS.
Аним париатур клише репрехендерит, enim eiusmod висок живот accusamus Тери Ричардсон и лигњи. 3 Wolf Moon officia aute, non cupidatat скејтборд долор бранч. Камион за храна quinoa nesciunt laborum eiusmod. Бранч 3 волк месечина темпор, sunt aliqua стави птица на неа лигњи кафе со едно потекло nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, занаетчиско пиво лаборе Вес Андерсон cred nesciunt sapiente ea proident. Рекламни вегански месар заменик ломо. Хеланки occaecat занаетчиски пиво од фарма до маса, суров тексас естетски синтетички нешта, веројатно не сте слушнале за нив accusamus labore одржлив VHS.
Аним париатур клише репрехендерит, enim eiusmod висок живот accusamus Тери Ричардсон и лигњи. 3 Wolf Moon officia aute, non cupidatat скејтборд долор бранч. Камион за храна quinoa nesciunt laborum eiusmod. Бранч 3 волк месечина темпор, sunt aliqua стави птица на неа лигњи кафе со едно потекло nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, занаетчиско пиво лаборе Вес Андерсон cred nesciunt sapiente ea proident. Рекламни вегански месар заменик ломо. Хеланки occaecat занаетчиски пиво од фарма до маса, суров тексас естетски синтетички нешта, веројатно не сте слушнале за нив accusamus labore одржлив VHS.

Користење на bootstrap-collapse.js

Овозможи преку Javascript:

  1. $ ( ".collapse" ). колапс ()

Опции

Име тип стандардно опис
родител селектор лажни Ако избирачот, тогаш сите елементи што се склопуваат под наведениот родител ќе бидат затворени кога ќе се прикаже оваа ставка што може да се склопува. (слично на традиционалното однесување со хармоника)
префрли булови вистина Го исклучува склопувачкиот елемент при повикувањето

Означување

Само додајте data-toggle="collapse"и a data-targetво елемент за автоматски да доделите контрола на елемент што може да се склопува. Атрибутот data-targetприфаќа css избирач за да се примени колапсот. Не заборавајте да ја додадете класата collapseво склопувачкиот елемент. Ако сакате стандардно да се отвори, додадете ја дополнителната класа in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. едноставно склопливо
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Главите горе! За да додадете управување со група налик на хармоника на контрола што се склопува, додајте го атрибутот податоци data-parent="#selector". Погледнете го демото за да го видите ова во акција.

Методи

.collapse(опции)

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

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

.collapse ('toggle')

Вклучува склопувачки елемент на прикажан или скриен.

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

Прикажува склоплив елемент.

.collapse ('скриј')

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

Настани

Класата за колапс на Bootstrap изложува неколку настани за приклучување во функционалноста за колапс.

Настан Опис
покажуваат Овој настан се вклучува веднаш кога showќе се повика методот на пример.
прикажани Овој настан се активира кога елементот за колапс е видлив за корисникот (ќе чека да се завршат транзициите на css).
крие Овој настан се активира веднаш кога hideметодот е повикан.
скриени Овој настан се активира кога елементот за колапс е скриен од корисникот (ќе чека да се завршат транзициите на css).
  1. $ ( '#myCollapsible' ). на ( 'скриено' , функција () {
  2. // направи нешто…
  3. })

За

Основен, лесно проширен приклучок за брзо креирање елегантни печатени глави со внесување текст во која било форма.

Преземете ја датотеката

Пример

Започнете да пишувате во полето подолу за да ги прикажете резултатите од типот.


Користење на bootstrap-typeahead.js

Јавете се на типката преку javascript:

  1. $ ( '.typeahead' ). типкање ()

Опции

Име тип стандардно опис
извор низа [ ] Изворот на податоци за барање.
предмети број 8 Максималниот број на ставки за прикажување во паѓачкото мени.
совпаѓач функција неосетливи на букви Методот што се користи за да се утврди дали барањето се совпаѓа со ставка. Прифаќа еден аргумент itemпротив кој ќе се тестира барањето. Пристапете до тековното барање со this.query. Вратете бул trueако барањето одговара.
сортирач функција точно совпаѓање,
чувствителни на големи букви,
нечувствителни на големи букви
Метод кој се користи за сортирање на резултатите од автоматско комплетирање. Прифаќа еден аргумент itemsи го има опсегот на примерот со печатење. Упатете го тековното барање со this.query.
хајлајтер функција ги истакнува сите стандардни совпаѓања Метод кој се користи за истакнување на резултатите од автоматско комплетирање. Прифаќа еден аргумент itemи го има опсегот на примерот со печатење. Треба да врати html.

Означување

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

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

Методи

.машина (опции)

Иницијализира влез со типка.