Инфиродӣ ё ҷамъоварӣ

Плагинҳо метавонанд ба таври инфиродӣ дохил карда шаванд (гарчанде ки баъзеҳо вобастагии зарурӣ доранд) ё ҳама якбора. Ҳам bootstrap.js ва ҳам bootstrap.min.js дорои ҳама плагинҳо дар як файл мебошанд.

Аттрибутҳои маълумот

Шумо метавонед ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API-и аломатгузорӣ бидуни навиштани як сатри JavaScript истифода баред. Ин API дараҷаи якуми Bootstrap аст ва ҳангоми истифодаи плагин бояд аввалиндараҷаи шумо бошад.

Гуфта мешавад, ки дар баъзе ҳолатҳо хомӯш кардани ин функсия матлуб аст. Аз ин рӯ, мо инчунин қобилияти ғайрифаъол кардани атрибути додаҳои API-ро тавассути қатъ кардани ҳама рӯйдодҳо дар фазои номи бадан бо `'data-api'' таъмин мекунем. Ин чунин менамояд:

$ ( 'бадан' ). хомӯш ( '.data-api' )

Интихобан, барои ҳадафи як плагини мушаххас, танҳо номи плагинро ҳамчун фазои ном дар якҷоягӣ бо фазои номи data-api дохил кунед:

$ ( 'бадан' ). хомӯш ( '.alert.data-api' )

API-и барномавӣ

Мо инчунин боварӣ дорем, ки шумо бояд ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API JavaScript истифода баред. Ҳама API-ҳои ҷамъиятӣ усулҳои ягона ва занҷирӣ мебошанд ва коллексияи мувофиқи амалро бармегардонанд.

$ ( ".btn.danger" ). тугма ( "гузариш" ). addClass ( "фарбеҳ" )

Ҳама усулҳо бояд объекти опсияҳои ихтиёрӣ, сатре, ки усули мушаххасро ҳадаф қарор медиҳанд ё ҳеҷ чиз (ки плагинро бо рафтори пешфарз оғоз мекунад) қабул кунанд:

$ ( "#myModal" ). modal () // бо пешфарз оғоз карда шуд                       
$ ( "#myModal" ). modal ({ клавиатура : false }) // бе клавиатура оғоз карда шуд     
$ ( "#myModal" ). modal ( 'show' ) // намоишро фавран оғоз мекунад ва даъват мекунад                

Ҳар як плагин инчунин конструктори хоми худро дар моликияти 'Constructor' фош мекунад: $.fn.popover.Constructor. Агар шумо хоҳед, ки як мисоли мушаххаси плагинро ба даст оред, онро мустақиман аз элемент дарёфт кунед: $('[rel=popover]').data('popover').

Не низоъ

Баъзан лозим меояд, ки плагинҳои Bootstrap-ро бо дигар чаҳорчӯбаҳои UI истифода баред. Дар ин шароит, бархӯрдҳои фазои номҳо баъзан рух дода метавонанд. Агар ин рӯй диҳад, шумо метавонед .noConflictба плагин занг занед, ки мехоҳед арзиши онро баргардонед.

var bootstrapButton = $ . fn . тугмаи . noConflict () // баргардонидани $.fn.button ба арзиши қаблан таъиншуда 
$ . fn . bootstrapBtn = bootstrapButton             // Додани $().bootstrapBtn вазифаи пурборкунандаро

Ҳодисаҳо

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

Ҳама рӯйдодҳои инфинитивӣ функсияи preventDefault-ро таъмин мекунанд. Ин имкон медиҳад, ки иҷрои амалро пеш аз оғози он қатъ кунед.

$ ( '#myModal' ). дар ( 'намоиш' , функсия ( e ) {   
    агар (! маълумот ) баргардад e . preventDefault () // намоиши модальро бозмедорад   
})

Дар бораи гузариш

Барои эффектҳои оддии гузариш, bootstrap-transition.js-ро дар баробари дигар файлҳои JS дохил кунед. Агар шумо bootstrap.js -и тартибдодашуда (ё хурдкардашуда) -ро истифода баред , лозим нест, ки онро дохил кунед - он аллакай мавҷуд аст.

Ҳолатҳоро истифода баред

Якчанд мисоли плагини гузариш:

• Лағжиш ё пажмурда дар модальҳо
• Хомӯш кардани ҷадвалҳо
• Хомӯш кардани огоҳиҳо
• Панелҳои каруселии слайд

Мисолхо

Модалҳо соддашуда, вале чандир, дархостҳои муколама бо ҳадди ақали функсияҳои зарурӣ ва пешфарзҳои оқилона мебошанд.

Намунаи статикӣ

Модали намоишшуда бо сарлавҳа, бадан ва маҷмӯи амалҳо дар поён.

<div class = "модалӣ пажмурда мешавад" > 
  <div class = "modal-header" > 
    < навъи тугма = "тугма" синфи = "пушидани" додаҳо-азбаст = "modal" aria-пинҳон = "ҳақиқӣ" > × </ тугма >    
    <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" синфи = "паҳншавии модалӣ" tabindex = "-1" нақш = "диалог" aria-labelledby = "myModalLabel" aria-hidden = "ҳақиқӣ" >      
  <div class = "modal-header" > 
    < навъи тугма = "тугма" синф = "пушидани" data-dississ = "modal" aria-hidden = "ҳақиқӣ" > × </button>    
    <h3 id = "myModalLabel" > Сарлавҳаи модалӣ </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Як бадани хуб… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data- dississ = "modal" aria-hidden = "true" > Пӯшидан </тугма>   
    <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>   

Тавассути JavaScript

Модалро бо ID myModalбо як сатри JavaScript занг занед:

$ ( '#myModal' ). модаль ( имконот )

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-backdrop="".

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

Усулҳо

.modal(имконот)

Мундариҷаи шуморо ҳамчун модаль фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

$ ( '#myModal' ). модаль ({
  клавиатура : бардурӯғ 
})

.modal('гузариш')

Модалро дастӣ иваз мекунад.

$ ( '#myModal' ). модаль ( 'гузариш' )

.modal('шоу')

Модалро дастӣ мекушояд.

$ ( '#myModal' ). модаль ( 'намоиш' )

.modal('пинҳон')

Модалро дастӣ пинҳон мекунад.

$ ( '#myModal' ). модаль ( 'пинҳон' )

Ҳодисаҳо

Синфи модалии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад.

$ ( '#myModal' ). дар ( 'пинҳон' , функсия () {   
  // коре кунед…
})

Мисолхо

Бо ин плагини оддӣ ба қариб ҳама чиз менюҳои афтанда илова кунед, аз ҷумла навбар, ҷадвалҳо ва доруҳо.

Дар дохили навор

Дар дохили ҷадвалҳо

Истифода

Тавассути атрибутҳои додаҳо

Барои data-toggle="dropdown"иваз кардани афтанда ба пайванд ё тугма илова кунед.

<div class = "афтанда" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Триггери афтанда </a>   
  <ul class = "Менюи афтанда" нақши = "меню" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Барои беэътибор нигоҳ доштани URL-ҳо, data-targetба ҷои аттрибутиро истифода баред href="#".

<div class = "афтанда" > 
  <a class = "dropdown-toggle" id = "dLabel" нақши = "тугма" data-toggle = "download" data-target = "#" href = "/page.html" >      
    Поёнафтода
    <b class = "caret" ></b> 
  </a>
  <ul class = "Менюи афтанда" нақши = "меню" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Тавассути JavaScript

Ба афтандаҳо тавассути JavaScript занг занед:

$ ( '. dropdown-toggle' ). афтанда ()

Имконот

Ҳеҷ

Усулҳо

$().афтанда('гузариш')

Api-и барномавӣ барои иваз кардани менюҳо барои навори додашуда ё паймоиши ҷадвалбандишуда.

Намуна дар навор

Васлкунаки ScrollSpy барои ба таври худкор навсозии ҳадафҳои нав дар асоси мавқеи ҳаракат аст. Майдони зери наворро ҳаракат кунед ва тағирёбии синфи фаъолро тамошо кунед. Зербандҳои афтанда низ таъкид карда мешаванд.

Истифода

Тавассути атрибутҳои додаҳо

Барои ба осонӣ илова кардани рафтори scrollspy ба новбари болоии худ, танҳо data-spy="scroll"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед (аксаран ин бадан аст) ва data-target=".navbar"интихоб кунед, ки кадом наворро истифода баред. Шумо мехоҳед scrollspy-ро бо .navҷузъ истифода баред.

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

Тавассути JavaScript

Ба scrollspy тавассути JavaScript занг занед:

$ ( '#навбар' ). scrollspy ()

Усулҳо

.scrollspy('навсозӣ')

Ҳангоми истифодаи scrollspy дар якҷоягӣ бо илова кардан ё хориҷ кардани элементҳо аз DOM, шумо бояд усули навсозиро ба таври зерин даъват кунед:

$ ( '[data-spy = "ҳаракат"]' ). ҳар як ( функсия () {  
  var $spy = $ ( ин ). scrollspy ( 'навсозӣ' )
});

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-offset="".

Ҳодисаҳо

Намунаҳои ҷадвалҳо

Барои гузариш аз панелҳои мундариҷаи маҳаллӣ, ҳатто тавассути менюҳои афтанда вазифаи зуд ва динамикии ҷадвалро илова кунед.

Истифода

Ҷадвалҳои ҷадвалбандишавандаро тавассути JavaScript фаъол созед (ҳар як ҷадвал бояд алоҳида фаъол карда шавад):

$ ( '#Tab a' ). пахш кунед ( функсия ( e ) {  
  д . preventDefault ();
  $ ( ин ). ҷадвал ( 'намоиш' );
})

Шумо метавонед ҷадвалҳои инфиродиро бо чанд роҳ фаъол созед:

$ ( '#myTab a[href="#profile"]' ). ҷадвал ( 'намоиш' ); // Ҷадвалро аз рӯи ном интихоб кунед 
$ ( '#Май Tab a:first' ). ҷадвал ( 'намоиш' ); // Ҷадвали аввалро интихоб кунед 
$ ( '#Табиби ман: охирон' ). ҷадвал ( 'намоиш' ); // Варақаи охиринро интихоб кунед 
$ ( '#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" > Home </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 = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "паёмҳо" > ... </div>  
  <div class = "tab-pane" id = "танзимот" > ... </div>  
</div>
 
<скрипт>
  $ ( функсия () {  
    $ ( '#Табиби ман: охирон' ). ҷадвал ( 'намоиш' );
  })
</script>

Ҳодисаҳо

$ ( 'a[data-toggle="таб"]' ). дар ( 'нишон дода шудааст' , функсия ( e ) {   
  д . ҳадаф // ҷадвали фаъолшуда
  д . марбут ба ҳадаф // ҷадвали қаблӣ
})

Мисолхо

Аз плагини аълои jQuery.tipsy илҳом гирифта шудааст, ки аз ҷониби Ҷейсон Frame навишта шудааст; Маслиҳатҳо версияи навшуда мебошанд, ки ба тасвирҳо такя намекунанд, CSS3-ро барои аниматсияҳо ва атрибутҳо барои нигаҳдории унвонҳои маҳаллӣ истифода мебаранд.

Бо сабабҳои иҷроиш, маслиҳати абзор ва popover data-apis интихоб шудаанд, яъне шумо бояд онҳоро худатон оғоз кунед .

Барои дидани маслиҳатҳои асбобҳо ба болои истинодҳои зер гузаред:

Чор самт

Маслиҳатҳо дар гурӯҳҳои воридотӣ

Ҳангоми истифодаи маслиҳатҳои асбобҳо ва поповҳо бо гурӯҳҳои вуруди Bootstrap, шумо бояд containerинтихобро (дар зер ҳуҷҷатгузорӣ шудааст) муқаррар кунед, то аз оқибатҳои номатлуб канорагирӣ кунед.

Истифода

Маслиҳати абзорро тавассути JavaScript фаъол созед:

$ ( '#мисол' ). маслиҳати асбобҳо ( имконот )

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-animation="".

Нишондиҳӣ

<a href = "#" data-toggle = "tooltip" title = "аввалин маслиҳат" > курсорро болои ман гузаронед </a>   

Усулҳо

$().маслиҳат(имконот)

Дастгиркунандаи маслиҳатро ба коллексияи элементҳо замима мекунад.

.tooltip('нишон')

Маслиҳати асбоби элементро ошкор мекунад.

$ ( '#элемент' ). Маслиҳат ( 'намоиш' )

.tooltip('пинҳон')

Маслиҳати асбоби элементро пинҳон мекунад.

$ ( '#элемент' ). маслиҳати асбобҳо ( 'пинҳон кардан' )

.tooltip('гузариш')

Маслиҳати асбоби элементро иваз мекунад.

$ ( '#элемент' ). маслиҳати асбобҳо ( 'гузариш' )

.tooltip('нобуд кардан')

Маслиҳати асбоби элементро пинҳон ва нобуд мекунад.

$ ( '#элемент' ). маслиҳати асбобҳо ( 'нобуд кардан' )

Мисолхо

Иловаи қабатҳои хурди мундариҷа, ба монанди онҳое, ки дар iPad, ба ҳама гуна унсурҳо барои ҷойгиркунии маълумоти дуюмдараҷа. Тугмачаро ба болои тугма гузоред, то поповро фаъол созед. Барои дохил кардани Tooltip талаб мекунад .

Попвери статикӣ

Чор вариант мавҷуд аст: боло, рост, поён ва ба чап мувофиқ.

Ягон аломате, ки ҳамчун поповҳо нишон дода шудааст, аз JavaScript ва мундариҷа дар дохили атрибут тавлид dataнамешавад.

Намоиши зинда

Чор самт

Истифода

Поповҳоро тавассути JavaScript фаъол созед:

$ ( '#мисол' ). popover ( имконот )

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-animation="".

Нишондиҳӣ

Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis интихоб шудаанд. Агар шумо хоҳед, ки онҳоро истифода баред, танҳо як варианти селекторро муайян кунед.

Усулҳо

$().popover(имконот)

Поповҳоро барои коллексияи элементҳо оғоз мекунад.

.popover('намоиш')

Элементҳои поповро ошкор мекунад.

$ ( '#элемент' ). popover ( 'намоиш' )

.popover('пинҳон')

Попвери элементҳоро пинҳон мекунад.

$ ( '#элемент' ). popover ( 'пинҳон кардан' )

.popover('гузариш')

Калиди элементҳоро иваз мекунад.

$ ( '#элемент' ). popover ( 'гузариш' )

.popover('нобуд кардан')

Попвери элементро пинҳон ва нобуд мекунад.

$ ( '#элемент' ). popover ( 'нобуд кардан' )

Намунаи огоҳиҳо

Бо ин плагин ба ҳама паёмҳои огоҳкунанда функсияи радкунӣ илова кунед.

Истифода

Қатъи огоҳиро тавассути JavaScript фаъол созед:

$ ( ".alert" ). огоҳӣ ()

Нишондиҳӣ

Танҳо data-dismiss="alert"ба тугмаи пӯшидаи худ илова кунед, то ба таври худкор функсияи наздики ҳушдор диҳад.

<a class = "close" data-dississ = "alert" href = "#" > × </a>   

Усулҳо

$(). alert()

Ҳама огоҳиҳоро бо функсияҳои наздик фаро мегирад. Барои он ки ҳушдорҳои шумо ҳангоми басташавӣ фаъол шаванд, боварӣ ҳосил кунед, ки онҳо аллакай .fadeва .inсинфро ба онҳо татбиқ кардаанд.

.alert('пушидани')

Огоҳӣ мепӯшад.

$ ( ".alert" ). огоҳӣ ( 'наздик' )

Ҳодисаҳо

Синфи огоҳии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи огоҳӣ фош мекунад.

$ ( '#худдори ман' ). пайваст ( 'пӯшида' , функсия () {   
  // коре кунед…
})

Намунаҳои истифода

Бо тугмаҳо бештар кор кунед. Тугмаи идоракуниро барои ҷузъҳои бештар ба монанди панелҳои асбобҳо гурӯҳҳо ё эҷод кардани тугмаҳо.

Давлатманд

Барои data-loading-text="Loading..."истифодаи ҳолати боркунӣ дар тугма илова кунед.

<button type = "button" class = "btn btn-primary" data-loading-text = "Бор карда мешавад..." > Ҳолати боркунӣ </button>   

Гузариш ягона

Барои data-toggle="button"фаъол кардани гузариш дар як тугма илова кунед.

< навъи тугма = "тугма" синф = "btn btn-primary" data-toggle = "тугма" > Гузариш ягона </тугма>   

Қуттии қайд

Барои data-toggle="buttons-checkbox"иваз кардани услуби қуттии қайдкунӣ дар btn-group илова кунед.

<див  class = "btn-group" data- toggle = "buttons-checkbox " > 
  < навъи тугма  = "button" class = "btn btn-primary" > Чап </тугма> 
  < навъи тугма  тугма = "button" class = "btn btn-primary" > Миёна </тугма> 
  <тугма  type = "button" class = "btn btn-primary" > Рост </тугма> 
</div>

Радио

Барои data-toggle="buttons-radio"иваз кардани услуби радио дар btn-group илова кунед.

<div class = "btn-group"   data-toggle = "тугмаҳо-радио" >
  < навъи тугма = "тугма" синфи =  "btn btn-primary" > Чап </тугма>
  < навъи тугма = "тугма" синфи =  "btn btn-primary" > Миёна </тугма>
  < навъи тугма = синфи "тугма"  = "btn btn-primary" > Рост </тугма>
</div>

Истифода

Тугмаҳоро тавассути JavaScript фаъол созед:

$ ( '.nav-tabs' ).button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

Ҳеҷ

Усулҳо

$().тугма('гузариш')

Ҳолати фишорро иваз мекунад. Тугма намуди зоҳириро медиҳад, ки он фаъол шудааст.

<button type="button" class="btn" data-toggle="button" >…</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

About

Get base styles and flexible support for collapsible components like accordions and navigation.

* Requires the Transitions plugin to be included.

Example accordion

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>

Usage

Via data attributes

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.

Via JavaScript

Enable manually with:

$(".collapse").collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

$('#myCollapsible').on('hidden', function () {
  // do something…
})

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Usage

Via data attributes

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.

Via JavaScript

Call carousel manually with:

$('.carousel').carousel()

Options

Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as in data-interval="".

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Example

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.

Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.

Usage

Via data attributes

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>

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".