Ta'ito'atasi pe tuufaatasia

Afai na e siiina mai le lomiga fou o Bootstrap, o bootstrap.js ma bootstrap.min.js o loʻo iai uma faʻapipiʻi o loʻo lisiina i luga o lenei itulau.

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 JavaScript. Ole API ole vasega muamua lea a Bootstrap ma e tatau ona avea ma au iloiloga muamua pe a fa'aogaina se masini.

Na faapea mai, i nisi tulaga e ono 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 igoa faʻapipiʻi o se igoa avanoa faʻatasi 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, 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                

O mea fa'apipi'i ta'itasi e fa'aalia fo'i lona faufale mata'utia i luga o se meatotino `Constructor`: $.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').

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 o le past participle form (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. E maua ai le avanoa 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'ate'a fa'ailoga
• Fa'ase'e ta'avale carousel

Faataitaiga

E fa'amanino auala, ae fetu'una'i, fa'aoso fa'atalanoaga fa'atasi ai 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'aosoina ai le fa'asologa -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Tatala fa'ata'ita'iga auala </a>    
 
<-- Modal -->
<div class = "modal" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "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

Faaopoopo i lalo menus i le toetoe lava o soʻo se mea faʻatasi ma lenei faʻapipiʻi faigofie, e aofia ai le navbar, tabs, ma fualaau.

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" href = "#" > Fa'asolo i lalo </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()

O se polokalame fa'apolokalame mo le fa'agaoioia o menus mo se fa'ailoga tu'ufa'atasi po'o le fa'ailoga fa'apipi'i.

Faataitaiga i le navbar

O le ScrollSpy plugin e mo le fa'afouina otometi fa'atatau o le nav e fa'atatau i le 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 atu 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 (e tatau ona fa'agaoioia ta'itasi ta'itasi):

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

E mafai ona e fa'agaoioia ta'iala ta'itasi i ni 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.

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

Fa ituala

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

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.

<a href = "#" rel = "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'aleaga le pito meafaigaluega a se elemene.

$ ( '#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'amau

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

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

Live demo

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 fa'alaua'i uma fa'atasi ma 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 o galuega fa'atino.

$ ( '#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 le data-loading-text="Loading..." e fa'aoga ai le tulaga o le utaina i luga o se fa'amau.

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

Kilo tasi

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

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

Pusa siaki

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

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

Leitio

Fa'aopoopo le data-toggle="buttons-radio" mo le sitaili o le leitio o lo'o fesuia'i ile btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Agagavale </ button>  
  <button type = "button" class = "btn" > Middle </ button>  
  <button type = "button" class = "btn" > 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')

Su'e 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 utaina - fa'amalo le fa'amau ma fesuia'i 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 = "button" class = "btn" data-loading-text = "loading mea..." > ... </button>    

$().button('reset')

Toe setiina le tulaga o faamau - fesuiai tusitusiga i tusitusiga muamua.

$().button( manoa)

Toe seti le tulaga fa'amau - fesuia'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 malepe pei o accordions ma folauga.

* E manaʻomia le faʻapipiʻi Transitions e aofia ai.

Fa'ata'ita'iga accordion

I le faʻaaogaina o le paʻu paʻu, na matou fausia ai se widget sitaili faigofie:

<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'i tatalaina, fa'aopoopo le vasega fa'aopoopo in.

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'agaoioia lau anotusi o se mea 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" >  
  <!-- 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 = "sosoo" > › </a>   
</div>

Fa'aoga

E ala i fa'amaumauga uiga

...

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 le JavaScript. 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, pei o se fa'asologa).

.carousel('mua'i')

Ta'amilosaga i le mea muamua.

.carousel('sosoo')

Taamilo 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'atino.

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" >  

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" > ... </body>  

E ala i le JavaScript

Valaau le affix plugin e ala i le JavaScript:

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

Metotia

.affix('fa'afouina')

A faʻaogaina faʻatasi faʻatasi ma le faʻaopoopoina poʻo le aveesea o elemene mai le DOM, e te manaʻo e valaʻau le auala faʻafouina:

$ ( '[data-spy="affix"]' ). taitasi ( galuega ( ) {  
  $ ( lenei ). fa'apipi'i ( '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-top="200".