Bootstrap

CSS kumu

Hoʻopili ʻia nā mea HTML kumu a hoʻonui ʻia me nā papa hoʻonui.

Nā poʻo i luna! No v2.3.2 kēia mau palapala, ʻaʻole i kākoʻo ʻia. E nānā i ka mana hou loa o Bootstrap!

Palapala kiʻi

Nā poʻomanaʻo

Loaʻa nā poʻomanaʻo HTML <h1>a <h6>pau.

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

kope kino

ʻO ka paʻamau honua o Bootstrap font-sizehe 14px , me line-heightka 20px . Hoʻohana ʻia kēia i ka <body>a me nā paukū āpau. Eia hou, <p>loaʻa (nā paukū) ka palena lalo o ka hapalua o ko lākou kiʻekiʻe laina (10px ma ka paʻamau).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida and eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

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.

<p papa = "alakaʻi" > ... </p>

Kūkulu ʻia me ka liʻiliʻi

Hoʻokumu ʻia ka pālākiō kiʻi ma luna o ʻelua mau ʻokoʻa LESS ma nā variables.less : @baseFontSizea me @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 maʻalahi e hana i nā palena, nā pale, a me nā kiʻekiʻe laina o kā mākou ʻano āpau a ʻoi aku. Hoʻopilikino iā lākou a hoʻololi ʻo Bootstrap.

Hoʻoikaika

E hoʻohana i nā hōʻailona koʻikoʻi o HTML me nā ʻano māmā.

<small>

No ka hoʻokaʻawale ʻana i ka laina a i ʻole nā ​​poloka o ke kikokikona, e hoʻohana i ka lepili liʻiliʻi.

ʻO kēia laina kikokikona i manaʻo ʻia e mālama ʻia ma ke ʻano he paʻi maikaʻi.

<p> <liʻiliʻi> Manaʻo ʻia kēia laina kikokikona ma ke ʻano he paʻi maikaʻi. </liʻiliʻi> </p>

wiwo ole

No ka hoʻoikaika ʻana i kahi snippet o ke kikokikona me ke kaumaha o ka font.

Ua unuhi ʻia kēia ʻāpana kikokikona ma ke ʻano he kikokikona wiwo ʻole .

<strong> hāʻawi ʻia ma ke ʻano he kikokikona wiwo ʻole </strong>

ʻO nā kikoʻī

No ka hoʻoikaika ʻana i kahi snippet o nā kikokikona me nā kikoʻī.

Ua unuhi ʻia kēia ʻāpana kikokikona ma ke ʻano he kikokikona italicized .

<em> i unuhi ʻia ma ke ʻano he kikokikona italicized </em>

Nā poʻo i luna!E ʻoluʻolu e hoʻohana <b>a <i>ma HTML5. <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.

Nā papa alignment

Hoʻololi maʻalahi i ka kikokikona i nā ʻāpana me nā papa hoʻoponopono kikokikona.

He kikokikona laulima hema.

kikokikona kaulike waena.

kikokikona pololei pololei.

  1. <p class = "text-left" > He kikokikona align hema. </p> 
  2. <p class = "text-center" > kikokikona i hoʻohālikelike ʻia i waena. </p> 
  3. <p class = "text-right" > kikokikona i hoʻopaʻa ʻia ʻākau . </p>

Nā papa koʻikoʻi

E hōʻike i ka manaʻo ma o ka waihoʻoluʻu me ka lima o nā papa hana koʻikoʻi.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Nā pōkole

Hoʻohana ʻia i ka mea HTML <abbr>no nā pōkole a me nā acronyms e hōʻike i ka mana i hoʻonui ʻia ma ka hover. ʻO nā pōkole me kahi titlehiʻohiʻona, loaʻa kahi palena lalo kikoʻī māmā a me kahi ʻōkuhi kōkua ma ka hover, e hāʻawi ana i ka pōʻaiapili hou ma ka hover.

<abbr>

No nā kikokikona i hoʻonui ʻia ma ka hoʻopaʻa lōʻihi o kahi pōkole, e hoʻokomo i ka titleʻano.

ʻO ka pōkole o ka huaʻōlelo attribute ʻo attr .

<abbr title = "ʻano" > attr </abbr>

<abbr class="initialism">

Hoʻohui .initialismi kahi pōkole no ka liʻiliʻi liʻiliʻi.

ʻO HTML ka mea maikaʻi loa mai ka ʻāpana palaoa.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Heluhelu

E hōʻike i ka ʻike pili no ke kupuna kokoke a i ʻole ke kino holoʻokoʻa o ka hana.

<address>

E mālama i ka hōpili ʻana ma ka hoʻopau ʻana i nā laina āpau me <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Inoa piha
[email protected] 
  1. < helu wahi >
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   Kapalakiko, CA 94107 <br>
  5.   <abbr title = "Phone" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. < helu wahi >
  9.   <strong> Inoa piha </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Blockquotes

No ka haʻi ʻana i nā poloka maʻiʻo mai kahi kumu ʻē aʻe i loko o kāu palapala.

Paʻamau blockquote

E <blockquote>kāʻei i kekahi HTML e like me ka ʻōlelo. No nā huaʻōlelo pololei, paipai mākou i kahi <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Nā koho blockquote

Hoʻololi ke ʻano a me ka ʻike no nā hoʻololi maʻalahi ma kahi blockquote maʻamau.

Kapa inoa i kumu

Hoʻohui <small>i ka hōʻailona no ka ʻike ʻana i ke kumu. E kāʻei i ka inoa o ka hana kumu ma <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kekahi mea kaulana ma Source Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Kekahi mea kaulana <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Nā hōʻike ʻokoʻa

E hoʻohana .pull-rightno kahi ʻōlelo blockquote i lana ʻia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Kekahi mea kaulana ma Source Title 
  1. <blockquote class = "huki-'ākau" > 
  2.   ...
  3. </blockquote>

Nā papa inoa

Kau ʻole ʻia

He papa inoa o nā mea i pili ʻole i ke kauoha .

  • 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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Kauoha ʻia

He papa inoa o nā mea i manaʻo nui ʻia ke kauoha .

  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
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Kaulana ʻole

Wehe i ka list-stylepale paʻamau a waiho ʻia ma nā mea papa inoa (nā keiki koke wale nō).

  • 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
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Inline

E kau i nā mea papa inoa a pau ma ka laina hoʻokahi inline-blocka me kahi pale māmā.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

wehewehe

He papa inoa o nā huaʻōlelo me kā lākou mau wehewehe pili.

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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

ʻO ka wehewehe ʻana i ke alo

E hana i nā huaʻōlelo a me nā wehewehe ʻana ma ka <dl>laina ʻaoʻao.

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. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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.

Code

Inline

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

No ka laʻana, <section>pono e ʻōwili ʻia e like me ka inline. 
  1. No ka laʻana , <code> & lt ; ʻāpana & gt ;</ code > pono e ʻōwili ʻia e like me ka laina .

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>

Nā poʻo i luna!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.

Nā papaʻaina

Nā ʻano paʻamau

No ka hoʻolāʻau kumu—hoʻopiʻi māmā a me nā mea hoʻokaʻawale ākea wale nō—e hoʻohui i ka papa kumu .tablei kekahi <table>.

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

Nā papa koho

E hoʻohui i kekahi o kēia mau papa i ka .tablepapa kumu.

.table-striped

Hoʻohui i ka zebra-striping i kēlā me kēia lālani papaʻaina ma <tbody>o ka :nth-childmea koho CSS (ʻaʻole i loaʻa ma IE7-8).

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

.table-bordered

E hoʻohui i nā palena a me nā kihi pōʻai i ka papaʻaina.

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

.table-hover

E ho'ā i kahi kūlana hover ma nā lālani papa i loko o kahi <tbody>.

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

.table-condensed

Hoʻonui i nā papa ʻaina ma o ka ʻoki ʻana i ka padding cell i ka hapalua.

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

Nā papa lālani koho

E hoʻohana i nā papa pōʻaiapili e kala i nā lālani papaʻaina.

Papa wehewehe
.success Hōʻike i kahi hana holomua a maikaʻi paha.
.error Hōʻike i ka hana pōʻino a i ʻole ka hana ʻino.
.warning Hōʻike i kahi ʻōlelo aʻo e pono ai ka nānā.
.info Hoʻohana ʻia ma ke ʻano he ʻokoʻa i nā ʻano paʻamau.
# Huahana Lawe ʻia ka uku Kūlana
1 TB - Ka mahina 01/04/2012 Aponoia
2 TB - Ka mahina 02/04/2012 Hōʻole
3 TB - Ka mahina 03/04/2012 Ke kali nei
4 TB - Ka mahina 04/04/2012 Kāhea e hōʻoia 
  1. ...
  2.   < tr class = "holomua" >
  3.     <td> 1 < /td>
  4.     <td>TB - Mahina</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Aponoia</ td >
  7.   </ tr >
  8. ...

Kākoʻo ʻia ka hōʻailona pākaukau

Ka papa inoa o nā mea HTML papa i kākoʻo ʻia a pehea e hoʻohana ʻia ai.

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> Keena papaʻaina kūikawā no nā kolamu (a i ʻole lālani, e pili ana i ka laulā a me ke kau ʻana) lepili
<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.   <caption> ... </caption>
  3.   <poo>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </head>
  9.   <ke kino>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </papa>

Nā palapala

Nā ʻano paʻamau

Loaʻa i nā mana o kēlā me kēia ʻano ke ʻano, akā me ka ʻole o kahi papa kumu i koi ʻia ma <form>nā hoʻololi nui a i ʻole ka markup. Nā hualoaʻa ma nā lepili i hoʻopaʻa ʻia, i hoʻopaʻa ʻia ma ka hema ma luna o nā kaohi puka.

Kaao He laʻana kikokikona kōkua pae poloka ma ʻaneʻi. 
  1. <ʻano>
  2.   <fieldset>
  3.     <kaao> kaao < /kaao>
  4.     <label> inoa lepili </label>
  5.     <input type = "text" placeholder = "E kikokiko i kekahi mea..." >  
  6.     <span class = "help-block" > He laʻana kikokikona kōkua pae-poka ma ʻaneʻi. </span> 
  7.     <label class = "pahu helu" > 
  8.       <input type = "checkbox" > E nānā mai iaʻu 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Hoʻouna </button>  
  11.   </fieldset>
  12. </form>

Nā hoʻolālā koho

Hoʻohui pū ʻia me Bootstrap ʻekolu mau papa hana koho no nā hihia maʻamau.

Palapala huli

Hoʻohui .form-searchi ke ʻano a .search-queryme ka <input>no ka hoʻokomo kikokikona ʻokoʻa.

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

ʻAno laina

Hoʻohui .form-inlineno nā lepili hema a me nā kaohi-poloka laina no kahi hoʻolālā paʻa.

  1. <form class = "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>

ʻAno ʻeleʻele

Hoʻopololei i nā lepili a lana i ka hema e hōʻike ʻia ma ka laina like me nā mana. Pono nā hoʻololi ʻoi loa mai kahi palapala paʻamau:

  • Hoʻohui .form-horizontali ke ʻano
  • E hoʻopili i nā lepili a me nā mana i loko.control-group
  • Hoʻohui .control-labeli ka lepili
  • Hoʻopili i nā mana pili i loko .controlsno ka hoʻopololei kūpono
  1. <form class = "form-horizontal" > 
  2.   <div class = "hui mana" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "nā mana" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "hui mana" > 
  9.     <label class = "control-label" for = "inputPassword" > Hua'ōlelo </label>  
  10.     <div class = "nā mana" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "hui mana" > 
  15.     <div class = "nā mana" > 
  16.       <label class = "pahu helu" > 
  17.         <input type = "checkbox" > E hoʻomanaʻo mai iaʻu 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Sign in </button>  
  20.     </div>
  21.   </div>
  22. </form>

Kākoʻo ʻia nā mana palapala

Kākoʻo ʻia nā hiʻohiʻona o nā mana ʻano maʻamau i kahi hoʻolālā puka laʻana.

Nā mea hoʻokomo

ʻO ka mana maʻamau, nā kahua hoʻokomo kikokikona. Hoʻokomo pū ʻia ke kākoʻo no nā ʻano HTML5 āpau: kikokikona, ʻōlelo huna, ka lā, ka manawa-local, ka lā, ka mahina, ka manawa, ka pule, ka helu, ka leka uila, ka url, ka huli, ke kelepona, a me ka waihoʻoluʻu.

Pono i ka hoʻohana ʻana i kahi kikoʻī typei nā manawa a pau.

  1. <input type = "text" placeholder = "Text input" >

Textarea

Kākoʻo i nā laina kikokikona he nui. E hoʻololi rowsi ke ʻano e like me ka pono.

  1. <textarea rows = " 3" ></textarea>

Nā pahu pahu a me nā lekiō

ʻO nā pahu pahu no ke koho ʻana i hoʻokahi a i ʻole kekahi mau koho i kahi papa inoa a ʻo nā radios no ke koho ʻana i hoʻokahi koho mai nā mea he nui.

Paʻamau (hui ʻia)


  1. <label class = "pahu helu" > 
  2.   < ʻano komo = "pahu helu" waiwai = "" >  
  3.   ʻO ke koho hoʻokahi kēia a me kēlā - e hoʻokomo pono i ke kumu o ka maikaʻi
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" waiwai = "option1" nānā >     
  8.   ʻO ke koho hoʻokahi kēia a me kēlā - e hoʻokomo pono i ke kumu o ka maikaʻi
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" waiwai = "option2" >    
  12.   Hiki ke koho ʻelua i kahi mea ʻē aʻe a ʻo ke koho ʻana iā ia e kāpae i ke koho hoʻokahi
  13. </label>

Nā pahu kaha laina

E hoʻohui i ka .inlinepapa i nā pahu pahu a i ʻole nā ​​lekiō no nā mana e ʻike ʻia ma ka laina like.

  1. <label class = "pahu helu ma ka laina" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" waiwai = "koho1" > 1   
  3. </label>
  4. <label class = "pahu helu ma ka laina" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" waiwai = "koho2" > 2   
  6. </label>
  7. <label class = "pahu helu ma ka laina" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" waiwai = "koho3" > 3   
  9. </label>

Koho

E hoʻohana i ka koho paʻamau a i ʻole multiple="multiple"e hōʻike i nā koho he nui i ka manawa hoʻokahi.


  1. <koho>
  2.   <koho> 1 </koho>
  3.   <koho> 2 </koho>
  4.   <koho> 3 </koho>
  5.   <koho> 4 </koho>
  6.   <koho> 5 </koho>
  7. </koho>
  8.  
  9. <koho lehulehu = "nui" > 
  10.   <koho> 1 </koho>
  11.   <koho> 2 </koho>
  12.   <koho> 3 </koho>
  13.   <koho> 4 </koho>
  14.   <koho> 5 </koho>
  15. </koho>

Hoʻonui i nā mana palapala

Hoʻohui ʻia ma luna o nā kaohi o ka polokalamu kele pūnaewele, loaʻa ʻo Bootstrap i nā mea pono ʻē aʻe.

Hoʻokomo mua ʻia a hoʻohui ʻia

Hoʻohui i nā kikokikona a i ʻole nā ​​pihi ma mua a ma hope paha o kekahi hoʻokomo kikokikona. E hoʻomanaʻo selectʻaʻole kākoʻo ʻia nā mea ma aneʻi.

Nā koho paʻamau

E kāʻei i ka .add-ona me ka inputme kekahi o nā papa ʻelua e hoʻomākaukau a hoʻopili i ke kikokikona i kahi hoʻokomo.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput" type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Huipuia

E hoʻohana i nā papa ʻelua a me ʻelua mau manawa o .add-onka hoʻomākaukau ʻana a hoʻohui i kahi hoʻokomo.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Nā pihi ma kahi o ke kikokikona

Ma kahi o kahi <span>kikokikona, e hoʻohana i ka .btna e hoʻopili i kahi pihi (a ʻelua paha) i kahi hoʻokomo.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <pāpā pihi = " btn" type = "button" > Hele! </ pihi>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Huli </button>  
  4.   <button class = "btn" type = "button" > Koho </button>  
  5. </div>

Pihi hāʻule iho

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  3.   <div class = "btn-hui" > 
  4.     <button class = "btn dropdown-toggle" data- toggle = "dropdown" >  
  5.       Hana
  6.       <span class = "caret" ></span> 
  7.     </ pihi>
  8.     <ul class = "dropdown-menu" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-hui" > 
  3.     <button class = "btn dropdown-toggle" data- toggle = "dropdown" >  
  4.       Hana
  5.       <span class = "caret" ></span> 
  6.     </ pihi>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-hui" > 
  3.     <button class = "btn dropdown-toggle" data- toggle = "dropdown" >  
  4.       Hana
  5.       <span class = "caret" ></span> 
  6.     </ pihi>
  7.     <ul class = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  12.   <div class = "btn-hui" > 
  13.     <button class = "btn dropdown-toggle" data- toggle = "dropdown" >  
  14.       Hana
  15.       <span class = "caret" ></span> 
  16.     </ pihi>
  17.     <ul class = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Nā hui hāʻule i hoʻokaʻawale ʻia

  1. <ʻano>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     < ʻano komo = "kikokikona" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     < ʻano komo = "kikokikona" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Palapala huli

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Huli </ pihi>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Huli </ pihi>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Manaʻo nui

E hoʻohana i nā papa nui pili e like .input-largeme kāu mau mea hoʻokomo i ka nui kolamu kolamu me ka hoʻohana ʻana i .span*nā papa.

Nā mea hoʻokomo pae papa

E hana i kekahi mea <input>a i ʻole <textarea>mea e like me ka mea pae poloka.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Ka nui pili

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Nā poʻo i luna!I nā mana e hiki mai ana, e hoʻololi mākou i ka hoʻohana ʻana i kēia mau papa hoʻokomo pili e hoʻohālikelike i kā mākou nui pihi. No ka laʻana, .input-largee hoʻonui i ka padding a me ka nui font o kahi hoʻokomo.

Ka nui ʻana o ka mānoanoa

E hoʻohana .span1i ka .span12no nā mea hoʻokomo i kūlike i ka nui like o nā kolamu mānoanoa.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <koho papa = "span1" > 
  5.   ...
  6. </koho>
  7. <koho papa = "span2" > 
  8.   ...
  9. </koho>
  10. <koho papa = "span3" > 
  11.   ...
  12. </koho>

No nā hoʻokomo mākia he nui i kēlā me kēia laina, e hoʻohana i ka .controls-rowpapa hoʻololi no ke kaʻawale kūpono . E lana ana ia i na mea hookomo e hoohiolo i ka hakahaka keokeo, e hoonoho i na palena kupono, a e holoi i ka lana.

  1. <div class = "nā mana" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "nā mana mana-laina" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Nā mea hoʻokomo hiki ʻole ke hoʻololi ʻia

Hōʻike i ka ʻikepili ma kahi ʻano hiki ʻole ke hoʻoponopono me ka hoʻohana ʻole ʻana i ka markup form maoli.

Kekahi waiwai maanei 
  1. <span class = "input-xlarge uneditable-input" > Kekahi waiwai maanei </span>

Hana i nā hana

E hoʻopau i kahi palapala me kahi hui o nā hana (nā pihi). Ke hoʻokomo ʻia i loko o kahi .form-actions, e hoʻokomo ʻokoʻa nā pihi i ka laina me nā mana palapala.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > mālama i nā loli </button>  
  3.   <pākuʻi type = "button" class = "btn" > Hoʻopau </ pihi>  
  4. </div>

He kikokikona kōkua

Kākoʻo pae laina a poloka no nā kikokikona kōkua e ʻike ʻia e pili ana i nā kaohi puka.

Kōkua inline

kikokikona kōkua inline 
  1. <input type = "text" ><span class = "help-inline" > Inline help text </span>

Kākoʻo kōkua

ʻO kahi poloka lōʻihi o nā kikokikona kōkua e haki i kahi laina hou a hiki ke hoʻonui ma mua o hoʻokahi laina. 
  1. <input type = "text" ><span class = "help-block" > He poloka lōʻihi o nā kikokikona kōkua e haki ana i kahi laina hou a hiki ke hoʻonui aku ma mua o hoʻokahi laina. </span>

Nā mokuʻāina hoʻomalu palapala

Hāʻawi i nā manaʻo manaʻo i nā mea hoʻohana a i ʻole nā ​​​​mea kipa me nā kūlana manaʻo maʻamau e pili ana i nā mana palapala a me nā lepili.

Manaʻo hoʻokomo

outlineWehe mākou i nā kaila paʻamau ma kekahi mau mana ʻano a kau i kahi box-shadowma kona wahi no :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ke nānā nei kēia ..." >

He kūpono ʻole nā ​​mea hoʻokomo

Nā hoʻokomo kāhua ma o ka polokalamu kele pūnaewele paʻamau me :invalid. E hōʻike i kahi type, e hoʻohui i ke requiredʻano inā ʻaʻole koho ke kahua, a (inā pili) e kuhikuhi apattern .

ʻAʻole loaʻa kēia i nā mana o Internet Explorer 7-9 no ka nele o ke kākoʻo no nā mea koho pseudo CSS.

  1. <input class = "span3" type = "email" pono >

Hoʻokomo ʻia nā mea hoʻokomo

Hoʻohui i ke disabledʻano ma kahi hoʻokomo e pale i ka hoʻokomo ʻana o ka mea hoʻohana a hoʻoulu i kahi hiʻohiʻona ʻokoʻa.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Hoʻopaʻa ʻia ka hoʻokomo ʻana ma ʻaneʻi..." hoʻopau ʻia >

Kūlana hōʻoia

Loaʻa i ka Bootstrap nā ʻano hōʻoia no ka hewa, ka ʻōlelo aʻo, ka ʻike, a me nā memo kūleʻa. No ka hoʻohana ʻana, hoʻohui i ka papa kūpono i ka puni .control-group.

Ua hewa paha kekahi mea
E ʻoluʻolu e hoʻoponopono i ka hewa
Lawe ʻia ka inoa hoʻohana
Woohoo! 
  1. <div class = "'ōlelo aʻo pūʻulu mana" > 
  2.   <label class = "control-label" for = "inputWarning" > Hoʻokomo me ka ʻōlelo aʻo </label>  
  3.   <div class = "nā mana" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Ua hewa paha kekahi mea </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "hewa pūʻulu mana" > 
  10.   <label class = "control-label" for = "inputError" > Hoʻokomo me ka hewa </label>  
  11.   <div class = "nā mana" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > E ʻoluʻolu e hoʻoponopono i ka hewa </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "ʻike pūʻulu mana" > 
  18.   <label class = "control-label" for = "inputInfo" > Hoʻokomo me ka ʻike </label>  
  19.   <div class = "nā mana" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Ua lawe ʻia ka inoa mea hoʻohana </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kūpono-hui holomua" > 
  26.   <label class = "control-label" for = "inputSuccess" > Hoʻokomo me ka holomua </label>  
  27.   <div class = "nā mana" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Nā pihi

Nā pihi paʻamau

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

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
btn btn-link E hoʻohaʻahaʻa i ka pihi ma ka hoʻohālike ʻana me he loulou ʻoiai e mālama ana i ke ʻano o ka pihi

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 pihi

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

  1. <p>
  2.   <pāpā pihi = " btn btn-large btn-primary" type = "button" > pihi nui </button>  
  3.   <pāpā pihi = " btn btn-large" type = "button" > Pihi nui </button>  
  4. </p>
  5. <p>
  6.   <Pōʻihi papa = "btn btn-primary" type = "button" > Pihi paʻamau </ pihi>  
  7.   <button class = "btn" type = "button" > Pihi paʻamau </button>  
  8. </p>
  9. <p>
  10.   <pāpā pihi = " btn btn-small btn-primary" type = "button" > Pākuʻi liʻiliʻi </button>  
  11.   <pāpā pihi = " btn btn-small" type = "button" > Pākuʻi liʻiliʻi </ pihi>  
  12. </p>
  13. <p>
  14.   <pāpā pihi = " btn btn-mini btn-primary" type = "button" > Pākuʻi liʻiliʻi </ pihi>  
  15.   <pāpā pihi = " btn btn-mini" type = "button" > Pākuʻi liʻiliʻi </ pihi>  
  16. </p>

E hana i nā pihi pae poloka—ʻo ia ka mea e lōʻihi i ka laula piha o kahi makua—ma ka hoʻohui ʻana i .btn-block.

  1. <pāpā pihi = " btn btn-large btn-block btn-primary" type = "button" > Block level pihi </button>  
  2. <pāpā pihi = " btn btn-nui btn-block" type = "button" > Pākuʻi pae pae </ pihi>

Mokuʻāina kīnā

E hana i nā pihi me ka hiki ʻole ke kaomi ma ka hoʻihoʻi ʻana iā 50%.

ʻElemu heleuma

Hoʻohui i ka .disabledpapa i nā <a>pihi.

loulou mua loulou 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > loulou kumu mua </a>  
  2. <a href = "#" class = "btn btn-nui disabled" > loulou </a>

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. Eia kekahi, no ka nani wale nō kēia papa; pono ʻoe e hoʻohana i ka JavaScript maʻamau e hoʻopau i nā loulou ma aneʻi.

ʻElemu pihi

Hoʻohui i ke disabledʻano i nā <button>pihi.

  1. < ʻano kī = "pākuʻi" papa = "btn btn-nui btn-kumu mua" disabled = "disabled" > Pākuʻi kumu </button>   
  2. < ʻano kī = "pākuʻi" papa = "btn btn-nui" pio > Pākuʻi </ pihi>

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. < pihi papa = "btn" type = "hoʻouna" > Pākuʻi </ pihi>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

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

Nā kiʻi

Hoʻohui i nā papa i kahi <img>mea e hoʻokalakala maʻalahi i nā kiʻi i kekahi papahana.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." papa = "img-poʻai" >  
  3. <img src = "..." papa = "img-polaroid" >

Nā poʻo i luna! .img-roundeda .img-circleʻaʻole hana ma IE7-8 no ka nele o border-radiuske kākoʻo.

Nā kiʻi e nā Glyphicons

Ikona glyphs

140 kiʻi ma ke ʻano sprite, loaʻa i ka hina hina (paʻamau) a me ke keʻokeʻo, hāʻawi ʻia e Glyphicons .

  • 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

Hoʻokohu ʻia ʻo Glyphicons

ʻAʻole i loaʻa ka Glyphicons Halflings no ka manuahi, akā ʻo kahi hoʻonohonoho ma waena o Bootstrap a me nā mea hana Glyphicons ua hiki i kēia me ke kumu kūʻai ʻole iā ʻoe ma ke ʻano he mea hoʻomohala. Ma ke ʻano he mahalo, ke noi aku nei mākou iā ʻoe e hoʻokomo i kahi loulou koho e hoʻi i Glyphicons i kēlā me kēia manawa.

Pehea e ho ohana

Pono nā kiʻi āpau i kahi <i>hōʻailona me kahi papa kūʻokoʻa, prefixed me icon-. No ka hoʻohana ʻana, e kau i kēia code ma nā wahi āpau:

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

Loaʻa nā kaila no nā kiʻi hoʻohuli (keʻokeʻo) i mākaukau me ka papa hoʻokahi. E hoʻokō pono mākou i kēia papa ma ka hover a me nā moku'āina no nā loulou nav a me nā loulou.

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

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.

Nā laʻana ikona

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.

Nā pihi

Puʻupuʻu pūʻulu ma kahi pahu hana pihi
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-hui" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Hoʻokuʻu i lalo i kahi hui pihi
Mea hoʻohana 
  1. <div class = "btn-hui" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Mea hoʻohana </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Hoʻoponopono </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Holoi </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Papa </a> </li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Hana i luna </a></li>  
  10.   </ul>
  11. </div>
Nui pihi
Hoku Hoku Hoku 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

Hoʻokele

  1. <ul class = "papa inoa nav" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Library </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Nā noi </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
  6. </ul>

Nā kahua puka

  1. <div class = "hui mana" > 
  2.   <label class = "control-label" for = "inputIcon" > Helu leka uila </label>  
  3.   <div class = "nā mana" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>