Faataitaiga

E mafai ona fesuia'i, lisi autu mo le fa'aalia o lisi o so'otaga. Faia feso'ota'iga ma le pa'ū JavaScript plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Fa'atino </a></li>  
  <li><a tabindex = "-1" href = "#" > O se isi gaioiga </a></li>  
  <li><a tabindex = "-1" href = "#" > O se isi mea iinei </a></li>  
  <li vasega = "vaelua" ></li> 
  <li><a tabindex = "-1" href = "#" > Separated link </a></li>  
</ul>

Fa'ailoga

Va'ai i le na'o le fa'ai'u i lalo, o le HTML mana'omia lea. E te mana'omia le afifiina o le fa'aoso o le pa'u ma le lisi o le pa'u i totonu .dropdown, po'o se isi elemene e fa'ailoa mai position: relative;. Ona faatoa fai lea o le lisi.

<div class = "pa'u i lalo" > 
  <!-- So'oga po'o le fa'amau e sui i lalo -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Fa'atino </a></li>  
    <li><a tabindex = "-1" href = "#" > O se isi gaioiga </a></li>  
    <li><a tabindex = "-1" href = "#" > O se isi mea iinei </a></li>  
    <li vasega = "vaelua" ></li> 
    <li><a tabindex = "-1" href = "#" > Separated link </a></li>  
  </ul>
</div>

Filifiliga

Fa'aoga menus i le itu taumatau ma fa'aopoopo e aofia ai vaega fa'aopoopo o fa'alalolalo.

Fa'asa'o le lisi

Fa'aopoopo .pull-righti le .dropdown-menufa'aoga i le taumatau le lisi o le pa'u i lalo.

<ul class = "toso i lalo-menu toso-taumatau" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Fa'atotonu filifiliga lisi

Fa'aopoopo .disabledi le a <li>i le pa'u i lalo e tape ai le so'oga.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > So'oga masani </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Disabled link </a></li>   
  <li><a tabindex = "-1" href = "#" > O se isi so'oga </a></li>  
</ul>

Sub menus i fa'amaulalo

Fa'aopoopo se vaega fa'aopoopo o menus pa'ū, fa'aalia i luga o le fa'amalo pei o le OS X, fa'atasi ai ma ni fa'aopoopoga fa'ailoga faigofie. Fa'aopoopo .dropdown-submenui so'o lise mea o lo'o i totonu o le lisi o lo'o i lalo mo le fa'ailoga otometi.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li vasega = "pa'u-submenu" > 
    <a tabindex = "-1" href = "#" > Isi filifiliga </a>  
    <ul class = "fa'alalo-menu" > 
      ...
    </ul>
  </li>
</ul>

Faataitaiga

E lua filifiliga fa'avae, fa'atasi ai ma isi suiga fa'apitoa e lua.

kulupu fa'amau tasi

Afifi se faasologa o faamau i .btntotonu .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Agagavale </ button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Taumatau </ button> 
</div>

kulupu fa'amau e tele

Tu'u fa'atasi seti o <div class="btn-group">i le a <div class="btn-toolbar">mo vaega e sili atu ona lavelave.

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

Vaega fa'amau sa'o

Fai se seti o faamau e foliga fa'aputu i luga sa'o nai lo fa'alava.

<div class = "btn-group btn-group-vertical" > 
  ...
</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 ki e mafai ona fa'agaoioia, po'o ni pusa siaki, lea e mafai ona ola ai so'o se numera o ki. Va'ai le JavaScript docs mo lena.

Pa'u i lalo i vaega fa'amau

Ulu i luga!O fa'amau o lo'o i lalo e tatau ona afifiina ta'ito'atasi i .btn-grouptotonu o le a .btn-toolbarmo le fa'aliliuga tatau.

Vaaiga lautele ma faataitaiga

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

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

E galue i le tele o faamau uma

O fa'amau fa'amau i lalo e galue i so'o se tele: .btn-large, .btn-small, po'o .btn-mini.

Manaomia le Javascript

O fa'amau fa'amau e mana'omia le fa'apipi'i pa'u i lalo Bootstrap e fa'atino.

I nisi tulaga-pei o le feavea'i-fa'alalo menus o le a faalautele atu i fafo o le va'aiga. E te mana'omia le fa'amalieina ma le lima po'o le JavaScript masani.

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.

<div class = "btn-group" > 
  <button class = "btn" > Action </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </fa'amau>
  <ul class = "fa'alalo-menu" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

Tele

Fa'aaoga vasega fa'aopoopo fa'amau .btn-mini, .btn-small, po'o .btn-largele fa'avasegaina.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Fa'atino </ button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </fa'amau>
  <ul class = "fa'alalo-menu" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

Tu'u mea'ai

E mafai fo'i ona fesuia'i mai le pito i lalo e ala i le fa'aopoopoina o se vasega e tasi i le matua matua o le .dropdown-menu. O le a liliu le itu o le .caretma toe fa'atulaga le lisi lava ia e alu ese mai le pito i luga ae le o luga i lalo.

<div class = "btn-group dropup" > 
  <button class = "btn" > Pa'u </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </fa'amau>
  <ul class = "fa'alalo-menu" > 
    <!-- so'oga fa'ai'u i lalo -->
  </ul>
</div>

Fa'aletonu mama Fa'ailoga tutusa, vasega eseese

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

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>

Tulaga le atoatoa

Mo so'o se vaega nav (tabs, pills, or list), fa'aopoopo .disabledmo so'oga efuefu ma leai ni a'afiaga fa'afefe . O feso'ota'iga o le a tumau le kiliki, peita'i, se'i vagana ua e aveese le hrefuiga. I le isi itu, e mafai ona e faʻaogaina le JavaScript masani e puipuia ai na kiliki.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Home </a></li>  
  ...
</ul>

Fa'atonuga vaega

Ina ia fa'aoga feso'ota'iga nav, fa'aoga le .pull-leftpo'o .pull-rightvasega aoga. O vasega uma e lua o le a faʻaopoopoina se CSS faʻafefe i le itu faʻapitoa.

Fa'aputu

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

Fa'aopoopo i lalo menus fa'atasi ai ma sina HTML fa'aopoopo ma le fa'amaufa'ailoga JavaScript plugin .

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>

Nav lisi

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

Faataitaiga nav lisi

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

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Lisi ulutala </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Faletusi </a></li> 
  ...
</ul>

ManatuaMo faamoega i totonu o se lisi nav, fa'aofi class="nav nav-list"i luga o so'o se faamoega <ul>.

Vaevae faalava

Fa'aopoopo se vase vaeluaga e ala i le faia o se mea lisi gaogao ma le vasega .divider, pei o lea:

<ul class = "nav nav-list" > 
  ...
  <li vasega = "vaelua" ></li> 
  ...
</ul>

Tabbable nav

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.

Fa'ata'ita'iga laulau

Ina ia fa'apipi'i fa'amaufa'ailoga, fai se .tab-paneID fa'apitoa mo fa'amau ta'itasi ma afifi i totonu .tab-content.

Ua ou i le Vaega 1.

Talofa, ua ou i le Vaega 2.

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

<div class = "tabable" > <!-- Na'o le itu agavale/taumatau e mana'omia -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Vaega 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Vaega 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ua ou i ai i le Vaega 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Talofa, ua ou i le Vaega 2. </p>
    </div>
  </div>
</div>

Mo'e i luga o laupepa

Ina ia fa'agesegese fa'amau i totonu, fa'aopoopo .fadei .tab-pane.

Manaomia le plugin jQuery

O tabbable tabs uma o lo'o fa'aosoina e la matou mea mama jQuery plugin. Faitau atili e uiga i le faʻaogaina o tabable tabs i le ola i luga o le JavaScript docs itulau .

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>

Navbar autu

E amata, navbars e tumau (e le fa'amauina i le pito i luga) ma aofia ai le lagolago mo se igoa o le poloketi ma le fa'atautaia masani. Tuu se tasi i soo se mea i totonu ole .container, lea e seti ai le lautele o lau saite ma mea e aofia ai.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Igoa </a>  
    <ul vasega = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > So'oga </a></li> 
      <li><a href = "#" > So'oga </a></li> 
    </ul>
  </div>
</div>

Vaega o le Navbar

Fa'ailoga

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 class = "brand" href = "#" > Igoa o le Poloketi </a>

So'oga nav

O mea nav e faigofie ona fa'aopoopo 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>

E faigofie ona e fa'aopoopoina vaeluaga i au feso'ota'iga nav ma se mea lisi gaogao ma se vasega faigofie. Fa'aopoopo le mea lea i le va o so'otaga:

<ul vasega = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Fomu

Ina ia fa'apena lelei ma fa'atulaga se fomu i totonu o le navbar, fa'aopoopo vasega talafeagai e pei ona fa'aalia i lalo. Mo se fomu e le mafai, fa'aofi .navbar-formma so'o se .pull-leftpo'o .pull-rightle fa'aoga lelei.

<form vasega = "navbar-form toso-agavale" > 
  <input type = "text" class = "span2" >  
  <button type = "submit " class = "btn" > Auina </button>  
</form>

Su'e fomu

Mo se fomu su'esu'e fa'apitoa, fa'aopoopo .navbar-searchi le formma .search-queryle fa'aoga mo sitaili fa'apitoa i le navbar.

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

Fa'atonuga vaega

Fa'aoga feso'ota'iga nav, fomu su'esu'e, po'o tusitusiga, fa'aoga le .pull-leftpo'o .pull-rightvasega aoga. O vasega uma e lua o le a faʻaopoopoina se CSS faʻafefe i le itu faʻapitoa.

Fa'aaogā fa'alalolalo

Fa'aopoopo fa'alalo ma fa'alalo i le nav fa'atasi ai ma sina fa'ailoga ma le fa'amaufa'ailoga JavaScript plugin .

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

Asiasi i le JavaScript dropdowns pepa mo nisi fa'ailoga ma fa'amatalaga ile vala'au fa'alalolalo.

Tusitusi

Afifi manoa o tusitusiga i se elemene ma le .navbar-text, e masani lava i luga o se <p>pine mo le taʻitaʻiga saʻo ma le lanu.

Fa'aaliga fa'aali ese'esega

Fa'asa'o le navbar i le pito i luga po'o le pito i lalo ole va'aiga va'ai ma se vasega fa'aopoopo ile pito pito i fafo, .navbar.

Fa'amau i luga

Fa'aopoopo .navbar-fixed-topma manatua le fa'amatalaga mo le vaega natia i lalo e ala i le fa'aopoopoina o le 40px paddingi le <body>. Ia mautinoa e faʻaopopo lenei mea pe a uma le Bootstrap CSS autu ma aʻo leʻi faia le CSS tali mai.

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

Fa'amau i lalo

Faaopoopo .navbar-fixed-bottomnai lo lena.

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

Navbar pito i luga

Fausia se navbar lautele lautele e taʻavale ese ma le itulau e ala i le faʻaopoopoina .navbar-static-top. E le pei o le .navbar-fixed-topvasega, e te le manaʻomia le suia o soʻo se padding i luga o le body.

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

Navbar tali

Ina ia fa'atinoina se navbar fa'ato'ilalo, afifi lau mea navbar i totonu o se div o lo'o i ai, .nav-collapse.collapse, ma fa'aopoopo i ai 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Ulu i luga! O le tali navbar e manaʻomia le paʻu paʻu ma tali Bootstrap CSS faila .

Fesuia'iga fesuia'i

Suia foliga o le navbar e ala i le faaopoopo .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Faataitaiga

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

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

Fa'ailoga itulau

Fa'akomepiuta faigofie fa'aosoina e 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.

<div class = "fa'asinomaga" > 
  <ul>
    <li><a href = "#" > Muamua </a></li> 
    <li><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 = "#" > 5 </a></li> 
    <li><a href = "#" > Sosoo </a></li> 
  </ul>
</div>

Filifiliga

Malo le atoatoa ma toaga

O feso'ota'iga e mafai ona fa'atulagaina mo tulaga eseese. Fa'aoga .disabledmo so'oga e le mafai ona kiliki ma fa'ailoa .activele itulau o lo'o iai nei.

<div class = "fa'asinomaga" > 
  <ul>
    <li vasega = "fa'aletonu" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

E mafai ona e suitulaga ese taula ola po'o le le atoatoa mo vaeluaga e aveese ai le fa'aogaina o le kiliki a'o taofi sitaili fuafuaina.

<div class = "fa'asinomaga" > 
  <ul>
    <li class = "fa'aletonu" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Tele

Mana'o e lapopo'a pe la'ititi itulau? Fa'aopoopo .pagination-large, .pagination-small, po'o .pagination-minile tele fa'aopoopo.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "fa'asinomaga" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Fa'atonuga

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.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

So'oga vave muamua ma so'otaga mo fa'atinoga faigofie fa'akomepiuta ma fa'ailoga malamalama ma sitaili. E manaia tele mo nofoaga faigofie e pei o blogs poʻo mekasini.

Fa'ata'ita'iga masani

Ona o 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'atonu tulaga le atoatoa

O feso'ota'iga Pager e fa'aogaina fo'i le .disabledvasega fa'aoga lautele mai le fa'ailoga.

<ul class = "pager" > 
  <li class = "fa'ato'ato'a muamua" > 
    <a href = "#" > ← Matua </a> 
  </li>
  ...
</ul>

Fa'ailoga

Fa'ailoga	Fa'ailoga
Fa'atonu	`<span class="label">Default</span>`
Manuia	`<span class="label label-success">Success</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>`
Fa'afeagai	`<span class="label label-inverse">Inverse</span>`

Faailoga

Igoa	Faataitaiga	Fa'ailoga
Fa'atonu	1	`<span class="badge">1</span>`
Manuia	2	`<span class="badge badge-success">2</span>`
Lapataiga	4	`<span class="badge badge-warning">4</span>`
Taua	6	`<span class="badge badge-important">6</span>`
Fa'amatalaga	8	`<span class="badge badge-info">8</span>`
Fa'afeagai	10	`<span class="badge badge-inverse">10</span>`

Faigofie ona pa'u

Mo le fa'atinoina faigofie, o fa'ailoga ma pine o le a na'o le pa'u (e ala i le CSS's :emptyselector) pe a leai se mea o iai i totonu.

Vaega toa

O se vaega mama, fetuutuunai e faʻaalia ai mea autu i luga o lau 'upega tafaʻilagi. E galue lelei i luga o maketi ma mea-mamafa nofoaga.

Talofa, lalolagi!

O se vaega toa faigofie lea, o se vaega faigofie jumbotron-style mo le vala'au atili atu i mea fa'aalia po'o fa'amatalaga.

Aoao atili

<div class = "toa-unite" > 
  <h1> Ulutala </h1>
  <p> Fa'ailoga igoa </p>
  <p>
    <a vasega = "btn btn-primary btn-tele" > 
      Aoao atili
    </a>
  </p>
</div>

Ulutala itulau

O se atigi faigofie mo se h1avanoa talafeagai ma vaelua vaega o anotusi i luga o se itulau. E mafai ona fa'aogaina le h1's default small, elemene fa'apea le tele o isi vaega (fa'atasi ai ma sitaili fa'aopoopo).

<div class = "itulau-ulutala" > 
  <h1> Fa'ata'ita'iga ulutala itulau <small> So'oga mo ulutala </small></h1>
</div>

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
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 laiti (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 le tele o isi mea. 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.

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 = "span4" > 
    <a href = "#" vasega = "tusia" >  
      <img data-src = "holder.js/300x200" 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 vasega = "tusia" >
  <li vasega = "span4" >
    <div vasega =  "tusia" >
      <img data-src = "holder.js/300x200" alt =  "" >
      <h3> Fa'ailoga laititi </h3>
      <p> Fa'amatalaga ata... </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'aliga fa'aletonu

Afifi so'o se tusitusiga ma se fa'amau fa'ate'a i totonu .alertmo se fe'au fa'alatalata masani.

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

<div class = "talatala" > 
  <button type = "button" class = "close" data-dismiss = "talatala" > &taimi; </fa'amau>   
  <strong> Lapataiga! </strong> Sili siaki oe lava ia, e te le o lelei tele.
</div>

Fa'ate'a fa'amau

Mobile Safari ma Mobile Opera suʻesuʻe, faʻaopoopo i le data-dismiss="alert"uiga, e manaʻomia se href="#"mo le faʻateʻaina o faʻasalalauga pe a faʻaaogaina se <a>pine.

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

I le isi itu, e mafai ona e faʻaogaina se <button>elemene ma le faʻamatalaga uiga, lea na matou filifili e fai mo a matou pepa. A fa'aaoga le <button>, e tatau ona e fa'aofi type="button"pe le mafai ona tu'uina atu au fomu.

<button type = "button" class = "close" data-dismiss = "talatala" > &taimi; </fa'amau>

Fa'ate'a fa'aaliga e ala i le JavaScript

Fa'aoga le fa'ailoga jQuery plugin mo le fa'ate'aina vave ma le faigofie o fa'aliga.

Filifiliga

Mo fe'au umi atu, fa'aopoopo le pa'u ile pito i luga ma le pito i lalo ole afifi mataala e ala ile fa'aopoopo .alert-block.

Lapataiga!

E sili le siaki ia oe lava, e te le o 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" > 
  <button type = "button" class = "close" data-dismiss = "talatala" > &taimi; </fa'amau>   
  <h4> Lapataiga! </h4>
  E sili le siaki oe lava ia, e te le...
</div>

Su'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 class = "bar" style = " lautele : 60 %; " ></div>   
</div>

Talatala

Fa'aaogā se fa'ali'i e fai ai se fa'aa'oa'oga fa'ailoga. E le maua ile IE7-8.

<div class = "fa'agasolo i luma-siva" > 
  <div class = "bar" style = " lautele : 20 %; " ></div>   
</div>

Animated

Fa'aopoopo .activei .progress-stripede fa'aola ai ta'i taumatau i le agavale. E le maua i vaega uma o le IE.

<div class = "agai i luma-striped active" > 
  <div class = "bar" style = " lautele : 40 %; " ></div>   
</div>

Fa'aputu

Tuu le tele o pa i totonu e tasi .progresse faaputu ai.

<div class = "agai i luma" > 
  <div class = "bar bar-success" style = " lautele : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " lautele : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " lautele : 10 %; " ></div>   
</div>

Filifiliga

Fa'aopoopo lanu

E fa'aogaina e pa o le alualu i luma nisi o ki tutusa ma vasega mataala mo sitaili faifai pea.

<div class = "agai i luma-info" > 
  <div class = "bar" style = " lautele : 20 % " ></div>   
</div>
<div class = "agai i luma-manuia" > 
  <div class = "bar" style = " lautele : 40 % " ></div>   
</div>
<div class = "agai i luma-lapataiga" > 
  <div class = "bar" style = " lautele : 60 % " ></div>   
</div>
<div class = "agai i luma-tulaga lamatia" > 
  <div class = "bar" style = " lautele : 80 % " ></div>   
</div>

Fa'amau sasa

E tutusa ma lanu mafiafia, e iai a matou pa'u fa'asolosolo laina eseese.

<div class = "agai i luma-fa'amatalaga alualu i luma-siva" > 
  <div class = "bar" style = " lautele : 20 % " ></div>   
</div>
<div class = "agai i luma-manuia alualu i luma-sese" > 
  <div class = "bar" style = " lautele : 40 % " ></div>   
</div>
<div class = "agai i luma-lapataiga alualu i luma-siva" > 
  <div class = "bar" style = " lautele : 60 % " ></div>   
</div>
<div class = "agai i luma-tulaga lamatia-gailuma" > 
  <div class = "bar" style = " lautele : 80 % " ></div>   
</div>

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-9 poʻo faʻasologa tuai o Firefox.

Fa'aliliuga muamua atu nai lo Internet Explorer 10 ma Opera 12 e le lagolagoina fa'afiafiaga.

Sitaili mea faitino mo le fausiaina o ituaiga eseese o vaega (pei o faʻamatalaga blog, Tweets, ma isi) o loʻo faʻaalia ai se ata agavale poʻo taumatau faʻatasi ma tusitusiga.

Fa'ata'ita'iga masani

O le ala fa'asalalau fa'aletonu e mafai ai ona fa'afefe se mea fa'asalalau (ata, vitiō, leo) i le agavale po'o le taumatau o se poloka anotusi.

Ulutala fa'asalalau

Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Ulutala fa'asalalau

<div class = "faasalalauga" > 
  <a vasega = "toso-agavale" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "faasalalauga" > 
      ...
    </div>
  </div>
</div>

Lisi fa'asalalau

Fa'atasi ai ma sina fa'ailoga fa'aopoopo, e mafai ona e fa'aogaina fa'asalalauga i totonu o le lisi (fa'aoga mo fa'amatalaga filo po'o lisi o tala).

Ulutala fa'asalalau

Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.

Ulutala fa'asalalau fa'aputu
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.

Ulutala fa'asalalau fa'aputu
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.

Ulutala fa'asalalau fa'aputu
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.
Ulutala fa'asalalau
Cras sat amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ma, tempus viverra turpis.

<ul class = "faasalalauga-lisi" > 
  <li vasega = "media" > 
    <a vasega = "toso-agavale" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "faasalalauga" > 
        ...
     </div>
    </div>
  </li>
</ul>

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>

Vasega faitalia

Pulea padding ma tulimanu lapotopoto faatasi ai ma ni vasega se lua e suia.

Vaai, ua ou i totonu o se vaieli!

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

Vaai, ua ou i totonu o se vaieli!

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

Tapuni aikona

Fa'aoga le fa'aigoa tapuni lautele mo le fa'ate'aina o mea e pei o fa'ata'ita'iga ma fa'aaliga.

<button class = "close" > &taimi; </fa'amau>

O masini iOS e mana'omia se href="#"mo kiliki mea e tutupu pe afai e te mana'o e fa'aoga se taula.

<a vasega = "latalata" href = "#" > &taimi; </a>

Vasega fesoasoani

Vasega faigofie, taula'i mo fa'aaliga laiti po'o le tweaks amio.

.toso-agavale

Fa'afefe se elemene i le agavale

vasega = "toso-agavale"

. toso - agavale {
  opeopea : agavale ;
}

.toso-taumatau

Fa'afea sa'o se elemene

vasega = "toso-taumatau"

. toso - taumatau {
  opeopea : taumatau ;
}

.faalogo

Suia le lanu o se elemene i#999

vasega = "muted"

. gūgū {
  lanu : #999; 
}

.clearfix

Fa'amama le floati luga o so'o se elemene

vasega = "clearfix"

. fa'alelei {
  * zoom : 1 ; 
  &: muamua ,
  &: ina ua {
    fa'aaliga : laulau ;
    anotusi : "" ; 
  }
  &: ina ua {
    manino : lua ;
  }
}

Pa'u i lalo menus

Faataitaiga

Fa'ailoga

Filifiliga

Fa'asa'o le lisi

Fa'atotonu filifiliga lisi

Sub menus i fa'amaulalo

Vaega fa'amau

Faataitaiga

kulupu fa'amau tasi

kulupu fa'amau e tele

Vaega fa'amau sa'o

Pusa siaki ma mea'ai leitio

Pa'u i lalo i vaega fa'amau

Fa'amau tu'u i lalo menus

Vaaiga lautele ma faataitaiga

E galue i le tele o faamau uma

Manaomia le Javascript

Vaevae fa'amau fa'amau i lalo

Tele

Tu'u mea'ai

Nav: laupepa, fualaau, ma lisi

Fa'aletonu mama Fa'ailoga tutusa, vasega eseese

Fa'amaumauga autu

Fualaau masani

Tulaga le atoatoa

Fa'atonuga vaega

Fa'aputu

Fa'aputu fa'amau

Fa'aputu fualaau

Pa'u i lalo

Fa'amau i lalo

Pills ma pa'u i lalo

Nav lisi

Faataitaiga nav lisi

Vaevae faalava

Tabbable nav

Fa'ata'ita'iga laulau

Mo'e i luga o laupepa

Manaomia le plugin jQuery

Tabbable i soo se itu

Faʻamau i le pito i lalo

Fa'amau i le agavale

Fa'amau i le itu taumatau

Navbar

Navbar autu

Vaega o le Navbar

Fa'ailoga

So'oga nav

Fomu

Su'e fomu

Fa'atonuga vaega

Fa'aaogā fa'alalolalo

Tusitusi

Fa'aaliga fa'aali ese'esega

Fa'amau i luga

Fa'amau i lalo

Navbar pito i luga

Navbar tali

Fesuia'iga fesuia'i

O falaoamata

Faataitaiga

Itulautusi E lua filifiliga mo le itulau i totonu o mea

Fa'ailoga itulau

Filifiliga

Malo le atoatoa ma toaga

Tele

Fa'atonuga

Pager

Fa'ata'ita'iga masani

So'oga fa'aoga

Fa'atonu tulaga le atoatoa

Fa'ailoga ma pine

Fa'ailoga

Faailoga

Faigofie ona pa'u

Vaega fa'akomipiuta

Vaega toa

Talofa, lalolagi!

Ulutala itulau