CSS turanga

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.

Nga upoko me te kape tinana

Tauine patopato

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: @baseFontSizeme @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.

He tauira tinana

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.

Te kape tinana arahi

Whakanuia tetahi kowae ma te taapiri .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, he kore noa.

h1. Pane 1

h2. Pane 2

h3. Pane 3

h4. Pane 4

h5. Pane 5
h6. Pane 6

Te whakanui, te wahi noho, me te whakapoto

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 titlehuanga kowhiringa mo te kuputuhi whakaroa

Whakamahia .initialismte 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>

Te whakamahi i te whakanui

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.

Tauira wāhitau

Anei nga tauira e rua mo te whakamahi i te <address>tohu:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ingoa katoa
[email protected]

He tauira whakapoto

Ko nga whakapototanga whai titlehuanga 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 initialismkaraehe 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 .

Poraka korero

Huānga Whakamahinga Kōwhiringa
<blockquote> Huānga taumata paraka mo te whakahua i nga ihirangi mai i tetahi atu puna

Tāpiri citehuanga mō te pūtake URL

Whakamahia .pull-leftme .pull-rightnga 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 &mdash;i mua i a koe mo nga kaupapa whakaahua.

  1. <blockquote>
  2. <p> Ko te tikanga o te noho tahi, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> He tangata rongonui </small>
  4. </blockquote>

Tauira kupu poraka

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

Nga rarangi

Kore ota

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Tauoti molestie lorem me massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean noho amet erat nunc
  • Eget porttitor lorem

Kore-ahua

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Tauoti molestie lorem me massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean noho amet erat nunc
  • Eget porttitor lorem

Kua whakahaua

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Tauoti molestie lorem me massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean noho amet erat nunc
  8. Eget porttitor lorem

Whakaahuatanga

<dl>

Nga rarangi whakaahuatanga
He tino pai te rarangi whakaahuatanga mo te tautuhi kupu.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Whakaahuatanga whakapae

<dl class="dl-horizontal">

Nga rarangi whakaahuatanga
He tino pai te rarangi whakaahuatanga mo te tautuhi kupu.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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.

Raina

Takaia nga mahanga rarangi-roto o te waehere ki te <code>.

  1. Hei tauira , <code> wāhanga </ code > me takai hei rōraina .

Poraka taketake

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>
  1. <mua>
  2. <p>Tauira kupu ki konei...</p>
  3. </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-scrollablekaraehe ka whakatau i te teitei teitei o te 350px me te whakarato i te pae panuku tuaka-y.

Google Whakaahua

Tangohia te <pre>huānga kotahi ka taapirihia kia rua nga karaehe hei taapiri ake.

  1. <p> Tauira kupu ki konei... </p>
  1. <pre class = "prettyprint
  2. rarangi ingoa" >
  3. <p>Tauira kupu ki konei...</p>
  4. </pre>

Tangohia a google-code-prettify ka tirohia te panui mo te whakamahi.

Tohu ripanga

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
  1. <tepu>
  2. <mahunga>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </head>
  8. <te tinana>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Kōwhiringa ripanga

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 tdme thnga huānga

Tauira ripanga

1. Ngā kāhua ripanga taunoa

Ka whakaingoatia nga ripanga me etahi taitapa hei whakarite i te panui me te pupuri i te hanganga. Ki te 2.0, .tableka hiahiatia te akomanga.

  1. <table class = "tepu" >
  2. </table>
# Ingoa Tuatahi Ingoa Whakamutunga Ingoa Kaiwhakamahi
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @twitter

2. Tepu purepure

Kia pai ki o teepu ma te taapiri i te zebra-striping—taapiri noa te .table-stripedkaraehe.

Tuhipoka: Ka whakamahi nga ripanga purepure i te :nth-childkaikowhiri CSS, kaore i te waatea i IE7-IE8.

  1. <table class = "tepu ripanga-waapahia" >
  2. </table>
# Ingoa Tuatahi Ingoa Whakamutunga Ingoa Kaiwhakamahi
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @twitter

3. Tepu taitapa

Tāpirihia nga taitapa huri noa i te teepu katoa me nga kokonga porotaka mo nga kaupapa rerehua.

  1. <table class = "taitapa ripanga" >
  2. </table>
# Ingoa Tuatahi Ingoa Whakamutunga Ingoa Kaiwhakamahi
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 ko Hakopa Toronton @ngako
3 Larry te Manu @twitter

4. Tepu tootoo

Whakapaipai ake o papapu ma te taapiri i te .table-condensedkaraehe ki te tapahi i nga papaa putau tepu kia haurua (mai i te 8px ki te 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Ingoa Tuatahi Ingoa Whakamutunga Ingoa Kaiwhakamahi
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @twitter

5. Whakakotahitia ratou katoa!

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.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Ingoa katoa
# Ingoa Tuatahi Ingoa Whakamutunga Ingoa Kaiwhakamahi
1 Mark Otto @mdo
2 ko Hakopa Toronton @ngako
3 Larry te Manu @twitter

HTML me CSS ngawari

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.

E wha nga whakatakotoranga kei roto

Ka tae mai a Bootstrap me te tautoko mo nga momo whakatakotoranga ahua e wha:

  • Poutū (taunoa)
  • Rapu
  • Raina
  • Whakapae

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.

Nga mana whakahaere me etahi atu

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.

E wha nga momo ahua

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

Tauira puka ma te whakamahi i nga mana puka noa, kaore he tohu taapiri

Puka taketake

Nga taunoa maamaa me te maamaa kaore he tohu taapiri.

He tauira kupu awhina taumata paraka i konei.

  1. <form class = "pai" >
  2. <label> Ingoa tapanga </label>
  3. < type input = "kuputuhi" class = "span3" placeholder = " Patohia tetahi mea..." >
  4. <span class = "āwhina-poraka" > He tauira kuputuhi awhina taumata paraka i konei. </span>
  5. <label class = "pouakataki" >
  6. < type input = "pouakataki" > Tirohia ahau
  7. </label>
  8. <button type = "tuku" class = "btn" > Tuku </button>
  9. </form>

Puka rapu

Tāpirihia .form-searchki te puka me .search-queryte input.

  1. <form class = "well form-search" >
  2. <input type = "kuputuhi" class = "whakauru-waenga rapu-uiui" >
  3. <button type = "tuku" class = "btn" > Rapu </button>
  4. </form>

Puka Raina

Tāpirihia .form-inlinekia pai te tirohanga poutū me te mokowā o ngā mana puka.

  1. <form class = "well form-inline" >
  2. < momo whakauru = "kuputuhi" class = "whakauru-iti" placeholder = "Imeera" >
  3. < momo whakauru = "kupuhipa" class = "whakauru-iti" placeholder = "Kupuhipa" >
  4. <label class = "pouakataki" >
  5. < type input = "pouakataki" > Kia mahara ki ahau
  6. </label>
  7. <button type = "tuku" class = "btn" > Waitohu </button>
  8. </form>

Nga ahua whakapae

Kei te taha matau ko nga mana puka taunoa katoa e tautokohia ana e matou. Anei te rarangi matā:

  • whakauru kupu (kuputuhi, kupuhipa, imeera, aha atu)
  • pouakataki
  • reo irirangi
  • whiriwhiri
  • whiriwhiri maha
  • urunga kōnae
  • textarea

I tua atu i nga tuhinga tuhi noa, ka puta mai he whakaurunga-tuhituhi HTML5.

Tauira tohu

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 .controlsnga karaehe e hiahiatia ana mo te whakaahua.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Kuputuhi Poutohu </legend>
  4. <div class = "roopu-mana" >
  5. <label class = "control-label" for = "input01" > Kuputuhi tāuru </label>
  6. <div class = "mana" >
  7. < momo whakauru = "kuputuhi" class = "whakauru-xlarge" id = "input01" >
  8. <p class = "help-block" > Tautoko kupu awhina </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Puka mana whakahaere

E whakaatu ana a Bootstrap i nga momo ahua mo te arotahi me disablednga kawanatanga e tautokohia ana e te tirotiro. Ka tangohia e matou te kete Tukutuku taunoa outlineka hoatu he tohu box-shadowhei whakakapi mo :focus.


Whakamana puka

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.

  1. <te huinga mara
  2. class = "hape whakahaere-rōpū" >
  3. </fieldset>
Ko etahi uara i konei
Kua raru pea tetahi mea
Tena whakatikahia te hapa
Whoohoo!
Whoohoo!

Te whakawhānui i nga mana puka

Taapiri me te taapiri i nga whakaurunga

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.


Pouakataki me nga reo irirangi

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 .inlineki tetahi .checkbox, .radioka oti ranei koe.


Puka Raina ka apiti/whakamua

Ki te whakamahi i te prepend, te taapiri ranei i nga whakaurunga i roto i te puka raina, me tuu te .add-onme inputki runga i te raina kotahi, kaua he mokowhiti.


Puka kupu awhina

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.

Whakamahia nga .span*karaehe mai i te punaha matiti mo nga rahi whakauru.

Ka taea hoki e koe te whakamahi i nga karaehe pateko kaore i te mapi ki te matiti, ka urutau ki nga momo CSS aro, ka whakaaro ranei mo nga momo mana rereke (hei tauira, inputvs. select).

@

Anei etahi kupu awhina

.00
Anei etahi atu tuhinga awhina
$ .00

Tuhipoka: Ka karapotia e nga tapanga nga whiringa katoa mo nga waahi panui nui ake me te ahua pai ake.

Pātene akomanga="" Whakaahuatanga
btn Pātene hina Paerewa me te rōnaki
btn btn-primary Ka whakarato i te taumaha ataata taapiri me te tautuhi i te mahi tuatahi i roto i te huinga paatene
btn btn-info Ka whakamahia hei rereke ki nga momo taunoa
btn btn-success Ka tohu i te mahi angitu, pai ranei
btn btn-warning E tohu ana me tupato tenei mahi
btn btn-danger Ka tohu i tetahi mahi kino, kino ranei
btn btn-inverse He patene hina pouri, kaore i herea ki tetahi mahi kupu, whakamahi ranei

Patene mo nga mahi

Hei tikanga, me whakamahi noa nga paatene mo nga mahi ka whakamahia nga honongaitua mo nga mea. Hei tauira, ko te "Tikiake" he paatene, ko te "mahi o naianei" hei hono.

Ka taea te whakamahi i nga momo paatene ki nga mea katoa me te .btnkaraehe i tono. Heoi, ko te tikanga ka hiahia koe ki te tono i enei ki nga waahanga <a>me <button>nga waahanga anake.

Hototahi pūtirotiro whakawhiti

Karekau a IE9 e tapahi i nga rōnaki papamuri ki nga kokonga porotaka, no reira ka tangohia e matou. E pa ana, ka whakakorehia e IE9 nga buttonhuānga hauā, ka whakahinahia te kuputuhi me te atarangi-tuhinga kino e kore e taea e tatou te whakatika.

Rahi maha

Kei te pirangi koe ki nga paatene nui, iti ake ranei? Tāpirihia .btn-largete , .btn-small, .btn-minimo etahi atu rahinga e rua ranei.


Te ahua haua

Mo nga patene haua, taapirihia te .disabledakomanga ki nga hononga me te disabledhuanga mo <button>nga huānga.

Hononga tuatahi Hononga

Mahunga ake! Ka whakamahia e matou .disabledhei karaehe whaipainga i konei, he rite ki te .activekaraehe noa, no reira karekau he prefix e hiahiatia ana.

Kotahi te karaehe, maha nga tohu

Whakamahia te .btnakomanga ki runga i te <a>, <button>, <input>huānga ranei.

Hononga
  1. <a class = "btn" href = "" > Hononga </a>
  2. <button class = "btn" type = "tuku" >
  3. Pātene
  4. </pātene>
  5. <te akomanga whakauru = "btn" momo = "pātene"
  6. uara = "Tauru" >
  7. <input class = "btn" type = "tuku"
  8. uara = "Tuku" >

Hei mahi pai rawa atu, ngana ki te whakataurite i te huānga mo to horopaki hei whakarite kia rite ki te whakaputanga whakawhiti tirotiro. Mena kei a koe he input, whakamahia he <input type="submit">mo to paatene.

  • karaehe tohu
  • tohu-waiata
  • rapu-tohu
  • kōpaki-tohu
  • icon-ngakau
  • whetu-tohu
  • icon-whetu-kore
  • icon-kaiwhakamahi
  • kiriata-tohu
  • icon-th-nui
  • icon-th
  • icon-th-rarangi
  • icon-ok
  • icon-tango
  • tohu-topa-mai
  • tohu-topa-waho
  • tohu-atu
  • tohu-tohu
  • icon-cog
  • icon-parapara
  • icon-whare
  • icon-kōnae
  • wa-tohu
  • tohu-ara
  • icon-download-alt
  • ata-tikiake
  • icon-tukuake
  • pouaka-roto
  • icon-play-circle
  • tohu-tukurua
  • tohu-whakahou
  • icon-rarangi-alt
  • tohu-raka
  • haki-tohu
  • tohu-orooro
  • icon-rōrahi-atu
  • icon-rōrahi-iho
  • icon-rōrahi-ake
  • tohu-qrcode
  • tohu-paepae
  • tohu-tohu
  • tohu-tohu
  • pukapuka-tohu
  • tohu-tohu
  • icon-print
  • icon-kamera
  • tohu-momotuhi
  • tohu-maia
  • tohu-tītaha
  • icon-kuputuhi-teitei
  • ata-kupu-whanui
  • icon-align-mauī
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • tohu-rarangi
  • icon-nuku-maui
  • icon-indent-matau
  • icon-facetime-ataata
  • tohu-pikitia
  • tohu-pene
  • tohu-mapi-tohu
  • tohu-whakarite
  • tohu-tae
  • ata-whakatika
  • icon-share
  • tohu-taki
  • nekehanga-tohu
  • icon-step-backward
  • icon-tere-whakamuri
  • tohu-whakamuri
  • whakaari-tohu
  • ata-tatari
  • icon-mutu
  • tohu-whakamua
  • icon-tere-whakamua
  • icon-taahiraa-mua
  • icon-putanga
  • icon-chevron-maui
  • icon-chevron-matau
  • tohu-tohu-tohu
  • tohu-iti-tohu
  • tohu-tango-tohu
  • tohu-ok-tohu
  • tohu-patai-tohu
  • tohu-tohu-tohu
  • ata-whakaahua
  • icon-tango-porohita
  • icon-ok-porohita
  • porowhita-aukati
  • icon-pere-maui
  • icon-pere-matau
  • tohu-pere-ake
  • icon-pere-iho
  • icon-share-alt
  • icon-whakahou-ki tonu
  • icon-whakahou-iti
  • icon-plus
  • tohu-iti
  • tohu-tohu
  • tohu-tohu-tohu
  • tohu-koha
  • rau-ira
  • tohu-ahi
  • icon-kanohi-tuwhera
  • icon-kanohi-kati
  • tohu-whakatupato-tohu
  • waka rererangi
  • maramataka-tohu
  • tohu-tupurangi
  • tohu-korero
  • tohu-aukume
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-hoko-kaata
  • icon-kōpaki-kati
  • icon-kōpaki-tuwhera
  • tohu-whakanui-poutū
  • tohu-huri-whakapae
  • icon-hdd
  • icon-bullhorn
  • pere icon
  • tohu-tohu
  • tohu-koromatua-ake
  • icon-koromatua-iho
  • tohu-ringa-matau
  • icon-ringa-maui
  • tohu-ringa-ake
  • icon-ringa-iho
  • icon-porowhita-pere-matau
  • icon-porowhita-pere-maui
  • tohu-porowhita-pere-ake
  • icon-porowhita-pere-iho
  • ata-ao
  • tohu-wrench
  • tohu-mahi
  • tohu-tātari
  • tohu-pakipaki
  • ata-matanui

I hangaia hei sprite

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.

Me pehea te whakamahi

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:

  1. <i class = "icon-search" ></i>

He ahua ano kei te waatea mo nga tohu hurihuri (ma), kua rite me tetahi atu karaehe:

  1. <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.

Whakamahia nga keehi

He pai nga tohu, engari kei hea te whakamahi? Anei etahi whakaaro:

  • Hei tirohanga mo to whakatere paetaha
  • Mo te whakaterenga tohu-a-ira
  • Mo nga patene hei awhina i te kawe i te tikanga o tetahi mahi
  • Me nga hononga ki te tiri i te horopaki ki te ūnga o te kaiwhakamahi

Ko te tikanga, ki nga waahi katoa ka taea e koe te whakatakoto <i>tohu, ka taea e koe te whakatakoto tohu.

Tauira

Whakamahia i roto i nga patene, i nga roopu patene mo te paeutauta, te whakaterenga, te whakaurunga puka kua tohua.