I runga ake i te scaffolding, ka whakaingoatia nga huānga HTML taketake me te whakanikoniko ki nga karaehe whakawhanui hei whakarato i te ahua hou, riterite hoki.
Ko te katoa o te matiti patopato e ahu mai ana i runga i nga taurangi iti e rua i roto i a maatau konae variables.less: @baseFontSize
me @baseLineHeight
. Ko te tuatahi ko te rahi o te momotuhi i whakamahia puta noa, ko te tuarua ko te teitei o te raina turanga.
Ka whakamahia e matou aua taurangi, me etahi o te pangarau, ki te hanga i nga tawhē, nga papa, me nga teitei raina o o maatau momo katoa me etahi atu.
Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ko te ingoa o nga mea katoa ka taea e koe.
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.
Huānga | Whakamahinga | Kōwhiringa |
---|---|---|
<strong> |
Mo te whakakoi i tetahi waahanga kuputuhi me te mea nui | Karekau |
<em> |
Mo te whakanui i tetahi waahanga tuhinga me te ahotea | Karekau |
<abbr> |
Ka takai i nga whakapoto me nga kupu whakapoto hei whakaatu i te putanga whakaroa ki te whakaparo | Whakauruhia te .initialism te karaehe mo nga whakapotonga pumatua. |
<address> |
Mo nga korero whakapā mo tona tupuna tata, mo te katoa o te mahi | Tiakina te whakahōputu mā te whakamutu i ngā rārangi katoa<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.
Tuhipoka: Kaua e pai ki te whakamahi <b>
me <i>
te HTML5, engari he paku rereke te whakamahinga. <b>
Ko te tikanga ki te whakanui i nga kupu, kinga kianga ranei me te kore e kawe i te hiranga atu i <i>
te nuinga o te waa mo te reo, kupu hangarau, aha atu.
Anei nga tauira e rua mo te whakamahi i te <address>
tohu:
Ko nga whakapototanga whai title
huanga he taitapa iraiti marama o raro me te pehu awhina kei te whakaparo. Ma tenei ka hoatu he tohu ki nga kaiwhakamahi ka whakaatuhia he mea i runga i te whakaparo.
Tāpirihia te initialism
karaehe ki tētahi whakarāpopototanga hei whakanui ake i te tauritenga patopato mā te hoatu he iti ake te rahi o te kuputuhi.
Ko te HTML te mea pai mai i te taro tapatapahi.
He whakapototanga o te kupu huanga ko attr .
Huānga | Whakamahinga | Kōwhiringa |
---|---|---|
<blockquote> |
Huānga taumata paraka mo te whakahua i nga ihirangi mai i tetahi atu puna | Tāpiri .pull-left me .pull-right nga karaehe mo nga whiringa maanu |
<small> |
Huānga kōwhiringa mō te tāpiri i te torokī e anga ana ki te kaiwhakamahi, te tikanga he kaituhi whai taitara mahi | Whakanohoia te <cite> taitara me te ingoa o te puna |
Hei whakauru i tetahi poraka, takai <blockquote>
tetahi HTML hei korero. Mo nga korero tika ka tūtohu matou he <p>
.
Whakauruhia he <small>
huānga hei whakahua i to punanga ka whiwhi koe i te tohu em —
i mua i a koe mo nga kaupapa whakaahua.
- <blockquote>
- <p> Ko te tikanga o te noho tahi, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
- <small> He tangata rongonui </small>
- </blockquote>
Ko nga korukī poraka taunoa kua whakaingoatia penei:
Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante venenatis.
He tangata rongonui i roto i te tinana mahi
Hei rewa i to korero poraka ki te taha matau, taapirihia class="pull-right"
:
Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante venenatis.
He tangata rongonui i roto i te tinana mahi
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Mahunga ake! Ka tapahia e nga rarangi whakaahuatanga whakapae nga kupu he roa rawa kia uru ki te whakatikanga pou maui text-overflow
. I roto i nga tauranga whaiti, ka huri ki te tahora tapae taunoa.
Takaia nga mahanga rarangi-roto o te waehere ki te <code>
.
- Hei tauira , <code> wāhanga </ code > me takai hei rōraina .
Whakamahia <pre>
mo nga rarangi maha o te waehere. Me mawhiti i nga koki taiapa i roto i te waehere mo te whakaputa tika.
<p>Tauira kupu ki konei...</p>
- <mua>
- <p>Tauira kupu ki konei...</p>
- </pre>
Tuhipoka: Kia mau tonu te waehere i roto i <pre>
nga tūtohu kia tata ki te taha maui ka taea; ka tukuna e ia nga ripa katoa.
Ka taea e koe te taapiri i te .pre-scrollable
karaehe ka whakatau i te teitei teitei o te 350px me te whakarato i te pae panuku tuaka-y.
Tangohia te <pre>
huānga kotahi ka taapirihia kia rua nga karaehe hei taapiri ake.
- <p> Tauira kupu ki konei... </p>
- <pre class = "prettyprint
- rarangi ingoa" >
- <p>Tauira kupu ki konei...</p>
- </pre>
Tangohia a google-code-prettify ka tirohia te panui mo te whakamahi.
Tūtohu | Whakaahuatanga |
---|---|
<table> |
Huānga takai hei whakaatu raraunga ki te whakatakotoranga ripanga |
<thead> |
Huānga ipu mō ngā haupae pane ripanga ( <tr> ) hei tapanga i ngā tīwae ripanga |
<tbody> |
Huānga ipu mo nga rarangi ripanga ( <tr> ) i te tinana o te ripanga |
<tr> |
Huānga ipu mo te huinga pūtau ripanga ( <td> ranei <th> ) ka puta ki te rarangi kotahi |
<td> |
Pūtau ripanga taunoa |
<th> |
Pūtau ripanga motuhake mō te tīwae (haupae rānei, i runga i te whānuitanga me te whakatakotoranga) tapanga Me whakamahi i roto i te a <thead> |
<caption> |
Whakaahuatanga, whakarāpopototanga rānei o ngā mea kei roto i te ripanga, he tino whai hua mo te hunga panui mata |
- <tepu>
- <mahunga>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </head>
- <te tinana>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
Ingoa | Karaehe | Whakaahuatanga |
---|---|---|
Taunoa | Karekau | Karekau he momo, ko nga pou me nga rarangi anake |
Taketake | .table |
Ko nga raina whakapae anake i waenga i nga rarangi |
Taitapa | .table-bordered |
Ka porotaka nga kokonga ka taapiri i te taitapa o waho |
Hepa-tere | .table-striped |
Ka taapirihia te tae papamuri hina hina ki nga rarangi rereke (1, 3, 5, me etahi atu) |
Whakatata | .table-condensed |
Ka tapahia te papa poutū kia haurua, mai i te 8px ki te 4px, i roto katoa td me th nga huānga |
Ka whakaingoatia nga ripanga me etahi taitapa hei whakarite i te panui me te pupuri i te hanganga. Ki te 2.0, .table
ka hiahiatia te akomanga.
- <table class = "tepu" >
- …
- </table>
# | Ingoa Tuatahi | Ingoa Whakamutunga | Ingoa Kaiwhakamahi |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | ko Hakopa | Toronton | @ngako |
3 | Larry | te Manu |
Kia pai ki o ripanga ma te taapiri i te zebra-striping—tapiri noa te .table-striped
karaehe.
Tuhipoka: Ka whakamahi nga ripanga purepure i te :nth-child
kaikowhiri CSS, kaore i te waatea i IE7-IE8.
- <table class = "tepu ripanga-waapahia" >
- …
- </table>
# | Ingoa Tuatahi | Ingoa Whakamutunga | Ingoa Kaiwhakamahi |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | ko Hakopa | Toronton | @ngako |
3 | Larry | te Manu |
Tāpirihia nga taitapa huri noa i te teepu katoa me nga kokonga porotaka mo nga kaupapa rerehua.
- <table class = "taitapa ripanga" >
- …
- </table>
# | Ingoa Tuatahi | Ingoa Whakamutunga | Ingoa Kaiwhakamahi |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @getbootstrap | |
2 | ko Hakopa | Toronton | @ngako |
3 | Larry te Manu |
Whakapaipai ake o papapu ma te taapiri i te .table-condensed
karaehe ki te tapahi i nga papaa putau tepu kia haurua (mai i te 8px ki te 4px).
- <table class = "table table-condensed" >
- …
- </table>
# | Ingoa Tuatahi | Ingoa Whakamutunga | Ingoa Kaiwhakamahi |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | ko Hakopa | Toronton | @ngako |
3 | Larry te Manu |
Kaua e pai ki te whakakotahi i tetahi o nga karaehe tepu ki te whakatutuki i nga ahua rereke ma te whakamahi i tetahi o nga karaehe e waatea ana.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
Ingoa katoa | |||
---|---|---|---|
# | Ingoa Tuatahi | Ingoa Whakamutunga | Ingoa Kaiwhakamahi |
1 | Mark | Otto | @mdo |
2 | ko Hakopa | Toronton | @ngako |
3 | Larry te Manu |
Ko te mea pai mo nga puka kei Bootstrap ko te ahua pai o o whakaurunga me o mana whakahaere ahakoa pehea te hanga i a koe ki to tohu. Kaore he HTML nui e hiahiatia, engari ka whakaratohia e matou nga tauira mo te hunga e hiahia ana.
Ko nga whakatakotoranga uaua ake ka tae mai me nga karaehe poto me te tauineine mo te hanga ngawari me te here takahanga, no reira ka kapi koe i ia hikoinga.
Ka tae mai a Bootstrap me te tautoko mo nga momo whakatakotoranga ahua e wha:
Ko nga momo tahora puka rereke me whakarereke ki te tohu tohu, engari ka noho tonu nga mana whakahaere me te rite tonu te mahi.
Kei roto i nga puka a Bootstrap nga ahua mo nga mana puka turanga katoa penei i te whakaurunga, te waahanga kuputuhi, me te kowhiri e hiahia ana koe. Engari ka tae mai me te maha o nga waahanga ritenga penei i te taapiri me te whakauru whakauru me te tautoko mo nga rarangi pouakataki.
Ko nga whenua penei i te he, te whakatupato, me te angitu kua whakauruhia mo ia momo mana puka. Kei roto ano ko nga momo mo nga mana haua.
Ka whakaratohia e Bootstrap nga tohu me nga momo ngawari mo nga momo ahua e wha o nga puka tukutuku noa.
Ingoa | Karaehe | Whakaahuatanga |
---|---|---|
Poutū (taunoa) | .form-vertical (kaore e hiahiatia) |
Tapanga, tapanga tiaro-maui ki runga i nga mana |
Raina | .form-inline |
Tapanga tapanga-maui me nga mana paraka-roto mo te ahua kiato |
Rapu | .form-search |
Ko te whakaurunga kupu porotaka taapiri mo te rapunga ahua rerehua |
Whakapae | .form-horizontal |
Manu maui, tapanga tiaro-matau i runga i te raina rite ki nga mana |
Nga taunoa maamaa me te maamaa kaore he tohu taapiri.
- <form class = "pai" >
- <label> Ingoa tapanga </label>
- < type input = "kuputuhi" class = "span3" placeholder = " Patohia tetahi mea..." >
- <span class = "āwhina-paraka" > He tauira kuputuhi awhina taumata paraka i konei. </span>
- <label class = "pouakataki" >
- < type input = "pouakataki" > Tirohia ahau
- </label>
- <button type = "tuku" class = "btn" > Tuku </button>
- </form>
Tāpirihia .form-search
ki te puka me .search-query
te input
.
- <form class = "well form-search" >
- <input type = "kuputuhi" class = "whakauru-waenga rapu-uiui" >
- <button type = "tuku" class = "btn" > Rapu </button>
- </form>
Tāpirihia .form-inline
kia pai te tirohanga poutū me te mokowā o ngā mana puka.
- <form class = "well form-inline" >
- < momo whakauru = "kuputuhi" class = "whakauru-iti" placeholder = "Imeera" >
- < momo whakauru = "kupuhipa" class = "whakauru-iti" placeholder = "Kupuhipa" >
- <label class = "pouakataki" >
- < type input = "pouakataki" > Kia mahara ki ahau
- </label>
- <button type = "tuku" class = "btn" > Waitohu </button>
- </form>
Kei te taha matau ko nga mana puka taunoa katoa e tautokohia ana e matou. Anei te rarangi matā:
I runga i te tauira whakatakotoranga o runga ake nei, koinei te tohu e hono ana ki te whakauru tuatahi me te roopu whakahaere. Ko te .control-group
, .control-label
, me .controls
nga karaehe e hiahiatia ana mo te whakaahua.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> Kuputuhi Poutohu </legend>
- <div class = "roopu-mana" >
- <label class = "control-label" for = "input01" > Kuputuhi tāuru </label>
- <div class = "mana" >
- < momo whakauru = "kuputuhi" class = "whakauru-xlarge" id = "input01" >
- <p class = "help-block" > Tautoko kupu awhina </p>
- </div>
- </div>
- </fieldset>
- </form>
E whakaatu ana a Bootstrap i nga momo ahua mo te arotahi me disabled
nga kawanatanga e tautokohia ana e te tirotiro. Ka tangohia e matou te kete Tukutuku taunoa outline
ka hoatu he tohu box-shadow
hei whakakapi mo :focus
.
Kei roto hoki nga momo whakamana mo nga hapa, nga whakatupato, me te angitu. Hei whakamahi, taapirihia te karaehe hapa ki te a tawhio noa .control-group
.
- <te huinga mara
- class = "hape whakahaere-rōpū" >
- …
- </fieldset>
Ko nga roopu whakauru—me nga tuhinga taapiri, kua taapirihia ranei—he huarahi ngawari ki te hoatu horopaki ake mo o whakaurunga. Ko nga tauira pai ko te tohu @ mo nga ingoa kaiwhakamahi Twitter, $ ranei mo nga putea.
Tae atu ki te v1.4, ka hiahiatia e Bootstrap he tohu taapiri huri noa i nga pouakataki me nga reo irirangi hei tapae. Inaianei, he mea ngawari ki te whakahoki ano i te <label class="checkbox">
e takai ana i te <input type="checkbox">
.
Ka tautokohia nga pouakataki me nga reo irirangi. Me tapiri noa .inline
ki tetahi .checkbox
, .radio
ka oti ranei koe.
Ki te whakamahi i te prepend, te taapiri ranei i nga whakaurunga i roto i te puka raina, me tuu te .add-on
me input
ki te raina kotahi, kaua he mokowhiti.
Hei taapiri i nga kupu awhina mo o whakaurunga puka, whakauruhia he kuputuhi awhina raina me <span class="help-inline">
tetahi paraka kupu awhina ranei kei <p class="help-block">
muri i te huānga whakauru.
Engari ki te hanga i nga tohu katoa hei tono taapiri, kua whakahiatohia e matou ki roto i te sprite—he paihere o nga whakaahua kei roto i te konae kotahi e whakamahi ana i te CSS ki te tuu i nga whakaahua ki te background-position
. Ko te tikanga ano tenei e whakamahia ana e matou i runga i Twitter.com a kua pai te mahi mo matou.
Ko nga karaehe tohu katoa kua tohua .icon-
mo te mokowāingoa tika me te scoping, he rite ki o maatau waahanga. Ka awhina tenei ki te karo i nga tautohetohe me etahi atu taputapu.
Kua tukuna mai e Glyphicons ki a maatau te whakamahi i nga huinga Halflings i roto i ta maatau kete taputapu puna tuwhera mena ka tukuna he hononga me te nama ki konei i roto i nga tuhinga. Tena koa whakaaro kia pera ano i o kaupapa.
Ka whakamahi a Bootstrap i tetahi <i>
tohu mo nga ata katoa, engari karekau he karaehe keehi—he tohu tuatahi noa. Hei whakamahi, tuhia te waehere e whai ake nei mo nga waahi katoa:
- <i class = "icon-search" ></i>
He ahua ano kei te waatea mo nga tohu hurihuri (ma), kua rite me tetahi atu karaehe:
- <i class = "icon-search icon-white" ></i>
He 120 nga karaehe hei whiriwhiri mo o tohu. Taapiri noa he <i>
tohu me nga karaehe tika ka oti koe. Ka kitea e koe te rarangi katoa i roto i te sprites.less , kei konei ranei i tenei tuhinga.
Mahunga ake! Ina whakamahi i te taha o nga aho o te kuputuhi, penei i nga paatene, i nga hononga nav, me waiho he mokowhiti i muri i te <i>
tohu mo te mokowhiti tika.
He rawe nga tohu, engari kei hea te whakamahi? Anei etahi whakaaro:
Ko te tikanga, ki nga waahi katoa ka taea e koe te whakatakoto <i>
tohu, ka taea e koe te whakatakoto tohu.
Whakamahia i roto i nga patene, i nga roopu patene mo te paeutauta, te whakaterenga, te whakaurunga puka kua tohua.