Indibidwal o pinagsama-sama

Maaaring isama ang mga plugin nang isa-isa (bagama't ang ilan ay nangangailangan ng mga dependency), o sabay-sabay. Parehong bootstrap.js at bootstrap.min.js ay naglalaman ng lahat ng mga plugin sa isang file.

Mga katangian ng data

Maaari mong gamitin ang lahat ng plugin ng Bootstrap sa pamamagitan lamang ng markup API nang hindi nagsusulat ng isang linya ng JavaScript. Ito ang unang klase ng API ng Bootstrap at dapat ang iyong unang pagsasaalang-alang kapag gumagamit ng isang plugin.

Iyon ay sinabi, sa ilang mga sitwasyon ay maaaring kanais-nais na i-off ang functionality na ito. Samakatuwid, nagbibigay din kami ng kakayahang i-disable ang data attribute API sa pamamagitan ng pag-unbinding ng lahat ng event sa body namespace na may `'data-api'`. Mukhang ganito:

$ ( 'katawan' ). naka -off ( '.data-api' )

Bilang kahalili, upang i-target ang isang partikular na plugin, isama lamang ang pangalan ng plugin bilang isang namespace kasama ang data-api namespace tulad nito:

$ ( 'katawan' ). naka -off ( '.alert.data-api' )

Programmatic API

Naniniwala rin kami na dapat mong magamit ang lahat ng Bootstrap plugins sa pamamagitan lamang ng JavaScript API. Ang lahat ng mga pampublikong API ay iisa, nakaka-chainable na mga pamamaraan, at ibinabalik ang koleksyon na naaksyunan.

$ ( ".btn.danger" ). button ( "toggle" ). addClass ( "taba" )

Ang lahat ng mga pamamaraan ay dapat tumanggap ng isang opsyonal na object na opsyon, isang string na nagta-target sa isang partikular na paraan, o wala (na nagpasimula ng isang plugin na may default na gawi):

$ ( "#myModal" ). modal () // sinimulan na may mga default                       
$ ( "#myModal" ). modal ({ keyboard : false }) // sinimulan nang walang keyboard     
$ ( "#myModal" ). modal ( 'show' ) // nag-initialize at nag-invoke ng show kaagad                

Inilalantad din ng bawat plugin ang raw constructor nito sa isang property na `Constructor`: $.fn.popover.Constructor. Kung gusto mong makakuha ng partikular na instance ng plugin, direktang kunin ito mula sa isang elemento: $('[rel=popover]').data('popover').

Walang Salungatan

Minsan kinakailangan na gumamit ng mga plugin ng Bootstrap kasama ng iba pang mga framework ng UI. Sa mga sitwasyong ito, maaaring mangyari paminsan-minsan ang mga banggaan ng namespace. Kung mangyari ito, maaari kang tumawag .noConflictsa plugin na nais mong ibalik ang halaga.

var bootstrapButton = $ . fn . buton . noConflict () // ibalik ang $.fn.button sa dating itinalagang value 
$ . fn . bootstrapBtn = bootstrapButton             // bigyan $().bootstrapBtn ang bootstrap functionality

Mga kaganapan

Nagbibigay ang Bootstrap ng mga custom na kaganapan para sa karamihan ng mga natatanging pagkilos ng plugin. Sa pangkalahatan, ang mga ito ay nasa anyong infinitive at past participle - kung saan ang infinitive (hal. show) ay na-trigger sa simula ng isang kaganapan, at ang past participle form nito (hal. shown) ay trigger sa pagkumpleto ng isang aksyon.

Ang lahat ng infinitive na kaganapan ay nagbibigay ng preventDefault na functionality. Nagbibigay ito ng kakayahang ihinto ang pagpapatupad ng isang aksyon bago ito magsimula.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    kung (! data ) bumalik e . preventDefault () // hihinto ang modal mula sa pagpapakita   
})

Tungkol sa mga transition

Para sa mga simpleng transition effect, isama ang bootstrap-transition.js nang isang beses sa tabi ng iba pang mga JS file. Kung ginagamit mo ang pinagsama-sama (o pinaliit) na bootstrap.js , hindi na kailangang isama ito—nandiyan na ito.

Mga kaso ng paggamit

Ilang halimbawa ng transition plugin:

• Dumudulas o kumukupas sa mga modal
• Naglalaho ang mga tab
• Pagkupas ng mga alerto
• Mga sliding carousel pane

Mga halimbawa

Ang mga modal ay streamline, ngunit nababaluktot, ang mga dialog na prompt na may pinakamababang kinakailangang functionality at mga smart default.

Static na halimbawa

Isang nai-render na modal na may header, katawan, at hanay ng mga pagkilos sa footer.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modal na header </h3>
  </div>
  <div class = "modal-body" > 
    <p> Isang magandang katawan... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Isara </a>  
    <a href = "#" class = "btn btn-primary" > I- save ang mga pagbabago </a>  
  </div>
</div>

Live na demo

I-toggle ang isang modal sa pamamagitan ng JavaScript sa pamamagitan ng pag-click sa button sa ibaba. Magda-slide ito pababa at maglalaho mula sa itaas ng page.

<!-- Button para 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 = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Isang magandang katawan... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Close </button>   
    <button class = "btn btn-primary" > I- save ang mga pagbabago </button> 
  </div>
</div>

Paggamit

Sa pamamagitan ng mga katangian ng data

Mag-activate ng modal nang hindi nagsusulat ng JavaScript. Itakda data-toggle="modal"sa isang elemento ng controller, tulad ng isang button, kasama ng isang data-target="#foo"o href="#foo"upang i-target ang isang partikular na modal upang i-toggle.

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

Sa pamamagitan ng JavaScript

Tumawag ng modal na may id myModalna may isang linya ng JavaScript:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-backdrop="".

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

Paraan

.modal(options)

Ina-activate ang iyong content bilang modal. Tumatanggap ng opsyonal na opsyon object.

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

.modal('toggle')

Manu-manong i-toggle ang isang modal.

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

.modal('show')

Manu-manong nagbubukas ng modal.

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

.modal('itago')

Manu-manong nagtatago ng modal.

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

Mga kaganapan

Ang modal class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa modal functionality.

$ ( '#myModal' ). on ( 'nakatago' , function () {   
  // gumawa ng paraan…
})

Mga halimbawa

Magdagdag ng mga dropdown na menu sa halos anumang bagay gamit ang simpleng plugin na ito, kabilang ang navbar, mga tab, at mga tabletas.

Sa loob ng isang navbar

Sa loob ng mga tab

Paggamit

Sa pamamagitan ng mga katangian ng data

Idagdag data-toggle="dropdown"sa isang link o button upang i-toggle ang isang 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>

Upang panatilihing buo ang mga URL, gamitin ang data-targetkatangian sa halip na 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>

Sa pamamagitan ng JavaScript

Tawagan ang mga dropdown sa pamamagitan ng JavaScript:

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

Mga pagpipilian

wala

Paraan

$().dropdown('toggle')

Isang programmatic na api para sa pag-toggling ng mga menu para sa isang naibigay na navbar o naka-tab na nabigasyon.

Halimbawa sa navbar

Ang ScrollSpy plugin ay para sa awtomatikong pag-update ng nav target batay sa scroll position. Mag-scroll sa lugar sa ibaba ng navbar at panoorin ang aktibong pagbabago ng klase. Ang mga dropdown na sub item ay iha-highlight din.

Paggamit

Sa pamamagitan ng mga katangian ng data

Upang madaling magdagdag ng scrollspy na gawi sa iyong topbar navigation, idagdag lang data-spy="scroll"sa elementong gusto mong tiktikan (kadalasan ay ito ang body) at data-target=".navbar"upang piliin kung aling nav ang gagamitin. Gusto mong gumamit ng scrollspy na may .navbahagi.

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

Sa pamamagitan ng JavaScript

Tawagan ang scrollspy sa pamamagitan ng JavaScript:

$ ( '#navbar' ). scrollspy ()

Paraan

.scrollspy('refresh')

Kapag gumagamit ng scrollspy kasabay ng pagdaragdag o pag-alis ng mga elemento mula sa DOM, kakailanganin mong tawagan ang paraan ng pag-refresh tulad nito:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset="".

Mga kaganapan

Mga halimbawang tab

Magdagdag ng mabilis, dynamic na paggana ng tab upang lumipat sa mga pane ng lokal na nilalaman, kahit na sa pamamagitan ng mga dropdown na menu.

Paggamit

Paganahin ang mga tab na tab sa pamamagitan ng JavaScript (kailangang isaaktibo ang bawat tab):

$ ( '#myTab a' ). i- click ang ( function ( e ) {  
  e . preventDefault ();
  $ ( ito ). tab ( 'ipakita' );
})

Maaari mong i-activate ang mga indibidwal na tab sa maraming paraan:

$ ( '#myTab a[href="#profile"]' ). tab ( 'ipakita' ); // Pumili ng tab ayon sa pangalan 
$ ( '#myTab a:first' ). tab ( 'ipakita' ); // Piliin ang unang tab 
$ ( '#myTab a:last' ). tab ( 'ipakita' ); // Piliin ang huling tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'ipakita' ); // Pumili ng ikatlong tab (0-indexed) 

Markup

Maaari mong i-activate ang isang tab o pill navigation nang hindi sumusulat ng anumang JavaScript sa pamamagitan lamang ng pagtukoy data-toggle="tab"o data-toggle="pill"sa isang elemento. Ang pagdaragdag ng navat mga nav-tabsklase sa tab ulay maglalapat ng Bootstrap tab styling.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </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" > Mga Setting </a></li>  
</ul>

Paraan

$().tab

Ina-activate ang isang elemento ng tab at lalagyan ng nilalaman. Ang tab ay dapat may alinman sa isang data-targeto isang pag- hreftarget ng isang container node sa DOM.

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

Mga kaganapan

$ ( 'a[data-toggle="tab"]' ). on ( 'ipinakita' , function ( e ) {   
  e . target // na-activate na tab
  e . relatedTarget // nakaraang tab
})

Mga halimbawa

May inspirasyon ng mahusay na jQuery.tipsy plugin na isinulat ni Jason Frame; Ang mga tooltip ay isang na-update na bersyon, na hindi umaasa sa mga larawan, gumagamit ng CSS3 para sa mga animation, at data-attribute para sa lokal na imbakan ng pamagat.

Para sa mga dahilan ng pagganap, ang tooltip at popover data-apis ay naka-opt in, ibig sabihin , dapat mong simulan ang mga ito mismo .

Mag-hover sa mga link sa ibaba upang makita ang mga tooltip:

Apat na direksyon

Mga tooltip sa mga pangkat ng pag-input

Kapag gumagamit ng mga tooltip at popover sa mga grupo ng input ng Bootstrap, kakailanganin mong itakda ang containeropsyong (nakadokumento sa ibaba) upang maiwasan ang mga hindi gustong epekto.

Paggamit

I-trigger ang tooltip sa pamamagitan ng JavaScript:

$ ( '#example' ). tooltip ( mga pagpipilian )

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Markup

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

Paraan

$().tooltip(mga opsyon)

Nag-a-attach ng tooltip handler sa isang koleksyon ng elemento.

.tooltip('show')

Nagpapakita ng tooltip ng isang elemento.

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

.tooltip('itago')

Itinatago ang tooltip ng isang elemento.

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

.tooltip('toggle')

I-toggle ang tooltip ng isang elemento.

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

.tooltip('destroy')

Itinatago at sinisira ang tooltip ng isang elemento.

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

Mga halimbawa

Magdagdag ng maliliit na overlay ng content, tulad ng nasa iPad, sa anumang elemento para sa pabahay ng pangalawang impormasyon. Mag-hover sa button para ma-trigger ang popover. Nangangailangan ng Tooltip na maisama.

Static popover

Apat na opsyon ang available: naka-align sa itaas, kanan, ibaba, at kaliwa.

Walang markup na ipinapakita bilang mga popover na nabuo mula sa JavaScript at nilalaman sa loob ng isang datakatangian.

Live na demo

Apat na direksyon

Paggamit

Paganahin ang mga popover sa pamamagitan ng JavaScript:

$ ( '#example' ). popover ( mga pagpipilian )

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-animation="".

Markup

Para sa mga dahilan ng pagganap, ang Tooltip at Popover data-apis ay naka-opt in. Kung gusto mong gamitin ang mga ito, tumukoy lang ng opsyon sa selector.

Paraan

$().popover(opsyon)

Sinisimulan ang mga popover para sa isang koleksyon ng elemento.

.popover('show')

Nagpapakita ng mga elementong popover.

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

.popover('itago')

Itinatago ang isang elemento ng popover.

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

.popover('toggle')

I-toggle ang isang elementong popover.

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

.popover('sirain')

Itinatago at sinisira ang popover ng isang elemento.

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

Mga halimbawang alerto

Magdagdag ng dismiss functionality sa lahat ng alertong mensahe gamit ang plugin na ito.

Paggamit

Paganahin ang pag-dismiss ng isang alerto sa pamamagitan ng JavaScript:

$ ( ".alerto" ). alerto ()

Markup

Idagdag lang data-dismiss="alert"sa iyong close button para awtomatikong magbigay ng alertong close functionality.

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

Paraan

$().alerto()

Binabalot ang lahat ng alerto na may malapit na paggana. Upang mai-animate ang iyong mga alerto kapag isinara, tiyaking nailapat na sa kanila ang .fadeat klase..in

.alert('close')

Nagsasara ng alerto.

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

Mga kaganapan

Ang klase ng alerto ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa pag-hook sa pagpapagana ng alerto.

$ ( '#my-alert' ). bind ( 'sarado' , function () {   
  // gumawa ng paraan…
})

Halimbawa ng mga gamit

Gumawa ng higit pa gamit ang mga pindutan. Ang control button ay nagsasaad o lumikha ng mga pangkat ng mga button para sa higit pang mga bahagi tulad ng mga toolbar.

Stateful

Idagdag data-loading-text="Loading..."upang gumamit ng estado ng paglo-load sa isang button.

<button type = "button" class = "btn btn-primary" data-loading-text = "Naglo-load..." > Katayuan ng paglo- load </button>   

Single toggle

Idagdag data-toggle="button"para i-activate ang toggling sa iisang button.

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

Checkbox

Idagdag 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" > Kaliwa </button>  
  <button type = "button" class = "btn btn-primary" > Gitna </button>  
  <button type = "button" class = "btn btn-primary" > Kanan </button>  
</div>

Radyo

Idagdag 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" > Kaliwa </button>  
  <button type = "button" class = "btn btn-primary" > Gitna </button>  
  <button type = "button" class = "btn btn-primary" > Kanan </button>  
</div>

Paggamit

Paganahin ang mga button sa pamamagitan ng JavaScript:

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

Markup

Ang mga katangian ng data ay mahalaga sa plugin ng button. Tingnan ang halimbawang code sa ibaba para sa iba't ibang uri ng markup.

Mga pagpipilian

wala

Paraan

$().button('toggle')

I-toggle ang estado ng push. Binibigyan ang pindutan ng hitsura na ito ay na-activate.

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

$().button('loading')

Itinatakda ang estado ng button sa paglo-load - dini-disable ang button at pagpapalit ng text sa paglo-load ng text. Ang paglo-load ng text ay dapat tukuyin sa elemento ng button gamit ang attribute ng data data-loading-text.

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

$().button('reset')

Nire-reset ang estado ng button - pinapalitan ang text sa orihinal na text.

$().button(string)

Nire-reset ang estado ng button - pinapalitan ang teksto sa anumang tinukoy na estado ng teksto ng data.

< uri ng button =  "button" class = "btn" data-complete-text = "tapos na!" > ... </button>   
<script>
  $ ( '.btn' ). pindutan ( 'kumpleto' )
</script>

Tungkol sa

Kumuha ng mga base na istilo at flexible na suporta para sa mga collapsible na bahagi tulad ng mga accordion at navigation.

* Nangangailangan ng plugin ng Transitions upang maisama.

Halimbawa ng akurdyon

Gamit ang collapse plugin, gumawa kami ng simpleng widget ng estilo ng accordion:

<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" >
        Nako-collapsible na 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>
...

Maaari mo ring gamitin ang plugin nang walang accordion markup. Gumawa ng isang pindutan na i-toggle ang pagpapalawak at pagbagsak ng isa pang elemento.

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

Paggamit

Sa pamamagitan ng mga katangian ng data

Idagdag lang data-toggle="collapse"at a data-targetto element para awtomatikong magtalaga ng kontrol sa isang collapsible na elemento. Tumatanggap ang data-targetattribute ng css selector para ilapat ang collapse. Tiyaking idagdag ang klase collapsesa collapsible na elemento. Kung gusto mo itong maging default na bukas, idagdag ang karagdagang klase in.

Upang magdagdag ng tulad-accordion na pamamahala ng pangkat sa isang collapsible na kontrol, idagdag ang attribute ng data data-parent="#selector". Sumangguni sa demo upang makita ito sa pagkilos.

Sa pamamagitan ng JavaScript

Paganahin nang manu-mano gamit ang:

$ ( ".collapse" ). gumuho ()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-parent="".

Paraan

.collapse(options)

Ina-activate ang iyong content bilang isang collapsible na elemento. Tumatanggap ng opsyonal na opsyon object.

$ ( '#myCollapsible' ). gumuho ({
  toggle : mali 
})

.collapse('toggle')

I-toggle ang isang nako-collaps na elemento sa ipinapakita o nakatago.

.collapse('show')

Nagpapakita ng nati-collapse na elemento.

.collapse('itago')

Itinatago ang isang collapsible na elemento.

Mga kaganapan

Ang collapse class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa collapse functionality.

$ ( '#myCollapsible' ). on ( 'nakatago' , function () {   
  // gumawa ng paraan…
})

Halimbawa ng carousel

Ang slideshow sa ibaba ay nagpapakita ng generic na plugin at component para sa pagbibisikleta sa mga elemento tulad ng carousel.

Unang label ng Thumbnail

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 item -->
  <div class = "carousel-inner" > 
    <div class = "aktibong 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>

Paggamit

Sa pamamagitan ng mga katangian ng data

Gumamit ng mga attribute ng data para madaling makontrol ang posisyon ng carousel. data-slidetumatanggap ng mga keyword prevo next, na nagbabago sa posisyon ng slide na nauugnay sa kasalukuyang posisyon nito. Bilang kahalili, gamitin data-slide-toupang ipasa ang isang raw slide index sa carousel data-slide-to="2", na tumalon sa posisyon ng slide sa isang partikular na index na nagsisimula sa 0.

Sa pamamagitan ng JavaScript

Manu-manong tumawag sa carousel gamit ang:

$ ( '.carousel' ). carousel ()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScriptz. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-interval="".

Paraan

.carousel(mga opsyon)

Sinisimulan ang carousel gamit ang isang opsyonal na opsyon objectat magsisimulang umikot sa mga item.

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

.carousel('cycle')

Umiikot sa mga carousel item mula kaliwa hanggang kanan.

.carousel('pause')

Pinipigilan ang carousel mula sa pagbibisikleta sa mga item.

.carousel(number)

Iniikot ang carousel sa isang partikular na frame (batay sa 0, katulad ng isang array).

.carousel('prev')

Ikot sa nakaraang item.

.carousel('susunod')

Ikot sa susunod na item.

Mga kaganapan

Ang klase ng carousel ng Bootstrap ay naglalantad ng dalawang kaganapan para sa pag-hook sa pagpapagana ng carousel.

Halimbawa

Isang basic, madaling pinalawak na plugin para sa mabilis na paggawa ng mga eleganteng typeahead na may anumang form na text input.

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

Gugustuhin mong itakda autocomplete="off"upang pigilan ang mga default na menu ng browser mula sa paglitaw sa dropdown ng typeahead ng Bootstrap.

Paggamit

Sa pamamagitan ng mga katangian ng data

Magdagdag ng mga katangian ng data upang magrehistro ng isang elemento na may pagpapagana ng typeahead gaya ng ipinapakita sa halimbawa sa itaas.

Sa pamamagitan ng JavaScript

Manu-manong tawagan ang typeahead gamit ang:

$ ( '.typeahead' ). typeahead ()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-source="".

Paraan

.typeahead(mga opsyon)

Nagsisimula ng input na may typeahead.

Halimbawa

Ang subnavigation sa kaliwa ay isang live na demo ng affix plugin.

Paggamit

Sa pamamagitan ng mga katangian ng data

Para madaling magdagdag ng gawi ng affix sa anumang elemento, idagdag lang data-spy="affix"sa elementong gusto mong tiktikan. Pagkatapos ay gumamit ng mga offset upang tukuyin kung kailan i-toggle ang pag-pin ng isang elemento sa on at off.

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

Sa pamamagitan ng JavaScript

Tawagan ang affix plugin sa pamamagitan ng JavaScript:

$ ( '#navbar' ). panlapi ()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset-top="200".