E uiga i modals

Ose fa'amanino, ae fetu'una'i, fa'aaoga le javascript modal plugin fa'atasi ma na'o le fa'aitiitiga mana'omia ma fa'aletonu atamai.

Fa'ata'ita'iga tumau

O lo'o i lalo se faiga fa'atusa fa'atusa.

Live demo

Su'e se modal 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ʻaaogaina bootstrap-modal

Valaau le modal e ala i le javascript:

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

Filifiliga

Fa'ailoga

E mafai ona e faʻagaoioia modals i luga o lau itulau faigofie e aunoa ma le tusiaina o se laina se tasi o javascript. Na'o le tu'u data-toggle="modal"i luga o se elemene fa'atonutonu ma se data-target="#foo"po'o href="#foo"e fetaui ma se id elemene, ma pe a kiliki, o le a fa'alauiloa lau auala.

E le gata i lea, e faʻaopoopo filifiliga i lau faʻataʻitaʻiga faʻataʻitaʻiga, naʻo le faʻapipiʻiina o faʻamatalaga faʻamatalaga i luga ole elemene pulea poʻo le faʻailoga faʻailoga lava ia.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Launch Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <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" data-dismiss = "modal" > Tapuni </a>   
    <a href = "#" class = "btn btn-primary" > Sefe suiga </a>  
  </div>
</div>

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...
})

E uiga i fa'amaulalo

Faʻaopoopo i lalo menus i le toetoe lava o soʻo se mea i Bootstrap ma lenei faʻapipiʻi faigofie. O le Bootstrap o loʻo faʻaalia ai le lagolago atoa o le lisi i lalo i luga o le navbar, tabs, ma fualaau.

Faataitaiga

Kiliki i luga o feso'ota'iga nav i lalo i le navbar ma pills o lo'o i lalo e su'e ai fa'alalo.

• So'oga masani
• Pa'u i lalo
  • Action
  • Another action
  • Something else here
  • Separated link
• Pa'u i lalo 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Pa'u i lalo 3
  • Action
  • Another action
  • Something else here
  • Separated link

Fa'aaogāina bootstrap-dropdown.js

Valaau le pa'u i lalo e ala i le javascript:

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

Fa'ailoga

Ina ia vave fa'aopoopo galuega fa'alalo i so'o se elemene na'o le fa'aopoopo data-toggle="dropdown"ma so'o se fa'amaufa'ailoga bootstrap aoga o le a otometi lava ona fa'agaoioia.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > So'oga masani </a></li>  
  <li vasega = "pa'u i lalo" id = "menu1" >  
    <a vasega = "pa'u-toggle" data-toggle = "pa'u i lalo" href = "#menu1" >   
      Pa'u i lalo
      <b class = "caret" ></b> 
    </a>
    <ul class = "fa'alalo-menu" > 
      <li><a href = "#" > Fa'atino </a></li> 
      <li><a href = "#" > O se isi gaioiga </a></li> 
      <li><a href = "#" > O se isi mea iinei </a></li> 
      <li vasega = "vaelua" ></li> 
      <li><a href = "#" > So'oga vavae </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li vasega = "pa'u i lalo" > 
    <a class = "pa'u-toggle" data-toggle = "pa'u i lalo" data-target = "#" href = "path/to/page.html" >    
      Pa'u i lalo
      <b class = "caret" ></b> 
    </a>
    <ul class = "fa'alalo-menu" > 
      ...
    </ul>
  </li>
</ul>

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.

O le ScrollSpy plugin e mo le fa'afouina otometi fa'atatau o le nav e fa'atatau i le tulaga ta'ai.

Faataitaiga navbar ma scrollspy

Fa'asolo le vaega o lo'o i lalo ma matamata i le fa'afouga o fa'atautaiga. O le a fa'amaninoina fo'i le fa'ailoga pito i lalo. Taumafai!

Fa'aaogāina bootstrap-scrollspy.js

Valaau le scrollspy e ala i le javascript:

$ ( '#navbar' ). scrollspy ()

Fa'ailoga

Ina ia faʻafaigofie ona faʻapipiʻi le amio taʻavale i lau faʻasalalauga pito i luga, naʻo le faʻaopopo data-spy="scroll"i le elemene e te manaʻo e sipai ai (sili ona masani o le tino lea).

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

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

Mea na tutupu

O lenei mea fa'apipi'i fa'aopoopoina vave, fa'agaioiga fa'agaioiga ma piliki mo le fa'aliliuina i totonu o mea fa'apitonu'u.

Fa'ata'ita'iga tabs

Kiliki fa'amau o lo'o i lalo e fa'asolo i le va o fa'ailo natia, e o'o lava ile fa'aulu i lalo menus.

• Aiga
• Tala'aga
• Pa'u i lalo
  • @fat
  • @mdo

Fa'aaogāina bootstrap-tab.js

Fa'aaga tabbable tabs e ala i le javascript (e mana'omia 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 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'amaonia 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" > Messages </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"]' ). on ( 'fa'aalia' , galuega (   e ) { 
  u . sini // fa'agaoioia tab
  u . relatedTarget // tab muamua
})

E uiga i Tooltips

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 css3 mo fa'afiafiaga, ma fa'amaumauga-uiga mo le teuina o suafa fa'apitonu'u.

Fa'ata'ita'iga le fa'aogaina o Tooltips

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

Fa'aaogāina bootstrap-tooltip.js

Fa'aoso le mea faigaluega e ala ile javascript:

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

Filifiliga

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 ' )

E uiga i popovers

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.

* E manaʻomia le faʻapipiʻiina o meafaigaluega

Fa'aa'oa'oga fa'apa'u popover

Fa'ae'e i luga o le ki e fa'aoso ai le popover.

Fa'aaogāina bootstrap-popover.js

Fa'aaga popovers e ala ile javascript:

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

Filifiliga

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' )

E uiga i mataala

O le fa'apipi'i mataala o se vasega la'ititi mo le fa'aopoopoina o galuega fa'atino i fa'aaliga.

Faataitaiga mataala

O le fa'apipi'i fa'alilolilo e galue i fe'au mataala masani, ma poloka fe'au.

Fa'aaogāina bootstrap-alert.js

Fa'ataga 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...
})

E uiga i

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

Fa'ata'ita'iga fa'aoga

Fa'aoga le fa'amau fa'amau mo setete ma solo.

Fa'aaogāina bootstrap-button.js

Fa'aaga fa'amau e ala ile 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.

<!-- Fa'aopoopo le data-toggle="button" e fa'agaoioi ai le so'ona i luga o le fa'amau e tasi -->
<button class = "btn" data-toggle = "button" > Sui Tasi </button>  
 
<!-- Fa'aopoopo le data-toggle="buttons-checkbox" mo le sitaili o le pusa siaki e sui i le btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Agagavale </ button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Taumatau </ button> 
</div>
 
<!-- Fa'aopoopo 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 class = "btn" > Agagavale </ button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Taumatau </ button> 
</div>

Metotia

$().button('toggle')

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

<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 class = "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 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:

Fa'aaogāina bootstrap-collapse.js

Fa'aaga e ala ile javascript:

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

Filifiliga

Fa'ailoga

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.

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

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...
})

E uiga i

O se mea fa'apipi'i lautele mo le uila i elemene. O se ta'amilosaga fiafia.

Faataitaiga carousel

Matamata i le fa'ata'ita'iga i lalo.

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.

Fa'ailoga Ata Ata Lona Lua

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.

Fa'ailoga Ata Ata Lona tolu

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.

‹ ›

Fa'aaogāina bootstrap-carousel.js

Valaau e ala ile javascript:

$ ( '.carousel' ). carousel ()

Filifiliga

Fa'ailoga

E fa'aoga uiga fa'amaumauga mo fa'atonuga muamua ma isi. Siaki le faʻailoga faʻataʻitaʻiga o loʻo i lalo.

<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 = "next" > › </a>   
</div>

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.

E uiga i

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

Faataitaiga

Amata le taina i le fanua o lo'o i lalo e fa'aalia ai fa'ai'uga o le mataitusi.

Fa'aaogāina bootstrap-typeahead.js

Valaau le mataitusi e ala i le javascript:

$ ( '.typeahead' ). mataitusi ()

Filifiliga

Fa'ailoga

Fa'aopoopo uiga fa'amaumauga e fa'amauina ai se elemene ma le fa'aogaina o le mataitusi.

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

Metotia

.typeahead(filifiliga)

Fa'amataina se fa'aoga i se mataitusi.