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.
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: @baseFontSize
ma @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.
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.
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 le filifiliga title mo tusitusiga fa'alautele |
<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> |
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.
O faʻataʻitaʻiga nei e lua o le faʻaogaina o le <address>
pine:
O fa'apuupuuga o lo'o fa'avasegaina i mata'itusi mata'itusi pito i luga ma se pito i lalo togitogi malamalama. E iai fo'i le latou fa'ailo fesoasoani i luga o le fa'afefete ina ia maua e tagata fa'aoga fa'ailoga fa'aopoopo o le a fa'aalia se mea i luga o le fa'afefe.
HTML o le mea sili lea talu mai le fasi falaoa.
O se faapuupuuga o le upu uiga o le attr .
Elemene | Fa'aoga | Filifili |
---|---|---|
<blockquote> |
Elemene tulaga poloka mo le siiina mai o anotusi mai se isi puna | Fa'aopoopo .pull-left ma .pull-right vasega 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 —
luma atu mo fa'amoemoega fa'ailoga.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> Se tasi ta'uta'ua </small>
- </blockquote>
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
<ul>
<ul class="unstyled">
<ol>
<dl>
Afifi fasi laina fa'ailoga fa'ailoga ma <code>
.
- Mo se fa'ata'ita'iga , <code> section </ code > e tatau ona afifi i totonu o le laina .
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>
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-scrollable
vasega lea e fa'atulaga ai le maualuga-maualuga o le 350px ma tu'uina atu se y-axis scrollbar.
Ave le <pre>
elemene lava e tasi ma faʻaopoopo ni vasega se lua mo le faʻaleleia atili.
- <p> Fa'ata'ita'i tusitusiga iinei... </p>
- <pre class = "prettyprint
- laina laina" >
- <p>Fa'ata'ita'iga tusitusiga iinei...</p>
- </pre>
La'u mai le google-code-prettify ma va'ai le readme mo le fa'aogaina.
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 |
- < laulau>
- <ulu>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </head>
- <tino>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tino>
- </ 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 td ma th elemene |
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, .table
e manaʻomia le vasega.
- <table class = "table" >
- …
- </ laulau>
# | Igoa muamua | Fa'aiu | Gagana |
---|---|---|---|
1 | Mareko | Otto | CSS |
2 | Iakopo | Thornton | Javascript |
3 | Stu | Dent | HTML |
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-striped
vasega.
Fa'aaliga: E fa'aoga e laulau fa'ailoga le :nth-child
CSS filifili ma e le maua ile IE7-IE8.
- < vasega laulau = "la'au laulau-vaevae" >
- …
- </ laulau>
# | Igoa muamua | Fa'aiu | Gagana |
---|---|---|---|
1 | Mareko | Otto | CSS |
2 | Iakopo | Thornton | Javascript |
3 | Stu | Dent | HTML |
Fa'aopoopo tuaoi fa'ata'amilo i le laulau atoa ma tulimanu lapotopoto mo fa'amoemoega fa'alelei.
- <table class = "table table-bordered" >
- …
- </ laulau>
# | Igoa muamua | Fa'aiu | Gagana |
---|---|---|---|
1 | Mareko Otto | CSS | |
2 | Iakopo | Thornton | Javascript |
3 | Stu | Dent | |
3 | Brosef | Stalin | HTML |
Fa'aopoopo au laulau e ala i le fa'aopoopoina o le .table-condensed
vasega e tipi fa'afafa le pa'u o le laulau (mai le 8px i le 4px).
- <table class = "table table-condensed" >
- …
- </ laulau>
# | Igoa muamua | Fa'aiu | Gagana |
---|---|---|---|
1 | Mareko | Otto | CSS |
2 | Iakopo | Thornton | Javascript |
3 | Stu | Dent | HTML |
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.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </ laulau>
# | Igoa muamua | Fa'aiu | Gagana |
---|---|---|---|
1 | Mareko | Otto | CSS |
2 | Iakopo | Thornton | Javascript |
3 | Stu | Dent | HTML |
4 | Brosef | Stalin | HTML |
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.
O le Bootstrap e sau ma le lagolago mo ituaiga faʻatulagaina o fomu:
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.
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.
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 |
Faatasi ai ma le v2.0, o loʻo i ai a matou faʻaoga mama ma sili atu le atamai mo sitaili faʻailoga. Leai se fa'ailoga fa'aopoopo, na'o le fa'atonuga.
- <form class = "lelei" >
- <label> igoa igoa </label>
- <input type = "text" class = "span3" placeholder = " Type something..." >
- <span class = "fesoasoani-i totonu" > Tusi fesoasoani feso'ota'i! </span>
- <label class = "pusa siaki" >
- <input type = "checkbox" > Siaki a'u i fafo
- </label>
- <button type = "submit " class = "btn" > Auina </button>
- </form>
Fa'ata'ita'iina sitaili fa'aletonu WebKit, na'o le fa'aopoopo .form-search
mo isi fa'ata'amilosaga su'esu'e.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit " class = "btn" > Su'e </button>
- </form>
O mea fa'aoga o poloka poloka e amata ai. Mo .form-inline
ma .form-horizontal
, matou te faʻaogaina totonu-poloka.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Imeli" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <button type = "submit " class = "btn" > Alu </ button>
- </form>
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 .controls
vasega e mana'omia uma mo le fa'ailoga.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Talatu'u tusitusiga </legend>
- <div class = "pule-vaega" >
- <label class = "control-label" for = "input01" > Fa'aoga tusitusiga </label>
- <div class = "pulea" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "fesoasoani-poloka" > Tusiga fesoasoani lagolago </p>
- </div>
- </div>
- </fieldset>
- </form>
O lo'o fa'aalia i le agavale o fa'atonuga fa'aletonu uma matou te lagolagoina. O le lisi lenei o pulufana:
E o'o atu i le v1.4, o sitaili fa'ailoga a le Bootstrap na fa'aogaina ai le fa'alava fa'alava. Fa'atasi ai ma le Bootstrap 2, na matou 'ave'esea lena fa'agata ina ia sili atu le atamai, sili atu fa'aletonu fa'aletonu mo so'o se ituaiga.
Bootstrap fa'aalia sitaili mo su'esu'ega-lagolago taula'i ma disabled
setete. Matou te aveese le Webkit le lelei outline
ma faʻaoga se box-shadow
i lona tulaga mo :focus
.
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
.
- <fieldset
- vasega = "pule-vaega sese" >
- …
- </fieldset>
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.
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 .inline
i so'o se .checkbox
pe .radio
ae mae'a.
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-on
ma input
i luga o le laina e tasi, e aunoa ma ni avanoa.
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.
:after
. I le docs, matou te faʻaalia se lanu mumu mumu i luga o le faʻafefe e faʻamaonia ai le tele o le ata.
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.
Faatasi ai ma le v2.0.1, ua matou filifili e faʻaoga se <i>
pine mo a matou ata uma, ae leai se vasega faʻapitoa-naʻo se prefix faʻasoa. Ina ia faʻaoga, tuʻu le faʻailoga lea e uiga i soʻo se mea:
- <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:
- <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.
E lelei tele ata, ae o fea e faʻaaogaina e se tasi? O nai manatu nei:
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.
Fa'aoga i fa'amau, vaega fa'amau mo se mea faigaluega, ta'avale, po'o mea fa'apipi'i fomu.