Ta'ito'atasi pe tuufaatasia

E mafai ona fa'aofi fa'apipi'i ta'ito'atasi (e ui o nisi e mana'omia fa'alagolago), po'o fa'atasi uma. O le bootstrap.js ma le bootstrap.min.js o loʻo iai uma faʻapipiʻi i se faila e tasi.

Uiga fa'amaumauga

E mafai ona e fa'aogaina uma Bootstrap plugins mama e ala i le fa'ailoga API e aunoa ma le tusiaina o se laina se tasi o le JavaScript. O le API vasega muamua lea a Bootstrap ma e tatau ona avea ma au iloiloga muamua pe a faʻaaogaina se masini.

Na faapea mai, i nisi tulaga atonu e manaʻomia e tape lenei galuega. O le mea lea, matou te tu'uina atu fo'i le agava'a e fa'amalo ai le fa'amatalaga uiga API e ala i le tatalaina o mea uma na tutupu i luga o le igoa o le tino fa'atasi ma le `'data-api'`. E pei o lenei:

$ ( 'tino' ). tape ( '.data-api' )

I le isi itu, e faʻatatau i se mea faʻapipiʻi faʻapitoa, naʻo le faʻapipiʻiina o le igoa ole plugin o se igoa avanoa faʻatasi ai ma le data-api namespace pei o lenei:

$ ( 'tino' ). pe ( '.alert.data-api' )

API polokalame

Matou te talitonu foi e tatau ona e faʻaogaina uma Bootstrap plugins mama e ala i le JavaScript API. O API fa'alaua'itele uma e tasi, auala e mafai ona filifili, ma toe fa'afo'i le aoina na fa'atino.

$ ( ".btn.danger" ). faamau ( "toggle" ). addClass ( "ga'o" )

O metotia uma e tatau ona talia se mea e filifili ai filifiliga, se manoa e faʻatatau i se metotia faʻapitoa, poʻo leai se mea (lea e amataina ai se faʻapipiʻi ma amioga le lelei):

$ ( "#myModal" ). modal () // amataina i faaletonu                       
$ ( "#myModal" ). modal ({ keyboard : false }) // amataina e aunoa ma se piano     
$ ( "#myModal" ). modal ( 'fa'aali' ) // amataina ma vala'au fa'aalia vave                

E fa'aalia fo'i e fa'apipi'i ta'itasi lona faufale mata'utia i luga o se meatotino `Fausia': $.fn.popover.Constructor. Afai e te manaʻo e maua se faʻataʻitaʻiga faʻapitoa faʻapipiʻi, aumai saʻo mai se elemene: $('[rel=popover]').data('popover').

Leai se Fete'ena'i

O nisi taimi e manaʻomia le faʻaogaina o Bootstrap plugins ma isi faʻavae UI. I ia tulaga, e mafai ona tupu i nisi taimi le fete'ena'iga o igoa. Afai e tupu lenei mea, e mafai ona e valaʻau .noConflicti le plugin e te manaʻo e toe faʻafoʻi le tau o.

var bootstrapButton = $ . fn . faamau . noConflict () // toe faafoi le $.fn.button i le tau na tofia muamua 
$ . fn . bootstrapBtn = bootstrapButton             // tu'u $().bootstrapBtn le fa'atinoina o galuega

Mea na tutupu

O le Bootstrap e maua ai mea faʻapitoa mo le tele o gaioiga faʻapitoa a le plugin. E masani lava, o nei mea e sau i se fa'ailoga fa'apitoa ma fa'asologa ua mavae - lea e fa'aosoina ai le infinitive (ex. show) i le amataga o se mea na tupu, ma lona fa'ailoga participle ua mavae (ex. shown) e fa'aosoina pe a mae'a se gaioiga.

O mea uma e le fa'ai'u e maua ai le fa'atinoga o le preventDefault. O lenei mea e maua ai le malosi e taofi ai le faʻatinoina o se gaioiga aʻo leʻi amataina.

$ ( '#myModal' ). i luga ( 'fa'aali' , galuega ( e ) {   
    afai (! data ) toe fo'i u . preventDefault () // taofi le modal mai le faʻaalia   
})

E uiga i suiga

Mo a'afiaga faigofie o suiga, fa'aofi bootstrap-transition.js fa'atasi ma isi faila JS. Afai o loʻo e faʻaaogaina le bootstrap.js tuʻufaʻatasia , e leai se manaʻoga e aofia ai lenei mea-ua uma ona iai.

Fa'aoga mataupu

O nai faʻataʻitaʻiga o le suiga faʻapipiʻi:

• Fa'ase'e po'o le mou atu i auala
• Ua mou atu fa'amau
• Fa'aliga fa'alilolilo
• Fa'ase'e ta'avale carousel

Faataitaiga

O auala e fa'afaigofie, ae fetu'una'i, fa'asalalauga fa'atasi ma le fa'aitiitiga mana'omia ma fa'aletonu atamai.

Fa'ata'ita'iga tumau

Se fa'atusa fa'atusa fa'atasi ai ma ulutala, tino, ma se seti o gaioiga i le vae.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-natia = "moni" > &taimi; </fa'amau>    
    <h3> Ulutala fa'atatau </h3>
  </div>
  <div class = "modal-body" > 
    <p> Tasi le tino lelei... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Tapuni </a>  
    <a href = "#" class = "btn btn-primary" > Sefe suiga </a>  
  </div>
</div>

Live demo

Su'e se fa'aoga e ala ile JavaScript ile kilikiina ole ki lalo. O le a fa'ase'e ifo i lalo ma mou atu mai le pito i luga o le itulau.

<!-- Fa'amau e fa'aoso ai le fa'asologa -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Tatala fa'ata'ita'iga auala </a>    
 
<!-- Modal -->
<div id = "myModal" vasega = "fade natia tupe" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-natia = "moni" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "moni" > × </button>    
    <h3 id = "myModalLabel" > Ulutala fa'atatau </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Tasi le tino lelei... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Tapuni </ button>   
    <button class = "btn btn-primary" > Fa'asao suiga </button> 
  </div>
</div>

Fa'aoga

E ala i fa'amaumauga uiga

Fa'agaoioia se faiga e aunoa ma le tusia o le JavaScript. Seti data-toggle="modal"i luga o se elemene e pulea, pei o se faamau, faatasi ai ma se data-target="#foo"po href="#foo"o le taulaʻi i se faiga faʻapitoa e fesuiaʻi.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Fa'alauiloa auala </button>   

E ala i le JavaScript

Valaau se modal ma id myModalma se laina e tasi o le JavaScript:

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

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-backdrop="".

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

Metotia

.modal(filifiliga)

Fa'agaoioia lau anotusi e fai ma fa'ata'ita'iga. Talia se filifiliga faitalia object.

$ ( '#myModal' ). auala ({
  piano : sese 
})

.modal('toggle')

Su'e ma le lima se faiga.

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

.modal('fa'aali')

Tatala ma le lima se auala.

$ ( '#myModal' ). modal ( 'fa'aali' )

.modal('natia')

Natia ma le lima se auala.

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

Mea na tutupu

O le vasega fa'apitoa a Bootstrap o lo'o fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega fa'atino.

$ ( '#myModal' ). i luga ( 'natia' , galuega () {   
  // fai se mea...
})

Faataitaiga

Fa'aopoopo i lalo menus i le toetoe lava o so'o se mea fa'atasi ma lenei fa'aoga faigofie, e aofia ai le navbar, tabs, ma pills.

I totonu o se navbar

I totonu o laupepa

Fa'aoga

E ala i fa'amaumauga uiga

Fa'aopoopo data-toggle="dropdown"i se so'oga po'o se fa'amau e fa'asolo i lalo.

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

Ina ia fa'atumauina URL, fa'aoga le data-targetuiga nai lo le href="#".

<div class = "pa'u i lalo" > 
  <a class = "pa'ū-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Pa'u i lalo
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

E ala i le JavaScript

Valaau le to'alalo e ala i le JavaScript:

$ ( '.dropdown-toggle' ). pa'u i lalo ()

Filifiliga

Leai

Metotia

$().pa'u i lalo('toggle')

O se api fa'akomepiuta mo le fesuia'iina o menus mo se navbar ua tu'uina atu po'o le fa'ailoga fa'apipi'i.

Faataitaiga i le navbar

O le ScrollSpy plugin e mo le fa'afouina otometi fa'atatau i luga ole laiga e fa'atatau ile tulaga ta'ai. Fa'asolo le vaega i lalo o le navbar ma matamata le suiga o le vasega. O le a fa'amaninoina fo'i le fa'ailoga pito i lalo.

Fa'aoga

E ala i fa'amaumauga uiga

Ina ia fa'afaigofie ona fa'aopoopo le amio ta'avale i lau ta'avale pito i luga, na'o le fa'aopoopo data-spy="scroll"i le elemene e te mana'o e sipai ai (sili ona masani o le tino lea) ma data-target=".navbar"filifili po'o fea nav e fa'aoga. E te mana'o e fa'aoga scrollspy ma se .navvaega.

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

E ala i le JavaScript

Valaau le scrollspy e ala i le JavaScript:

$ ( '#navbar' ). scrollspy ()

Metotia

.scrollspy('refresh')

A faʻaaoga le scrollspy faʻatasi ma le faʻaopoopoina poʻo le aveesea o elemene mai le DOM, e tatau ona e valaʻau le auala faʻafouina e pei o lea:

$ ( '[data-spy="scroll"]' ). taitasi ( galuega ( ) {  
  var $spy = $ ( lenei ). scrollspy ( 'refresh' )
});

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset="".

Mea na tutupu

Fa'ata'ita'iga tabs

Fa'aopoopo le fa'agaioiga fa'agaoioiga fa'avavevave ma fa'amalosi i le fa'aliliuina i fa'amalama o mea fa'apitonu'u, e o'o lava ile fa'aulu i lalo menus.

Fa'aoga

Fa'aaga tabbable tabs e ala i le JavaScript (ta'itasi ta'itasi e mana'omia ona fa'agaoioia ta'ito'atasi):

$ ( '#myTab a' ). kiliki ( galuega ( e ) {  
  e . preventDefault ();
  $ ( lenei ). tab ( 'fa'aali' );
})

E mafai ona e fa'agaoioia ta'iala ta'itasi i le tele o auala:

$ ( '#myTab a[href="#profile"]' ). tab ( 'fa'aali' ); // Filifili le lisi ile igoa 
$ ( '#myTab a:muamua' ). tab ( 'fa'aali' ); // Filifili le laupepa muamua 
$ ( '#myTab a:muli' ). tab ( 'fa'aali' ); // Filifili le laupepa mulimuli 
$ ( '#myTab li:eq(2) a' ). tab ( 'fa'aali' ); // Filifili le laupepa lona tolu (0-indexed) 

Fa'ailoga

E mafai ona e fa'agaoioia se fa'ailoga po'o se pill navigation e aunoa ma le tusiaina o so'o se JavaScript i le na'o le fa'ama'oti data-toggle="tab"po'o data-toggle="pill"luga o se elemene. O le fa'aopoopoina o le navma nav-tabsvasega i le fa'ailoga o le ula fa'aogaina ai le fa'ailoga o le Bootstrap tab.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Fale </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Tala'aga </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Feau </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Seti </a></li>  
</ul>

Metotia

$().tab

Fa'aagaoioia se fa'ailoga elemene ma mea o lo'o i totonu. O le Tab e tatau ona i ai se data-targetpoʻo se hreffaʻatatau i se pusa pusa i le DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Tala'aga </a></li> 
  <li><a href = "#messages" > Savali </a></li> 
  <li><a href = "#settings" > Fa'atonu </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>
  $ ( galuega () {  
    $ ( '#myTab a:muli' ). tab ( 'fa'aali' );
  })
</script>

Mea na tutupu

$ ( 'a[data-toggle="tab"]' ). i luga ( 'fa'aalia' , galuega ( e ) {   
  e . sini // fa'agaoioia tab
  e . relatedTarget // tab muamua
})

Faataitaiga

Musuia e le sili jQuery.tipsy plugin tusia e Jason Frame; Tooltips o se fa'afouga fou, e le fa'alagolago i ata, fa'aoga le CSS3 mo fa'afiafiaga, ma fa'amaumauga-uiga mo le teuina o suafa fa'apitonu'u.

Mo mafua'aga o fa'atinoga, o le tooltip ma le popover data-apis o lo'o filifili i totonu, o lona uiga e tatau ona e amataina oe lava ia .

Fa'apa i luga o so'oga o lo'o i lalo e va'ai i mea faigaluega:

Fa ituala

Tooltips i vaega fa'aoga

A fa'aoga meafaigaluega ma popovers fa'atasi ai ma vaega fa'aoga a Bootstrap, e tatau ona e setiina le container(fa'amauina i lalo) filifiliga e aloese ai mai a'afiaga e le mana'omia.

Fa'aoga

Fa'aoso le mea faigaluega e ala ile JavaScript:

$ ( '#fa'ata'ita'iga' ). mea faigaluega ( filifiliga )

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-animation="".

Fa'ailoga

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > fa'ae'e i luga o a'u </a>   

Metotia

$(). tooltip(filifiliga)

Fa'apipi'i se tu'u fa'amatalaga meafaigaluega i se aoina elemene.

.tooltip('fa'aali')

Fa'aalia le mea faigaluega o se elemene.

$ ( '#elemene' ). meafaigaluega ( 'fa'aali' )

.tooltip('natia')

Natia le mea faigaluega o se elemene.

$ ( '#elemene' ). meafaigaluega ( 'natia' )

.tooltip('toggle')

Su'e le pito meafaigaluega a se elemene.

$ ( '#elemene' ). mea faigaluega ( ' toggle ' )

.tooltip('fa'aumatia')

Natia ma fa'aleagaina le fa'aoga meafaigaluega.

$ ( '#elemene' ). meafaigaluega ( 'fa'aumatia' )

Faataitaiga

Fa'aopoopo ni fa'aputuga laiti o mea, pei o i luga ole iPad, i so'o se elemene mo fa'amatalaga lona lua o fale. Fa'ae'e i luga o le ki e fa'aoso ai le popover. Mana'omia Tooltip e fa'aaofia.

Fa'ato'a fa'apipi'i

E fa filifiliga o lo'o avanoa: luga, taumatau, pito i lalo, ma agavale fa'aoga.

Leai se fa'ailoga fa'aalia o popovers e fa'atupu mai le Javascript ma mea o lo'o i totonu o se datauiga.

Live demo

Fa ituala

Fa'aoga

Fa'amalo popovers e ala i le JavaScript:

$ ( '#fa'ata'ita'iga' ). popover ( filifiliga )

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-animation="".

Fa'ailoga

Mo mafua'aga o fa'atinoga, o le Tooltip ma le Popover data-apis e tu'u i totonu. Afai e te mana'o e fa'aoga ia na'o le fa'atonuina o se filifiliga filifiliga.

Metotia

$().popover(filifiliga)

E amata popovers mo se aoina elemene.

.popover('fa'aali')

Fa'aalia se fa'apipi'i elemene.

$ ( '#elemene' ). popover ( 'fa'aali' )

.popover('natia')

Natia se fa'apipi'i elemene.

$ ( '#elemene' ). popover ( 'natia' )

.popover('toggle')

Fa'asolo i luga o se elemene fa'apipi'i.

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

.popover('fa'aumatia')

Natia ma fa'aumatia le popover o se elemene.

$ ( '#elemene' ). popover ( 'fa'aumatia' )

Faataitaiga mataala

Fa'aopoopo galuega fa'ate'a i fe'au mataala uma i lenei fa'apipi'i.

Fa'aoga

Fa'aaga le fa'ate'aina o se mataala e ala i le JavaScript:

$ ( ".alert" ). mataala ()

Fa'ailoga

Na'o le fa'aopoopo data-dismiss="alert"i lau ki tapuni e otometi ai ona tu'uina atu se fa'agaioiga vavalalata mataalia.

<a vasega = "close" data-dismiss = "alert" href = "#" > &taimi; </a>   

Metotia

$().alert()

Ta'i fa'alilolilo uma fa'atasi ma fa'atinoga vavalalata. Ina ia fa'aoso au fa'ailo pe a tapuni, ia mautinoa o lo'o i ai le .fadema .inle vasega ua uma ona fa'aoga ia i latou.

.alert('tapuni')

Tapuni se mataala.

$ ( ".alert" ). mataala ( 'tapuni' )

Mea na tutupu

O le vasega mataala a Bootstrap o lo'o fa'aalia ni nai mea na tutupu mo le fa'aogaina i galuega mataala.

$ ( '#my-alert' ). fusifusia ( 'tapuni' , galuega () {   
  // fai se mea...
})

Fa'ata'ita'iga fa'aoga

Fai atili i fa'amau. Fa'amalo fa'aigoa po'o le faia o vaega o fa'amau mo nisi vaega e pei o meafaigaluega.

Fa'atutonu

Fa'aopoopo data-loading-text="Loading..."e fa'aoga se tulaga o le utaina i luga o se ki.

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

Kilo tasi

Fa'aopoopo data-toggle="button"e fa'agaoioi ai le sosolo i luga o le ki se tasi.

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

Pusa siaki

Fa'aopoopo data-toggle="buttons-checkbox"mo le sitaili o le pusa siaki e sui i luga o le btn-group.

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

Leitio

Fa'aopoopo data-toggle="buttons-radio"mo le sitaili o le leitio e sogi i luga o le btn-group.

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

Fa'aoga

Fa'aaga fa'amau e ala i le JavaScript:

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

Fa'ailoga

O uiga fa'amaumauga e tu'ufa'atasia i le fa'amau fa'amau. Siaki le faʻataʻitaʻiga code i lalo mo ituaiga faʻailoga eseese.

Filifiliga

Leai

Metotia

$().button('toggle')

Togi le tulaga tulei. Tu'u atu i le ki le foliga mai ua fa'agaoioia.

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

$().button('loading')

Seti le tulaga fa'amau i le uta - fa'amalo le fa'amau ma fesuiai tusitusiga i le utaina o tusitusiga. O le utaina o tusitusiga e tatau ona faʻamalamalamaina i luga o le ki elemene e faʻaaoga ai le uiga faʻamatalaga data-loading-text.

<button type = "fa'amau" vasega =   "btn" data-loading-text = "loading mea..." > ... </button>  

$().button('reset')

Toe setiina le tulaga fa'amau - fesuia'i tusitusiga i tusitusiga muamua.

$().button( manoa)

Toe setiina le tulaga fa'amau - fa'afesuia'i tusitusiga i so'o se fa'amatalaga fa'amatalaina tulaga o tusitusiga.

<button type = "button" class = "btn"    data-complete-text = "uma!" > ... </fa'amau> 
<script>
  $ ( '.btn' ). faamau ( 'maea' )
</script>

E uiga i

Maua sitaili faavae ma lagolago fetuutuunai mo vaega malepelepe pei o akordion ma le folauga.

* Manaomia le faʻapipiʻi Transitions e aofia ai.

Fa'ata'ita'iga accordion

I le faʻaaogaina o le paʻu faʻapipiʻi, na matou fausia ai se widget style accordion faigofie:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "pa'ū" data-matua = "#accordion2" href = "#collapseOne" >    
        Vaega #1
      </a>
    </div>
    <div id = "collapseOne" vasega = "accordion-body pa'ū i totonu" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a vasega = "accordion-toggle" data-toggle = "pa'ū" data-matua = "#accordion2" href = "#collapseTwo" >    
        Vaega #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

E mafai foi ona e faʻaogaina le faʻapipiʻi e aunoa ma le faʻailoga accordion. Fai se faamau e sui ai le faalautele ma le pa'u o se isi elemene.

<button type = "button" class = "btn btn-danger" data-toggle = "pa'ū" data-target = "#demo" >    
  faigofie ona malepe
</fa'amau>
 
<div id = "demo" class = "pa'ū i totonu" > … </div>  

Fa'aoga

E ala i fa'amaumauga uiga

Na'o le fa'aopoopo data-toggle="collapse"ma le data-targeti le elemene e otometi ai ona tu'uina atu le fa'atonuga o se mea e mafai ona fa'apa'ia. E data-targettalia e le uiga le css filifili e fa'aoga le pa'u i. Ia mautinoa e faaopoopo le vasega collapsei le elemene e mafai ona pa'u. Afai e te mana'o e le mafai ona tatala, fa'aopoopo le vasega fa'aopoopoin .

Ina ia fa'aopoopo le pulega vaega e pei o le accordion i se pule e mafai ona pa'u, fa'aopoopo le uiga fa'amaumauga data-parent="#selector". Va'ai i le demo e va'ai ai i lenei gaioiga.

E ala i le JavaScript

Fa'aaga ma le lima ile:

$ ( ".collapse" ). pa'u ()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-parent="".

Metotia

.collapse(filifiliga)

Fa'aagaoioia lau anotusi o se elemene e mafai ona pa'u. Talia se filifiliga faitalia object.

$ ( '#myCollapsible' ). pa'u ({
  toggle : sese 
})

.collapse('toggle')

Su'e se elemene e mafai ona pa'u e fa'aali pe natia.

.collapse('fa'aali')

Fa'aalia se elemene e mafai ona pa'u.

.collapse('natia')

Natia se elemene e mafai ona pa'u.

Mea na tutupu

O le vasega pa'u a Bootstrap o lo'o fa'aalia ni nai mea na tutupu mo le fa'aogaina o galuega fa'aletonu.

$ ( '#myCollapsible' ). i luga ( 'natia' , galuega () {   
  // fai se mea...
})

Faataitaiga carousel

O le fa'ata'ita'iga o lo'o i lalo o lo'o fa'aalia ai se mea fa'apipi'i lautele ma se vaega mo le uila i elemene e pei o se carousel.

Fa'ailoga Ulua'i Ataali'i

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and 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" vasega = "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 aitema -->
  <div class = "carousel-inner" > 
    <div class = "mea aoga" > … </div> 
    <div class = "aitema" > … </div> 
    <div class = "aitema" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a vasega = "carousel-control left" href = "#myCarousel" data-slide = "mua" > ‹ </a>   
  <a vasega = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Fa'aoga

E ala i fa'amaumauga uiga

Fa'aoga uiga fa'amaumauga e faigofie ai ona pulea le tulaga o le carousel. data-slidetalia upu autu prevpo'o le next, lea e sui ai le tulaga fa'ase'e fa'atatau i lona tulaga o iai nei. I le isi itu, fa'aaoga data-slide-toe pasi ai se fa'ailoga fa'ase'e mata i le carousel data-slide-to="2", lea e oso ai le tulaga fa'ase'e i se fa'ailoga patino e amata i le0 .

E ala i le JavaScript

Valaau ma le lima le carousel ma:

$ ( '.carousel' ). carousel ()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo JavaScriptz. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-interval="".

Metotia

.carousel(filifiliga)

Fa'amataina le carousel i se filifiliga e filifili objectma amata ai le uila i mea.

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

.carousel('taamilosaga')

Taamilomilo i aitema carousel mai le agavale i le taumatau.

.carousel('taofi')

Taofi le carousel mai le tietie uila i aitema.

.carousel(numera)

Ta'amilomilo le carousel i se fa'avaa fa'apitoa (fa'avae 0, tutusa ma se fa'asologa).

.carousel('mua'i')

Ta'amilosaga i le mea muamua.

.carousel('so'o')

Ta'amilosaga i le isi mea.

Mea na tutupu

O le vasega carousel a Bootstrap o lo'o fa'aalia ai mea e lua mo le fa'aogaina o galuega fa'aoga.

Faataitaiga

O se mea fa'apipi'i faigofie fa'alautele mo le vave faia o mataitusi mata'itusi ma so'o se fa'aoga tusitusiga.

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

E te mana'o e fa'atulaga autocomplete="off"e puipuia mai le fa'aalia o menus su'esu'e le fa'aalia i luga o le fa'aulu i lalo o le ta'itusi Bootstrap.

Fa'aoga

E ala i fa'amaumauga uiga

Fa'aopoopo uiga fa'amaumauga e fa'amauina ai se elemene ma le fa'aogaina o le mataitusi e pei ona fa'aalia i le fa'ata'ita'iga i luga.

E ala i le JavaScript

Valaau ma le lima le mataitusi ma:

$ ( '.typeahead' ). mataitusi ()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-source="".

Metotia

.typeahead(filifiliga)

Fa'amataina se fa'aoga i se mataitusi.

Faataitaiga

O le subnavigation i le agavale o se faʻaaliga ola o le faʻapipiʻi faʻapipiʻi.

Fa'aoga

E ala i fa'amaumauga uiga

Ina ia faigofie ona faʻapipiʻi amioga i soʻo se elemene, naʻo le faʻaopoopo data-spy="affix"i le elemene e te manaʻo e sipai ai. Ona fa'aoga lea o offsets e fa'amatala ai le taimi e sui ai le pine o se elemene i luga ma tape.

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

E ala i le JavaScript

Valaau le affix plugin e ala i le JavaScript:

$ ( '#navbar' ). fa'amau ()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-offset-top="200".