Vaega

O le tele o vaega toe faʻaaogaina ua fausia i totonu o Bootstrap e tuʻuina atu ai faʻasalalauga, faʻaaliga, popovers, ma sili atu.

Vaega fa'amau

Fa'aaoga vaega fa'amau e tu'ufa'atasia fa'atasi fa'atasi e avea ma vaega tu'ufa'atasi e tasi. Fausia i latou i se faasologa o <a>elemene <button>.

E mafai foi ona e tu'ufa'atasia seti o <div class="btn-group">i totonu o se <div class="btn-toolbar">mo galuega fa'alavelave.

Faataitaiga faailoga

O le auala lenei e suʻe ai e le HTML se faʻalapotopotoga faʻamaufaʻailoga e fausia i faʻamau faʻamau faʻamau:

<div class = "btn-group" > 
  <a vasega = "btn" href = "#" > 1 </a>  
  <a vasega = "btn" href = "#" > 2 </a>  
  <a vasega = "btn" href = "#" > 3 </a>  
</div>

Ma faʻatasi ai ma se meafaigaluega mo le tele o vaega:

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Pusa siaki ma mea'ai leitio

E mafai fo'i ona fa'agaoioi vaega fa'amau e pei o leitio, e na'o le tasi le fa'amau e mafai ona fa'agaoioia, po'o pusa siaki, lea e mafai ona gaioi ai so'o se numera o ki. Va'ai le Javascript docs mo lena.

Maua le javascript »

Ulu i luga

CSS mo kulupu fa'amau o lo'o i totonu o se faila ese, button-groups.less.

Fa'amau i lalo

Fa'aaogā so'o se fa'amau e fa'aoso ai se lisi fa'amau i lalo e ala i le tu'u i totonu o le .btn-groupma tu'uina atu le fa'ailoga o le lisi sa'o.

Faataitaiga faailoga

E tutusa ma le vaega fa'amau, e fa'aogaina e le matou fa'ailoga le fa'ailoga fa'amau fa'amau, ae fa'atasi ai ma ni nai fa'aopoopoga e fa'alelei ai le sitaili ma lagolago ai le fa'apipi'i a Bootstrap's dropdown jQuery plugin.

<div class = "btn-group" > 
  <a vasega = "btn dropdown-toggle" data-toggle = "pa'ū lalo" href = "#" >   
    Gaioiga
    <span class = "caret" ></span> 
  </a>
  <ul class = "fa'alalo-menu" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

Vaevae fa'amau fa'amau i lalo

Fausia i luga o sitaili kulupu fa'amau ma fa'ailoga, e faigofie ona tatou faia se ki vaelua. O fa'amau vaevae o lo'o fa'aalia ai se gaioiga masani i le agavale ma se pa'u pa'u i lalo i le taumatau ma feso'ota'iga.

Faataitaiga faailoga

Matou te fa'alauteleina le fa'aulu fa'amau fa'amau e tu'u mai ai se fa'agaioiga fa'amau lona lua e fa'agaoioi e fai ma fa'aoso tu'ueseese.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Fa'atino </a>  
  <a vasega = "btn dropdown-toggle" data-toggle = "pa'ū lalo" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "fa'alalo-menu" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

Fa'aletonu mama Fa'ailoga tutusa, vasega eseese

Vasega faavae malosi

O vaega uma o le nav iinei—tabs, pills, and lists— faasoa tutusa le faailoga faavae ma sitaili i le .navvasega.

Aisea e ta'u ai ma fualaau

Tabs ma fualaau i Bootstrap e fausia i luga o se <ul>HTML autu tutusa, o se lisi o sootaga. Fetufa'i i le va o laupepa po'o fualaau ma na'o se vasega.

O filifiliga uma e lua e lelei tele mo vaega laiti o mataupu poʻo le faʻatautaia i le va o itulau o mea e fesoʻotaʻi.

Fa'amaumauga autu

Fai so'otaga masani <ul>ma fa'aopoopo .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li vasega = "toaga" > 
    <a href = "#" > Aiga </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Fualaau masani

Ave lena lava HTML, ae faʻaaoga .nav-pillsnai lo:

<ul class = "nav nav-pills" > 
  <li vasega = "toaga" > 
    <a href = "#" > Aiga </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Stackable Fai fa'amau po'o fualaau fa'asaga i luga

E fa'afefea ona fa'aputuina

A'o fa'alava fa'alava fa'amau ma fuala'au, na'o le fa'aopoopoina o se vasega lona lua, .nav-stacked, ina ia fa'aalia fa'aputu i luga sa'o.

Fa'aputu fa'amau

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Fa'aputu fualaau

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Pa'u i lalo Mo vaega pito i luga ole laiga

Fa'afaigofie mea'ai menus

Pa'u i lalo menus i Bootstrap tabs ma pills e sili ona faigofie ma e manaʻomia naʻo sina HTML faʻaopoopo ma se mea mama jQuery plugin.

Ulu atu i le itulau Javascript e faitau le docs i le amataina o pa'ū i Bootstrap.

Fa'amau i lalo

<ul class = "nav nav-tabs" > 
  <li vasega = "pa'u i lalo" > 
    <a vasega = "fa'alalo-toggle" 
       data-toggle = "pa'u i lalo"
       href = "#" >
        Pa'u i lalo
        <b class = "caret" ></b> 
      </a>
    <ul class = "fa'alalo-menu" > 
      <!-- so'oga -->
    </ul>
  </li>
</ul>

Pills ma pa'u i lalo

<ul class = "nav nav-pills" > 
  <li vasega = "pa'u i lalo" > 
    <a vasega = "fa'alalo-toggle" 
       data-toggle = "pa'u i lalo"
       href = "#" >
        Pa'u i lalo
        <b class = "caret" ></b> 
      </a>
    <ul class = "fa'alalo-menu" > 
      <!-- so'oga -->
    </ul>
  </li>
</ul>

Lisi nav Fausia nav fa'aputu faigofie, lelei mo itu fa'alava

Fa'asagaga faiga fa'aoga

O lisi o le Nav e maua ai se auala faigofie ma faigofie e fausia ai vaega o feso'ota'iga fa'atasi ma ulutala e filifili ai. E sili ona fa'aoga i itu e pei o le Saili ile OS X.

I le fa'atulagaina, o lo'o fausia i luga o sitaili autu lava e tasi e pei o laupepa ma fualaau, o le fa'aoga ma le fa'aogaina e sa'o.

Faatasi ai ma ata

E faigofie foʻi ona faʻapipiʻi lisi o nav i ata. Fa'aopoopo le fa'ailoga talafeagai <i>ma le vasega ma ua e seti.

Faataitaiga nav lisi

Ave se lisi o so'oga ma fa'aopoopo class="nav nav-list":

<ul class = "nav nav-list" > 
  <li vasega = "nav-header" > 
    Lisi ulutala
  </li>
  <li vasega = "toaga" > 
    <a href = "#" > Aiga </a> 
  </li>
  <li>
    <a href = "#" > Faletusi </a> 
  </li>
  ...
</ul>

Faataitaiga ma ata

Fa'ata'ita'iga tutusa, ae fa'atasi ma <i>fa'ailoga mo ata.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i vasega = "icon-book" ></i> 
      Faletusi
    </a>
  </li>
  ...
</ul>

Tabbable nav Fa'aola laupepa e ala ile javascript

O mea e aofia ai

Fa'aola lau laupepa i se masini faigofie e fesuiai i le va o mea e ala i faʻamau. O le Bootstrap e tu'ufa'atasia ai tabbable tabs i sitaili e fa: pito i luga (fa'aletonu), taumatau, pito i lalo, ma le agavale.

Suiga i le va o latou e faigofie ma e manaʻomia ai le suia o se faʻailoga laʻititi.

Fa'ata'ita'iga laulau

Ina ia mafai ona fa'apipi'i fa'amau, afifi le .nav-tabsi se isi div ma le vasega .tabbable.

Ua ou i le Vaega 1.

Talofa, ua ou i le Vaega 2.

O le a le teine, o le Vaega 3 lea.

fa'apipi'i jQuery fa'apitoa

O tabbable tabs uma o lo'o fa'aosoina e la matou mea mama jQuery plugin. Faitau atili e uiga i le auala e faʻaola ai tabable tabs i luga o le javascript docs itulau.

Maua le javascript →

Fa'ailoga sa'o

O le fa'aogaina o tabbable tabs e mana'omia ai se afifi afifi, se seti o fa'amaufa'ailoga, ma se seti o tabbable pane o anotusi.

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Vaega 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Vaega 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Ua ou i ai i le Vaega 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Talofa, ua ou i le Vaega 2. </p>
    </div>
  </div>
</div>

Tabbable i soo se itu

Faʻamau i le pito i lalo

Su'e le fa'asologa o le HTML ma fa'aopoopo se vasega e tu'u ai fa'amau i le pito i lalo.

Ou te i ai i le Vaega A.

Talofa, ua ou i le Vaega B.

O le a le teine, o le Vaega C lea.

<div class = "tabbable tabs-lalo" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Fa'amau i le agavale

Su'e le vasega e tuu fa'amau i le agavale.

Ou te i ai i le Vaega A.

Talofa, ua ou i le Vaega B.

O le a le teine, o le Vaega C lea.

<div class = "tabbable tabs-agavale" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Fa'amau i le itu taumatau

Su'e le vasega e tu'u ai fa'amau i le itu taumatau.

Ou te i ai i le Vaega A.

Talofa, ua ou i le Vaega B.

O le a le teine, o le Vaega C lea.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Fa'ata'ita'iga navbar static

O se faʻataʻitaʻiga o se faʻamaufaʻailoga (e le faʻapipiʻiina i luga) faʻapipiʻi ma le igoa o le poloketi, faʻatauvaʻa, ma le fomu suʻesuʻe.

Fa'ailoga fa'atauva'a

O le navbar e manaʻomia naʻo ni nai divs e faʻapipiʻi lelei mo faʻaaliga faʻapitoa pe faʻamautu.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Ina ia faʻapipiʻi le navbar i le pito i luga o le vaʻaiga, faʻaopoopo .navbar-fixed-topi le pito pito i fafo, .navbar. I lau CSS, e te manaʻomia foʻi le faʻamatalaga mo le faʻaogaina e mafua mai i le faʻaopoopoina padding-top: 40px;i lau <body>.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Su'ega igoa

O se feso'ota'iga faigofie e fa'aalia ai lau fa'ailoga po'o le igoa o le poloketi e mana'omia ai se pine taula.

<a vasega = "fa'ailoga" href = "#" >  
  Igoa o le poloketi
</a>

Su'e fomu

E maua e fomu su'esu'e sitaili fa'apitoa ile navbar ma le .navbar-searchvasega. Fa'aaofia .pull-leftpe .pull-righti luga o le forme fa'aogatasi.

<form class = "navbar-search toso-agavale" > 
  <input type = "text" class = "search-query" placeholder = "Su'esu'e" >   
</form>

Fa'asagaga tali fa'afeagai

Faʻalagolago i le aofaʻi o mea i totonu o lau pito i luga, atonu e te manaʻo e faʻatino filifiliga tali. Ina ia faia, afifi lau mea nav i totonu o se div o loʻo i ai, .nav-collapse.collapse, ma faʻaopopo le ki o le navbar toggle, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar o lo'o fa'aaogaina e fai ma sui mo mea navbar malepe -->
      <a vasega = "btn btn-navbar" data-toggle = "pa'ū" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Ia mautinoa e tu'u le fa'ailoga i fafo pe a e mana'o e fa'aalia -->
      <a class = "brand" href = "#" > Igoa o le Poloketi </a>  
 
      <!-- O mea uma e te mana'o e natia ile 940px pe itiiti, tu'u i totonu iinei -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Ulu i luga! O le tali navbar e manaʻomia le faʻapipiʻi paʻu .

So'oga nav

E faigofie ona fa'aopoopo mea nav e ala i lisi e le fa'atonuina.

<ul vasega = "nav" > 
  <li vasega = "toaga" > 
    <a href = "#" > Aiga </a> 
  </li>
  <li><a href = "#" > So'oga </a></li> 
  <li><a href = "#" > So'oga </a></li> 
</ul>

Fa'aopoopoina fa'amaulalo

O le fa'aopoopoina o fa'amaulalo i le nav e matua faigofie lava, ae mana'omia le fa'aogaina o le matou javascript plugin .

<ul vasega = "nav" > 
  <li vasega = "pa'u i lalo" > 
    <a href = "#" 
          vasega = "fa'alalo-toggle"
          data-toggle = "pa'u i lalo" >
          Account
          <b class = "caret" ></b> 
    </a>
    <ul class = "fa'alalo-menu" > 
      ...
    </ul>
  </li>
</ul>

Maua le javascript →

Aisea e faaaoga ai

E fa'aogaina le fa'ata'ita'iga Breadcrumb o se auala e fa'aali atu ai i tagata fa'aoga le mea o lo'o iai i totonu o se app po'o se saite, ae le mo le fa'atauga muamua. Fa'atumauina la latou fa'aoga fa'apitoa ma fa'apuupuu ina ia sili ona aoga.

Faataitaiga

O se fa'ata'ita'iga e tasi o lo'o fa'aalia e ono fa'aalia ile tele o itulau.

Fa'ailoga

HTML o lau lisi masani e le fa'atonuina ma feso'ota'iga.

<ul class = "falaoa" > 
  <li>
    <a href = "#" > Aiga </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Faletusi </a> <span class = "divider" > / </span>   
  </li>
  <li vasega = "toaga" > 
    <a href = "#" > Fa'amaumauga </a> 
  </li>
</ul>

itulau fa'akomepiuta itulau

Le taimi e faʻaaoga ai

Fa'atosina fa'afaigofie ma la'ititi la'ititi na fa'aosoina e le Rdio, lelei mo polokalame ma fa'ai'uga su'esu'e. O le poloka tele e faigata ona misi, faigofie ona faʻaleleia, ma maua ai vaega tetele kiliki.

So'oga itulau fa'atulafonoina

O feso'ota'iga e fa'avasegaina ma galue i le tele o tulaga ma le vasega sa'o. .disabledmo so'otaga e le mafai ona kiliki ma .activemo itulau o lo'o iai nei.

Fa'aoga fetuutuunai

Fa'aopoopo se tasi o vasega e lua e filifili e sui ai le fa'aogaina o feso'ota'iga pagination: .pagination-centeredma .pagination-right.

Faataitaiga

Ole vaega ole pagination e fa'aogaina e fetu'una'i ma galue i le tele o fesuiaiga.

Fa'ailoga

A'ai i se <div>, fa'akomepiuta ua na'o se <ul>.

<div class = "fa'asinomaga" > 
  <ul>
    <li><a href = "#" > Muamua </a></li> 
    <li vasega = "toaga" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > Sosoo </a></li> 
  </ul>
</div>

Pager Mo so'oga vave muamua ma isi

E uiga i le pager

O le vaega o le pager o se seti o soʻotaga mo faʻatinoga faigofie pagination faʻatasi ai ma faʻailoga malamalama ma e oʻo lava i sitaili mama. E manaia tele mo nofoaga faigofie e pei o blogs poʻo mekasini.

Fa'ata'ita'iga masani

I le faaletonu, o le pager e totonugalemu sootaga.

<ul class = "pager" > 
  <li>
    <a href = "#" > Muamua </a> 
  </li>
  <li>
    <a href = "#" > Sosoo </a> 
  </li>
</ul>

So'oga fa'aoga

I le isi itu, e mafai ona e fa'aogaina so'oga ta'itasi i itu:

<ul class = "pager" > 
  <li vasega = "muamua" > 
    <a href = "#" > ← Matua </a> 
  </li>
  <li vasega = "sosoo" > 
    <a href = "#" > Fou → </a> 
  </li>
</ul>

Fa'ailoga	Fa'ailoga
Fa'atonu	`<span class="label">Default</span>`
Fou	`<span class="label label-success">New</span>`
Lapataiga	`<span class="label label-warning">Warning</span>`
Taua	`<span class="label label-important">Important</span>`
Fa'amatalaga	`<span class="label label-info">Info</span>`

Laiti fa'apitoa

Ona o le faaletonu, ua mamanuina ata laiti a Bootstrap e faʻaalia ata fesoʻotaʻi ma sina faʻailoga manaʻomia.

E sili ona fa'avasegaina

Faatasi ai ma sina faʻailoga faʻaopoopo, e mafai ona faʻaopoopo soʻo se ituaiga o mea HTML pei o ulutala, parakalafa, poʻo faʻamau i totonu o ata.

Fa'ailoga laititi

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.

Gaioiga Gaioiga
Fa'ailoga laititi

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.

Gaioiga Gaioiga

Aisea e fa'aoga ai ata

O ata (muamua .media-gridseia oo i le v1.4) e lelei tele mo fa'asologa o ata po'o vitiō, fa'ai'uga o su'esu'ega ata, oloa fa'atau oloa, fa'amaumauga, ma sili atu. E mafai ona avea ma so'oga po'o mea fa'amautu.

Fa'ailoga faigofie, fetu'una'i

E faigofie lava le fa'ailoga o le la'ititi—a ulma so'o se numera o lielemene na'o mea e mana'omia. E sili fo'i ona fetu'una'i, fa'ataga mo so'o se ituaiga o anotusi ma na'o sina fa'ailoga e afifi ai au mea.

Fa'aaoga le tele o koluma fa'asologa

O le mea mulimuli, e fa'aogaina e le vaega o ata laititi vasega o faiga fa'avasega o lo'o iai—pei .span2po'o le .span3—mo le fa'atonutonuina o le tele o ata.

Le fa'ailoga

E pei ona taʻua muamua, o le faʻailoga manaʻomia mo ata laiti e mama ma tuusaʻo. O se va'aiga lea i le seti fa'aletonu mo ata feso'ota'i :

<ul class = "tusia" > 
  <li vasega = "span3" > 
    <a href = "#" vasega = "tusia" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Mo mea masani HTML i ata, o le faʻailoga e suia teisi. Ina ia faʻataga le poloka poloka i soʻo se mea, matou te fesuiaʻi le <a>mo se <div>faʻapea:

<ul class = "tusia" > 
  <li vasega = "span3" > 
    <div class = "tusia" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Fa'ailoga laititi </h5>
      <p> Fa'amatalaga ata i'i... </p>
    </div>
  </li>
  ...
</ul>

E tele fa'ata'ita'iga

Su'esu'e au filifiliga uma i vasega fa'asologa eseese o lo'o avanoa mo oe. E mafai fo'i ona e fa'afefiloi ma fa'afetaui lapo'a eseese.

Fa'aletonu mama

Toe tusia vasega faavae

Faatasi ai ma le Bootstrap 2, ua matou faafaigofieina le vasega faavae: .alertnai lo le .alert-message. Ua matou fa'aitiitia fo'i le fa'ailoga e mana'omia—leai <p>e mana'omia ona o le fa'aletonu, na'o le pito i fafo <div>.

Fe'au mataala tasi

Mo se vaega e sili atu le umi ma le itiiti ifo o le code, ua matou aveesea le vaʻaiga eseese mo faʻasalalauga poloka, feʻau e oʻo mai ma le tele o padding ma e masani lava ona sili atu tusitusiga. Ua suia foi le vasega i .alert-block.

E fetaui lelei ma le javascript

O le Bootstrap e sau ma le tele o le jQuery plugin e lagolagoina savali mataala, faʻateʻa vave ma faigofie.

Maua le plugin »

Faataitaiga mataala

Afi lau fe'au ma se fa'aikona tapuni e filifili i totonu o se div ma se vasega faigofie.

× Lapataiga! E sili le siaki ia oe lava, e te le o lelei tele.

<div class = "talatala" > 
  <a class = "close" > × </a> 
  <strong> Lapataiga! </strong> Sili siaki oe lava ia, e te le o lelei tele.
</div>

Fa'afaigofie ona fa'alautele le fe'au mataala fa'atasi ma ni vasega se lua e filifili ai: .alert-blockmo le tele o padding ma fa'atonuga o tusitusiga ma .alert-headingmo se ulutala fetaui.

Lapataiga!

Sili siaki oe lava, e te le o foliga lelei tele. Nulla vitae elit libero, a pharetra augue. O le mea lea, o le mea moni, o le mea moni, o le fa'asoaina atu ma isi.

<div class = "poloka mataala" > 
  <a class = "close" > × </a> 
  <h4 class = "alt-heading" > Lapataiga! </h4> 
  E sili le siaki oe lava ia, e te le...
</div>

Su'esu'ega fa'atatau Fa'aopoopo vasega fa'apitoa e sui ai le uiga o le mataala

Sese pe lamatia

× Oi vave! Suia ni nai mea ma toe taumafai e lafo.

<div class = "alert alert-error" > 
  ...
</div>

Manuia

× Malo lava! Na e faitauina ma le manuia lenei savali mataala taua.

<div class = "alert alert-success" > 
  ...
</div>

Fa'amatalaga

× Ulu i luga! O lenei mataala e manaʻomia lou gauai, ae e le sili ona taua.

<div class = "alert alert-info" > 
  ...
</div>

Fa'ata'ita'iga ma fa'ailoga

Fa'avae

Pa'u fa'agasolo aga'i fa'atasi ma le fa'asolo sa'o.

<div class = "agai i luma" > 
  <div vasega = "pa" 
       style = " lautele : 60 %; " ></div> 
</div>

Talatala

Fa'aaogā le fa'alili e fa'atupu ai se fa'ai'uga fa'ailoga.

<div class = "agai i luma-info 
     alualu i luma" >
  <div vasega = "pa" 
       style = " lautele : 20 %; " ></div> 
</div>

Animated

Ave le fa'ata'ita'iga fa'ata'oto ma fa'aola.

<div class = "agai i luma-tulaga lamatia 
     fa'agasolo aga'i i luma" >
  <div vasega = "pa" 
       style = " lautele : 40 %; " ></div> 
</div>

Filifiliga ma lagolago su'esu'e

Fa'aopoopo lanu

E fa'aogaina e pa o le aga'i i luma nisi o igoa vasega tutusa e pei o fa'amau ma fa'ailo mo sitaili tutusa.

.progress-info
.progress-success
.progress-danger

I le isi itu, e mafai ona e fa'avasega faila LESS ma ta'avale au lava lanu ma lapopo'a.

Amioga

Fa'aoga pa'u o le alualu i luma CSS3 suiga, o lea afai e te fetuutuunai malosi le lautele e ala i le javascript, o le a sologa lelei le suiga.

Afai e te fa'aogaina le .activevasega, .progress-stripedo le a fa'aola e au pa'u aga'i i luma ta'i mai le agavale i le taumatau.

Lagolago su'esu'e

Fa'aoga pa o le alualu i luma CSS3 gradients, suiga, ma fa'afiafiaga e ausia uma ai o latou aafiaga. O nei foliga e le lagolagoina i le IE7-8 poʻo faʻasologa tuai o Firefox.

E le lagolagoina e Opera fa'afiafiaga i le taimi nei.

Vaieli

Fa'aoga le vaieli e fai ma fa'aoga faigofie i luga o se elemene e tu'uina atu i ai se aafiaga fa'aofi.

Vaai, ua ou i totonu o se vaieli!

<div class = "lelei" > 
  ...
</div>

Faailoga

Fa'aaoga se pine i luga o se elemene mo se faitau e le'i faitauina po'o se fa'ailoga faigofie.

<span class = "badge" > 3 </div>

Tapuni aikona

Fa'aoga le fa'aigoa tapuni lautele mo le fa'ate'aina o mea e pei o fa'aola ma fa'aliga.

<a vasega = "tapuni" > &taimi; </a>

Vaega fa'amau Fa'atasi fa'amau mo le tele o fa'atinoga pei o meafaigaluega

Vaega fa'amau

Faataitaiga faailoga

Pusa siaki ma mea'ai leitio

Ulu i luga

Fa'amau fa'amau Fa'amau fa'asinomaga fa'aulu fa'atutu i luga o fa'amau vaega

Fa'amau i lalo

Faataitaiga faailoga

Vaevae fa'amau fa'amau i lalo

Faataitaiga faailoga

Nav, tabs, ma pills Fa'atautaiga sili ona fa'avasegaina

Fa'aletonu mama Fa'ailoga tutusa, vasega eseese

Vasega faavae malosi

Aisea e ta'u ai ma fualaau

Fa'amaumauga autu

Fualaau masani

Stackable Fai fa'amau po'o fualaau fa'asaga i luga

E fa'afefea ona fa'aputuina

Fa'aputu fa'amau

Fa'aputu fualaau

Pa'u i lalo Mo vaega pito i luga ole laiga

Fa'afaigofie mea'ai menus

Fa'amau i lalo

Pills ma pa'u i lalo

Lisi nav Fausia nav fa'aputu faigofie, lelei mo itu fa'alava

Fa'asagaga faiga fa'aoga

Faatasi ai ma ata

Faataitaiga nav lisi

Faataitaiga ma ata

Tabbable nav Fa'aola laupepa e ala ile javascript

O mea e aofia ai

Fa'ata'ita'iga laulau

fa'apipi'i jQuery fa'apitoa

Fa'ailoga sa'o

Tabbable i soo se itu

Faʻamau i le pito i lalo

Fa'amau i le agavale

Fa'amau i le itu taumatau

Navbar

Fa'ata'ita'iga navbar static

Fa'ailoga fa'atauva'a

Su'ega igoa

Su'e fomu

Fa'asagaga tali fa'afeagai

So'oga nav

Fa'aopoopoina fa'amaulalo

O falaoamata

Aisea e faaaoga ai

Faataitaiga

Fa'ailoga

Itulautusi E lua filifiliga mo le su'eina o itulau ile anotusi

itulau fa'akomepiuta itulau

Le taimi e faʻaaoga ai

So'oga itulau fa'atulafonoina

Fa'aoga fetuutuunai

Faataitaiga

Fa'ailoga

Pager Mo so'oga vave muamua ma isi

E uiga i le pager

Fa'ata'ita'iga masani

So'oga fa'aoga

Fa'ailoga i totonu Fa'ailoga ma fa'aigoa tusitusiga

Ata fa'apalapala o ata, vitio, tusitusiga, ma isi mea

Laiti fa'apitoa

E sili ona fa'avasegaina

Fa'ailoga laititi

Fa'ailoga laititi

Aisea e fa'aoga ai ata

Fa'ailoga faigofie, fetu'una'i

Fa'aaoga le tele o koluma fa'asologa

Le fa'ailoga

E tele fa'ata'ita'iga

Alaala Sitaili mo le manuia, lapataiga, ma savali sese

Fa'aletonu mama

Toe tusia vasega faavae

Fe'au mataala tasi

E fetaui lelei ma le javascript

Faataitaiga mataala

Lapataiga!

Su'esu'ega fa'atatau Fa'aopoopo vasega fa'apitoa e sui ai le uiga o le mataala