CSS faavae

I le pito i luga o le fatamanu, o elemene HTML faavae e faʻapipiʻiina ma faʻaleleia i vasega faʻalautele e maua ai se foliga fou, tumau ma lagona.

Ulutala & tino kopi

Fua fa'atusa

O le fa'asologa atoa o fa'asologa o lo'o fa'avae i luga ole lua Less variables i la tatou faila faila.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, e fatu ai pito, paddings, ma laina-maualuga o matou ituaiga uma ma sili atu.

Fa'ata'ita'iga tusitusiga tino

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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Ulutala 1

h2. Ulutala 2

h3. Ulutala 3

h4. Ulutala 4

h5. Ulutala 5
h6. Ulutala 6

Faamamafa, tuatusi, ma le faapuupuuga

Elemene Fa'aoga Filifili
<strong> Mo le faʻamamafaina o se vaega o tusitusiga ma taua Leai
<em> Mo le faʻamamafaina o se vaega o tusitusiga ma le faʻamalosi Leai
<abbr> Ta'i fa'apu'upu'u ma fa'apuupuuga e fa'aalia ai le fa'alautelega o lo'o i luga o le fa'ae'e

Fa'aaofia titleuiga fa'apitoa mo tusitusiga fa'alautele

Fa'aoga .initialismle vasega mo fa'apu'upu'u mata'itusi.
<address> Mo faʻamatalaga faʻafesoʻotaʻi mo lona tuaa lata ane poʻo le tino atoa o galuega Fa'asao le fa'atulagaina e ala i le fa'amuta uma o laina i<br>

Fa'aaogaina o le faamamafa

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Manatua: Lagona le saoloto e faʻaoga <b>ma <i>i le HTML5, ae o lo latou faʻaogaina ua fai sina suiga. <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.

Fa'ata'ita'iga tuatusi

O faʻataʻitaʻiga nei e lua o le faʻaogaina o le <address>pine:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Igoa atoa
[email protected]

Faataitaiga faapuupuuga

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 tu'uina atu i tagata fa'aoga fa'amatalaga fa'aopoopo o le a fa'aalia se mea i luga o le fa'afefe.

Fa'aopoopo le initialismvasega i se fa'apu'upu'u e fa'atuputeleina ai le fa'aupuga o lo'o fa'atatau i le tu'uina atu i ai o se la'ititi la'ititi o tusitusiga.

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

O se faapuupuuga o le upu uiga o le attr .

Blockquotes

Elemene Fa'aoga Filifili
<blockquote> Elemene tulaga poloka mo le siiina mai o anotusi mai se isi puna

Fa'aopoopo citeuiga mo le puna URL

Fa'aoga .pull-leftma .pull-rightvasega mo filifiliga fa'afefe
<small> Fa'atonu elemene mo le fa'aopoopoina o se fa'amatalaga e fa'asaga i tagata fa'aoga, e masani lava o se tusitala ma le igoa o le galuega Fa'asolo <cite>le igoa po'o le igoa o le puna

Ina ia aofia ai se poloka upusii, afifi <blockquote>soo se HTML e pei o le upusii. Mo upusii tuusa'o matou te fautuaina se <p>.

Fa'aaofia se <small>elemene e filifili e ta'u mai ai lau puna'oa ma o le ae mauaina se fa'ailoga em i &mdash;luma atu mo fa'amoemoega fa'ailoga.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Se tasi ta'uta'ua </small>
  4. </blockquote>

Faataitaiga poloka upusii

O upusii fa'apoloka e fa'apena e fa'apea:

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

O se tasi ta'uta'ua i le Tino o galuega

Ina ia faʻafefe lau poloka upusii i le taumatau, faʻaopoopo class="pull-right":

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

O se tasi ta'uta'ua i le Tino o galuega

Lisi

Le fa'atonu

<ul>

  • 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

Le fa'ailoga

<ul class="unstyled">

  • 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

Fa'atonu

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem ma masa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean nofo amet erat nunc
  8. Eget porttitor lorem

Fa'amatalaga

<dl>

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.

Fa'amatalaga fa'asaga

<dl class="dl-horizontal">

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.

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

  1. Mo se fa'ata'ita'iga , <code> section </ 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>
  1. <mua>
  2. <p>Fa'ata'ita'iga tusitusiga iinei...</p>
  3. </pre>

Manatua: 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.

Google Fa'alelei

Ave le <pre>elemene lava e tasi ma faʻaopoopo ni vasega se lua mo le faʻaleleia atili.

  1. <p> Fa'ata'ita'i tusitusiga iinei... </p>
  1. <pre class = "prettyprint
  2. laina laina" >
  3. <p>Fa'ata'ita'iga tusitusiga iinei...</p>
  4. </pre>

La'u mai le google-code-prettify ma va'ai le readme mo le fa'aogaina.

Fa'ailoga laulau

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> Sel laulau fa'apitoa mo koluma (po'o laina, fa'atatau i le lautele ma le tu'uina) fa'ailoga
E tatau ona fa'aoga i totonu ole a<thead>
<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
  1. < laulau>
  2. <ulu>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </head>
  8. <tino>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tino>
  14. </ laulau>

Filifiliga laulau

Igoa Vasega Fa'amatalaga
Fa'atonu Leai Leai ni sitaili, na o koluma ma laina
Fa'avae .table Na'o laina faalava i le va o laina
tuaoi .table-bordered Fa'ata'amilo tulimanu ma fa'aopoopo pito i fafo
Sebra-laina .table-striped Fa'aopoopo le lanu efuefu malamalama i tua i laina ese (1, 3, 5, ma isi)
Fa'aputu .table-condensed 'Otioti fa'alava sa'o i le afa, mai le 8px i le 4px, i totonu uma tdma thelemene

Fa'ata'ita'iga laulau

1. Sitaili laulau masani

E otometi lava ona fa'avasegaina laulau ma na'o ni nai tuaoi e mautinoa ai le faitau ma fa'atumauina le fausaga. Faatasi ai ma le 2.0, .tablee manaʻomia le vasega.

  1. <table class = "table" >
  2. </ laulau>
# Igoa muamua Fa'aiu Username
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter

2. Laulau lanu

Fai sina fa'alelei i au laulau e ala i le fa'aopoopoina o le zebra-striping—na'o le fa'aopoopoina o le .table-stripedvasega.

Fa'aaliga: E fa'aoga e laulau fa'ailoga le :nth-childCSS filifili ma e le maua ile IE7-IE8.

  1. < vasega laulau = "la'au laulau-vaevae" >
  2. </ laulau>
# Igoa muamua Fa'aiu Username
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter

3. Laulau tuaoi

Fa'aopoopo tuaoi fa'ata'amilo i le laulau atoa ma tulimanu lapotopoto mo fa'amoemoega fa'alelei.

  1. <table class = "table table-bordered" >
  2. </ laulau>
# Igoa muamua Fa'aiu Username
1 Mareko Otto @mdo
Mareko Otto @getbootstrap
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter

4. Laulau fa'aputu

Fa'aopoopo au laulau e ala i le fa'aopoopoina o le .table-condensedvasega e tipi fa'afafa le pa'u o le laulau (mai le 8px i le 4px).

  1. <table class = "table table-condensed" >
  2. </ laulau>
# Igoa muamua Fa'aiu Username
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter

5. Fa'atasi uma!

Lagona le saoloto e tuʻufaʻatasia soʻo se vasega laulau e ausia ai foliga eseese e ala i le faʻaaogaina o soʻo se vasega avanoa.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </ laulau>
Igoa atoa
# Igoa muamua Fa'aiu Username
1 Mareko Otto @mdo
2 Iakopo Thornton @ga'o
3 Larry le Manu @twitter

HTML ma CSS fetuutuunai

O le vaega pito sili ona lelei e uiga i fomu i Bootstrap o au faʻaoga uma ma faʻatonuga e foliga lelei tusa lava pe faʻafefea ona e fausia i lau faʻailoga. E leai se HTML e manaʻomia, ae matou te tuʻuina atu mamanu mo i latou e manaʻomia.

O fa'asologa lavelave e sau i vasega fa'apu'upu'u ma fa'avasegaina mo le fa'agofieina o sitaili ma fa'amau fa'atupu, o lea e ufiufi ai oe i la'asaga uma.

E fa fa'atulagaina na aofia ai

O le Bootstrap e sau ma le lagolago mo ituaiga faʻatulagaina o fomu:

  • Tusa'o
  • Saili
  • I totonu
  • Fa'asagaga

O ituaiga eseese o fomu fa'atulagaina e mana'omia ai ni suiga i le fa'ailoga, ae o le pule lava ia e tumau ma amio tutusa.

Pulea setete ma sili atu

O fomu a Bootstrap e aofia ai sitaili mo fa'atonuga uma e pei o fa'aoga, textarea, ma filifili e te fa'amoemoeina. Ae o lo'o sau fo'i ma le tele o vaega fa'ale-aganu'u e pei o mea fa'apipi'i ma fa'apipi'i muamua ma lagolago mo lisi o pusa siaki.

O setete e pei o mea sese, lapataiga, ma le manuia o loʻo aofia ai mo ituaiga taʻitasi o faʻatonuga. O lo'o iai fo'i sitaili mo fa'atonu fa'aletonu.

Fa ituaiga o fomu

Bootstrap e maua ai faʻailoga faigofie ma sitaili mo sitaili e fa o foliga masani i luga ole laiga.

Igoa Vasega Fa'amatalaga
Tusa'o .form-vertical (e le mana'omia) Fa'aputu, fa'aigoa agavale i luga o fa'atonuga
I totonu .form-inline Fa'ailoga fa'aoga agavale ma fa'atonutonu poloka poloka mo sitaili fa'akomepiuta
Saili .form-search Fa'ato'a fa'a'amilosaga fa'aoga mo se su'esu'ega fa'alelei
Fa'asagaga .form-horizontal Fa'afefete i le agavale, fa'aigoa fa'ailoga i luga o le laina tutusa ma fa'atonuga

Fa'ata'ita'iga fomu e fa'aaoga ai na'o le fa'atonuga, leai se fa'ailoga fa'aopoopo

Faiga faavae

Fa'aletonu atamai ma mama e aunoa ma se fa'ailoga fa'aopoopo.

Fa'ata'ita'iga poloka-tulaga fesoasoani tusitusiga iinei.

  1. <form class = "lelei" >
  2. <label> igoa igoa </label>
  3. <input type = "text" class = "span3" placeholder = " Type something..." >
  4. <span class = "fesoasoani-poloka" > Fa'ata'ita'iga poloka-tulaga fesoasoani tusitusiga iinei. </span>
  5. <label class = "pusa siaki" >
  6. <input type = "checkbox" > Siaki a'u i fafo
  7. </label>
  8. <button type = "submit " class = "btn" > Auina </button>
  9. </form>

Su'e fomu

Faaopoopo .form-searchi le fomu ma .search-queryle input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit " class = "btn" > Su'e </button>
  4. </form>

Fomu i totonu

Fa'aopoopo .form-inlinee fa'amalieina le fa'aoga sa'o ma le va o fa'atonuga.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Imeli" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "pusa siaki" >
  5. <input type = "checkbox" > Manatua a'u
  6. </label>
  7. <button type = "submit " class = "btn" > Sign in </button>
  8. </form>

Tulaga faalava

O lo'o fa'aalia i le itu taumatau o fa'atonuga fa'aletonu uma matou te lagolagoina. O le lisi lenei o pulufana:

  • mea e fai ai tusitusiga (tusitusiga, upu faataga, imeli, ma isi)
  • pusa siaki
  • leitio
  • filifili
  • filifili tele
  • faila faila
  • textarea

I le faaopoopo atu i le freeform text, soo se HTML5 text-based input e foliga mai faapena.

Faataitaiga faailoga

Tu'u atu i le fa'ata'ita'iga o lo'o i luga le fa'atulagaina o le fomu, o le fa'ailoga lea e feso'ota'i ma le vaega muamua fa'aofi ma fa'atonutonu. O le .control-group, .control-label, ma .controlsvasega e mana'omia uma mo le fa'ailoga.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Talatu'u tusitusiga </legend>
  4. <div class = "pule-vaega" >
  5. <label class = "control-label" for = "input01" > Fa'aoga tusitusiga </label>
  6. <div class = "pulea" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "fesoasoani-poloka" > Tusiga fesoasoani lagolago </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Fa'atonu tulaga fa'atonu

Bootstrap fa'aalia sitaili mo su'esu'ega-lagolago taula'i ma disabledsetete. Matou te aveese le Webkit le lelei outlinema faʻaoga se box-shadowi lona tulaga mo :focus.


Fa'amaonia pepa

E aofia ai foʻi sitaili faʻamaonia mo mea sese, lapataiga, ma le manuia. Ina ia faʻaaoga, faʻaopoopo le vasega sese i le siʻosiʻomaga .control-group.

  1. <fieldset
  2. vasega = "pule-vaega sese" >
  3. </fieldset>
O nisi taua iinei
Atonu ua i ai se mea ua faaletonu
Faamolemole faasa'o le mea sese
Uohoo!
Uohoo!

Fa'alautele le pulea o fomu

Fa'aopoopo ma fa'apipi'i mea e fai

Vaega fa'aofi—fa'atasi ai ma tusitusiga fa'apipi'i po'o fa'apipi'i muamua—e tu'uina atu se auala faigofie e tu'uina atu ai nisi fa'amatalaga mo au mea e fai. O fa'ata'ita'iga lelei e aofia ai le fa'ailoga @ mo igoa ole Twitter po'o le $ mo tupe.


Pusa siaki ma leitio

E o'o atu i le v1.4, Bootstrap e mana'omia se fa'ailoga fa'aopoopo i pusa siaki ma leitio e fa'aputu ai. Ia, o se mataupu faigofie o le toe fai o le <label class="checkbox">mea e afifi ai le <input type="checkbox">.

E lagolagoina fo'i pusa siaki ma leitio. Na'o le fa'aopoopo .inlinei so'o se .checkboxpe .radioae mae'a.


Pepa i totonu ma fa'apipi'i/fa'aopoopo

Mo le fa'aogaina o mea e fa'apipi'i pe fa'apipi'i i totonu o le fomu, ia mautinoa e tu'u le .add-onma inputi luga o le laina e tasi, e aunoa ma ni avanoa.


Faatumu tusi fesoasoani

Mo le fa'aopoopoina o ni tusitusiga fesoasoani mo au mea e tu'uina atu i lau fomu, fa'aaofia i totonu le laina fa'amatalaga fesoasoani <span class="help-inline">po'o se poloka mau fesoasoani pe a <p class="help-block">uma le elemene fa'aoga.

Fa'aoga .span*vasega tutusa mai le faiga fa'asologa mo le tele o mea e fa'aoga.

E mafai fo'i ona e fa'aogaina vasega fa'apitoa e le fa'afanua i le fa'asologa, fa'afetaui i sitaili CSS tali, po'o fa'amatalaga mo ituaiga fa'atonutonu eseese (fa'ata'ita'iga, inputvs. select).

@

O nisi nei o tusitusiga fesoasoani

.00
O nisi nei tusitusiga fesoasoani
$ .00

Fa'aaliga: Fa'ailoga o lo'o si'omia uma filifiliga mo le tele o vaega kiliki ma se fomu e sili atu ona fa'aoga.

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

Fa'amau mo gaioiga

I le avea ai o se fa'apotopotoga, e tatau ona fa'aoga fa'amau mo gaioiga a'o fa'aoga hyperlinks mo mea faitino. Mo se faʻataʻitaʻiga, "Download" e tatau ona avea ma faʻamau aʻo "gaoioiga lata mai" e tatau ona avea ma soʻotaga.

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

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.

Tele tetele

Mana'o i fa'amau tetele pe la'ititi? Fa'aopoopo .btn-large, .btn-small, po'o .btn-minimo isi lapopo'a e lua.


Tulaga le atoatoa

Mo fa'amau fa'aletonu, fa'aopoopo le .disabledvasega i so'oga ma le disableduiga mo <button>elemene.

So'oga muamua So'oga

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.

Tasi vasega, tele pine

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

So'oga
  1. <a class = "btn" href = "" > So'oga </a>
  2. <button class = "btn" type = "submit " >
  3. faamau
  4. </fa'amau>
  5. <input class = "btn" type = "button"
  6. tau = "Tuuina atu" >
  7. <input class = "btn" type = "tuuina atu"
  8. tau = "Auina atu" >

O se faiga sili, taumafai e fa'afetaui le elemene mo lou 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'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

Fausia e pei o se sprite

Nai lo le faia o fa'ailoga uma o se talosaga fa'aopoopo, ua matou tu'ufa'atasia i totonu o se sprite—o se vaega o ata i le faila e tasi e fa'aoga le CSS e fa'atulaga ai ata ma background-position. O le auala lava lea e tasi matou te faʻaogaina i luga o Twitter.com ma ua aoga lelei mo matou.

O vasega uma o ata o loʻo faʻapipiʻiina .icon-mo le vaʻaiga talafeagai ma le vaʻaia, e pei lava o isi vaega. O lenei mea o le a fesoasoani e aloese mai feteʻenaʻiga ma isi meafaigaluega.

Glyphicons ua tu'uina mai ia i matou le fa'aogaina o le Halflings seti i totonu o la matou mea faigaluega punaoa tatala pe afai matou te tuʻuina atu se fesoʻotaʻiga ma aitalafu iinei i le docs. Faamolemole mafaufau e fai le mea lava e tasi i au galuega faatino.

Fa'afefea ona fa'aoga

E fa'aaoga e Bootstrap se <i>fa'ailoga mo ata uma, ae leai se vasega fa'apitoa—na'o se fa'ailoga fa'asoa. Ina ia faʻaoga, tuʻu le faʻailoga lea e uiga i soʻo se mea:

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

E iai fo'i sitaili o lo'o avanoa mo ata fa'aliliu (pa'epa'e), ua saunia ma le isi vasega fa'aopoopo:

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

E 120 vasega e filifili mai ai mo au ata. Na'o le fa'aopoopoina o se <i>fa'ailoga ma vasega sa'o ma ua e setiina. E mafai ona e mauaina le lisi atoa i sprites.less po'o iinei i lenei pepa.

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.

Fa'aoga mataupu

E lelei tele ata, ae o fea e faʻaaogaina e se tasi? O nai manatu nei:

  • E fai ma ata mo lau fa'atautaiga itu
  • Mo se fa'ata'ita'iga fa'aigoa mama
  • Mo fa'amau e fesoasoani e fa'ailoa ai le uiga o se gaioiga
  • Fa'atasi ai ma feso'ota'iga e fa'asoa ai fa'amatalaga i le mea e alu i ai le tagata fa'aoga

O le mea moni, soʻo se mea e mafai ona e tuʻuina ai se <i>pine, e mafai ona e tuʻuina se faʻailoga.

Faataitaiga

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