Ma luna o ka scaffolding, ua kāhiko ʻ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 hoʻololi 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 ʻoi 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.
E hoʻokaʻawale i kahi paukū ma ka hoʻohui ʻana i .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
ʻ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 i hoʻonui ʻia ma ka hover | E hoʻokomo i ke ʻano koho .initialism i ka papa no nā pōkole nui. |
<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:
ʻO nā pōkole me kahi title
hiʻohiʻona he palena lalo māmā a me kahi kuhikuhi kōkua ma ka hover. Hāʻawi kēia i nā mea hoʻohana i kahi hōʻike hou e hōʻike ʻia ma ka hover.
E hoʻohui i ka initialism
papa i kahi pōkole e hoʻonui i ka lokahi typographic ma o ka hāʻawi ʻana i ka nui kikokikona liʻiliʻi.
ʻ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 ʻai i mua o ka venenatis.
Kekahi mea 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 ʻai i mua o ka venenatis.
Kekahi mea kaulana i ke Kino hana
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Nā poʻo i luna! E ʻoki ʻia nā ʻōlelo wehewehe ʻāpae i nā huaʻōlelo lōʻihi loa a hiki ke kūpono i ka hoʻoponopono kolamu hema text-overflow
. Ma nā wahi ʻike haiki, e hoʻololi lākou i ka hoʻonohonoho hoʻonohonoho paʻamau.
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 .
Hoʻohana <pre>
no nā laina helu he nui. E hōʻoia e pakele i nā bracket angle i loko o ke code no ka hoʻolilo kūpono.
<p>He 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.
Hiki iā ʻoe ke hoʻohui i ka .pre-scrollable
papa e hoʻonoho i kahi kiʻekiʻe kiʻekiʻe o 350px a hāʻawi i kahi scrollbar y-axis.
E lawe i ka mea like <pre>
a hoʻohui i ʻelua papa koho no ka hoʻonui ʻana.
- <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 | inoa hoʻohana |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | ʻO Iakoba | Thornton | @momona |
3 | Larry | ka Manu |
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.
'Ōlelo Aʻo: Hoʻohana nā papa ʻoniʻoni 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 | inoa hoʻohana |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | ʻO Iakoba | Thornton | @momona |
3 | Larry | ka Manu |
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 | inoa hoʻohana |
---|---|---|---|
1 | Maka | Otto | @mdo |
Maka | Otto | @getbootstrap | |
2 | ʻO Iakoba | Thornton | @momona |
3 | Larry ka Manu |
E hoʻonui i kāu mau pākaukau ma ka hoʻohui ʻana i ka .table-condensed
papa e ʻoki i ka padding cell table ma ka hapalua (mai 8px a 4px).
- <papa papa = "table table-condensed" >
- …
- </papa>
# | Inoa mua | Inoa hope | inoa hoʻohana |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | ʻO Iakoba | Thornton | @momona |
3 | Larry ka Manu |
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 piha | |||
---|---|---|---|
# | Inoa mua | Inoa hope | inoa hoʻohana |
1 | Maka | Otto | @mdo |
2 | ʻO Iakoba | Thornton | @momona |
3 | Larry ka Manu |
ʻ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 |
ʻO nā paʻamau akamai a māmā me ka ʻole o ka hōʻailona ʻē aʻe.
- <form class = "well" >
- <label> inoa lepili </label>
- <input type = "text" class = "span3" placeholder = "Type something..." >
- <span class = "help-block" > He laʻana kikokikona kōkua pae-poka ma ʻaneʻi. </span>
- <label class = "pahu helu" >
- <input type = "checkbox" > E nānā mai iaʻu
- </label>
- <button type = "submit" class = "btn" > Hoʻouna </button>
- </form>
Hoʻohui .form-search
i ke ʻano a .search-query
me ka input
.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Huli </ pihi>
- </form>
E hoʻohui .form-inline
i ka hoʻopololei kū pololei a me ka hoʻokaʻawale ʻana o nā mana puka.
- <form class = "well form-inline" >
- <input type = "text" class = "input-small" placeholder = "Email" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "pahu helu" >
- <input type = "checkbox" > E hoʻomanaʻo mai iaʻu
- </label>
- <button type = "submit" class = "btn" > Sign in </button>
- </form>
Hōʻike ʻia ma ka ʻākau nā mana palapala paʻamau a mākou e kākoʻo nei. Eia ka papa inoa i hoʻopaʻa ʻia:
Hāʻawi ʻia i ka laʻana o ka laʻana i luna, eia ka markup e pili ana me ka hui hoʻokomo a me ka pūʻulu mana. Pono nā .control-group
, .control-label
, a me .controls
nā papa no ke kālai ʻana.
- <form class = "form-horizontal" >
- <fieldset>
- <kaʻao> kikokikona moʻolelo </kaʻao>
- <div class = "hui mana" >
- <label class = "control-label" for = "input01" > Komo kikokikona </label>
- <div class = "nā mana" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Kākoʻo 'ōlelo kōkua </p>
- </div>
- </div>
- </fieldset>
- </form>
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 kona 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.
Ma kahi o ka hana ʻana i kēlā me kēia kiʻiʻoniʻoni i noi hou, ua hōʻuluʻulu mākou iā lākou i loko o kahi sprite-he pūʻulu o nā 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 .icon-
no 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.
Hoʻohana ʻo Bootstrap i kahi <i>
hōʻailona no nā kiʻiʻoniʻoni a pau, akā ʻaʻohe o lākou papa hihia-he prefix kaʻana 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 140 mau 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.
Nā poʻo i luna! I ka hoʻohana ʻana ma ka ʻaoʻao o nā kaula kikokikona, e like me nā pihi a i ʻole nā loulou nav, e waiho i kahi hakahaka ma hope o ka <i>
hōʻailona no ka hoʻokaʻawale kūpono.
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.