CSS kumu

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.

Nā poʻo a me nā kope kino

Pālākiō kiʻi

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

Laʻana kikokikona kino

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.

Kope kino alakai

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.

h1. Poʻomanaʻo 1

h2. Poʻomanaʻo 2

h3. Poʻomanaʻo 3

h4. Poʻomanaʻo 4

h5. Poʻomanaʻo 5
h6. Poʻomanaʻo 6

ʻO ke koʻikoʻi, ka ʻōlelo, a me ka pōkole

ʻ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 titleno ka kikokikona i hoʻonui ʻia

E hoʻohana .initialismi 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>

Ke hoʻohana nei i ke koʻikoʻi

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.

Laʻana helu wahi

Eia nā laʻana ʻelua o <address>ke ʻano o ka hoʻohana ʻana i ka tag:

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

Nā hoʻohālikelike laʻana

ʻO nā pōkole me kahi titlehiʻ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 initialismpapa 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 .

Blockquotes

ʻElemu Hoʻohana Koho
<blockquote> ʻElemu pae poloka no ka haʻi ʻana i nā ʻike mai kahi kumu ʻē aʻe

Hoʻohui citei ke ʻano no ka URL kumu

E hoʻohana .pull-lefta me .pull-rightnā 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 &mdash;ma mua o ia no nā kumu hana.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoʻokomo ʻia ka helu helu i mua o ka venenatis. </p>
  3. <liʻiliʻi> Kekahi mea kaulana </liʻiliʻi>
  4. </blockquote>

Laʻana blockquotes

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

Nā papa inoa

Kau ʻole ʻia

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem and 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

Kaulana ʻole

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem and 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

Kauoha ʻia

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem and 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

wehewehe

<dl>

Nā papa inoa wehewehe
Kūpono ka papa inoa wehewehe no ka wehewehe ʻana i nā huaʻōlelo.
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.

ʻO ka wehewehe ʻana i ke alo

<dl class="dl-horizontal">

Nā papa inoa wehewehe
Kūpono ka papa inoa wehewehe no ka wehewehe ʻana i nā huaʻōlelo.
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, ha'i ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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.

Inline

E kāʻei i nā ʻāpana code inline me <code>.

  1. No ka laʻana , pono e wahī ʻia ka ʻāpana < code> </ code > ma ke ʻano inline .

poloka kumu

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>
  1. <mua>
  2. <p>Laʻana kikokikona ma aneʻi...</p>
  3. </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-scrollablepapa e hoʻonoho i kahi kiʻekiʻe kiʻekiʻe o 350px a hāʻawi i kahi scrollbar y-axis.

Google Nani

E lawe i ka mea like <pre>a hoʻohui i ʻelua papa koho no ka hoʻonui ʻana.

  1. <p> He laʻana kikokikona ma ʻaneʻi... </p>
  1. <pre class = "paʻi nani
  2. linenums" >
  3. <p>Laʻana kikokikona ma aneʻi...</p>
  4. </pre>

Hoʻoiho iā google-code-prettify a nānā i ka readme no ka hoʻohana ʻana.

Hōʻailona papa

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
  1. <papa>
  2. <poo>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </head>
  8. <ke kino>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </papa>

Nā koho 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 tda me thnā mea

Nā papa hoʻohālike

1. Nā ʻano papa paʻamau

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, .tablepono ka papa.

  1. <papa papa = "papakaukau" >
  2. </papa>
# Inoa mua Inoa hope inoa hoʻohana
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka Manu @twitter

2. Papa kaha kaha

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

'Ōlelo Aʻo: Hoʻohana nā papa ʻoniʻoni i ka :nth-childmea koho CSS a ʻaʻole i loaʻa ma IE7-IE8.

  1. <papa papa = "papa papa-papa" >
  2. </papa>
# Inoa mua Inoa hope inoa hoʻohana
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka Manu @twitter

3. Pākaukau palena

E hoʻohui i nā palena a puni ka papaʻaina holoʻokoʻa a me nā kihi poepoe no ka hana nani.

  1. <papa papa = "papa papa-palena" >
  2. </papa>
# Inoa mua Inoa hope inoa hoʻohana
1 Maka Otto @mdo
Maka Otto @getbootstrap
2 ʻO Iakoba Thornton @momona
3 Larry ka Manu @twitter

4. Paʻa paʻa

E hoʻonui i kāu mau pākaukau ma ka hoʻohui ʻana i ka .table-condensedpapa e ʻoki i ka padding cell table ma ka hapalua (mai 8px a 4px).

  1. <papa papa = "table table-condensed" >
  2. </papa>
# Inoa mua Inoa hope inoa hoʻohana
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka Manu @twitter

5. Hoʻohui iā lākou a pau!

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.

  1. <papa papa = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </papa>
Inoa piha
# Inoa mua Inoa hope inoa hoʻohana
1 Maka Otto @mdo
2 ʻO Iakoba Thornton @momona
3 Larry ka Manu @twitter

HTML a me CSS hikiwawe

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

ʻEhā hoʻolālā i hoʻokomo ʻia

Hele mai ʻo Bootstrap me ke kākoʻo no ʻehā ʻano hoʻolālā puka:

  • Kū pololei (paʻamau)
  • Huli
  • Inline
  • Kaupae

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.

Nā mokuʻāina hoʻomalu a me nā mea hou aku

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

ʻEhā ʻano o nā ʻano

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

Nā palapala hoʻohālike me ka hoʻohana wale ʻana i nā kaohi puka, ʻaʻohe markup keu

ʻAno kumu

ʻO nā paʻamau akamai a māmā me ka ʻole o ka hōʻailona ʻē aʻe.

He laʻana kikokikona kōkua pae poloka ma ʻaneʻi.

  1. <form class = "well" >
  2. <label> inoa lepili </label>
  3. <input type = "text" class = "span3" placeholder = "Type something..." >
  4. <span class = "help-block" > He laʻana kikokikona kōkua pae-poka ma ʻaneʻi. </span>
  5. <label class = "pahu helu" >
  6. <input type = "checkbox" > E nānā mai iaʻu
  7. </label>
  8. <button type = "submit" class = "btn" > Hoʻouna </button>
  9. </form>

Palapala huli

Hoʻohui .form-searchi ke ʻano a .search-queryme ka input.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Huli </ pihi>
  4. </form>

ʻAno laina

E hoʻohui .form-inlinei ka hoʻopololei kū pololei a me ka hoʻokaʻawale ʻana o nā mana puka.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "pahu helu" >
  5. <input type = "checkbox" > E hoʻomanaʻo mai iaʻu
  6. </label>
  7. <button type = "submit" class = "btn" > Sign in </button>
  8. </form>

Nā ʻano ʻeleʻele

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:

  • nā hoʻokomo kikokikona (text, password, email, etc)
  • pahu koho
  • lekiō
  • koho
  • koho lehulehu
  • waihona waihona
  • textarea

Ma waho aʻe o ka kikokikona freeform, ʻike ʻia kekahi hoʻokomo kikokikona HTML5 e like me ia.

hōʻailona laʻana

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 .controlsnā papa no ke kālai ʻana.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <kaʻao> kikokikona moʻolelo </kaʻao>
  4. <div class = "hui mana" >
  5. <label class = "control-label" for = "input01" > Komo kikokikona </label>
  6. <div class = "nā mana" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Kākoʻo 'ōlelo kōkua </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Nā mokuʻāina hoʻomalu palapala

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 disablednā mokuʻāina. Wehe mākou i ka Webkit paʻamau outlinea kau i kahi box-shadowma kona wahi no :focus.


Hōʻoia palapala

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.

  1. <fieldset
  2. papa = "hewa pūʻulu mana" >
  3. </fieldset>
Kekahi waiwai maanei
Ua hewa paha kekahi mea
E ʻoluʻolu e hoʻoponopono i ka hewa
Woohoo!
Woohoo!

Hoʻonui i nā mana palapala

Hoʻopili a hoʻopili i nā mea hoʻokomo

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


Nā pahu pahu a me nā lekiō

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 .inlinei kekahi .checkboxa .radioua pau ʻoe.


Nā palapala inline a hoʻopili/prepend

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-ona inputma ka laina like, me ka ʻole o nā hakahaka.


He kikokikona kōkua puka

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.

E hoʻohana i nā .span*papa like mai ka ʻōnaehana mānoanoa no nā nui hoʻokomo.

Hiki paha iā ʻoe ke hoʻohana i nā papa paʻa ʻole i palapala ʻāina i ka mānoanoa, hoʻololi i nā ʻano CSS pane, a i ʻole helu no nā ʻano mana like ʻole (e laʻa, inputvs. select).

@

Eia kekahi kikokikona kōkua

.00
Eia kekahi kikokikona kōkua
$ .00

Hoʻomaopopo: Hoʻopuni nā lepili i nā koho āpau no nā wahi kaomi nui aʻe a me kahi ʻano hoʻohana hou aku.

pihi papa = "" wehewehe
btn Pihi hina hina maʻamau me ka gradient
btn btn-primary Hāʻawi i ke kaumaha ʻike hou aʻe a ʻike i ka hana mua ma kahi pūʻulu o nā pihi
btn btn-info Hoʻohana ʻia ma ke ʻano he koho i nā ʻano paʻamau
btn btn-success Hōʻike i kahi hana holomua a maikaʻi paha
btn btn-warning E hōʻike ana e mālama pono i kēia hana
btn btn-danger Hōʻike i ka hana pōʻino a i ʻole ka hana ʻino
btn btn-inverse Pākuʻi ʻeleʻele hina, ʻaʻole i hoʻopaʻa ʻia i kahi hana semantic a hoʻohana paha

Nā pihi no nā hana

Ma ke ʻano he ʻaha kūkā, pono e hoʻohana ʻia nā pihi no nā hana ʻoiai e hoʻohana ʻia nā loulou no nā mea. No ka laʻana, he pihi ʻo "Download" aʻo ka "hana hou" he loulou.

Hiki ke hoʻohana ʻia nā ʻano pihi i kekahi mea me ka .btnpapa i hoʻopili ʻia. Eia nō naʻe, makemake ʻoe e hoʻopili i kēia mau mea i nā mea wale <a><button>.

Ka hoʻolike like ʻana o ka polokalamu kele pūnaewele

ʻAʻole ʻoki ʻo IE9 i nā gradients hope ma nā kihi pōʻai, no laila e wehe mākou. E pili ana, IE9 jankifies disabled buttonelements, rendering text gray with a insty text-shadow that we cannot fix.

Nui nui

Makemake i nā pihi nui a liʻiliʻi paha? Hoʻohui .btn-largei ka , .btn-small, a i ʻole .btn-minino ʻelua nui ʻē aʻe.


Mokuʻāina kīnā

No nā pihi kīnā ʻole, hoʻohui i ka .disabledpapa i nā loulou a me ke disabledʻano no <button>nā mea.

loulou mua loulou

Nā poʻo i luna! Hoʻohana mākou .disabledma ke ʻano he papa hana ma aneʻi, e like me ka .activepapa maʻamau, no laila ʻaʻohe prefix e koi ʻia.

Hoʻokahi papa, nui nā hōʻailona

E hoʻohana i ka .btnpapa ma kahi <a>, <button>, a i ʻole <input>mea.

loulou
  1. <a class = "btn" href = "" > Link </a>
  2. <pāpā pihi = " btn" type = "hoʻouna" >
  3. pihi
  4. </ pihi>
  5. <input class = "btn" type = "button"
  6. waiwai = "Hookomo" >
  7. <input class = "btn" type = "hoʻouna"
  8. waiwai = "Hoʻouna" >

Ma ke ʻano he hoʻomaʻamaʻa maikaʻi loa, e hoʻāʻo e hoʻohālikelike i ke ʻano no kāu pōʻaiapili e hōʻoia i ka hoʻohālikelike ʻana i ka hāʻawi ʻana i nā mākaʻikaʻi. Inā loaʻa iā ʻoe kahi input, e hoʻohana i kahi <input type="submit">no kāu pihi.

  • ikona-aniani
  • ikona-mele
  • ʻimi-ikona
  • ikona-envelope
  • ikona-naʻau
  • hoku-ikona
  • ikona-hoku-kaawale
  • mea hoʻohana ikona
  • kiʻiʻoniʻoni
  • icon-th-nui
  • icon-th
  • icon-th-list
  • ikona-ok
  • hoʻoneʻe ikona
  • icon-zoom-in
  • icon-zoom-out
  • ikona-off
  • hōʻailona-ikona
  • icon-cog
  • ʻōpala-ikona
  • ikona-home
  • waihona-ikona
  • ikona-manawa
  • ikona-alanui
  • icon-download-alt
  • ikona-hoʻoili
  • ikona-hoʻouka
  • ikona-inbox
  • ikona-pāʻani-pōʻai
  • ikona-hoʻi hou
  • hōʻano hou ikona
  • icon-list-alt
  • laka kiʻiona
  • ikona-hae
  • ikona-poo
  • ikona-volume-off
  • ikona-nui-lalo
  • ikona-nui
  • ikona-qrcode
  • icon-barcode
  • hōʻailona-ikona
  • hōʻailona-ikona
  • puke ikona
  • ikona-puke
  • ikona-paʻi
  • ikona-kamera
  • ikona-pono
  • ikona- wiwo ole
  • ikona-hiʻa
  • kiʻekiʻe kiʻekiʻe kiʻi-kiko
  • laula-kiko-kiko
  • ikona-align-hema
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • ikona-papa inoa
  • ikona-indent-hema
  • icon-indent-akau
  • icon-facetime-wikiō
  • kiʻi-kiʻi
  • ikona- penikala
  • hōʻailona-palapala ʻāina
  • ikona-hoʻololi
  • ʻōniʻoniʻoni
  • hoʻoponopono ikona
  • kaʻana ikona
  • hōʻoia-ikona
  • neʻe ikona
  • icon-step-backward
  • ikona-wikiwiki-hope
  • ikona-hope
  • ikona-pāʻani
  • hoʻomaha ikona
  • ikona-kū
  • ikona-imua
  • ikona-wikiwiki
  • ikona-pae-mua
  • ikona-eject
  • ikona-chevron-hema
  • icon-chevron-akau
  • hōʻailona-hoʻohui
  • hōʻailona-hōʻemi
  • hōʻailona-hoʻoneʻe
  • hōʻailona-ok-hōʻailona
  • hōʻailona-nīnau
  • hōʻailona-ʻike-ʻike
  • kiʻi-kiʻi kiʻi
  • ikona-wehe-kapuni
  • icon-ok-pōʻai
  • icon-ban-pōʻai
  • icon-arrow-hema
  • icon-arrow-akau
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • ikona-hoʻonui-piha
  • ikona-hoʻano-liʻiliʻi
  • icon-plus
  • ikona-emi
  • icon-asterisk
  • hōʻailona-hōʻailona
  • makana-ikona
  • lau-ikona
  • ikona-ahi
  • ikona-maka-wehe
  • ikona-maka-pili
  • hōʻailona-aʻoaʻo
  • mokulele-ikona
  • ikona-kalena
  • ikona-kulele
  • ikona-manaʻo
  • icon-magnet
  • icon-chevron-up
  • ikona-chevron-lalo
  • icon-retweet
  • ikona-kūʻai-kaʻa
  • icon-folder-close
  • ikona-palapala-wehe
  • ikona-hoʻano-kū
  • ikona-hoʻololi-horizontal
  • ikona-hdd
  • ikona-bullhorn
  • ikona-bele
  • hōʻoia-ikona
  • kiʻi-lima-lima
  • ikona- manamana lima
  • ikona-lima-akau
  • ikona-lima-hema
  • ikona-lima-lima
  • ikona-lima-lalo
  • icon-poʻai-arrow-akau
  • icon-poʻai-arrow-hema
  • icon-pōʻai-arrow-up
  • icon-poʻai-arrow-lalo
  • ikona-poe honua
  • wili-ikona
  • ikona-hana
  • kānana ikona
  • ʻikona-pāpaʻa
  • ikona-piha

Kūkulu ʻia ma ke ʻano he sprite

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.

Pehea e ho ohana

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:

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

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

Hoʻohana i nā hihia

Nui nā kiʻi, akā ma hea kahi e hoʻohana ai iā lākou? Eia kekahi mau manaʻo:

  • E like me nā hiʻohiʻona no kāu hoʻokele ʻaoʻao
  • No ka hoʻokele ikona maʻemaʻe
  • No nā pihi e kōkua i ka hōʻike ʻana i ke ʻano o kahi hana
  • Me nā loulou e kaʻana like i ka pōʻaiapili ma kahi e hele ai ka mea hoʻohana

ʻO ka mea nui, hiki iā ʻoe ke kau i kahi <i>hōʻailona, ​​​​hiki iā ʻoe ke kau i kahi ikona.

Nā laʻana

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.