JavaScript
Оживувајте ги компонентите на Bootstrap со повеќе од дузина прилагодени приклучоци за jQuery. Лесно вклучете ги сите, или еден по еден.
Оживувајте ги компонентите на Bootstrap со повеќе од дузина прилагодени приклучоци за jQuery. Лесно вклучете ги сите, или еден по еден.
Приклучоците може да се вклучат поединечно (со користење на поединечни *.js
датотеки на Bootstrap), или сите одеднаш (со користење bootstrap.js
или минимизирана bootstrap.min.js
).
И двете bootstrap.js
и bootstrap.min.js
ги содржат сите приклучоци во една датотека. Вклучете само еден.
Некои приклучоци и CSS компоненти зависат од други приклучоци. Ако вклучите додатоци поединечно, проверете дали ги имате овие зависности во документите. Исто така, имајте предвид дека сите приклучоци зависат од jQuery (ова значи дека jQuery мора да биде вклучен пред датотеките за приклучоци). Консултирајте се со насbower.json
за да видите кои верзии на jQuery се поддржани.
Можете да ги користите сите приклучоци за Bootstrap чисто преку API за обележување без да пишувате ниту една линија JavaScript. Ова е првокласно API на Bootstrap и треба да биде вашето прво внимание кога користите приклучок.
Сепак, во некои ситуации може да биде пожелно да се исклучи оваа функционалност. Затоа, ние исто така обезбедуваме можност за оневозможување на атрибутот за податоци API со разврзување на сите настани на именскиот простор на документот со data-api
. Ова изгледа вака:
Алтернативно, за да насочите конкретен приклучок, само вклучете го името на приклучокот како именски простор заедно со именскиот простор за податоци-api вака:
Не користете атрибути на податоци од повеќе приклучоци на истиот елемент. На пример, едно копче не може да има совет за алатка и да вклучи модал. За да го постигнете ова, користете елемент за завиткување.
Ние, исто така, веруваме дека треба да можете да ги користите сите приклучоци за Bootstrap чисто преку JavaScript API. Сите јавни API се единечни, верижни методи и ја враќаат колекцијата по која е постапено.
Сите методи треба да прифатат изборен објект со опции, низа што цели кон одреден метод или ништо (што иницира додаток со стандардно однесување):
Секој додаток исто така го изложува својот необработен конструктор на Constructor
својство: $.fn.popover.Constructor
. Ако сакате да добиете одреден пример на приклучок, преземете го директно од елемент: $('[rel="popover"]').data('popover')
.
Можете да ги промените стандардните поставки за приклучок со менување на Constructor.DEFAULTS
објектот на приклучокот:
Понекогаш е неопходно да се користат приклучоци за Bootstrap со други рамки за интерфејс. Во овие околности, повремено може да се појават судири на именскиот простор. Ако тоа се случи, можете да го повикате .noConflict
приклучокот на кој сакате да ја вратите вредноста.
Bootstrap обезбедува сопствени настани за уникатните дејства на повеќето приклучоци. Општо земено, овие доаѓаат во форма на инфинитив и минато партицип - каде што инфинитивот (пр. show
) се активира на почетокот на настанот, а неговата форма на минато партицип (пр. shown
) се активира при завршување на дејството.
Почнувајќи од 3.0.0, сите настани на Bootstrap се со именски простор.
Сите инфинитивни настани обезбедуваат preventDefault
функционалност. Ова обезбедува можност да се запре извршувањето на дејството пред да започне.
До верзијата на секој од приклучоците за jQuery на Bootstrap може да се пристапи преку VERSION
својството на конструкторот на приклучокот. На пример, за додатокот за совети за алатки:
Приклучоците на Bootstrap не се враќаат особено благодатно кога JavaScript е оневозможен. Ако ви е гајле за корисничкото искуство во овој случај, користете <noscript>
го за да им ја објасните ситуацијата (и како повторно да овозможите JavaScript) на вашите корисници и/или да додадете свои сопствени резервни верзии.
Bootstrap официјално не поддржува JavaScript библиотеки од трета страна, како што се Prototype или jQuery UI. И покрај .noConflict
настаните со именски простор, може да има проблеми со компатибилноста што треба да ги поправите сами.
За едноставни ефекти на транзиција, вклучете transition.js
еднаш заедно со другите JS-датотеки. Ако користите компајлиран (или минификуван) bootstrap.js
, нема потреба да го вклучите ова - веќе е таму.
Transition.js е основен помошник за transitionEnd
настани, како и CSS емулатор за транзиција. Се користи од другите приклучоци за да се провери дали има поддршка за CSS транзиција и да се фатат висечки транзиции.
Транзициите може глобално да се оневозможат со користење на следниов фрагмент од JavaScript, кој мора да дојде откако ќе се вчита transition.js
(или bootstrap.js
или bootstrap.min.js
, во зависност од случајот):
Модалите се рационализирани, но флексибилни, дијалози со минимална потребна функционалност и паметни поставки.
Погрижете се да не отворите модал додека друг е сè уште видлив. Прикажувањето на повеќе од еден модал истовремено бара сопствен код.
Секогаш обидувајте се да го поставите HTML-кодот на модалот на позиција на највисоко ниво во вашиот документ за да избегнете други компоненти да влијаат на изгледот и/или функционалноста на модалот.
Има некои предупредувања во врска со користењето модали на мобилни уреди. Видете ги нашите документи за поддршка на прелистувачот за детали.
Поради тоа како HTML5 ја дефинира својата семантика, autofocus
атрибутот HTML нема ефект во модалите на Bootstrap. За да го постигнете истиот ефект, користете некој прилагоден JavaScript:
Изведен модал со заглавие, тело и збир на дејства во подножјето.
Вклучете модал преку JavaScript со кликнување на копчето подолу. Ќе се лизне надолу и ќе избледи од врвот на страницата.
Бидете сигурни да додадете role="dialog"
и aria-labelledby="..."
, повикувајќи се на модалниот наслов, на .modal
, и role="document"
на .modal-dialog
самиот себе.
Дополнително, можете да дадете опис на вашиот модален дијалог со aria-describedby
на .modal
.
Вградувањето видеа на YouTube во модали бара дополнителен JavaScript не во Bootstrap за автоматско запирање на репродукцијата и многу повеќе. Погледнете ја оваа корисна објава на Stack Overflow за повеќе информации.
Модалите имаат две опционални големини, достапни преку класите на модификатори за да се постават на .modal-dialog
.
За модали кои едноставно се појавуваат наместо да бледнеат за да ги видите, отстранете ја .fade
класата од вашата модална ознака.
За да ги искористите предностите на мрежниот систем Bootstrap во модален, само вгнездувајте .row
се во .modal-body
и потоа користете ги класите на нормалните мрежни системи.
Дали имате еден куп копчиња кои сите го активираат истиот модал, само со малку поинаква содржина? Користете event.relatedTarget
и HTML data-*
атрибути (можеби преку jQuery ) за да ја менувате содржината на модалот во зависност од тоа на кое копче е кликнато. Погледнете ги документите за Модални настани за детали за relatedTarget
,
Модалниот приклучок ја менува вашата скриена содржина на барање, преку атрибути на податоци или JavaScript. Тој, исто така, го додава .modal-open
за <body>
надминување на стандардното однесување на лизгање и генерира a .modal-backdrop
за да обезбеди област за кликнување за отфрлање на прикажаните модали кога се кликнува надвор од модалот.
Активирајте модал без да пишувате JavaScript. Поставете data-toggle="modal"
на елемент на контролорот, како копче, заедно со data-target="#foo"
или href="#foo"
за да насочите конкретен модал за префрлување.
Повикајте модал со id myModal
со една линија JavaScript:
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-backdrop=""
.
Име | тип | стандардно | опис |
---|---|---|---|
позадина | бул или стрингот'static' |
вистина | Вклучува елемент на модална заднина. Алтернативно, наведете static заднина која не го затвора модалот при кликнување. |
тастатура | булови | вистина | Го затвора модалот кога ќе се притисне копчето за бегство |
покажуваат | булови | вистина | Го прикажува модалот кога е иницијализиран. |
Далечински управувач | патека | лажни | Оваа опција е застарена од v3.3.0 и е отстранета во v4. Наместо тоа, препорачуваме да користите шаблони од страна на клиентот или рамка за врзување податоци или сами да го повикате jQuery.load . Ако е обезбедена далечинска URL-адреса, содржината ќе се вчита еднаш преку |
.modal(options)
Ја активира вашата содржина како модална. Прифаќа изборни опции object
.
.modal('toggle')
Рачно менува модал. Се враќа на повикувачот пред модалот навистина да биде прикажан или скриен (т.е. пред да се случи настанот shown.bs.modal
или hidden.bs.modal
).
.modal('show')
Рачно отвора модал. Се враќа кај повикувачот пред всушност да се прикаже модалот (т.е. пред да се shown.bs.modal
случи настанот).
.modal('hide')
Рачно крие модал. Се враќа на повикувачот пред всушност да се скрие модалот (т.е. пред да се hidden.bs.modal
случи настанот).
.modal('handleUpdate')
Повторно го прилагодува позиционирањето на модалот за да се спротивстави на лентата за лизгање во случај да се појави, што би го направило модалниот скок налево.
Потребно е само кога висината на модалот се менува додека е отворена.
Модалната класа на Bootstrap изложува неколку настани за приклучување во модалната функционалност.
Сите модални настани се активираат на самиот модал (т.е. во <div class="modal">
).
Тип на настан | Опис |
---|---|
покажуваат.бс.модална | Овој настан се вклучува веднаш кога show ќе се повика методот на пример. Ако е предизвикано од кликнување, кликнатиот елемент е достапен како relatedTarget својство на настанот. |
прикажани.бс.модални | Овој настан се активира кога модалот е видлив за корисникот (ќе чека да се завршат транзициите на CSS). Ако е предизвикано од кликнување, кликнатиот елемент е достапен како relatedTarget својство на настанот. |
скриј.бс.модална | Овој настан се активира веднаш кога hide ќе се повика методот на пример. |
скриени.бс.модални | Овој настан се активира кога модалот ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS). |
натоварени.бс.модални | Овој настан се активира кога модалот има вчитана содржина користејќи ја remote опцијата. |
Додајте паѓачки менија на речиси сè со овој едноставен приклучок, вклучувајќи ја лентата за навигација, јазичињата и таблетите.
Преку атрибути на податоци или JavaScript, паѓачкиот приклучок ја менува скриената содржина (паѓачкото мени) со префрлање на .open
класата на матичната ставка од списокот.
На мобилните уреди, отворањето на паѓачкото мени додава .dropdown-backdrop
област како допир за затворање на паѓачките менија кога допирате надвор од менито, што е услов за соодветна поддршка за iOS. Ова значи дека префрлувањето од отворено паѓачко мени на друго паѓачко мени бара дополнително допирање на мобилниот.
Забелешка: data-toggle="dropdown"
атрибутот се потпира за затворање на паѓачките менија на ниво на апликација, па затоа е добра идеја секогаш да го користите.
Додајте data-toggle="dropdown"
на врска или копче за да вклучите паѓачко мени.
За да ги задржите URL-адресите непроменети со копчињата за врски, користете го data-target
атрибутот наместо href="#"
.
Повикајте ги паѓачките списоци преку JavaScript:
data-toggle="dropdown"
сè уште се бараБез оглед на тоа дали го повикувате паѓачкото мени преку JavaScript или наместо тоа го користите data-api, data-toggle="dropdown"
секогаш се бара да биде присутен на елементот за активирање на паѓачкото мени.
Никој
$().dropdown('toggle')
Го исклучува паѓачкото мени на дадена лента за навигација или навигација со јазичиња.
Сите паѓачки настани се активираат во .dropdown-menu
родителскиот елемент на.
Сите паѓачки настани имаат relatedTarget
својство, чија вредност е преклопниот елемент за прицврстување.
Тип на настан | Опис |
---|---|
прикажи.бс.паѓачкото мени | Овој настан се вклучува веднаш кога ќе се повика методот на пример за прикажување. |
прикажано.бс.паѓачкото мени | Овој настан се активира кога паѓачкото мени е видливо за корисникот (ќе почека CSS транзициите да се завршат). |
скриј.бс.паѓачкото мени | Овој настан се активира веднаш кога ќе се повика методот на пример за сокривање. |
скриени.бс.паѓачкото мени | Овој настан се активира кога паѓачкото мени ќе заврши со сокривање од корисникот (ќе чека да заврши CSS транзициите). |
Приклучокот 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.
Скејтборд со мустаќи 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.
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.
Врските на Navbar мора да имаат решливи цели за идентификација. На пример, <a href="#home">home</a>
мора да одговара на нешто во DOM како <div id="home"></div>
.
:visible
елементи се игнорираниЦелните елементи кои не се :visible
според jQuery ќе бидат игнорирани и нивните соодветни ставки за навигација никогаш нема да бидат означени.
Без разлика на методот на имплементација, scrollspy бара употреба на position: relative;
елементот што го шпионирате. Во повеќето случаи ова е <body>
. Кога шпионирате елементи освен <body>
, не заборавајте да имате height
сет и overflow-y: scroll;
применет.
За лесно додавање на однесувањето на лизгање во навигацијата на горната лента, додајте data-spy="scroll"
го елементот што сакате да го шпионирате (најчесто ова е <body>
). Потоа додадете го data-target
атрибутот со ID или класа на родителскиот елемент на која било .nav
компонента Bootstrap.
Откако ќе го додадете position: relative;
во вашиот CSS, повикајте го scrollspy преку JavaScript:
.scrollspy('refresh')
Кога користите scrollspy во врска со додавање или отстранување на елементи од DOM, ќе треба да го повикате методот на освежување вака:
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-offset=""
.
Име | тип | стандардно | опис |
---|---|---|---|
офсет | број | 10 | Пиксели за поместување од врвот при пресметување на позицијата на лизгање. |
Тип на настан | Опис |
---|---|
активирај.bs.scrollspy | Овој настан се вклучува секогаш кога ќе се активира нова ставка од скролспионот. |
Додајте брза, динамична функционалност на јазичињата за да преминете низ панелите на локалната содржина, дури и преку паѓачкото мени. Вгнездените картички не се поддржани.
Сиров тексас веројатно не сте слушнале за нив џин шорцеви Остин. 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Овој приклучок ја проширува компонентата за навигација со јазичиња за да додаде области со табли.
Овозможете јазичиња со јазичиња преку JavaScript (секоја картичка треба да се активира поединечно):
Можете да активирате поединечни јазичиња на неколку начини:
Можете да активирате навигација со јазиче или таблети без да пишувате JavaScript со едноставно назначување data-toggle="tab"
или data-toggle="pill"
на елемент. Додавањето на nav
класите nav-tabs
и во јазичето ul
ќе го примени стајлирањето на картичката Bootstrap , додека со додавањето на класите и ќе се примени nav
стилизирање на пилули .nav-pills
За да избледат картичките, додајте .fade
на секоја .tab-pane
. Првиот таб на јазичиња, исто така, мора .in
да ја направи видлива почетната содржина.
$().tab
Активира елемент на картичката и контејнер за содржина. Јазичето треба да има или data-target
или href
таргетирање контејнерски јазол во DOM. Во горните примери, јазичињата се <a>
s со data-toggle="tab"
атрибути.
.tab('show')
Го избира даденото јазиче и ја прикажува поврзаната содржина. Секое друго претходно избрано јазиче станува неизбрано и неговата поврзана содржина е скриена. Се враќа кај повикувачот пред да се прикаже окното со јазичиња (т.е. пред да се shown.bs.tab
случи настанот).
Кога се прикажува нова картичка, настаните се активираат по следниот редослед:
hide.bs.tab
(на тековното активно јазиче)show.bs.tab
(на картичката што треба да се прикаже)hidden.bs.tab
(на претходната активна картичка, истата како и за hide.bs.tab
настанот)shown.bs.tab
(на ново-активниот штотуку прикажан таб, исто како и за show.bs.tab
настанот)Ако ниту една картичка веќе не била активна, тогаш настаните hide.bs.tab
и нема да се активираат.hidden.bs.tab
Тип на настан | Опис |
---|---|
прикажи.бс.таб | Овој настан се вклучува на прикажување на јазичиња, но пред да се прикаже новата картичка. Користете event.target и event.relatedTarget за да го насочите активното јазиче и претходното активно јазиче (ако е достапно), соодветно. |
прикажани.бс.таб | Овој настан се вклучува на прикажување на јазичиња откако ќе се прикаже картичка. Користете event.target и event.relatedTarget за да го насочите активното јазиче и претходното активно јазиче (ако е достапно), соодветно. |
скриј.бс.таб | Овој настан се вклучува кога треба да се прикаже ново јазиче (а со тоа и претходното активно јазиче треба да се скрие). Користете event.target и event.relatedTarget за да го насочите тековниот активен таб и новата картичка што наскоро ќе биде активна, соодветно. |
скриени.бс.таб | Овој настан се вклучува откако ќе се прикаже нов таб (а со тоа и претходното активно јазиче е скриено). Користете event.target и event.relatedTarget за насочување на претходното активно и новото активно јазиче, соодветно. |
Инспириран од одличниот приклучок jQuery.tipsy напишан од Џејсон Фрејм; Советите за алатки се ажурирана верзија, која не се потпира на слики, користи CSS3 за анимации и атрибути на податоци за локално складирање на наслови.
Советите за алатки со наслови со нулта должина никогаш не се прикажуваат.
Лебдете над линковите подолу за да ги видите советите за алатки:
Тесни панталони од следното ниво keffiyeh веројатно не сте слушнале за нив. Фото кабина брада суров тексас летерпрес вегански гласник торба stumptown. Сејтанот од фарма до маса, 8-битната американска облека за одржлива киноа на Mcsweeney's fixie има винилна комора од Тери Ричардсон. Брада трупец, кардигани бан ми ломо громови. Тофу биодизел Вилијамсбург марфа, четири loko mcsweeney's cleanse vegan chambray. Навистина ироничен занаетчија без разлика на тастатурата, сценска сцена од фарма до маса, банкарскиот твитер Остин се справува со фриган кред суров тексас кафе со едно потекло вирално.
Достапни се четири опции: горе, десно, долу и лево порамнети.
Од причини за изведба, „Tooltip“ и „Popover data-apis“ се вклучени, што значи дека мора сами да ги иницијализирате .
Еден начин да се иницијализираат сите совети за алатки на страницата би било да ги изберете според нивниот data-toggle
атрибут:
Приклучокот за совети за алатки генерира содржина и обележување по барање, и стандардно ги поставува советите за алатки по нивниот елемент за активирање.
Активирајте го советот за алатка преку JavaScript:
Потребната ознака за совет за алатка е само data
атрибут и title
на елементот HTML сакате да имате совет за алатка. Генерираната ознака на советот за алатка е прилично едноставна, иако бара позиција (стандардно, поставена top
од приклучокот).
Понекогаш сакате да додадете совет за алатка на хиперврска која обвива повеќе линии. Стандардното однесување на приклучокот за совети за алатки е да го центрира хоризонтално и вертикално. Додадете white-space: nowrap;
во вашите сидра за да го избегнете ова.
Кога користите совети за алатки за елементи во a .btn-group
или an .input-group
, или на елементи поврзани со табела ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), ќе мора да ја наведете опцијата container: 'body'
(документирана подолу) за да избегнете несакани несакани ефекти (како што е елементот што расте пошироко и/ или губење на заоблените агли кога се активира советот за алатка).
За корисниците кои навигираат со тастатура, а особено за корисниците на помошни технологии, треба да додавате совети за алатки само на елементите што се фокусираат на тастатурата, како што се врски, контроли на формулари или кој било произволен елемент со tabindex="0"
атрибут.
За да додадете совет за алатка на a disabled
или .disabled
елемент, ставете го елементот внатре во a и наместо тоа <div>
применете го советот за алатка .<div>
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-animation=""
.
Име | Тип | Стандардно | Опис |
---|---|---|---|
анимација | булови | вистина | Применете транзиција за избледување на CSS на советот за алатки |
контејнер | низа | лажни | лажни | Го додава советот за алатка на одреден елемент. Пример: |
одложување | број | објект | 0 | Одложено прикажување и криење на советот за алатка (ms) - не важи за рачниот тип на активирање Ако е доставен број, одложувањето се применува и на двете сокриј/прикажи Структурата на објектот е: |
html | булови | лажни | Вметнете HTML во советот за алатки. Ако е неточно, text методот на jQuery ќе се користи за вметнување содржина во DOM. Користете текст ако сте загрижени за нападите на XSS. |
поставување | низа | функција | 'врв' | Како да го поставите советот за алатки - врвот | дното | лево | десно | автоматско. Кога функцијата се користи за одредување на поставеноста, таа се повикува со советот за алатка DOM јазол како прв аргумент и активирачкиот елемент DOM јазол како негов втор. Контекстот |
селектор | низа | лажни | Доколку е обезбеден избирач, објектите за совети за алатки ќе бидат делегирани на наведените цели. Во пракса, ова се користи за да се овозможи динамична HTML содржина да има додадени совети за алатки. Видете го ова и информативен пример . |
шаблон | низа | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Основен HTML што треба да се користи при креирање на советот за алатки. Врвот за алатката
Најоддалечениот елемент за обвивка треба да ја има |
Наслов | низа | функција | '' | Стандардна вредност на насловот ако Ако е дадена функција, таа ќе се повика со нејзиното |
чкрапало | низа | „Фокус на лебди“ | Како се активира советот за алатки - кликнете | лебди | фокус | прирачник. Може да поминете повеќе предизвикувачи; одделете ги со празно место. manual не може да се комбинира со кој било друг активирач. |
приказ на гледање | низа | објект | функција | { избирач: 'тело', полнење: 0 } | Го чува советот за алатка во границите на овој елемент. Пример: Ако е дадена функција, таа се повикува со јазолот за активирање на елементот DOM како единствен аргумент. Контекстот |
Опциите за поединечни совети за алатки може алтернативно да се специфицираат преку употреба на атрибути на податоци, како што е објаснето погоре.
$().tooltip(options)
Прикачува управувач со совети за алатка за колекција на елементи.
.tooltip('show')
Го открива советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се прикаже советот за алатка (т.е. пред да се shown.bs.tooltip
случи настанот). Ова се смета за „рачно“ активирање на советот за алатки. Советите за алатки со наслови со нулта должина никогаш не се прикажуваат.
.tooltip('hide')
Го крие советот за алатка за елемент. Се враќа кај повикувачот пред навистина да се сокрие советот за алатка (т.е. пред да се hidden.bs.tooltip
случи настанот). Ова се смета за „рачно“ активирање на советот за алатки.
.tooltip('toggle')
Го исклучува советот за алатка на елементот. Се враќа кај повикувачот пред навистина да се прикаже или скрие советот за алатка (т.е. пред да се случи тој shown.bs.tooltip
или hidden.bs.tooltip
настан). Ова се смета за „рачно“ активирање на советот за алатки.
.tooltip('destroy')
Го крие и уништува советот за алатка на елементот. Советите за алатки кои користат делегирање (кои се креирани со опцијата selector
) не можат поединечно да се уништат на елементите за активирање на потомците.
Тип на настан | Опис |
---|---|
прикажи.бс.совет за алатка | Овој настан се вклучува веднаш кога show ќе се повика методот на пример. |
прикажани.бс.совет за алатка | Овој настан се активира кога советот за алатка е видлив за корисникот (ќе почека да заврши CSS транзицијата). |
скриј.бс.совет за алатка | Овој настан се активира веднаш кога hide ќе се повика методот на пример. |
скриени.bs.tooltip | Овој настан се активира кога советот за алатка ќе заврши со криење од корисникот (ќе почека да заврши CSS транзицијата). |
вметната.бс.совет за алатка | Овој настан се активира по show.bs.tooltip настанот кога шаблонот за совети за алатки е додаден во DOM. |
Додајте мали преклопувања на содржината, како оние на iPad, на кој било елемент за сместување секундарни информации.
Поповерите чиишто наслов и содржина се со нулта должина никогаш не се прикажуваат.
Поповерите бараат додатокот за совет за алатки да биде вклучен во вашата верзија на Bootstrap.
Од причини за изведба, „Tooltip“ и „Popover data-apis“ се вклучени, што значи дека мора сами да ги иницијализирате .
Еден начин да се иницијализираат сите поповери на страницата би било да ги изберете според нивниот data-toggle
атрибут:
Кога користите поповери на елементи во a .btn-group
или an .input-group
, или на елементи поврзани со табелата ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
), ќе треба да ја наведете опцијата container: 'body'
(документирана подолу) за да избегнете несакани несакани ефекти (како елементот што расте пошироко и/ или губење на заоблените агли кога ќе се активира пукањето).
За да додадете popover на a disabled
или .disabled
елемент, ставете го елементот внатре во a и наместо тоа <div>
применете го popover на тоа.<div>
Понекогаш сакате да додадете popover на хиперврска која обвива повеќе линии. Стандардното однесување на приклучокот за поповер е да го центрира хоризонтално и вертикално. Додадете white-space: nowrap;
во вашите сидра за да го избегнете ова.
Достапни се четири опции: горе, десно, долу и лево порамнети.
Sed posuere consectetur est at lobortis. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Енеан еу лео квам. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Користете го focus
активирањето за да ги отфрлите поповерите на следниот клик што го прави корисникот.
За правилно однесување меѓу прелистувачите и меѓуплатформите, мора да ја користите <a>
ознаката, а не<button>
ознаката, а исто така мора да ги вклучите role="button"
и tabindex
атрибутите.
Овозможете popovers преку JavaScript:
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-animation=""
.
Име | Тип | Стандардно | Опис |
---|---|---|---|
анимација | булови | вистина | Примени CSS Fade транзиција на поповер |
контејнер | низа | лажни | лажни | Го додава поповерот на одреден елемент. Пример: |
содржина | низа | функција | '' | Стандардна вредност на содржината ако Ако е дадена функција, таа ќе се повика со нејзиното |
одложување | број | објект | 0 | Одложено прикажување и сокривање на поповер (ms) - не важи за рачниот тип на активирач Ако е доставен број, одложувањето се применува и на двете сокриј/прикажи Структурата на објектот е: |
html | булови | лажни | Вметнете HTML во поповерот. Ако е неточно, text методот на jQuery ќе се користи за вметнување содржина во DOM. Користете текст ако сте загрижени за нападите на XSS. |
поставување | низа | функција | 'право' | Како да се позиционира поповер - топ | дното | лево | десно | автоматско. Кога функцијата се користи за определување на поставеноста, таа се повикува со јазол DOM поповер како прв аргумент и активирачки елемент DOM јазол како негов втор. Контекстот |
селектор | низа | лажни | Ако е обезбеден селектор, објектите за поповер ќе бидат делегирани на наведените цели. Во пракса, ова се користи за да се овозможи динамична HTML содржина да има додадени поповери. Видете го ова и информативен пример . |
шаблон | низа | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Основен HTML што треба да се користи при креирање на поповер. Поповерот Поповерот
Најоддалечениот елемент за обвивка треба да ја има |
Наслов | низа | функција | '' | Стандардна вредност на насловот ако Ако е дадена функција, таа ќе се повика со нејзиното |
чкрапало | низа | 'кликни' | Како се активира поповер - кликнете | лебди | фокус | прирачник. Може да поминете повеќе предизвикувачи; одделете ги со празно место. manual не може да се комбинира со кој било друг активирач. |
приказ на гледање | низа | објект | функција | { избирач: 'тело', полнење: 0 } | Го задржува поповерот во границите на овој елемент. Пример: Ако е дадена функција, таа се повикува со јазолот за активирање на елементот DOM како единствен аргумент. Контекстот |
Опциите за поединечни поповери може алтернативно да се специфицираат преку употреба на атрибути на податоци, како што е објаснето погоре.
$().popover(options)
Иницијализира поповери за колекција на елементи.
.popover('show')
Открива популарност на елементот. Се враќа кај повикувачот пред да се прикаже поповерот (т.е. пред да се shown.bs.popover
случи настанот). Ова се смета за „рачно“ активирање на поповер. Поповерите чиишто наслов и содржина се со нулта должина никогаш не се прикажуваат.
.popover('hide')
Го крие поповерот на елементот. Се враќа на повикувачот пред да се сокрие поповерот (т.е. пред да се hidden.bs.popover
случи настанот). Ова се смета за „рачно“ активирање на поповер.
.popover('toggle')
Вклучува исклучување на елементот. Се враќа на повикувачот пред да се прикаже или скрие пукачот (т.е. пред да се случи настанот shown.bs.popover
или hidden.bs.popover
настанот). Ова се смета за „рачно“ активирање на поповер.
.popover('destroy')
Сокрива и уништува поповер на елементот. Поповерите што користат делегирање (кои се креирани со опцијата selector
) не можат да се уништат поединечно на елементите за потомство.
Тип на настан | Опис |
---|---|
шоу.бс.поповер | Овој настан се вклучува веднаш кога show ќе се повика методот на пример. |
прикажани.бс.поповер | Овој настан се активира кога поповерот е видлив за корисникот (ќе чека да се завршат транзициите на CSS). |
скриј.бс.поповер | Овој настан се активира веднаш кога hide ќе се повика методот на пример. |
скриени.бс.поповер | Овој настан се активира кога поповерот ќе заврши со криење од корисникот (ќе почека да се завршат транзициите на CSS). |
вметната.бс.поповер | Овој настан се активира по show.bs.popover настанот кога шаблонот за поповер е додаден во DOM. |
Додајте функционалност за отфрлање на сите пораки за предупредување со овој приклучок.
Кога користите .close
копче, тоа мора да биде првото дете на копче .alert-dismissible
и нема текстуална содржина да се појавува пред него во ознаката.
Променете го ова и она и обидете се повторно. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Само додадете data-dismiss="alert"
го копчето за затворање за автоматски да дадете функционалност за затворање на предупредување. Затворањето на предупредувањето го отстранува од DOM.
За вашите предупредувања да користат анимација при затворање, проверете дали ги имаат класите .fade
и .in
веќе применети на нив.
$().alert()
Прави предупредување да слуша за настани со кликнување на потомци кои го имаат data-dismiss="alert"
атрибутот. (Не е потребно кога се користи автоматската иницијализација на data-api.)
$().alert('close')
Затвора предупредување со отстранување од DOM. Ако класите .fade
и .in
се присутни на елементот, предупредувањето ќе избледи пред да се отстрани.
Приклучокот за предупредување на Bootstrap изложува неколку настани за приклучување на функционалноста за предупредување.
Тип на настан | Опис |
---|---|
затвори.бс.известување | Овој настан се вклучува веднаш кога close ќе се повика методот на пример. |
затворени.бс.аларм | Овој настан се активира кога предупредувањето е затворено (ќе чека да се завршат транзициите на CSS). |
Направете повеќе со копчињата. Контролирајте ги состојбите на копчињата или креирајте групи на копчиња за повеќе компоненти како што се алатниците.
Firefox опстојува од контролните состојби (оневозможување и проверка) низ вчитувањата на страниците . Резолуција за ова е да се користи autocomplete="off"
. Видете грешка на Mozilla #654072 .
Додадетеdata-loading-text="Loading..."
за користење состојба на вчитување на копче.
Оваа функција е застарена од верзијата 3.3.5 и е отстранета во верзијата 4.
За доброто на оваа демонстрација, ние ги користиме data-loading-text
и $().button('loading')
, но тоа не е единствената состојба што можете да ја користите. Погледнете повеќе за ова подолу во $().button(string)
документацијата .
Додај data-toggle="button"
за активирање на префрлање на едно копче.
.active
иaria-pressed="true"
За претходно исклучени копчиња, мора да ја додадете .active
класата и aria-pressed="true"
атрибутот на button
себе.
Додајте data-toggle="buttons"
во полето за .btn-group
избор што содржи или радио влезови за да овозможите префрлање во нивните соодветни стилови.
.active
За претходно избраните опции, мора сами да ја додадете .active
класата на влезот label
.
Ако штиклираната состојба на копчето за избор на полето за избор се ажурира без да се активира click
настан на копчето (на пр. преку <input type="reset">
или преку поставување на checked
својството на влезот), ќе треба сами да ја префрлите .active
класата на влезот label
.
$().button('toggle')
Ја вклучува состојбата на туркање. На копчето му дава изглед дека е активирано.
$().button('reset')
Ресетира состојбата на копчето - го заменува текстот со оригиналниот текст. Овој метод е асинхрон и се враќа пред да заврши ресетирањето.
$().button(string)
Го заменува текстот во која било состојба на текст дефинирана со податоци.
Флексибилен приклучок кој користи неколку класи за лесно однесување на менување.
Колапс бара приклучокот за транзиции да биде вклучен во вашата верзија на Bootstrap.
Кликнете на копчињата подолу за да прикажете и скриете друг елемент преку промени во класата:
.collapse
ја крие содржината.collapsing
се применува за време на транзициите.collapse.in
покажува содржинаМожете да користите врска со href
атрибутот или копче со data-target
атрибутот. Во двата случаи, data-toggle="collapse"
потребно е.
Проширете го стандардното однесување за колапс за да создадете хармоника со компонентата на панелот.
Исто така, можно е да се замени .panel-body
s со .list-group
s.
Бидете сигурни да додадете aria-expanded
во контролниот елемент. Овој атрибут експлицитно ја дефинира моменталната состојба на склопувачкиот елемент за читачите на екранот и сличните помошни технологии. Ако склопувачкиот елемент е стандардно затворен, тој треба да има вредност од aria-expanded="false"
. Ако сте поставиле елементот за склопување да биде стандардно отворен со користење на in
класата, поставетеaria-expanded="true"
наместо тоа, поставете ја контролата. Приклучокот автоматски ќе го префрли овој атрибут врз основа на тоа дали склопувачкиот елемент е отворен или затворен или не.
Дополнително, ако вашиот контролен елемент цели на еден склоплив елемент - т.е. data-target
атрибутот покажува на id
избирачот - можете да додадете дополнителен aria-controls
атрибут на контролниот елемент, кој го содржи елементот id
што се склопува. Современите читачи на екран и слични помошни технологии го користат овој атрибут за да им обезбедат на корисниците дополнителни кратенки за директно навигација до самиот елемент што се склопува.
Приклучокот за колапс користи неколку класи за да се справи со кревање тешки предмети:
.collapse
ја крие содржината.collapse.in
ја покажува содржината.collapsing
се додава кога ќе започне транзицијата и се отстранува кога ќе завршиОвие часови може да се најдат во component-animations.less
.
Само додадете data-toggle="collapse"
и a data-target
на елементот за автоматски да доделите контрола на склоплив елемент. Атрибутот data-target
прифаќа CSS избирач за да се примени колапсот. Не заборавајте да ја додадете класата collapse
во склопувачкиот елемент. Ако сакате стандардно да се отвори, додадете ја дополнителната класа in
.
За да додадете управување со група налик на хармоника на контрола што се склопува, додајте го атрибутот податоци data-parent="#selector"
. Погледнете го демото за да го видите ова во акција.
Овозможи рачно со:
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-parent=""
.
Име | тип | стандардно | опис |
---|---|---|---|
родител | селектор | лажни | Ако е обезбеден избирач, тогаш сите елементи што се склопуваат под наведениот родител ќе бидат затворени кога ќе се прикаже оваа ставка што се склопува. (слично на традиционалното однесување на хармоника - ова зависи од panel класата) |
префрли | булови | вистина | Го исклучува склопувачкиот елемент при повикувањето |
.collapse(options)
Ја активира вашата содржина како склоплив елемент. Прифаќа изборни опции object
.
.collapse('toggle')
Вклучува склопувачки елемент на прикажан или скриен. Се враќа кај повикувачот пред да се прикаже или скрие елементот што се склопува (т.е. пред да се случи настанот shown.bs.collapse
или hidden.bs.collapse
).
.collapse('show')
Прикажува склоплив елемент. Се враќа кај повикувачот пред всушност да се прикаже склопувачкиот елемент (т.е. пред да се shown.bs.collapse
случи настанот).
.collapse('hide')
Сокрива склоплив елемент. Се враќа кај повикувачот пред да биде скриен елементот што се склопува (т.е. пред да се hidden.bs.collapse
случи настанот).
Класата за колапс на Bootstrap изложува неколку настани за приклучување во функционалноста за колапс.
Тип на настан | Опис |
---|---|
прикажи.бс.колапс | Овој настан се вклучува веднаш кога show ќе се повика методот на пример. |
прикажани.бс.колапс | Овој настан се активира кога елементот за колапс е видлив за корисникот (ќе чека да се завршат транзициите на CSS). |
скриј.бс.сруши | Овој настан се активира веднаш кога hide методот е повикан. |
скриен.бс.колапс | Овој настан се активира кога елементот за колапс е скриен од корисникот (ќе чека да се завршат транзициите на CSS). |
Компонента на слајдшоу за возење велосипед низ елементи, како рингишпил. Вгнездените вртелешки не се поддржани.
Компонентата на рингишпил генерално не е во согласност со стандардите за пристапност. Ако треба да бидете усогласени, ве молиме разгледајте други опции за прикажување на вашата содржина.
Bootstrap користи исклучиво CSS3 за своите анимации, но Internet Explorer 8 и 9 не ги поддржуваат потребните CSS својства. Така, нема анимации за транзиција на слајдови при користење на овие прелистувачи. Намерно одлучивме да не вклучиме резервни резервни позиции базирани на jQuery за транзициите.
Класата .active
треба да се додаде на еден од слајдовите. Во спротивно, рингишпилот нема да биде видлив.
Класите .glyphicon .glyphicon-chevron-left
и .glyphicon .glyphicon-chevron-right
не се нужно потребни за контролите. Bootstrap обезбедува .icon-prev
и .icon-next
како обични алтернативи на Unicode.
Лесно додавајте титлови на вашите слајдови со .carousel-caption
елементот во кој било .item
. Ставете го речиси секој изборен HTML таму и тој автоматски ќе биде порамнет и форматиран.
Вртелешките бараат употреба на id
на најоддалечениот контејнер (на .carousel
) за правилно функционирање на контролите на рингишпилот. Кога додавате повеќе рингишпил или кога менувате рингишпил id
, не заборавајте да ги ажурирате соодветните контроли.
Користете атрибути на податоци за лесно да ја контролирате положбата на рингишпилот. data-slide
ги прифаќа клучните зборови prev
или next
, што ја менува позицијата на слајдот во однос на нејзината моментална позиција. Алтернативно, користете data-slide-to
го за пренесување необработен индекс на слајд на рингишпилот data-slide-to="2"
, кој ја префрла позицијата на слајдот на одреден индекс почнувајќи со 0
.
Атрибутот data-ride="carousel"
се користи за означување на рингишпил како анимирана почнувајќи од вчитувањето на страницата. Не може да се користи во комбинација со (непотребна и непотребна) експлицитна JavaScript иницијализација на истиот рингишпил.
Повикајте рингишпил рачно со:
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-interval=""
.
Име | тип | стандардно | опис |
---|---|---|---|
интервал | број | 5000 | Времето за одложување помеѓу автоматското возење велосипед на ставката. Ако е неточно, рингишпилот нема автоматски да циклира. |
пауза | низа | нула | "лебди" | Ако е поставено на "hover" , го паузира возењето на вртелешката вклучено mouseenter и продолжува со возењето велосипед на рингишпилот вклучено mouseleave . Ако е поставено на null , лебдењето над рингишпилот нема да го паузира. |
завиткајте | булови | вистина | Дали рингишпилот треба да кружи непрекинато или да има тешки запирања. |
тастатура | булови | вистина | Дали рингишпилот треба да реагира на настани од тастатурата. |
.carousel(options)
Ја иницијализира рингишпилот со изборни опции object
и почнува да се движи со велосипед низ предмети.
.carousel('cycle')
Вози низ ставките на рингишпил од лево кон десно.
.carousel('pause')
Го спречува рингишпилот да се движи со велосипед низ предмети.
.carousel(number)
Циклира рингишпил на одредена рамка (заснована на 0, слично на низа).
.carousel('prev')
Циклуси до претходната ставка.
.carousel('next')
Циклуси до следната ставка.
Класата на рингишпил на Bootstrap изложува два настани за приклучување во функционалноста на рингишпилот.
Двата настани ги имаат следните дополнителни својства:
direction
: Насоката во која се лизга рингишпилот (или "left"
или "right"
).relatedTarget
: Елементот DOM што се става на место како активна ставка.Сите настани на рингишпил се пукаат на самиот рингишпил (т.е. во <div class="carousel">
).
Тип на настан | Опис |
---|---|
слајд.бс.рингишпил | Овој настан се вклучува веднаш кога slide ќе се повика методот на пример. |
лизна.бс.рингишпил | Овој настан се активира кога рингишпилот ќе ја заврши својата транзиција на слајд. |
Приклучокот за афикс position: fixed;
се вклучува и исклучува, емулирајќи го ефектот пронајден со position: sticky;
. Поднавигацијата од десната страна е демо во живо на додатокот за афикс.
Користете го приклучокот за афикс преку атрибути на податоци или рачно со свој JavaScript. Во двете ситуации, мора да обезбедите CSS за позиционирањето и ширината на вашата прикачена содржина.
Забелешка: Не користете го приклучокот за прицврстување на елемент содржан во релативно позициониран елемент, како што е повлечена или туркана колона, поради грешка при рендерирање на Safari .
Приклучокот за афикс се префрла помеѓу три класи, од кои секоја претставува одредена состојба: .affix
, .affix-top
, и .affix-bottom
. Мора да ги обезбедите стиловите, со исклучок на position: fixed;
на .affix
, за овие класи сами (независни од овој приклучок) да се справат со вистинските позиции.
Еве како работи приклучокот за афикс:
.affix-top
за да укаже дека елементот е во највисоката позиција. Во овој момент не е потребно позиционирање на CSS..affix
заменува .affix-top
и поставува position: fixed;
(обезбедено од CSS на Bootstrap)..affix
со .affix-bottom
. Бидејќи поместувањата се опционални, поставувањето на едно бара да поставите соодветна CSS. Во овој случај, додадете position: absolute;
кога е потребно. Приклучокот го користи атрибутот за податоци или опцијата JavaScript за да одреди каде да го позиционира елементот од таму.Следете ги горните чекори за да го поставите вашиот CSS за која било од опциите за користење подолу.
За лесно да додадете однесување за прикачување на кој било елемент, само додадете data-spy="affix"
го елементот што сакате да го шпионирате. Користете поместувања за да дефинирате кога да го вклучите прикачувањето на елементот.
Повикајте го приклучокот за афикс преку JavaScript:
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-offset-top="200"
.
Име | тип | стандардно | опис |
---|---|---|---|
офсет | број | функција | објект | 10 | Пиксели за поместување од екранот кога се пресметува позицијата на лизгање. Ако е даден единствен број, поместувањето ќе се примени и во горните и долните насоки. За да обезбедите уникатна, долната и горната поместување само наведете објект offset: { top: 10 } или offset: { top: 10, bottom: 5 } . Користете функција кога треба динамички да пресметате поместување. |
цел | селектор | јазол | jQuery елемент | window објектот _ |
Го одредува целниот елемент на афиксот. |
.affix(options)
Ја активира вашата содржина како ставена содржина. Прифаќа изборни опции object
.
.affix('checkPosition')
Повторно ја пресметува состојбата на афиксот врз основа на димензиите, положбата и положбата на лизгање на соодветните елементи. Класите .affix
, .affix-top
, и .affix-bottom
се додаваат или отстрануваат од ставената содржина според новата состојба. Овој метод треба да се повикува секогаш кога се менуваат димензиите на прикачената содржина или целниот елемент, за да се обезбеди правилно позиционирање на прикачената содржина.
Приклучокот за прицврстување на Bootstrap изложува неколку настани за прикачување во функционалноста за прицврстување.
Тип на настан | Опис |
---|---|
закачи.бс.прикачи | Овој настан се вклучува непосредно пред да се постави елементот. |
залепени.бс.залепуваат | Овој настан се активира откако елементот е прикачен. |
афикс-топ.бс.прикачи | Овој настан се вклучува непосредно пред елементот да биде поставен на врвот. |
прикачен-врв.бс.прикачи | Овој настан се активира откако елементот е поставен на врвот. |
affix-bottom.bs.афикс | Овој настан се вклучува непосредно пред елементот да биде прикачен на дното. |
залепено-дно.бс.афикс | Овој настан се активира откако елементот е поставен на дното. |