Indibidwal o gihugpong

Ang mga plugins mahimong iapil sa tagsa-tagsa (bisan pa ang uban nagkinahanglan og dependency), o tanan sa usa ka higayon. Parehong bootstrap.js ug bootstrap.min.js adunay tanan nga mga plugins sa usa ka file.

Mga hiyas sa datos

Mahimo nimong gamiton ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa markup API nga wala magsulat usa ka linya sa JavaScript. Kini ang una nga klase nga API sa Bootstrap ug kinahanglan ang imong una nga konsiderasyon kung mogamit usa ka plugin.

Ingon niana, sa pipila ka mga sitwasyon mahimo’g gusto nga i-off kini nga pagpaandar. Busa, naghatag usab kami og abilidad sa pag-disable sa data attribute API pinaagi sa pag-unbinding sa tanang panghitabo sa body namespaced sa `'data-api'`. Kini tan-awon sama niini:

$ ( 'lawas' ). off ( '.data-api' )

Sa laing paagi, aron ma-target ang usa ka piho nga plugin, ilakip lang ang ngalan sa plugin ingon usa ka namespace kauban ang data-api namespace sama niini:

$ ( 'lawas' ). off ( '.alert.data-api' )

Programmatic API

Nagtuo usab kami nga kinahanglan nimo nga magamit ang tanan nga mga plugin sa Bootstrap nga puro pinaagi sa JavaScript API. Ang tanang publikong API kay single, chainable nga mga pamaagi, ug ibalik ang koleksyon nga giaksyonan.

$ ( ".btn.kakuyaw" ). buton ( "toggle" ). addClass ( "tambok" )

Ang tanan nga mga pamaagi kinahanglan nga modawat sa usa ka opsyonal nga butang nga kapilian, usa ka hilo nga nagpunting sa usa ka partikular nga pamaagi, o wala (nga nagpasiugda sa usa ka plugin nga adunay default nga pamatasan):

$ ( "#akongModal" ). modal () // gisugdan sa mga default                       
$ ( "#akongModal" ). modal ({ keyboard : bakak }) // gisugdan nga walay keyboard     
$ ( "#akongModal" ). modal ( 'show' ) // nag-initialize ug nagtawag dayon sa show                

Ang matag plugin nagbutyag usab sa iyang hilaw nga constructor sa usa ka `Constructor` nga kabtangan: $.fn.popover.Constructor. Kung gusto nimo makakuha usa ka partikular nga pananglitan sa plugin, kuhaa kini direkta gikan sa usa ka elemento: $('[rel=popover]').data('popover').

Walay Panagbangi

Usahay gikinahanglan ang paggamit sa Bootstrap plugins sa ubang mga UI frameworks. Niini nga mga kahimtang, ang panagbangga sa namespace usahay mahitabo. Kung mahitabo kini, mahimo nimong tawagan .noConflictang plugin nga gusto nimo ibalik ang kantidad.

var bootstrapButton = $ . fn . butones . noConflict () // ibalik ang $.fn.button sa gi-assign kaniadto nga bili 
$ . fn . bootstrapBtn = bootstrapButton             // ihatag $().bootstrapBtn ang bootstrap functionality

Mga panghitabo

Naghatag ang Bootstrap og kostumbre nga mga panghitabo alang sa kadaghanan nga talagsaon nga mga aksyon sa plugin. Kasagaran, kini moabut sa usa ka infinitive ug past participle nga porma - diin ang inpinitibo (ex. show) ma-trigger sa pagsugod sa usa ka panghitabo, ug ang past participle nga porma niini (ex. shown) ma-trigger sa pagkompleto sa usa ka aksyon.

Ang tanan nga infinitive nga panghitabo naghatag ug preventDefault functionality. Naghatag kini og abilidad sa pagpahunong sa pagpatuman sa usa ka aksyon sa dili pa kini magsugod.

$ ( '#myModal' ). on ( 'ipakita' , function ( e ) {   
    kon (! data ) mobalik e . preventDefault () // gipahunong ang modal gikan sa pagpakita   
})

Mahitungod sa mga transisyon

Alang sa yano nga mga epekto sa transisyon, iapil ang bootstrap-transition.js kausa kauban ang ubang mga file sa JS. Kung imong gigamit ang gihugpong (o gipaminos) nga bootstrap.js , dili na kinahanglan nga iapil kini—naa na kini.

Paggamit sa mga kaso

Pipila ka mga pananglitan sa transition plugin:

• Pag-slide o pagkahanaw sa modals
• Pagwagtang sa mga tab
• Pagwagtang sa mga alerto
• Pag-slide sa mga carousel pane

Mga pananglitan

Ang mga modala gipa-streamline, apan flexible, dialog prompt nga adunay minimum nga gikinahanglan nga gamit ug mga smart default.

Static nga pananglitan

Usa ka gihubad nga modal nga adunay header, lawas, ug hugpong sa mga aksyon sa footer.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "tinuod" > & times; </button>    
    <h3> Modal nga ulohan </h3>
  </div>
  <div class = "modal-body" > 
    <p> Usa ka maayong lawas... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Close </a>  
    <a href = "#" class = "btn btn-primary" > I-save ang mga kausaban </a>  
  </div>
</div>

Live nga demo

I-toggle ang usa ka modal pinaagi sa JavaScript pinaagi sa pag-klik sa buton sa ubos. Kini mag-slide paubos ug mawala gikan sa ibabaw sa panid.

<!-- Button aron ma-trigger ang modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Ilunsad ang demo modal </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "tinuod" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "tinuod" > × </button>    
    <h3 id = "myModalLabel" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Usa ka maayong lawas... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "tinuod" > Close </button>   
    <button class = "btn btn-primary" > I-save ang mga kausaban </button> 
  </div>
</div>

Paggamit

Pinaagi sa data attributes

Pag-aktibo sa usa ka modal nga wala nagsulat sa JavaScript. Ibutang data-toggle="modal"sa usa ka elemento sa controller, sama sa usa ka buton, uban sa usa ka data-target="#foo"o href="#foo"sa target sa usa ka piho nga modal sa toggle.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Ilunsad ang modal </button>   

Pinaagi sa JavaScript

Pagtawag og modal nga adunay id myModalnga adunay usa ka linya sa JavaScript:

$ ( '#myModal' ). modal ( mga kapilian )

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-backdrop="".

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

Pamaagi

.modal(mga kapilian)

Gi-aktibo ang imong sulud ingon usa ka modal. Modawat ug opsyonal nga mga kapilian object.

$ ( '#myModal' ). modal ({
  keyboard : bakak 
})

.modal('toggle')

Manwal nga mag-toggle sa usa ka modal.

$ ( '#myModal' ). modal ( 'toggle' )

.modal('show')

Manwal nga nagbukas sa usa ka modal.

$ ( '#myModal' ). modal ( 'pakita' )

.modal('tago')

Manwal nga nagtago sa usa ka modal.

$ ( '#myModal' ). modal ( 'tago' )

Mga panghitabo

Ang modal nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa modal functionality.

$ ( '#myModal' ). on ( 'gitago' , function () {   
  // pagbuhat ug butang...
})

Mga pananglitan

Idugang ang mga dropdown menu sa halos bisan unsang butang gamit kining yano nga plugin, lakip ang navbar, mga tab, ug mga pildoras.

Sulod sa usa ka navbar

Sulod sa mga tab

Paggamit

Pinaagi sa data attributes

Idugang data-toggle="dropdown"sa usa ka link o buton aron i-toggle ang dropdown.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown trigger </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Aron magpabiling buo ang mga URL, gamita ang data-targetattribute imbes nga href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Dropdown
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Pinaagi sa JavaScript

Tawga ang mga dropdown pinaagi sa JavaScript:

$ ( '.dropdown-toggle' ). dropdown ()

Mga kapilian

Wala

Pamaagi

$().dropdown('toggle')

Usa ka programmatic api alang sa pag-togg sa mga menu para sa gihatag nga navbar o tabbed navigation.

Pananglitan sa navbar

Ang ScrollSpy plugin kay para sa awtomatikong pag-update sa mga target sa nav base sa scroll position. I-scroll ang dapit ubos sa navbar ug tan-awa ang aktibong kausaban sa klase. Ang dropdown sub nga mga butang i-highlight usab.

Paggamit

Pinaagi sa data attributes

Aron dali nga makadugang sa scrollspy nga kinaiya sa imong topbar navigation, idugang data-spy="scroll"lang sa elemento nga gusto nimong espiya (kasagaran kini mao ang lawas) ug data-target=".navbar"sa pagpili kung unsang nav ang gamiton. Gusto nimong gamiton ang scrollspy nga adunay usa ka .navsangkap.

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

Pinaagi sa JavaScript

Tawga ang scrollspy pinaagi sa JavaScript:

$ ( '#navbar' ). scrollspy ()

Pamaagi

.scrollspy('refresh')

Kung gigamit ang scrollspy kauban ang pagdugang o pagtangtang sa mga elemento gikan sa DOM, kinahanglan nimo nga tawagan ang pamaagi sa pag-refresh sama niini:

$ ( '[data-spy="scroll"]' ). matag ( function () {  
  var $espiya = $ ( kini ). scrollspy ( 'refresh' )
});

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset="".

Mga panghitabo

Mga pananglitan sa tab

Idugang ang dali, dinamikong pag-andar sa tab sa pagbalhin pinaagi sa mga pane sa lokal nga sulud, bisan pinaagi sa mga dropdown menu.

Paggamit

I-enable ang mga tab nga tab pinaagi sa JavaScript (matag tab kinahanglan nga i-activate sa tagsa-tagsa):

$ ( '#myTab a' ). click ( function ( e ) {  
  e . preventDefault ();
  $ ( niini ). tab ( 'ipakita' );
})

Mahimo nimong ma-aktibo ang indibidwal nga mga tab sa daghang mga paagi:

$ ( '#myTab a[href="#profile"]' ). tab ( 'ipakita' ); // Pilia ang tab pinaagi sa ngalan 
$ ( '#myTab a:first' ). tab ( 'ipakita' ); // Pilia ang una nga tab 
$ ( '#myTab a:last' ). tab ( 'ipakita' ); // Pilia ang katapusang tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'ipakita' ); // Pilia ang ikatulo nga tab (0-indexed) 

Markup

Mahimo nimong i-aktibo ang usa ka tab o pildoras nga nabigasyon nga wala’y pagsulat sa bisan unsang JavaScript pinaagi lamang sa pagpiho data-toggle="tab"o data-toggle="pill"sa usa ka elemento. Ang pagdugang sa navug nav-tabsmga klase sa tab ulmagamit ang estilo sa tab sa Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Panimalay </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mga Mensahe </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Settings </a></li>  
</ul>

Pamaagi

$().tab

Nag-aktibo sa usa ka elemento sa tab ug sulud sa sulud. Ang tab kinahanglan adunay usa data-targeto usa ka hreftarget sa usa ka sudlanan nga node sa DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktibo" ><a href = "#home" > Balay </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Mga Mensahe </a></li> 
  <li><a href = "#settings" > 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 = "mensahe" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). tab ( 'ipakita' );
  })
</script>

Mga panghitabo

$ ( 'usa ka[data-toggle="tab"]' ). on ( 'gipakita' , function ( e ) {   
  e . target // gi-aktibo nga tab
  e . relatedTarget // miaging tab
})

Mga pananglitan

Nadasig sa maayo kaayo nga jQuery.tipsy plugin nga gisulat ni Jason Frame; Ang mga tooltip usa ka updated nga bersyon, nga wala magsalig sa mga hulagway, naggamit sa CSS3 para sa mga animation, ug data-attributes alang sa lokal nga pagtipig sa titulo.

Alang sa mga hinungdan sa pasundayag, ang tooltip ug popover data-apis gi-opt in, nagpasabut nga ikaw mismo ang mag-initialize niini .

Pag-hover sa mga link sa ubos aron makita ang mga tooltip:

Upat ka direksyon

Mga tooltip sa input nga mga grupo

Kung mogamit mga tooltip ug popovers nga adunay mga grupo sa input sa Bootstrap, kinahanglan nimo nga itakda ang container(gidokumento sa ubos) nga kapilian aron malikayan ang dili gusto nga mga epekto.

Paggamit

I-trigger ang tooltip pinaagi sa JavaScript:

$ ( '#pananglitan' ). tooltip ( mga kapilian )

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > hover over me </a>   

Pamaagi

$().tooltip(mga opsyon)

Naglakip sa tigdumala sa tooltip sa usa ka koleksyon sa elemento.

.tooltip('ipakita')

Nagpadayag sa tooltip sa usa ka elemento.

$ ( '#elemento' ). tooltip ( 'ipakita' )

.tooltip('tago')

Nagtago sa tooltip sa usa ka elemento.

$ ( '#elemento' ). tooltip ( 'tago' )

.tooltip('toggle')

I-toggle ang tooltip sa usa ka elemento.

$ ( '#elemento' ). tooltip ( 'toggle' )

.tooltip('guba')

Nagtago ug nagguba sa tooltip sa usa ka elemento.

$ ( '#elemento' ). tooltip ( 'laglagon' )

Mga pananglitan

Idugang ang gagmay nga mga overlay sa sulud, sama sa naa sa iPad, sa bisan unsang elemento alang sa pagbutang sa sekundaryong impormasyon. I-hover ang buton aron ma-trigger ang popover. Nagkinahanglan nga iapil ang Tooltip .

Static nga popover

Upat ka mga kapilian ang magamit: taas, tuo, ubos, ug wala nga linya.

Walay markup nga gipakita isip mga popover nga namugna gikan sa JavaScript ug sulod sulod sa usa ka dataattribute.

Live nga demo

Upat ka direksyon

Paggamit

I-enable ang mga popovers pinaagi sa JavaScript:

$ ( '#pananglitan' ). popover ( mga kapilian )

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-animation="".

Markup

Alang sa mga hinungdan sa pasundayag, ang Tooltip ug Popover data-apis gipili.

Pamaagi

$().popover(mga opsyon)

Nagsugod sa mga popover para sa koleksyon sa elemento.

.popover('pakita')

Nagpadayag sa usa ka elemento nga popover.

$ ( '#elemento' ). popover ( 'ipakita' )

.popover('tago')

Nagtago sa usa ka elemento nga popover.

$ ( '#elemento' ). popover ( 'tago' )

.popover('toggle')

I-toggle ang usa ka elemento nga popover.

$ ( '#elemento' ). popover ( 'toggle' )

.popover('laglagon')

Nagtago ug nagguba sa popover sa usa ka elemento.

$ ( '#elemento' ). popover ( 'laglagon' )

Pananglitan nga mga alerto

Idugang ang dismiss functionality sa tanang alert messages niini nga plugin.

Paggamit

I-enable ang pagtangtang sa usa ka alerto pinaagi sa JavaScript:

$ ( ".alerto" ). alerto ()

Markup

Idugang lang data-dismiss="alert"sa imong close button aron awtomatik nga makahatag ug alert close functionality.

<a class = "close" data-dismiss = "alerto" href = "#" > × </a>   

Pamaagi

$().alerto()

Giputos ang tanan nga mga alerto nga adunay suod nga pagpaandar. Aron ma-animate ang imong mga alerto kung sirado, siguruha nga naa na nila ang .fadeug .inklase nga na-apply sa kanila.

.alerto('close')

Pagsira sa usa ka alerto.

$ ( ".alerto" ). alerto ( 'close' )

Mga panghitabo

Ang klase sa alerto sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa alerto.

$ ( '#akong-alerto' ). bind ( 'sirado' , function () {   
  // pagbuhat ug butang...
})

Mga pananglitan sa paggamit

Buhata ang labi pa gamit ang mga buton. Ang control button nag-ingon o paghimo og mga grupo sa mga buton alang sa dugang nga mga sangkap sama sa mga toolbar.

Stateful

Idugang data-loading-text="Loading..."aron magamit ang kahimtang sa pagkarga sa usa ka buton.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Loading state </button>   

Usa ka toggle

Idugang data-toggle="button"aron ma-activate ang toggling sa usa ka buton.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>   

Checkbox

Idugang data-toggle="buttons-checkbox"para sa checkbox style toggling sa btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Wala </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Tuo </button>  
</div>

Radyo

Idugang data-toggle="buttons-radio"para sa radio style toggling sa btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Wala </button>  
  <button type = "button" class = "btn btn-primary" > Middle </button>  
  <button type = "button" class = "btn btn-primary" > Tuo </button>  
</div>

Paggamit

I-enable ang mga buton pinaagi sa JavaScript:

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

Markup

Ang mga hiyas sa datos kay importante sa button nga plugin. Tan-awa ang pananglitan nga code sa ubos alang sa lain-laing mga tipo sa markup.

Mga kapilian

Wala

Pamaagi

$().button('toggle')

I-toggle ang estado sa pagduso. Naghatag sa buton sa hitsura nga kini gi-aktibo.

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

$().button('loading')

Gibutang ang kahimtang sa buton sa pagkarga - gipugngan ang buton ug gibaylo ang teksto sa pagkarga sa teksto. Ang pagkarga sa teksto kinahanglang ipasabot sa elemento sa buton gamit ang data attribute data-loading-text.

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

$().button('reset')

I-reset ang kahimtang sa buton - ibaylo ang teksto sa orihinal nga teksto.

$().button(kuwerdas)

I-reset ang kahimtang sa buton - ibaylo ang teksto sa bisan unsang datos nga gipiho nga kahimtang sa teksto.

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

Mahitungod sa

Pagkuha ug base nga mga estilo ug flexible nga suporta para sa collapsible nga mga component sama sa accordion ug navigation.

* Nagkinahanglan nga ang Transitions plugin iapil.

Pananglitan sa akordyon

Gamit ang collapse plugin, naghimo kami usa ka yano nga widget sa istilo sa akordyon:

<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 = "akordyon-sulod" > 
        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 = "akordyon-sulod" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Mahimo usab nimo gamiton ang plugin nga wala ang marka sa accordion. Paghimo og buton nga i-toggle ang pagpalapad ug pagkahugno sa laing elemento.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  simple nga collapsible
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Paggamit

Pinaagi sa data attributes

Idugang lang data-toggle="collapse"ug usa ka data-targetelemento aron awtomatiko nga ma-assign ang kontrol sa usa ka ma-collapsible nga elemento. Gidawat sa data-targetattribute ang usa ka css selector aron magamit ang pagkahugno. Siguroha nga idugang ang klase collapsesa collapsible nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase in.

Aron idugang ang sama sa akordyon nga pagdumala sa grupo ngadto sa usa ka collapsible nga kontrol, idugang ang data attribute data-parent="#selector". Tan-awa ang demo aron makita kini nga aksyon.

Pinaagi sa JavaScript

I-enable ang mano-mano gamit ang:

$ ( ".collapse" ). nahugno ()

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-parent="".

Pamaagi

.collapse(mga kapilian)

Gi-aktibo ang imong sulud ingon usa ka ma-collapsible nga elemento. Modawat ug opsyonal nga mga kapilian object.

$ ( '#myCollapsible' ). nahugno ({
  toggle : bakak 
})

.collapse('toggle')

I-toggle ang usa ka ma-collapsible nga elemento aron ipakita o gitago.

.collapse('show')

Nagpakita sa usa ka ma-collapsible nga elemento.

.collapse('tago')

Nagtago sa usa ka ma-collapsible nga elemento.

Mga panghitabo

Ang klase sa pagkahugno sa Bootstrap nagpadayag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa pagkahugno.

$ ( '#myCollapsible' ). on ( 'gitago' , function () {   
  // pagbuhat ug butang...
})

Pananglitan nga carousel

Ang slideshow sa ubos nagpakita sa usa ka generic nga plugin ug component alang sa pagbisikleta pinaagi sa mga elemento sama sa usa ka carousel.

Unang Thumbnail nga label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ug 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 ug 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 = "aktibo" ></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 = "aktibo nga butang" > … </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 = "sunod" > › </a>   
</div>

Paggamit

Pinaagi sa data attributes

Gamita ang data attributes aron dali makontrol ang posisyon sa carousel. data-slidegidawat ang mga keyword prevo next, nga nag-usab sa posisyon sa slide kalabot sa kini nga posisyon karon. Sa laing paagi, gamita data-slide-toang pagpasa sa usa ka hilaw nga slide index ngadto sa carousel data-slide-to="2", nga molukso sa slide position ngadto sa usa ka partikular nga index nga nagsugod sa 0.

Pinaagi sa JavaScript

Tawga ang carousel nga mano-mano gamit ang:

$ ( '.carousel' ). carousel ()

Mga kapilian

Ang mga opsyon mahimong ipasa pinaagi sa data attributes o JavaScriptz. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-interval="".

Pamaagi

.carousel(mga kapilian)

Nagsugod sa carousel nga adunay opsyonal nga mga kapilian objectug nagsugod sa pagbisikleta sa mga butang.

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

.carousel('siklo')

Naglibot sa mga butang sa carousel gikan sa wala ngadto sa tuo.

.carousel('pause')

Gipahunong ang carousel gikan sa pagbisikleta sa mga butang.

.carousel(numero)

I-cycle ang carousel ngadto sa usa ka partikular nga frame (0 base, susama sa array).

.carousel('prev')

Mga siklo sa miaging aytem.

.carousel('sunod')

Siklo ngadto sa sunod nga butang.

Mga panghitabo

Ang klase sa carousel sa Bootstrap nagbutyag sa duha ka mga panghitabo alang sa pag-hook sa pagpaandar sa carousel.

Pananglitan

Usa ka sukaranan, dali nga gipalapdan nga plugin alang sa dali nga paghimo og mga elegante nga typeahead nga adunay bisan unsang porma nga input sa teksto.

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

Gusto nimong itakda autocomplete="off"aron mapugngan ang mga default nga menu sa browser gikan sa pagpakita sa ibabaw sa Bootstrap typeahead dropdown.

Paggamit

Pinaagi sa data attributes

Pagdugang ug data attributes aron marehistro ang usa ka elemento nga adunay typeahead functionality sama sa gipakita sa panig-ingnan sa ibabaw.

Pinaagi sa JavaScript

Tawga ang typeahead nga mano-mano gamit ang:

$ ( '.typeahead' ). typeahead ()

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-source="".

Pamaagi

.typeahead(mga kapilian)

Nagsugod ug input gamit ang typeahead.

Pananglitan

Ang subnavigation sa wala kay live demo sa affix plugin.

Paggamit

Pinaagi sa data attributes

Aron dali nga makadugang ug affix nga kinaiya sa bisan unsang elemento, idugang data-spy="affix"lang sa elemento nga gusto nimong espiya. Dayon gamita ang mga offset aron mahibal-an kung kanus-a i-toggle ang pag-pin sa usa ka elemento sa on ug off.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Pinaagi sa JavaScript

Tawga ang affix plugin pinaagi sa JavaScript:

$ ( '#navbar' ). affix ()

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset-top="200".