Ulutala

O ulutala HTML uma, <h1>e o'o mai <h6>e avanoa.

h1. Ulutala 1

h2. Ulutala 2

h3. Ulutala 3

h4. Ulutala 4

h5. Ulutala 5

h6. Ulutala 6

kopi tino

O le faaletonu font-sizeo le lalolagi a Bootstrap o le 14px , ma line-heightle 20px . E fa'aoga lea i le <body>ma parakalafa uma. E le gata i lea, <p>(parakalafa) maua le pito i lalo o le afa o latou laina-maualuga (10px e le mafai).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sat amet non magna. Donec id elit non mi porta gravida and eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Ta'ita'i kopi tino

Fai se palakalafa e tu matilatila e ala i le faaopoopo .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, o le mea lea e le masani ai.

<p vasega = "ta'ita'i" > ... </p>

Fausia i le Itiiti

Ole fua fa'akomipiuta e fa'avae ile lua LESS fesuiaiga ile fesuiaiga.less : @baseFontSizema @baseLineHeight. O le mea muamua o le fa'amaufa'ailoga faavae-tele o lo'o fa'aogaina atoa ma le lona lua o le laina-maualuga fa'avae. Matou te fa'aogaina na fesuiaiga ma nisi numera faigofie e fatu ai pito, paddings, ma laina-maualuga o matou ituaiga uma ma sili atu. Fa'asinomaga i latou ma fetuutuunai Bootstrap.

Fa'amamafa

Fa'aaogā fa'ailoga fa'amamafa a le HTML ma sitaili mama.

`<small>`

Mo le fa'amamafaina o le laina i totonu po'o poloka o tusitusiga, fa'aaoga le tama'i pine.

O lenei laina o tusitusiga e fa'atatau ia fa'atatauina o ni lolomi lelei.

<p> <small> O lenei laina o tusitusiga e fa'atatau ia fa'atatauina o ni lolomi lelei. </tama> </p>

Lototele

Mo le fa'amamafaina o se snippet o tusitusiga ma se fa'amamafa mamafa.

O le snippet o tusitusiga o lo'o i lalo o lo'o fa'aliliuina e pei o ni tusitusiga mata'utia .

<strong> fa'aliliuina o ni tusitusiga mata'utia </strong>

Tusipasi

Mo le fa'amamafaina o se snippet o tusitusiga fa'atasi ai ma fa'ailoga.

O le snippet o tusitusiga o lo'o mulimuli mai o lo'o fa'aliliuina o ni tusitusiga fa'asisilima .

<em> fa'aliliu e pei o tusitusiga fa'asisilima </em>

Ulu i luga!Lagona le saoloto e faʻaoga <b>ma <i>i le HTML5. <b>e fa'atatau e fa'amanino ai upu po'o fasifuaitau e aunoa ma le fa'ailoaina atu o le taua ae <i>tele lava mo leo, upu fa'apitoa, ma isi.

Vasega fa'atulagaina

Fa'afaigofie ona toe fa'aoga tusitusiga i vaega fa'atasi ai ma vasega fa'aogaina o tusitusiga.

Tusi fa'aoga agavale.

Fa'aogatonu tusitusiga.

Fa'asinotonu i le taumatau.

<p class = "text-left" > Fa'asinoga agavale. </p> 
<p class = "text-center" > Tusitala fa'aogatotonu. </p> 
<p class = "text-right" > Fa'asinotonu i le taumatau. </p>

Vasega Fa'amamafa

Fa'ailoa atu uiga e ala i lanu ma sina vaega fa'amamafa vasega aoga.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Faapuupuuga

Fa'ata'ita'iga fa'atusa o le elemene HTML <abbr>mo fa'apu'upu'u ma fa'apuupuuga e fa'aalia ai le fa'alauteleina o fa'amatalaga i luga o le fa'afefe. O fa'apuupuuga o lo'o iai se titleuiga o lo'o i ai le pito i lalo e togitogia i lalo ma se fa'ailo fesoasoani i luga o le fa'afefe, e maua ai se fa'amatalaga faaopoopo i luga o le fa'afefe.

`<abbr>`

Mo le fa'alauteleina o tusitusiga i luga o le fa'ao'o umi o se fa'apu'upu'u, fa'aopoopo le titleuiga.

O se faapuupuuga o le upu uiga o le attr .

<abbr title = "uiga" > attr </abbr>

`<abbr class="initialism">`

Fa'aopoopo .initialismi se fa'apu'upu'u mo se fa'atama'i la'ititi laititi.

HTML o le mea sili lea talu mai le fasi falaoa.

<abbr title = "Gagana Fa'ailoga HyperText" vasega = "initialism" > HTML </abbr>

Tulaga

Tuuina atu faʻamatalaga faʻafesoʻotaʻi mo tuaa lata ane poʻo le tino atoa o le galuega.

`<address>`

Fa'asao le fa'atulagaina e ala i le fa'au'uina o laina uma ile <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Igoa Atoa
[email protected]

<tuatusi>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Telefoni" > P: </abbr> (123) 456-7890 
</address>
 
<tuatusi>
  <strong> Igoa Atoa </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

Blockquotes

Mo le siiina mai o poloka o mataupu mai se isi punaoa i totonu o lau pepa.

Fa'atonu poloka upusii

Afifi <blockquote>so'o se HTML e pei o le upusii. Mo upusii tuusa'o matou te fautuaina se <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

Filifiliga poloka upusii

Sitaili ma mea e suia mo suiga faigofie i luga o se blockquote masani.

Fa'aigoa o se puna

Fa'aopoopo <small>le pine mo le fa'ailoaina o le puna. Afi le igoa o le galuega puna i totonu <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
O se tasi lauiloa i le Source Title

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> O se tasi lauiloa <cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

Su'i fa'aaliga

Fa'aoga .pull-rightmo se upusii poloka fa'afefete, fa'aoga taumatau.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
O se tasi lauiloa i le Source Title

<blockquote class = "toso-taumatau" > 
  ...
</blockquote>

Lisi

Le fa'atonu

O se lisi o aitema e le taua tele le fa'atonuga .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ma masa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean nofo amet erat nunc
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

Fa'atonu

Se lisi o aitema e matua taua tele le fa'atonuga .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ma masa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean nofo amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Le fa'ailoga

Ave'ese le fa'aletonu list-stylema le pa'u agavale i luga o mea lisi (na'o tamaiti vave).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ma masa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean nofo amet erat nunc
Eget porttitor lorem

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

I totonu

Tuu mea uma o le lisi i luga o se laina e tasi inline-blockma sina paʻu mama.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Fa'amatalaga

Se lisi o faaupuga ma a latou fa'amatalaga fa'atatau.

Lisi fa'amatalaga: Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Fa'amatalaga fa'asaga

Fai faaupuga ma fa'amatalaga ile <dl>laina fa'afa'afa'afa.

Lisi fa'amatalaga: Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl vasega = "dl-tutusa" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Ulu i luga!O lisi fa'amatalaga fa'asaga'i o le a fa'a'oti 'upu e umi tele e ofi i le koluma agavale text-overflow. I va'ai va'ai vaapiapi, o le a suia i le fa'atulagaina fa'aputu fa'aletonu.

I totonu

Afifi fasi laina fa'ailoga fa'ailoga ma <code>.

Mo se faʻataʻitaʻiga, <section>e tatau ona afifi i totonu.

Mo se fa'ata'ita'iga , <code> & lt ; vaega & gt ;</ code > e tatau ona afifi i totonu o le laina .

Poloka faavae

Fa'aoga <pre>mo le tele o laina code. Ia mautinoa e sola ese mai so'o se puipui pito i totonu o le fa'ailoga mo le fa'aliliuga talafeagai.

<p>Fa'ata'ita'i tusitusiga iinei...</p>

<mua>
  <p>Fa'ata'ita'iga tusitusiga iinei...</p>
</pre>

Ulu i luga!Ia mautinoa e teu le code i totonu o <pre>pine e latalata ile agavale pe a mafai; o le a tu'uina atu fa'amau uma.

E mafai ona e fa'aopoopoina le .pre-scrollablevasega lea e fa'atulaga ai le maualuga-maualuga o le 350px ma tu'uina atu se y-axis scrollbar.

Sitaili masani

Mo le fa'avasegaina fa'avae—omea mama ma na'o vaeluaga fa'alava-fa'aopoopo le vasega fa'avae .tablei so'o se <table>.

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter

<table class = "table" > 
  …
</ laulau>

Vasega faitalia

Faaopoopo soo se vasega nei i le .tablevasega faavae.

`.table-striped`

Fa'aopoopo le zebra-striping i so'o se laina laulau i totonu ole <tbody>CSS :nth-childselector (e le maua ile IE7-8).

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry	le Manu	@twitter

< vasega laulau = "la'au laulau-vaevae" > 
  …
</ laulau>

`.table-bordered`

Faaopoopo tuaoi ma tulimanu lapotopoto i le laulau.

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
1	Mareko	Otto	@getbootstrap
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

<table class = "table table-bordered" > 
  …
</ laulau>

`.table-hover`

Fa'amalo se tulaga fa'ae'e i luga o laina laulau i totonu ole <tbody>.

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

<table class = "table table-hover" > 
  …
</ laulau>

`.table-condensed`

Fa'ato'a fa'apipi'i laulau e ala i le tipi fa'afafa o le pa'u sela.

#	Igoa muamua	Fa'aiu	Username
1	Mareko	Otto	@mdo
2	Iakopo	Thornton	@ga'o
3	Larry le Manu		@twitter

<table class = "table table-condensed" > 
  …
</ laulau>

Vasega laina filifiliga

Fa'aoga vasega fa'apitoa e valivali ai laina laulau.

Vasega	Fa'amatalaga
`.success`	Fa'ailoa mai se gaioiga manuia pe lelei.
`.error`	Fa'ailoa se gaioiga mata'utia pe ono le lelei.
`.warning`	Fa'ailoa mai ai se lapataiga e ono mana'omia le gauai.
`.info`	Fa'aaoga e fai ma sui i sitaili fa'aletonu.

#	Oloa	Totogi Totogi	Tulaga
1	TB - Ta'i masina	01/04/2012	Faamaonia
2	TB - Ta'i masina	02/04/2012	Te'ena
3	TB - Ta'i masina	03/04/2012	Faatalitali
4	TB - Ta'i masina	04/04/2012	Valaau i totonu e fa'amaonia

...
  < tr class = "manuia" >
    <td> 1 < /td>
    <td>TB - Ta'i masina</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Faamaonia</ td >
  </ tr >
...

Fa'ailoga laulau lagolago

Lisi o elemene HTML laulau lagolago ma pe fa'afefea ona fa'aoga.

Tag	Fa'amatalaga
`<table>`	O le afifiina elemene mo le faʻaalia o faʻamatalaga i se faʻasologa o faʻasologa
`<thead>`	Elemene pusa mo laina ulutala laulau ( `<tr>`) e fa'ailoga koluma laulau
`<tbody>`	Elemene pusa mo laina laulau ( `<tr>`) i le tino o le laulau
`<tr>`	Elemene pusa mo se seti o sela laulau ( `<td>`po'o `<th>`) o lo'o fa'aalia ile laina tasi
`<td>`	Cell laulau masani
`<th>`	Laulau laulau fa'apitoa mo koluma (po'o laina, fa'atatau i le lautele ma le tu'uina) fa'ailoga
`<caption>`	Fa'amatalaga po'o le aotelega o mea o lo'o i ai le laulau, aemaise lava le aoga mo le au faitau lautusi

< laulau>
  <caption> ... </ caption>
  <ulu>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </head>
  <tino>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tino>
</ laulau>

Sitaili masani

O fa'atonuga ta'ito'atasi e maua le sitaili, ae aunoa ma se vasega fa'avae mana'omia i luga <form>po'o suiga tetele i fa'ailoga. I'uga i fa'aputu, fa'a-agavale fa'ailoga i luga o fa'atonutonu fomu.

<foliga>
  <fieldset>
    <talatu'u> talatu'u </legend>
    <label> igoa igoa </label>
    <input type = "text" placeholder = "Type something..." >  
    <span class = "fesoasoani-poloka" > Fa'ata'ita'iga poloka-tulaga fesoasoani tusitusiga iinei. </span> 
    <label class = "pusa siaki" > 
      <input type = "checkbox" > Siaki a'u i fafo 
    </label>
    <button type = "submit " class = "btn" > Auina </button>  
  </fieldset>
</form>

Fa'atulagaina filifiliga

Fa'atasi ma Bootstrap e tolu fa'atonuga fomu mo fa'aoga masani.

Su'e fomu

Fa'aopoopo .form-searchi le fomu ma le fomu .search-querymo <input>se fa'aoga fa'aopoopo fa'ata'amilosaga.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit " class = "btn" > Su'e </button>  
</form>

Fomu i totonu

Fa'aopoopo .form-inlinemo fa'ailoga agava'a ma fa'atonu poloka i totonu mo se fa'atulagaina fa'akomepiuta.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Imeli" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "pusa siaki" > 
    <input type = "checkbox" > Manatua a'u 
  </label>
  <button type = "submit " class = "btn" > Sign in </button>  
</form>

Faiga faalava

Fa'aoga fa'amatau igoa ma fa'anofo i le agavale e fa'aalia ai i luga o le laina tutusa ma fa'atonuga. Mana'omia le tele o suiga fa'ailoga mai se fomu fa'aletonu:

Fa'aopoopo .form-horizontali le fomu
Afifi igoa ma pule i totonu.control-group
Fa'aopoopo .control-labeli le fa'ailoga
Afifi so'o se fa'atonuga fa'atasi i totonu .controlsmo le fa'aogaina lelei

<form class = "form-horizontal" > 
  <div class = "pule-vaega" > 
    <label class = "control-label" for = "inputEmail" > Email </label>  
    <div class = "pulea" > 
      <input type = "text" id = "inputEmail" placeholder = " Imeli" >   
    </div>
  </div>
  <div class = "pule-vaega" > 
    <label class = "control-label" for = "inputPassword" > Password </label>  
    <div class = "pulea" > 
      <input type = "password" id = "inputPassword" placeholder = " Password" >   
    </div>
  </div>
  <div class = "pule-vaega" > 
    <div class = "pulea" > 
      <label class = "pusa siaki" > 
        <input type = "checkbox" > Manatua a'u 
      </label>
      <button type = "submit " class = "btn" > Sign in </button>  
    </div>
  </div>
</form>

Puleaina fomu

Fa'ata'ita'iga o fa'atonuga fa'atonu o lo'o lagolagoina i se fa'ata'ita'iga fomu fa'atulagaina.

Ulufale mai

Ole tele ole fa'atonutonuina o fomu, fanua fa'aoga e fa'atatau i tusitusiga. E aofia ai le lagolago mo ituaiga HTML5 uma: tusitusiga, upu fa'amalo, taimi aso, taimi-fa'alotoifale, aso, masina, taimi, vaiaso, numera, imeli, url, su'esu'e, telefoni, ma lanu.

E manaʻomia le faʻaogaina o se mea faʻapitoa typei taimi uma.

<input type = "text" placeholder = "Text input" >

Textarea

Pulea fomu lea e lagolagoina le tele o laina o tusitusiga. Suia le rowsuiga pe a mana'omia.

<textarea rows = " 3" ></textarea>

Pusa siaki ma leitio

O pusa siaki e mo le filifilia o se tasi po'o le tele o filifiliga i se lisi ae o leitio e mo le filifilia o se tasi filifiliga mai le tele.

Fa'atonu (fa'aputu)

<label class = "pusa siaki" > 
  <input type = "checkbox" value = "" >  
  O le filifiliga muamua o le mea lea ma lena—ia mautinoa e aofia ai pe aisea e manaia ai
</label>
 
<label class = "leitio" > 
  <input type = "leitio" igoa = "optionsRadios" id = "optionsRadios1" tau = "option1" siaki >     
  O le filifiliga muamua o le mea lea ma lena—ia mautinoa e aofia ai pe aisea e manaia ai
</label>
<label class = "leitio" > 
  <input type = "leitio" igoa = "optionsRadios" id = "optionsRadios2" tau = "option2" >    
  O le filifiliga lua e mafai ona avea ma se isi mea ma o le filifilia o le a faʻaumatia ai le filifiliga muamua
</label>

Pusa siaki i totonu

Fa'aopoopo le .inlinevasega i se faasologa o pusa siaki po'o leitio mo fa'atonuga o lo'o fa'aalia i luga o le laina e tasi.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Filifilia

Fa'aoga le filifiliga fa'aletonu pe fa'amaoti se multiple="multiple"e fa'aali ai le tele o filifiliga i le taimi e tasi.

<filifili>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</filifili>
 
<filifili tele = "tele" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</filifili>

Fa'alautele le pulea o fomu

Faʻaopoopo i luga o faʻatonuga o suʻesuʻega o loʻo iai, Bootstrap e aofia ai isi vaega aoga.

Tomua ma fa'apipi'i mea e fai

Fa'aopoopo tusitusiga po'o fa'amau a'o le'i po'o le mae'a fo'i o so'o se mea e fa'atatau i tusitusiga. Manatua selecte le o lagolagoina elemene iinei.

Filifiliga masani

Afifi le .add-onma le inputfa i se tasi o vasega e lua e fa'apipi'i pe fa'apipi'i ai tusitusiga i se mea e fa'aoga.

<div class = "faʻapipiʻi-faʻapipiʻi" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Tuufaatasi

Fa'aoga vasega e lua ma fa'ata'ita'iga e lua .add-one fa'apipi'i ma fa'apipi'i se fa'aoga.

<div class = "fa'aulu-muamua fa'aoga-fa'aopoopo" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Fa'amau nai lo tusitusiga

Nai lo le <span>fa'atasi ai ma tusitusiga, fa'aoga le a .btne fa'apipi'i ai se faamau (pe lua) i se mea e fa'aoga.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" type = "text" >   
  <button class = "btn" type = "button" > Alu! </fa'amau>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" type = "text" >   
  <button class = "btn" type = "button" > Su'e </button>  
  <button class = "btn" type = "button" > Filifiliga </button>  
</div>

Fa'amau i lalo

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Gaioiga
      <span class = "caret" ></span> 
    </fa'amau>
    <ul class = "fa'alalo-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "faʻapipiʻi-faʻapipiʻi" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Gaioiga
      <span class = "caret" ></span> 
    </fa'amau>
    <ul class = "fa'alalo-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "fa'aulu-muamua fa'aoga-fa'aopoopo" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Gaioiga
      <span class = "caret" ></span> 
    </fa'amau>
    <ul class = "fa'alalo-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Gaioiga
      <span class = "caret" ></span> 
    </fa'amau>
    <ul class = "fa'alalo-menu" > 
      ...
    </ul>
  </div>
</div>

Fa'avaevae vaega fa'alalo

<foliga>
  <div class = "faʻapipiʻi-faʻapipiʻi" > 
    <div class = "btn-group" > ... </div> 
    <input type = "tusitusiga" > 
  </div>
  <div class = "input-append" > 
    <input type = "tusitusiga" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Su'e fomu

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit " class = "btn" > Su'e </button>  
  </div>
  <div class = "faʻapipiʻi-faʻapipiʻi" > 
    <button type = "submit " class = "btn" > Su'e </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Puleaina le fuaina

Fa'aoga vasega fa'avasega .input-largefa'atusa pe fa'afetaui au mea e fai i le fa'asologa o koluma e fa'aoga ai .span*vasega.

Poloka tulaga fa'aoga

Fai so'o se mea <input>po'o se <textarea>elemene e amio e pei o se elemene poloka poloka.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Fa'atusatusaga

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Ulu i luga!I fa'aliliuga o lumana'i, o le a matou suia le fa'aogaina o nei vasega fa'aoga feso'ota'iga e fa'afetaui la matou fa'amau. Mo se faʻataʻitaʻiga, .input-largeo le a faʻateleina le faʻaofuofu ma le faʻamau-tele o se mea e tuʻuina atu.

Fa'avasegaina o fa'amau

Fa'aoga .span1mo .span12mea fa'aoga e tutusa le lapopoa o koluma fa'asologa.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<filifili vasega = "span1" > 
  ...
</filifili>
<filifili vasega = "span2" > 
  ...
</filifili>
<filifili vasega = "span3" > 
  ...
</filifili>

Mo le tele o fa'aoga fa'asologa i laina ta'itasi, fa'aoga le .controls-rowvasega sui mo le avanoa talafeagai . E fa'afefeteina mea e fa'aoga e fa'apa'e ai avanoa papa'e, fa'atūina le pito sa'o, ma fa'amama le fa'afefe.

<div class = "pulea" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "pulea pulega-laina" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Mea e le mafai ona fa'asa'oina

Tu'u atu fa'amatalaga i se fomu e le mafai ona fa'asa'o e aunoa ma le fa'aogaina o fa'ailoga sa'o.

<span class = "input-xlarge uneditable-input" > O nisi taua iinei </span>

Fua taga

Fa'ai'u se fomu i se vaega o taga (fa'amau). A tu'u i totonu o le .form-actions, o le a otometi lava ona fa'aoso fa'amau e laina fa'atasi ma fa'atonuga fomu.

<div class = "foliga-gaioiga" > 
  <button type = "submit" class = "btn btn-primary" > Fa'asao suiga </ button>  
  <button type = "button" class = "btn" > Fa'aleaogaina </button>  
</div>

Fesoasoani tusitusiga

Lagolago tulaga i totonu ma poloka mo tusitusiga fesoasoani o loʻo faʻaalia i le faʻatonutonuina o fomu.

Fesoasoani i luga ole laiga

<input type = "text" ><span class = "fesoasoani-i totonu" > Tusi fesoasoani i totonu </span>

poloka le fesoasoani

<input type = "text" ><span class = "help-block" > O se poloka umi atu o tusitusiga fesoasoani e malepe i se laina fou ma e ono alu atu i tua atu o le laina e tasi. </span>

Fa'atonu tulaga fa'atonu

Tuuina atu faʻamatalaga i tagata faʻaoga poʻo tagata asiasi faʻatasi ai ma faʻamatalaga faʻavae i luga o faʻatonuga ma faʻailoga.

Fa'atonuga fa'aoga

Matou te aveese outlinesitaili faʻaletonu i nisi o faʻatonuga ma faʻaoga se box-shadowi lona tulaga mo :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "O loʻo taulaʻi lenei ..." >

Le sa'o mea e fai

Faiga fa'aoga e ala ile fa'aogaina ole su'esu'e fa'aoga ile :invalid. Fa'ailoa se type, fa'aopoopo le requireduiga pe a fai e le o filifili le fanua, ma (pe a talafeagai) fa'amaonia se pattern.

E le maua lenei mea i fa'aliliuga o le Internet Explorer 7-9 ona o le leai o se lagolago mo CSS pseudo selectors.

<input class = "span3" type = "imeli" mana'omia >

Fa'aletonu mea e fai

Fa'aopoopo le disableduiga i luga o se mea e fa'aoga e taofia ai le fa'aogaina o tagata ma fa'aosofia ai se va'aiga teisi.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Fa'aletonu le fa'aoga iinei..." fa'aletonu >

Fa'amaonia setete

Bootstrap e aofia ai sitaili faʻamaonia mo mea sese, lapataiga, faʻamatalaga, ma feʻau manuia. Ina ia fa'aoga, fa'aopoopo le vasega talafeagai i le si'osi'omaga .control-group.

<div class = "pulea-vaega lapataiga" > 
  <label class = "control-label" for = "inputWarning" > Fa'aofi ma le lapataiga </label>  
  <div class = "pulea" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "fesoasoani-i totonu" > Atonu ua i ai se mea ua faaletonu </span> 
  </div>
</div>
 
<div class = "pule-vaega sese" > 
  <label class = "control-label" for = "inputError" > Fa'aofi ma mea sese </label>  
  <div class = "pulea" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Fa'amolemole fa'asa'o le mea sese </span> 
  </div>
</div>
 
<div class = "fa'amatalaga fa'atonu-vaega" > 
  <label class = "control-label" for = "inputInfo" > Fa'aofi ma fa'amatalaga </label>  
  <div class = "pulea" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "fesoasoani-inline" > Ua uma ona ave le igoa ole igoa </span> 
  </div>
</div>
 
<div class = "pule-vaega manuia" > 
  <label class = "control-label" for = "inputSuccess" > Ulufale ma le manuia </label>  
  <div class = "pulea" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "fesoasoani-i totonu" > Woohoo! </span> 
  </div>
</div>

Fa'amau fa'amau

E mafai ona fa'aoga sitaili fa'amau i so'o se mea e .btnfa'aoga le vasega. Ae ui i lea, e masani lava e te manaʻo e faʻaoga nei mea i na o <a>elemene <button>mo le faʻaliliuga sili ona lelei.

faamau	vasega=""	Fa'amatalaga
	`btn`	Fa'amau lanu efuefu fa'atasi ma le fa'alili
	`btn btn-primary`	E tu'uina atu le mamafa va'aia fa'aopoopo ma fa'ailoa ai le gaioiga muamua i se seti o fa'amau
	`btn btn-info`	Fa'aaoga e fai ma sui i sitaili fa'aletonu
	`btn btn-success`	Fa'ailoa mai se gaioiga manuia pe lelei
	`btn btn-warning`	Fa'ailoa mai e tatau ona fa'aeteete i lenei gaioiga
	`btn btn-danger`	Fa'ailoa se gaioiga mata'utia pe ono le lelei
	`btn btn-inverse`	Su'i fa'amau fa'aefuefu pogisa, e le o nonoa i se fa'aoga fa'aoga po'o se fa'aoga
	`btn btn-link`	Fa'amama le fa'amamafaina o se fa'amau e ala i le fa'atusaina o se so'oga a'o fa'atumauina amioga fa'amau

Feso'ota'i su'esu'e

E le fa'aputuina e le IE9 fa'ama'i fa'ama'i i tulimanu lapotopoto, o lea matou te 'ave'esea ai. E feso'ota'i, IE9 fa'amanino buttonelemene fa'aletonu, fa'aefue fa'aefuefu tusitusiga ma se ata leaga e le mafai ona tatou fa'aleleia.

Fa'amau fa'amau

Mana'o i fa'amau tetele pe la'ititi? Fa'aopoopo .btn-large, .btn-small, po'o .btn-minile tele fa'aopoopo.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > faamau tele </button>  
  <button class = "btn btn-large" type = "button" > faamau tele </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Fa'amau fa'amau </button>  
  <button class = "btn" type = "button" > Default button </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > tama'i faamau </button>  
  <button class = "btn btn-small" type = "button" > tama'i faamau </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>  
  <button class = "btn btn-mini" type = "button" > Mini button </button>  
</p>

Fausia fa'amau fa'apoloka—o mea e fa'alautele le lautele atoa o se matua—e ala i le fa'aopoopoina .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Block level button </button>  
<button class = "btn btn-large btn-block" type = "button" > Block level button </ button>

Tulaga le atoatoa

Fai fa'amau e foliga le mafai ona kiliki e ala i le mou atu i tua 50%.

Elemene taula

Fa'aopoopo le .disabledvasega i <a>fa'amau.

So'oga muamua So'oga

<a href = "#" class = "btn btn-large btn-primary disabled" > So'oga muamua </a>  
<a href = "#" class = "btn btn-large disabled" > So'oga </a>

Ulu i luga!Matou te faʻaaogaina .disabledo se vasega aoga iinei, tutusa ma le .activevasega masani, o lea e leai se prefix e manaʻomia. E le gata i lea, o lenei vasega e naʻo le faʻalelei; e tatau ona e fa'aogaina le JavaScript tu ma aga e tape ai feso'ota'iga iinei.

Elemene faamau

Fa'aopoopo le disableduiga i <button>fa'amau.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Primary button </button>   
<button type = "button" class = "btn btn-large" disabled > Button </button>

Tasi vasega, tele pine

Faaaoga le .btnvasega i luga o se <a>, <button>, po o se <input>elemene.

<a class = "btn" href = "" > So'oga </a>  
<button class = "btn" type = "submit " > Button </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit " value = "Submit" >

O se faiga sili, taumafai e fa'afetaui le elemene mo lau fa'amatalaga ina ia mautinoa e fetaui le fa'aliliuga o su'esu'ega. Afai ei ai sau input, fa'aaoga le <input type="submit">mo lau faamau.

Fa'aopoopo vasega i se <img>elemene e fa'afaigofie ona fa'avasega ata i so'o se galuega.

<img src = "..." vasega = "img-rounded" >  
<img src = "..." vasega = "img-li'o" >  
<img src = "..." vasega = "img-polaroid" >

Ulu i luga! .img-roundedma .img-circlee le galue i le IE7-8 ona o le leai o se border-radiuslagolago.

Ata glyphs

140 ata i le sprite form, avanoa i le lanu efuefu pogisa (default) ma le paepae, saunia e Glyphicons .

fa'ailoga-tioata
fa'ailoga-musika
fa'ailoga-su'esu'e
icon-teutusi
fa'ailoga-loto
fa'ailoga-fetu
icon-fetu-gaogao
fa'aoga-tagata
ata tifaga
icon-th-tele
icon-th
icon-th-list
fa'ailoga-lelei
fa'ailoga-ave'ese
fa'ailoga-fa'aoso-i totonu
fa'ailoga-fa'aoso-i fafo
fa'amaufa'ailoga
fa'ailoga fa'ailoga
fa'ailoga-cog
fa'ailoga- lapisi
fa'ailoga-fale
faila-ikona
icon-taimi
fa'ailoga-auala
icon-download-alt
icon-download
icon-upload
icon-inbox
fa'ailoga-ta'alo-li'o
fa'ailoga-toe fai
fa'ailoga-fa'afouina
icon-lisi-alt
loka-loka
fa'ailoga-fu'a
fa'ailoga-telefoni
icon-volume-off
icon-volume-lalo
icon-volume-up
fa'ailoga-qrcode
icon-barcode
fa'ailoga-igoa
fa'ailoga-igoa
tusi fa'ailoga
fa'ailoga-tusitusi
fa'ailoga-lomitusi
ata-pueata
fa'ailoga-mataitusi
fa'ailoga-malosi
fa'ailoga fa'ailoga
icon-tusi-maualuga
ata-tusi-lautele
icon-align-agavale
icon-align-center
icon-align-right
icon-align-justify
fa'ailoga-lisi
icon-indent-agavale
icon-indent-taumatau
icon-facetime-video
ata-ata
fa'ailoga-penitala
fa'ailoga-fa'afanua-fa'ailoga
fa'ailoga-fetuuna'i
fa'ailoga-tint
fa'ailoga-fa'atonu
fa'ailoga-fa'asoa
fa'ailoga-siaki
fa'ailoga-gaioi
icon-laasaga-i tua
icon-vave-i tua
fa'ailoga-i tua
fa'ailoga-ta'aloga
fa'amalo-malo
fa'ailoga-taofi
fa'ailoga-i luma
fa'ailoga-vave-agai luma
icon-laasaga i luma
icon-eject
icon-chevron-agavale
icon-chevron-taumatau
fa'ailoga-faaopoopo-fa'ailoga
fa'ailoga-minus-faailoga
fa'ailoga-ave'ese-faailoga
fa'ailoga-ok-faailoga
fa'ailoga-fesili
icon-info-sign
ata-ata ata
icon-ave'ese-li'o
icon-ok-li'o
icon-ban-li'o
icon-arrow-agavale
icon-arrow-taumatau
icon-arrow-up
icon-arrow-lalo
icon-share-alt
fa'ailoga-suia-tumu
fa'ailoga-toe fa'aitiiti
icon-plus
icon-minus
fa'ailoga fa'ailoga
fa'ailoga-fa'ailoga-fa'ailoga
icon-meaalofa
fa'ailoga-laulau
fa'ailoga-afi
fa'ailoga-matatala
icon-mata-latalata
fa'ailoga-lapataiga-faailoga
fa'ailoga-vaalele
fa'ailoga-kalena
fa'ailoga fa'afuase'i
icon-faamatalaga
fa'ailoga-maneta
icon-chevron-up
icon-chevron-down
icon-retweet
fa'ailoga-fa'atau-fa'atau
icon-folder-close
icon-folder-tatala
fa'ailoga-su'i-tutusa
fa'ailoga-toe fa'asaga-fa'asaga
icon-hdd
fa'ailoga-bullhorn
logo-logo
fa'ailoga-tusitusi
fa'ailoga limamatua
icon-thumbs-down
fa'ailoga-lima-taumatau
icon-lima-agavale
fa'ailoga-lima-i luga
icon-lima-lalo
icon-li'o-arrow-taumatau
icon-circle-arrow-agavale
icon-li'o-arrow-up
icon-li'o-arrow-lalo
icon-kelope
fa'ailoga-wrench
fa'ailoga-galuega
fa'ailoga-fili
atigipusa-pepa
fa'ailoga-ata atoa

Fa'ailoga Glyphicons

Glyphicons Halflings e masani lava e le maua fua, ae o se faʻatulagaga i le va o Bootstrap ma le Glyphicons foafoa ua mafai ai lenei mea e aunoa ma se tau ia te oe o le au atiaʻe. O se fa'afetai, matou te fai atu ia te oe e fa'aofi se feso'ota'iga i tua i Glyphicons pe a fa'atino.

Fa'afefea ona fa'aoga

O ata uma e manaʻomia se <i>pine faʻatasi ma se vasega tulaga ese, faʻapipiʻi i le icon-. Ina ia faʻaoga, tuʻu le faʻailoga lea e uiga i soʻo se mea:

<i vasega = "icon-search" ></i>

O lo'o iai fo'i sitaili o lo'o avanoa mo ata fa'aliliu (pa'epa'e), ua saunia ma le isi vasega fa'aopoopo. O le a matou fa'amalosia fa'apitoa lenei vasega i luga o fa'agasolo ma tulaga fa'agaoioia mo feso'ota'iga nav ma pa'u i lalo.

<i vasega = "icon-search icon-white" ></i>

Ulu i luga!A fa'aoga i talaane o manoa o tusitusiga, pei o fa'amau po'o so'otaga, ia mautinoa e tu'u se avanoa pe a uma le <i>pine mo le avanoa talafeagai.

Ata fa'ata'ita'iga

Fa'aoga i fa'amau, vaega fa'amau mo se mea faigaluega, ta'avale, po'o mea fa'apipi'i fomu.

Fa'amau

Vaega fa'amau i totonu o se fa'amau meafaigaluega

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Pa'u i lalo i se vaega fa'amau

Tagata fa'aoga

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Tagata fa'aoga </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "fa'alalo-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Fa'atonu </a> </li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Aveese </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Fa'asa </a></li>  
    <li vasega = "vaelua" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Fai pule </a></li>  
  </ul>
</div>

Fa'amau fa'amau

Fetu Fetu Fetu

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Fetu </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Fetu </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Fetu </a>

Tautai

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Fale </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Faletusi </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Talosaga </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
</ul>

Fomu fanua

<div class = "pule-vaega" > 
  <label class = "control-label" for = "inputIcon" > tuatusi imeli </label>  
  <div class = "pulea" > 
    <div class = "faʻapipiʻi-faʻapipiʻi" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Tusitala

Ulutala

h1. Ulutala 1

h2. Ulutala 2

h3. Ulutala 3

h4. Ulutala 4

h5. Ulutala 5

h6. Ulutala 6

kopi tino

Ta'ita'i kopi tino

Fausia i le Itiiti

Fa'amamafa

<small>

Lototele

Tusipasi

Vasega fa'atulagaina

Vasega Fa'amamafa

Faapuupuuga

<abbr>

<abbr class="initialism">

Tulaga

<address>

Blockquotes

Fa'atonu poloka upusii

Filifiliga poloka upusii

Fa'aigoa o se puna

Su'i fa'aaliga

Lisi

Le fa'atonu

Fa'atonu

Le fa'ailoga

I totonu

Fa'amatalaga

Fa'amatalaga fa'asaga

Code

I totonu

Poloka faavae

Laupapa

Sitaili masani

Vasega faitalia

.table-striped

.table-bordered

.table-hover

.table-condensed

Vasega laina filifiliga

Fa'ailoga laulau lagolago

Fomu

Sitaili masani

Fa'atulagaina filifiliga

Su'e fomu

Fomu i totonu

Faiga faalava

Puleaina fomu

Ulufale mai

Textarea

Pusa siaki ma leitio

Fa'atonu (fa'aputu)

Pusa siaki i totonu

Filifilia

Fa'alautele le pulea o fomu

Tomua ma fa'apipi'i mea e fai

Filifiliga masani

Tuufaatasi

Fa'amau nai lo tusitusiga

Fa'amau i lalo

Fa'avaevae vaega fa'alalo

Su'e fomu

Puleaina le fuaina

Poloka tulaga fa'aoga

Fa'atusatusaga

Fa'avasegaina o fa'amau

Mea e le mafai ona fa'asa'oina

Fua taga

Fesoasoani tusitusiga

Fesoasoani i luga ole laiga

poloka le fesoasoani

Fa'atonu tulaga fa'atonu

Fa'atonuga fa'aoga

Le sa'o mea e fai

Fa'aletonu mea e fai

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`