Ажывіце кампаненты Bootstrap — цяпер з 13 карыстацкімі плагінамі jQuery.
Убудовы можна ўключаць паасобку (хоць некаторыя з іх маюць неабходныя залежнасці) або ўсе адразу. І bootstrap.js , і bootstrap.min.js утрымліваюць усе плагіны ў адным файле.
Вы можаце выкарыстоўваць усе плагіны Bootstrap выключна праз API разметкі, не напісаўшы ніводнага радка JavaScript. Гэта API першага класа Bootstrap, на які вы павінны звяртаць увагу пры выкарыстанні плагіна.
Тым не менш, у некаторых сітуацыях можа быць пажадана адключыць гэтую функцыю. Такім чынам, мы таксама даем магчымасць адключыць API атрыбутаў даных, адвязаўшы ўсе падзеі ў прасторы імёнаў цела з "data-api". Гэта выглядае так:
- $ ( 'цела' ). выключана ( '.data-api' )
У якасці альтэрнатывы, каб арыентавацца на пэўны плагін, проста ўключыце імя плагіна ў якасці прасторы імёнаў разам з прасторай імёнаў data-api, як гэта:
- $ ( 'цела' ). выключана ( '.alert.data-api' )
Мы таксама лічым, што вы павінны мець магчымасць выкарыстоўваць усе плагіны Bootstrap выключна праз JavaScript API. Усе агульнадаступныя API з'яўляюцца адзінкавымі метадамі з ланцужком і вяртаюць калекцыю, на якую дзейнічаюць.
- $ ( ".btn.danger" ). кнопка ( "пераключальнік" ). addClass ( "тоўсты" )
Усе метады павінны прымаць неабавязковы аб'ект опцый, радок, які накіраваны на пэўны метад, або нічога (што ініцыюе плагін з паводзінамі па змаўчанні):
- $ ( "#myModal" ). мадальны () // ініцыялізаваны па змаўчанні
- $ ( "#myModal" ). мадальны ({ клавіятура : false }) // ініцыялізуецца без клавіятуры
- $ ( "#myModal" ). modal ( 'show' ) // ініцыялізуе і неадкладна выклікае show
Кожны плагін таксама паказвае свой неапрацаваны канструктар ва ўласцівасці Constructor: $.fn.popover.Constructor
. Калі вы жадаеце атрымаць пэўны асобнік плагіна, атрымайце яго непасрэдна з элемента: $('[rel=popover]').data('popover')
.
Часам неабходна выкарыстоўваць плагіны Bootstrap з іншымі структурамі карыстацкага інтэрфейсу. У такіх абставінах перыядычна могуць узнікаць сутыкненні прасторы імёнаў. Калі гэта адбудзецца, вы можаце выклікаць .noConflict
плагін, значэнне якога хочаце вярнуць.
- var bootstrapButton = $ . fn . кнопка . noConflict () // вяртанне $.fn.button да раней прысвоенага значэння
- $ . fn . bootstrapBtn = bootstrapButton // даць $().bootstrapBtn функцыі загрузкі
Bootstrap забяспечвае ўласныя падзеі для большасці унікальных дзеянняў плагіна. Як правіла, яны бываюць у форме інфінітыва і дзеепрыметніка прошлага часу - дзе інфінітыў (напр. show
) спрацоўвае ў пачатку падзеі, а яго форма прошлага дзеепрыметніка (напр. shown
) спрацоўвае пасля завяршэння дзеяння.
Усе бясконцыя падзеі забяспечваюць функцыянальнасць preventDefault. Гэта забяспечвае магчымасць спыніць выкананне дзеяння да яго пачатку.
- $ ( '#myModal' ). on ( 'паказаць' , функцыя ( e ) {
- if (! data ) вяртае e . preventDefault () // спыняе паказ мадальнага
- })
Для простых эфектаў пераходу ўключыце bootstrap-transition.js адзін раз разам з іншымі файламі JS. Калі вы выкарыстоўваеце скампіляваны (або скарочаны) bootstrap.js , няма неабходнасці ўключаць яго — ён ужо ёсць.
Некалькі прыкладаў плагіна пераходу:
Modals - гэта абцякальныя, але гнуткія дыялогавыя падказкі з мінімальнымі неабходнымі функцыянальнымі магчымасцямі і разумнымі наладамі па змаўчанні.
Візуалізаваны мадальны з загалоўкам, тэкстам і наборам дзеянняў у ніжнім калонтытуле.
Адно добрае цела…
- <div class = "modal hide fade" >
- <div class = "modal-header" >
- <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
- <h3> Мадальны загаловак </h3>
- </div>
- <div class = "modal-body" >
- <p> Адно цудоўнае цела… </p>
- </div>
- <div class = "modal-footer" >
- <a href = "#" class = "btn" > Зачыніць </a>
- <a href = "#" class = "btn btn-primary" > Захаваць змены </a>
- </div>
- </div>
Пераключыце мадальны рэжым праз JavaScript, націснуўшы кнопку ніжэй. Ён будзе слізгаць уніз і знікаць з верхняй часткі старонкі.
- <!-- Кнопка для запуску мадальнага -->
- <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Запусціць дэма-мадальны </a>
- <!-- Мадальны -->
- <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
- <div class = "modal-header" >
- <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
- <h3 id = "myModalLabel" > Мадальны загаловак </h3>
- </div>
- <div class = "modal-body" >
- <p> Адно цудоўнае цела… </p>
- </div>
- <div class = "modal-footer" >
- <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Зачыніць </button>
- <button class = "btn btn-primary" > Захаваць змены </button>
- </div>
- </div>
Актывуйце мадальны без напісання JavaScript. Усталюйце data-toggle="modal"
элемент кантролера, напрыклад кнопку, разам з data-target="#foo"
або href="#foo"
, каб нацэліць на пэўны мадаль для пераключэння.
- <button type = "button" data-toggle = "modal " data-target = "#myModal" > Запусціць мадальны </button>
Выклік мадальнага з ідэнтыфікатарам myModal
з дапамогай аднаго радка JavaScript:
- $ ( '#myModal' ). мадальны ( варыянты )
Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-
, як у data-backdrop=""
.
Імя | тыпу | па змаўчанні | апісанне |
---|---|---|---|
заднік | лагічны | праўда | Уключае элемент мадальнага фону. У якасці альтэрнатывы ўкажыце static для фону, які не закрывае мадальнае пры пстрычцы. |
клавіятура | лагічны | праўда | Закрывае мадальнае, калі націснута клавіша выхаду |
паказаць | лагічны | праўда | Паказвае мадальнае пры ініцыялізацыі. |
аддалены | шлях | ілжывы | Калі аддалены URL-адрас, кантэнт будзе загружаны з дапамогай
|
Актывуе ваш кантэнт як мадальны. Прымае дадатковыя параметры object
.
- $ ( '#myModal' ). мадальны ({
- клавіятура : ілжыва
- })
Уручную пераключае мадальнае.
- $ ( '#myModal' ). мадальны ( 'пераключыць' )
Уручную адкрывае мадальнае.
- $ ( '#myModal' ). мадальны ( 'паказаць' )
Уручную хавае мадальнае.
- $ ( '#myModal' ). мадальны ( 'схаваць' )
Мадальны клас Bootstrap паказвае некалькі падзей для падключэння да мадальнай функцыянальнасці.
Падзея | Апісанне |
---|---|
паказаць | Гэта падзея запускаецца неадкладна пры show выкліку метаду асобніка. |
паказана | Гэта падзея запускаецца, калі мадальны элемент становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS). |
схаваць | Гэта падзея запускаецца адразу пасля hide выкліку метаду асобніка. |
схаваны | Гэта падзея запускаецца, калі мадаль скончыў быць схаваным ад карыстальніка (будзе чакаць завяршэння пераходаў CSS). |
- $ ( '#myModal' ). on ( 'hidden' , function () {
- // зрабіць нешта...
- })
Дадайце выпадальныя меню практычна да ўсяго з дапамогай гэтага простага плагіна, у тым ліку да навігацыйнай панэлі, укладак і таблетак.
Дадайце data-toggle="dropdown"
да спасылкі або кнопкі, каб пераключыць выпадальны спіс.
- <div class = "dropdown" >
- <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Выпадаючы трыгер </a>
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
- </div>
Каб захаваць URL-адрасы некранутымі, выкарыстоўвайце data-target
атрыбут замест href="#"
.
- <div class = "dropdown" >
- <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >
- Падаць
- <b class = "caret" ></b>
- </a>
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
- </div>
Выклік выпадаючых меню праз JavaScript:
- $ ( '.dropdown-toggle' ). выпадальны спіс ()
Няма
Праграмны API для пераключэння меню для дадзенай панэлі навігацыі або навігацыі з укладкамі.
Плагін ScrollSpy прызначаны для аўтаматычнага абнаўлення мэт навігацыі на аснове пазіцыі пракруткі. Пракруціце вобласць пад панэллю навігацыі і паглядзіце, як змяняецца актыўны клас. Выпадальныя падпункты таксама будуць вылучаны.
Рэкламныя легінсы кейтар, бранч ід арт вечарынка долар працы. Pitchfork yr enim lo-fi, перш чым яны раскупілі qui. Правы на веласіпеды Tumblr ад фермы да стала. Кардіган Anim keffiyeh Carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Швэдар Cosby, джынсавыя шорты ў стылі лома, талстоўка з капюшонам Williamsburg, мінімальная талстоўка, пра якую вы, напэўна, не чулі, і кардыган, траставы фонд, эстэтыка біядызеля Уэса Андэрсана. Nihil вытатуяваны акузамус, іронія біядызель keffiyeh рамеснік ullamco consequat.
Веніям марфа вусы скейтборд, адзіпісінг фугіат вяліт вілы барада. Барада Фрыгана, як купідатат Вера Максуіні. Cupidatat four loko nisi, ea helvetica nulla carles. Швэдар Косбі з татуіроўкамі, фуд-трак, вінілавая кружэлка mcsweeney's quis non freegan. Lo-fi Уэс Андэрсан +1 швейнае майстэрства. Carles неэстэтычнае практыкаванне quis gentrify. Brooklyn adipisicing vice beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap крафтавае піва дэзерунт скейтборд ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin кава in magna veniam. High life id вініл, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi мініяцюрная сумка DIY. 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.
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, перш чым яны былі распрададзеныя, Тэры Рычардсан прадастаўляў позні сняданак, не знайшоўшы касбі швэдар, парыятур кефія, або helvetica artisan. Кардіган крафтавы піва сейтан гатовы веліт. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Каб лёгка дадаць паводзіны шпіёна для пракруткі ў верхнюю панэль навігацыі, проста дадайце data-spy="scroll"
элемент, за якім вы хочаце сачыць (часцей за ўсё гэта будзе цела), і data-target=".navbar"
выберыце, якую навігацыю выкарыстоўваць. Вы захочаце выкарыстоўваць ScrollSpy з .nav
кампанентам.
- <body data-spy = "scroll" data-target = ".navbar" > ... </body>
Выклік ScrollSpy праз JavaScript:
- $ ( '#navbar' ). ScrollSpy ()
<a href="#home">home</a>
павінен адпавядаць чаму-то ў доме, як
<div id="home"></div>
.
Пры выкарыстанні scrollspy у спалучэнні з даданнем або выдаленнем элементаў з DOM вам трэба будзе выклікаць метад абнаўлення так:
- $ ( '[data-spy="пракрутка"]' ). кожны ( функцыя () {
- var $spy = $ ( гэта ). scrollspy ( 'абнавіць' )
- });
Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-
, як у data-offset=""
.
Імя | тыпу | па змаўчанні | апісанне |
---|---|---|---|
зрушэнне | лік | 10 | Пікселі для зрушэння ад верху пры разліку пазіцыі пракруткі. |
Падзея | Апісанне |
---|---|
актываваць | Гэта падзея спрацоўвае кожны раз, калі новы элемент актывуецца ScrollSpy. |
Дадайце хуткую дынамічную функцыянальнасць укладак для пераходу паміж панэлямі лакальнага кантэнту, нават праз выпадальныя меню.
Неапрацаваны дэнім, вы напэўна не чулі пра іх джынсавыя шорты Осцін. Nesciunt tofu stumptown aliqua, рэтра-сінтэзатар майстар ачысткі. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Швэдар Cosby eu banh mi, qui irure Тэры Рычардсан былы кальмар. 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.
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 (кожную ўкладку неабходна актываваць асобна):
- $ ( '#myTab a' ). націсніце ( функцыя ( e ) {
- е . прадухіліць Па змаўчанні ();
- $ ( гэта ). ўкладка ( 'паказаць' );
- })
Вы можаце актываваць асобныя ўкладкі некалькімі спосабамі:
- $ ( '#myTab a[href="#profile"]' ). ўкладка ( 'паказаць' ); // Выберыце ўкладку па імені
- $ ( '#myTab a:first' ). ўкладка ( 'паказаць' ); // Выберыце першую ўкладку
- $ ( '#myTab a:last' ). ўкладка ( 'паказаць' ); // Выберыце апошнюю ўкладку
- $ ( '#myTab li:eq(2) a' ). ўкладка ( 'паказаць' ); // Выберыце трэцюю ўкладку (індэксавана 0)
Вы можаце актываваць навігацыю па ўкладках або таблетках без напісання JavaScript, проста ўказаўшы data-toggle="tab"
або data-toggle="pill"
на элеменце. Даданне класаў nav
і nav-tabs
на ўкладку ul
прыменіць стыль укладкі Bootstrap.
- <ul class = "nav nav-tabs" >
- <li><a href = "#home" data-toggle = "tab" > Галоўная </a></li>
- <li><a href = "#profile" data-toggle = "tab" > Профіль </a></li>
- <li><a href = "#messages" data-toggle = "tab" > Паведамленні </a></li>
- <li><a href = "#settings" data-toggle = "tab" > Налады </a></li>
- </ul>
Актывуе элемент укладкі і кантэйнер змесціва. На ўкладцы павінна быць альбо data-target
або, href
арыентаванае на вузел кантэйнера ў DOM.
- <ul class = "nav nav-tabs" id = "myTab" >
- <li class = "active" ><a href = "#home" > Галоўная </a></li>
- <li><a href = "#profile" > Профіль </a></li>
- <li><a href = "#messages" > Паведамленні </a></li>
- <li><a href = "#settings" > Налады </a></li>
- </ul>
- <div class = "tab-content" >
- <div class = "актыўная панэль укладак" id = "home" > ... </div>
- <div class = "tab-pane" id = "profile" > ... </div>
- <div class = "tab-pane" id = "messages" > ... </div>
- <div class = "tab-pane" id = "settings" > ... </div>
- </div>
- <скрыпт>
- $ ( функцыя () {
- $ ( '#myTab a:last' ). ўкладка ( 'паказаць' );
- })
- </script>
Падзея | Апісанне |
---|---|
паказаць | Гэта падзея запускаецца падчас паказу ўкладак, але да таго, як будзе паказана новая ўкладка. Выкарыстоўвайце event.target і event.relatedTarget , каб нацэліць на актыўную ўкладку і папярэднюю актыўную ўкладку (калі ёсць) адпаведна. |
паказана | Гэта падзея спрацоўвае падчас паказу ўкладак пасля паказу ўкладкі. Выкарыстоўвайце event.target і event.relatedTarget , каб нацэліць на актыўную ўкладку і папярэднюю актыўную ўкладку (калі ёсць) адпаведна. |
- $ ( 'a[data-toggle="tab"]' ). on ( 'паказана' , функцыя ( e ) {
- е . мэта // актываваная таб
- е . relatedTarget // папярэдняя ўкладка
- })
Натхнёны выдатным убудовай jQuery.tipsy, напісаным Джэйсанам Фрэймам; Падказкі - гэта абноўленая версія, якая не абапіраецца на выявы, выкарыстоўвае CSS3 для анімацыі і атрыбуты даных для лакальнага захоўвання загалоўкаў.
У мэтах павышэння прадукцыйнасці ўсплывальная падказка і ўсплывальнае апісанне дадзеных даступныя, што азначае, што вы павінны ініцыялізаваць іх самастойна .
Навядзіце курсор на спасылкі ніжэй, каб убачыць падказкі:
Вузкія штаны новага ўзроўню кефія , вы напэўна не чулі пра іх. Photobooth beard raw denim highprint веганская сумка-мессенджер stumptown. Сейтан ад фермы да стала, 8-бітнае амерыканскае адзенне McSweeney's Sustainable quinoa мае вінілавае шамбрэ Тэры Рычардсана . Барада стамптаун, кардіганы banh mi lomo thundercats. Біядызельнае паліва тофу, уільямсбургская марфа, веганскі шамбре з чатырох лока Максвіні. Сапраўды іранічны рамеснік незалежна ад таго, кейтар , сцэніст ад фермы да стала, Бэнксі Осцін, твітэр, ручка , фрыган, крэда, сырая джынсавая кава, вірус аднаго паходжання.
Пры выкарыстанні ўсплывальных падказак і ўсплывальных паведамленняў з групамі ўводу Bootstrap вам трэба будзе ўсталяваць container
опцыю (дакументавана ніжэй), каб пазбегнуць непажаданых пабочных эфектаў.
Запусціць падказку праз JavaScript:
- $ ( '#прыклад' ). падказка ( варыянты )
Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-
, як у data-animation=""
.
Імя | тыпу | па змаўчанні | апісанне |
---|---|---|---|
анімацыя | лагічны | праўда | прымяніць пераход CSS Fade да падказкі |
html | лагічны | ілжывы | Устаўце html у падказку. text Калі false, для ўстаўкі кантэнту ў dom будзе выкарыстоўвацца метад jquery . Выкарыстоўвайце тэкст, калі вы турбуецеся аб атаках XSS. |
размяшчэнне | радок | функцыя | "топ" | як размясціць падказку - зверху | унізе | злева | справа |
селектар | радок | ілжывы | Калі прадастаўляецца селектар, аб'екты ўсплывальнай падказкі будуць дэлегаваны ўказаным мэтам. |
назва | радок | функцыя | '' | значэнне загалоўка па змаўчанні, калі тэг `title` адсутнічае |
трыгер | радок | "фокус пры навядзенні" | як спрацоўвае падказка - пстрычка | лунаць | фокус | кіраўніцтва. Звярніце ўвагу, што вы перадаеце некалькі трыгераў, падзеленыя прабеламі, тыпы трыгераў. |
затрымка | нумар | аб'ект | 0 | затрымка паказу і схавання ўсплываючай падказкі (мс) - не адносіцца да ручнога тыпу запуску Калі ўказана лічба, затрымка прымяняецца як для схавання, так і для паказу Структура аб'екта: |
кантэйнер | радок | ілжывы | ілжывы | Дадае падказку да пэўнага элемента |
- <a href = "#" data-toggle = "tooltip" title = "first tooltip" > навядзіце курсор на мяне </a>
Далучае апрацоўшчык падказкі да калекцыі элементаў.
Адкрывае падказку элемента.
- $ ( '#элемент' ). падказка ( 'паказаць' )
Хавае падказку элемента.
- $ ( '#элемент' ). падказка ( 'схаваць' )
Пераключае падказку элемента.
- $ ( '#элемент' ). падказка ( 'пераключэнне' )
Хавае і знішчае падказку элемента.
- $ ( '#элемент' ). падказка ( 'знішчыць' )
Дадайце невялікія накладкі змесціва, напрыклад, на iPad, да любога элемента для размяшчэння другаснай інфармацыі. Навядзіце курсор на кнопку, каб выклікаць усплывальнае акно. Патрабуецца ўключыць падказку .
Даступныя чатыры варыянты: выраўноўванне паверсе, справа, унізе і па левым краі.
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.
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.
No markup shown as popovers are generated from JavaScript and content within a data
attribute.
Enable popovers via JavaScript:
- $('#example').popover(options)
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-animation=""
.
Name | type | default | description |
---|---|---|---|
animation | boolean | true | apply a css fade transition to the tooltip |
html | boolean | false | Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. |
placement | string | function | 'right' | how to position the popover - top | bottom | left | right |
selector | string | false | if a selector is provided, tooltip objects will be delegated to the specified targets |
trigger | string | 'click' | how popover is triggered - click | hover | focus | manual |
title | string | function | '' | default title value if `title` attribute isn't present |
content | string | function | '' | default content value if `data-content` attribute isn't present |
delay | number | object | 0 | delay showing and hiding the popover (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
container | string | false | false | Appends the popover to a specific element |
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
Initializes popovers for an element collection.
Reveals an elements popover.
- $('#element').popover('show')
Hides an elements popover.
- $('#element').popover('hide')
Toggles an elements popover.
- $('#element').popover('toggle')
Hides and destroys an element's popover.
- $('#element').popover('destroy')
Add dismiss functionality to all alert messages with this plugin.
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Enable dismissal of an alert via JavaScript:
- $(".alert").alert()
Just add data-dismiss="alert"
to your close button to automatically give an alert close functionality.
- <a class="close" data-dismiss="alert" href="#">×</a>
Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade
and .in
class already applied to them.
Closes an alert.
- $(".alert").alert('close')
Bootstrap's alert class exposes a few events for hooking into alert functionality.
Event | Description |
---|---|
close | This event fires immediately when the close instance method is called. |
closed | This event is fired when the alert has been closed (will wait for css transitions to complete). |
- $('#my-alert').bind('closed', function () {
- // do something…
- })
Get base styles and flexible support for collapsible components like accordions and navigation.
* Requires the Transitions plugin to be included.
Using the collapse plugin, we built a simple accordion style widget:
- <div class="accordion" id="accordion2">
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
- Collapsible Group Item #1
- </a>
- </div>
- <div id="collapseOne" class="accordion-body collapse in">
- <div class="accordion-inner">
- Anim pariatur cliche...
- </div>
- </div>
- </div>
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
- Collapsible Group Item #2
- </a>
- </div>
- <div id="collapseTwo" class="accordion-body collapse">
- <div class="accordion-inner">
- Anim pariatur cliche...
- </div>
- </div>
- </div>
- </div>
- ...
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
- <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
- simple collapsible
- </button>
- <div id="demo" class="collapse in"> … </div>
Just add data-toggle="collapse"
and a data-target
to element to automatically assign control of a collapsible element. The data-target
attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse
to the collapsible element. If you'd like it to default open, add the additional class in
.
To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector"
. Refer to the demo to see this in action.
Enable manually with:
- $(".collapse").collapse()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-parent=""
.
Name | type | default | description |
---|---|---|---|
parent | selector | false | If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) |
toggle | boolean | true | Toggles the collapsible element on invocation |
Activates your content as a collapsible element. Accepts an optional options object
.
- $('#myCollapsible').collapse({
- toggle: false
- })
Toggles a collapsible element to shown or hidden.
Shows a collapsible element.
Hides a collapsible element.
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Event | Description |
---|---|
show | This event fires immediately when the show instance method is called. |
shown | This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete). |
hide | This event is fired immediately when the hide method has been called. |
hidden | This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete). |
- $('#myCollapsible').on('hidden', function () {
- // do something…
- })
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
- <div id="myCarousel" class="carousel slide">
- <ol class="carousel-indicators">
- <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
- <li data-target="#myCarousel" data-slide-to="1"></li>
- <li data-target="#myCarousel" data-slide-to="2"></li>
- </ol>
- <!-- Carousel items -->
- <div class="carousel-inner">
- <div class="active item">…</div>
- <div class="item">…</div>
- <div class="item">…</div>
- </div>
- <!-- Carousel nav -->
- <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
- <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
- </div>
Use data attributes to easily control the position of the carousel. data-slide
accepts the keywords prev
or next
, which alters the slide position relative to it's current position. Alternatively, use data-slide-to
to pass a raw slide index to the carousel data-slide-to="2"
, which jump's the slide position to a particular index beginning with 0
.
Call carousel manually with:
- $('.carousel').carousel()
Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-
, as in data-interval=""
.
Name | type | default | description |
---|---|---|---|
interval | number | 5000 | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
pause | string | "hover" | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. |
Initializes the carousel with an optional options object
and starts cycling through items.
- $('.carousel').carousel({
- interval: 2000
- })
Cycles through the carousel items from left to right.
Stops the carousel from cycling through items.
Cycles the carousel to a particular frame (0 based, similar to an array).
Cycles to the previous item.
Cycles to the next item.
Bootstrap's carousel class exposes two events for hooking into carousel functionality.
Event | Description |
---|---|
slide | This event fires immediately when the slide instance method is invoked. |
slid | This event is fired when the carousel has completed its slide transition. |
A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
- <input type="text" data-provide="typeahead">
You'll want to set autocomplete="off"
to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.
Add data attributes to register an element with typeahead functionality as shown in the example above.
Call the typeahead manually with:
- $('.typeahead').typeahead()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-source=""
.
Name | type | default | description |
---|---|---|---|
source | array, function | [ ] | The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument. |
items | number | 8 | The max number of items to display in the dropdown. |
minLength | number | 1 | The minimum character length needed before triggering autocomplete suggestions |
matcher | function | case insensitive | The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query . Return a boolean true if query is a match. |
sorter | function | exact match, case sensitive, case insensitive |
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query . |
updater | function | returns selected item | The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance. |
highlighter | function | highlights all default matches | Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html. |
Initializes an input with a typeahead.
The subnavigation on the left is a live demo of the affix plugin.
To easily add affix behavior to any element, just add data-spy="affix"
to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.
- <div data-spy="affix" data-offset-top="200">...</div>
affix
,
affix-top
, and
affix-bottom
. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
Call the affix plugin via JavaScript:
- $('#navbar').affix()
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-offset-top="200"
.
Name | type | default | description |
---|---|---|---|
offset | number | function | object | 10 | Пікселі, якія трэба зрушыць з экрана пры разліку пазіцыі пракруткі. Калі ўказана адна лічба, зрушэнне будзе прымяняцца як у верхнім, так і ў левым кірунках. Каб праслухаць адзін кірунак або некалькі унікальных зрушэнняў, проста ўвядзіце аб'ект offset: { x: 10 } . Выкарыстоўвайце функцыю, калі вам трэба дынамічна забяспечыць зрушэнне (карысна для некаторых адаптыўных дызайнаў). |