Ma luna o ka scaffolding, ua kāhua ʻia nā mea HTML kumu a hoʻonui ʻia me nā papa hoʻonui e hāʻawi i kahi hiʻohiʻona hou a paʻa.
Hoʻokumu ʻia ka mānoanoa typographic holoʻokoʻa i ʻelua mau ʻano liʻiliʻi liʻiliʻi i kā mākou faila variables.less: @baseFontSize
a @baseLineHeight
. ʻO ka mua, ʻo ia ka nui font-nui i hoʻohana ʻia a puni a ʻo ka lua ke kiʻekiʻe laina kumu.
Hoʻohana mākou i kēlā mau mea hoʻololi, a me kekahi makemakika, e hana i nā palena, nā pale, a me nā kiʻekiʻe laina o kā mākou ʻano āpau a me nā mea hou aku.
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.
ʻElemu | Hoʻohana | Koho |
---|---|---|
<strong> |
No ka hoʻoikaika ʻana i kahi snippet o ka kikokikona me ka mea nui | ʻAʻohe |
<em> |
No ka hoʻoikaika ʻana i kahi snippet o ka kikokikona me ke koʻikoʻi | ʻAʻohe |
<abbr> |
Hoʻopili i nā pōkole a me nā acronym e hōʻike i ka mana hoʻonui ma ka hover | E hoʻokomo title i nā kikokikona i hoʻonui ʻia |
<address> |
No ka ʻike pili no kona kupuna kokoke a i ʻole ke kino holoʻokoʻa o ka hana | E mālama i ka hōpili ʻana ma ka hoʻopau ʻana i nā laina āpau me<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.
Nānā: E ʻoluʻolu e hoʻohana <b>
a <i>
ma HTML5, akā ua loli iki kā lākou hoʻohana ʻana. <b>
ʻO ka manaʻo e hōʻike i nā huaʻōlelo a i ʻole nā huaʻōlelo me ka ʻole o ka lawe ʻana i nā mea koʻikoʻi aʻo <i>
ka hapa nui no ka leo, nā ʻōlelo loea, etc.
Eia nā laʻana ʻelua o <address>
ke ʻano o ka hoʻohana ʻana i ka tag:
Hoʻopili ʻia nā pōkole me nā kikokikona kiʻekiʻe a me kahi palena lalo māmā. Loaʻa iā lākou kahi cursor kōkua ma ka hover no laila e hōʻike ʻia nā mea hoʻohana i kahi mea e hōʻike ʻia ma ka hover.
ʻO HTML ka mea maikaʻi loa mai ka ʻāpana palaoa.
ʻO ka pōkole o ka huaʻōlelo attribute ʻo attr .
ʻElemu | Hoʻohana | Koho |
---|---|---|
<blockquote> |
ʻElemu pae poloka no ka haʻi ʻana i nā ʻike mai kahi kumu ʻē aʻe | Hoʻohui .pull-left a me .pull-right nā papa no nā koho lana |
<small> |
ʻElemu koho no ka hoʻohui ʻana i kahi huaʻōlelo e pili ana i ka mea hoʻohana, maʻamau he mea kākau me ka inoa o ka hana | E kau <cite> i ka poʻo inoa a i ʻole ka inoa kumu |
No ka hoʻokomo ʻana i kahi blockquote, e kāʻei <blockquote>
i kekahi HTML e like me ka ʻōlelo. No nā huaʻōlelo pololei, paipai mākou i kahi <p>
.
E hoʻokomo i kahi mea koho <small>
e haʻi i kāu kumu a e loaʻa iā ʻoe kahi em dash —
ma mua o ia no nā kumu hana.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoʻokomo ʻia ka helu helu i mua o ka venenatis. </p>
- <liʻiliʻi> Kekahi mea kaulana </liʻiliʻi>
- </blockquote>
Ua kapa ʻia nā huaʻōlelo paʻamau e like me:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoʻokomo ʻia ka helu helu i mua o ka venenatis.
Kekahi kanaka kaulana i ke Kino hana
No ka lana ʻana i kāu blockquote ma ka ʻākau, hoʻohui class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoʻokomo ʻia ka helu helu i mua o ka venenatis.
Kekahi kanaka kaulana i ke Kino hana
<ul>
<ul class="unstyled">
<ol>
<dl>
E kāʻei i nā ʻāpana code inline me <code>
.
- No ka laʻana , pono e wahī ʻia ka ʻāpana < code> </ code > ma ke ʻano inline .
E hoʻohana <pre>
no nā laina helu he nui. E ʻoluʻolu e hoʻohuli i nā mea mālama i kā lākou mau huaʻōlelo unicode no ka hoʻolilo kūpono.
<p>Laʻana kikokikona ma aneʻi...</p>
- <mua>
- <p>Laʻana kikokikona ma aneʻi...</p>
- </pre>
'Ōlelo Aʻo: E mālama pono i ke code i loko o <pre>
nā hōʻailona ma kahi kokoke i ka hema; e hāʻawi i nā papa āpau.
E lawe i ka mea hoʻokahi <pre>
a hoʻohui i ʻelua papa koho no ka hoʻonui ʻana i ka hana.
- <p> He laʻana kikokikona ma ʻaneʻi... </p>
- <pre class = "paʻi nani
- linenums" >
- <p>Laʻana kikokikona ma aneʻi...</p>
- </pre>
Hoʻoiho iā google-code-prettify a nānā i ka readme no ka hoʻohana ʻana.
Tag | wehewehe |
---|---|
<table> |
ʻEleʻa kāʻei no ka hōʻike ʻana i ka ʻikepili ma ke ʻano papa |
<thead> |
Mea paʻa no nā lālani poʻomanaʻo papaʻaina ( <tr> ) e lepili i nā kolamu papaʻaina |
<tbody> |
Mea paʻa no nā lālani pākaukau ( <tr> ) ma ke kino o ka pākaukau |
<tr> |
ʻElemu paʻa no kahi pūʻulu papaʻaina ( a i <td> ʻole <th> ) e ʻike ʻia ma ka lālani hoʻokahi |
<td> |
Pūlele papa paʻamau |
<th> |
Pono e hoʻohana ʻia nā lepili pākaukau kūikawā no ke kolamu (a i ʻole ka lālani, ma muli o ke ʻano a me ke kau ʻana) . <thead> |
<caption> |
ʻO ka wehewehe ʻana a i ʻole ka hōʻuluʻulu manaʻo o ka mea i paʻa i ka papaʻaina, pono loa no ka poʻe heluhelu pale |
- <papa>
- <poo>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </head>
- <ke kino>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </papa>
inoa | Papa | wehewehe |
---|---|---|
Default | ʻAʻohe | ʻAʻohe ʻano, nā kolamu a me nā lālani wale nō |
Kumu | .table |
Nā laina ʻāpae wale nō ma waena o nā lālani |
palena ʻia | .table-bordered |
Hoʻopili i nā kihi a hoʻohui i ka palena o waho |
ʻōniʻoniʻo Zebra | .table-striped |
Hoʻohui i ka waihoʻoluʻu ʻeleʻele hina hina i nā lālani ʻokoʻa (1, 3, 5, etc.) |
Hoʻopili ʻia | .table-condensed |
ʻOki i ka padding vertical i ka hapalua, mai 8px a 4px, i loko o nā mea āpau td a me th nā mea |
Hoʻopili ʻia nā papa ʻaina me nā palena liʻiliʻi e hōʻoia i ka heluhelu ʻana a mālama i ke ʻano. Me 2.0, .table
pono ka papa.
- <papa papa = "papakaukau" >
- …
- </papa>
# | Inoa mua | Inoa hope | ʻŌlelo |
---|---|---|---|
1 | Maka | Otto | CSS |
2 | ʻO Iakoba | Thornton | Javascript |
3 | ʻO Stu | Dent | HTML |
E ʻoluʻolu iki i kāu mau papa ma ka hoʻohui ʻana i ka zebra-striping—e hoʻohui wale i ka .table-striped
papa.
Nānā: Hoʻohana nā papa sprited i ka :nth-child
mea koho CSS a ʻaʻole i loaʻa ma IE7-IE8.
- <papa papa = "papa papa-papa" >
- …
- </papa>
# | Inoa mua | Inoa hope | ʻŌlelo |
---|---|---|---|
1 | Maka | Otto | CSS |
2 | ʻO Iakoba | Thornton | Javascript |
3 | ʻO Stu | Dent | HTML |
E hoʻohui i nā palena a puni ka papaʻaina holoʻokoʻa a me nā kihi poepoe no ka hana nani.
- <papa papa = "papa papa-palena" >
- …
- </papa>
# | Inoa mua | Inoa hope | ʻŌlelo |
---|---|---|---|
1 | Maka Otto | CSS | |
2 | ʻO Iakoba | Thornton | Javascript |
3 | ʻO Stu | Dent | |
3 | Brosef | Stalin | HTML |
E hoʻonui i kāu mau papa ma ka hoʻohui ʻana i ka .table-condensed
papa e ʻoki i ka paʻi paʻi papa ma ka hapalua (mai 8px a 4px).
- <papa papa = "table table-condensed" >
- …
- </papa>
# | Inoa mua | Inoa hope | ʻŌlelo |
---|---|---|---|
1 | Maka | Otto | CSS |
2 | ʻO Iakoba | Thornton | Javascript |
3 | ʻO Stu | Dent | HTML |
E ʻoluʻolu e hoʻohui i kekahi o nā papa papaʻaina e hoʻokō i nā hiʻohiʻona like ʻole ma ka hoʻohana ʻana i kekahi o nā papa i loaʻa.
- <papa papa = "table table-striped table-bordered table-condensed" >
- ...
- </papa>
# | Inoa mua | Inoa hope | ʻŌlelo |
---|---|---|---|
1 | Maka | Otto | CSS |
2 | ʻO Iakoba | Thornton | Javascript |
3 | ʻO Stu | Dent | HTML |
4 | Brosef | Stalin | HTML |
ʻO ka ʻāpana maikaʻi loa e pili ana i nā palapala i Bootstrap ʻo ia ka maikaʻi o kāu mau hoʻokomo a me nā kaohi i ke ʻano o ke kūkulu ʻana iā lākou i kāu markup. ʻAʻole koi ʻia kahi HTML superfluous, akā hāʻawi mākou i nā kumu no ka poʻe e koi ana.
Hiki mai nā papa hoʻonohonoho paʻakikī me nā papa maʻalahi a hiki ke hoʻopaʻa ʻia no ka hana maʻalahi a me ka hoʻopaʻa ʻana i nā hanana, no laila ua uhi ʻia ʻoe i kēlā me kēia pae.
Hele mai ʻo Bootstrap me ke kākoʻo no ʻehā ʻano hoʻolālā puka:
Pono nā ʻano hoʻolālā like ʻole i kekahi mau hoʻololi ʻana i ka markup, akā mau nā kaohi iā lākou iho a hana like.
Loaʻa nā ʻano o Bootstrap i nā ʻano no nā mana kumu kumu āpau e like me ka hoʻokomo, textarea, a me ke koho āu e manaʻo ai. Akā hele pū mai me kekahi mau mea maʻamau e like me ka hoʻopili ʻia a me nā mea hoʻokomo mua a me ke kākoʻo no nā papa inoa o nā pahu pahu.
Hoʻokomo ʻia nā mokuʻāina e like me ka hewa, ka ʻōlelo aʻo, a me ka kūleʻa no kēlā me kēia ʻano o ka mana palapala. Hoʻokomo pū ʻia nā ʻano no nā mana kīnā.
Hāʻawi ʻo Bootstrap i ka markup maʻalahi a me nā ʻano no nā ʻano ʻehā o nā ʻano pūnaewele maʻamau.
inoa | Papa | wehewehe |
---|---|---|
Kū pololei (paʻamau) | .form-vertical (ʻaʻole koi ʻia) |
Hoʻopaʻa ʻia nā lepili hema ma luna o nā mana |
Inline | .form-inline |
ʻO ka lepili hema a me nā mana paʻa-inline no ke ʻano paʻakikī |
Huli | .form-search |
Hoʻokomo kikokikona ʻokoʻa no ka ʻimi maʻamau |
Kaupae | .form-horizontal |
E lana i nā lepili ma ka ʻaoʻao hema ma ka laina like me nā mana |
Me ka v2.0, loaʻa iā mākou nā paʻamau māmā a akamai no nā ʻano ʻano. ʻAʻohe hōʻailona ʻokoʻa, hoʻokumu wale i nā mana.
E noʻonoʻo ana i nā ʻano WebKit paʻamau, e hoʻohui wale .form-search
no nā kahua hulina ʻokoʻa.
He pae poloka nā mea hoʻokomo e hoʻomaka ai. No ka .form-inline
a .form-horizontal
, hoʻohana mākou i ka inline-block.
Hōʻike ʻia ma ka ʻaoʻao hema nā mana paʻamau āpau a mākou e kākoʻo ai. Eia ka papa inoa i hoʻopaʻa ʻia:
A hiki i ka v1.4, ua hoʻohana nā ʻano ʻano paʻamau o Bootstrap i ka hoʻolālā pae. Me Bootstrap 2, ua wehe mākou i kēlā kaohi e loaʻa i nā mea paʻamau maʻalahi a ʻoi aku ka maʻalahi no kēlā me kēia ʻano.
Hōʻike ʻo Bootstrap i nā ʻano no ka nānā ʻana i kākoʻo ʻia e ka polokalamu kele pūnaewele a me disabled
nā mokuʻāina. Wehe mākou i ka Webkit paʻamau outline
a kau i kahi box-shadow
ma ia wahi no :focus
.
Loaʻa pū kekahi i nā ʻano hōʻoia no nā hewa, nā ʻōlelo aʻo, a me ka kūleʻa. No ka hoʻohana ʻana, hoʻohui i ka papa hewa i ka puni .control-group
.
- <fieldset
- papa = "hewa pūʻulu mana" >
- …
- </fieldset>
Nā pūʻulu hoʻokomo—me nā kikokikona i hoʻopili ʻia a i hoʻomaka mua ʻia—e hāʻawi i kahi ala maʻalahi e hāʻawi i ka pōʻaiapili hou aku no kāu mau mea hoʻokomo. ʻO nā hiʻohiʻona maikaʻi loa ka hōʻailona @ no nā inoa inoa Twitter a i ʻole $ no ke kālā.
A hiki i ka v1.4, ua koi ʻo Bootstrap i kahi hōʻailona hou a puni nā pahu pahu a me nā lekiō e hoʻopaʻa iā lākou. I kēia manawa, he mea maʻalahi ka hana hou ʻana i ka <label class="checkbox">
mea e hoʻopili ai i ka <input type="checkbox">
.
Kākoʻo pū ʻia nā pahu pahu a me nā lekiō. Hoʻohui wale .inline
i kekahi .checkbox
a .radio
ua pau ʻoe.
No ka hoʻohana ʻana i ka prepend a i ʻole ka hoʻopili ʻana i nā mea hoʻokomo ma kahi ʻano inline, e hoʻopaʻa pono i ka .add-on
a input
ma ka laina like, me ka ʻole o nā hakahaka.
No ka hoʻohui ʻana i nā kikokikona kōkua no kāu mau hoʻokomo ʻana, e hoʻokomo i nā kikokikona kōkua inline me <span class="help-inline">
a i ʻole kahi poloka kikokikona kōkua <p class="help-block">
ma hope o ka mea hoʻokomo.
:after
. Ma nā docs, hōʻike mākou i kahi waihoʻoluʻu ʻulaʻula māmā ma luna o ka hover e hoʻomālamalama i ka nui o ka ikona.
Ma kahi o ka hana ʻana i kēlā me kēia kiʻi i noi hou, ua hōʻuluʻulu mākou iā lākou i loko o kahi sprite—he pūʻulu kiʻi i hoʻokahi faila e hoʻohana ana i ka CSS e hoʻonohonoho i nā kiʻi me background-position
. ʻO kēia ke ala like a mākou e hoʻohana ai ma Twitter.com a ua hana maikaʻi ia no mākou.
Hoʻopili ʻia nā papa kiʻi āpau me .icon-
ka hoʻopaʻa inoa kūpono a me ka scoping, e like me kā mākou ʻāpana ʻē aʻe. E kōkua kēia i ka pale ʻana i nā paio me nā mea hana ʻē aʻe.
Ua hāʻawi mai ʻo Glyphicons iā mākou i ka hoʻohana ʻana i nā Halflings i hoʻonohonoho ʻia i loko o kā mākou hāmeʻa open-source i ka wā a mākou e hāʻawi ai i kahi loulou a me ka hōʻaiʻē ma ʻaneʻi ma nā palapala. E noʻonoʻo e hana like i kāu mau papahana.
Me v2.0.0, ua koho mākou e hoʻohana i kahi <i>
hōʻailona no kā mākou mau kiʻi ʻoniʻoni, akā ʻaʻohe o lākou papa hihia—he prefix kaʻana like wale nō. No ka hoʻohana ʻana, e kau i kēia code ma nā wahi āpau:
- <i papa = "icon-search" ></i>
Aia kekahi mau ʻano i loaʻa no nā kiʻi hoʻohuli (keʻokeʻo) i hoʻomākaukau ʻia me hoʻokahi papa ʻokoʻa:
- <i class = "icon-search icon-white" ></i>
Aia he 120 papa e koho ai no kāu mau kiʻi. E hoʻohui wale i kahi <i>
hōʻailona me nā papa kūpono a ua hoʻonohonoho ʻoe. Hiki iā ʻoe ke loaʻa ka papa inoa piha ma sprites.less a i ʻole ma ʻaneʻi ma kēia palapala.
Nui nā kiʻi, akā ma hea kahi e hoʻohana ai iā lākou? Eia kekahi mau manaʻo:
ʻO ka mea nui, hiki iā ʻoe ke kau i kahi <i>
hōʻailona, hiki iā ʻoe ke kau i kahi ikona.
E hoʻohana iā lākou i nā pihi, nā pūʻulu pihi no kahi mea hana, hoʻokele, a i ʻole nā mea hoʻokomo puka i hoʻomaka mua ʻia.