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. Nullam id dolor id nibh ultricies vehicula.
Whakanuia tetahi kowae ma te taapiri .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, he kore noa.
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 kupu whakapoto-matua. |
<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 rewa |
<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 te kupu poraka, takai <blockquote>
ki 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, taapiri 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 teepu ma te taapiri i te zebra-striping—taapiri 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-poraka" > 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 huri noa .control-group
.
- <te huinga mara
- class = "hape whakahaere-rōpū" >
- …
- </fieldset>
Ko nga roopu whakauru—me nga kupu 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 etahi 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 runga i te raina kotahi, kaua he mokowhiti.
Hei taapiri i nga kupu awhina mo o whakaurunga puka, whakauruhia he kupu 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 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 he tohu .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 matou te whakamahi i nga huinga Halflings i roto i ta maatau kete taputapu puna tuwhera i te mea ka tukuna he hononga me te nama ki konei i roto i nga tuhinga. Whakaarohia te mahi pera ano i roto 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 140 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 pai 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.