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

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

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 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 &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, 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

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
Ko te rarangi whakaahuatanga he tino pai 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
Ko te rarangi whakaahuatanga he tino pai 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.

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 ripanga ma te taapiri i te zebra-striping—tapiri 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

Ma te v2.0, he maamaa ake, he maamaa ake hoki nga taunoa mo nga momo ahua. Kaore he tohu taapiri, ko nga mana whakahaere noa.

Kupu awhina hono!

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-roto" > Kuputuhi āwhina hono! </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

Ma te whakaata i nga momo WebKit taunoa, taapiri noa .form-searchmo etahi atu mara rapu porotaka.

  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

Ko nga whakauru he taumata paraka hei timata. Mo .form-inlinea .form-horizontal, ka whakamahia e matou te paraka-roto.

  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

Tautoko Mana Bootstrap

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

Tauira tohu

I runga ake i te tauira tahora puka, 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>

He aha kei roto

Kei te taha maui 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

Nga taunoa hou me te v2.0

Tae atu ki te v1.4, ko nga momo ahua taunoa a Bootstrap i whakamahi i te whakatakotoranga whakapae. Ma te Bootstrap 2, i tangohia e matou taua herenga kia pai ake te mohio, kia nui ake nga taunoa mo nga momo ahua.


Puka mana whakahaere
Ko etahi uara i konei
Kua he tetahi mea
Tena whakatikahia te hapa
Whoohoo!
Whoohoo!

Ko nga ahuatanga o te kaitirotiro hou

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 a tawhio noa .control-group.

  1. <te huinga mara
  2. class = "hape whakahaere-rōpū" >
  3. </fieldset>

Te whakawhānui i nga mana puka

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 paato nui ake me te ahua pai ake.

Taapiri me te taapiri i nga whakaurunga

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.


Pouakataki me nga reo irirangi

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 .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 te raina kotahi, kaua he mokowhiti.


Puka kupu awhina

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.

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 whakakapi mo 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 hohenga 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

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

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

Whakamahia nga keehi

He rawe 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.