Base nga CSS

Dagiti batayan nga elemento ti HTML a naestilo ken napasayaat babaen dagiti mapalawa a klase.

Dagiti Paulo

Amin a paulo ti HTML, <h1>babaen <h6>ket magun-od.

h1. Paulo 1

h2. Paulo 2

h3. Paulo 3

h4. Paulo 4

h5. Paulo 5
h6. Paulo 6

Kopia ti bagi

Ti sangalubongan a default ti Bootstrap font-sizeket 14px , nga addaan iti line-heightti 20px . Mayaplikar daytoy iti <body>ken amin a parapo. Iti pay maipatinayon, dagiti <p>(parapo) ket makaawatda ti baba a margin ti kagudua ti line-height-da (10px babaen ti default).

Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lugan.

Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus. Donec ullamcorper nulla nga saan nga auctor nga fringilla. Duis mollis, est non commodo luctus, nisi erat nga porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla nga saan nga auctor nga fringilla.

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

<p> nga ... </p>

Kopia ti bagi ti lead

Pagbalinem a naisangsangayan ti maysa a parapo babaen ti pananginayonmo iti .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus ti dolor ti panagsubasta. Duis mollis, est saan a komodo a luctus.

<p klase = "panangidaulo" > ... </p> 

Naibangon iti Basbassit

Ti tipograpiko a sukog ket naibatay kadagiti dua a LESS a variable kadagiti variable.less : @baseFontSizeken @baseLineHeight. Ti umuna ket ti base font-size a nausar iti intero ken ti maikadua ket ti base line-height. Usarenmi dagita a variable ken sumagmamano a simple a matematika tapno mangparnuay kadagiti margin, padding, ken line-heights ti amin a kitami ken dadduma pay. Ipasayaat dagitoy ken makibagay ti Bootstrap.


Pannakaitalmeg

Usaren dagiti default nga emphasis tag ti HTML nga addaan kadagiti nalag-an nga estilo.

<small>

Para iti panangikkat iti panangipaganetget iti inline wenno bloke ti teksto, usaren ti bassit nga etiketa.

Daytoy a linia ti teksto ket nairanta a matrato a kas napino a letra.

<p> <small> Daytoy a linia ti teksto ket nairanta a matrato a kas napino a letra. </small> nga </p>
  

Naingel

Para iti panangipaganetget iti snippet ti teksto nga addaan iti nadagdagsen a font-weight.

Ti sumaganad a snippet ti teksto ket naiparang a kas nalukmeg a teksto .

<strong> naiparang a kas nalukmeg a teksto </strong>

Dagiti Italiko

Para iti panangipaganetget iti maysa a snippet ti teksto nga addaan iti italiko.

Ti sumaganad a snippet ti teksto ket naiparang a kas naitaliko a teksto .

<em> naiparang a kas naitaliko a teksto </em>

Ulo nga agpangato!Marikna a nawaya nga usaren <b>ken <i>iti HTML5. <b>ket nairanta a mangitag-ay kadagiti balikas wenno ragup ti sasao a saan a mangipaay iti kanayonan a kinapateg bayat <i>a kaaduanna ket para iti timek, teknikal a termino, kdpy.

Dagiti klase ti panagtunos

Nalaka nga i-realign ti teksto kadagiti paset nga addaan kadagiti klase ti panagtunos ti teksto.

Naitunos iti kannigid a teksto.

Naitunos iti sentro a teksto.

Kannawan a naitunos a teksto.

  1. <p class = "teksto-kannigid" > Kannigid a naitunos a teksto. </p>
  2. <p class = "text-center" > Naitunos ti tengnga a teksto. </p>
  3. <p class = "teksto-kannawan" > Kannawan a naitunos a teksto. </p>

Dagiti klase ti panangipaganetget

Ipakaammo ti kaipapanan babaen ti kolor babaen ti sumagmamano a klase ti utilidad ti panangipaganetget.

Fusce dapibus, tellus ac lunod a komodo, tortor mauris nibh.

Etiam porta sem malesuada nga agtagibalay nga euismod.

Donec ullamcorper nulla nga saan nga auctor nga fringilla.

Aenean nga eu leo ​​quam. Pellentesque nga arkos ti lacinia quam venenatis.

Duis mollis, est saan a komodo a luctus, nisi erat a porttitor a ligula.

  1. <p klase = "naulimek" > Fusce dapibus, tellus ac kursus a komodo, tortor mauris nibh. </p>
  2. <p klase = "teksto-pakdaar" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "teksto-biddut" > Donec ullamcorper nulla saan a metus auctor fringilla. </p>
  4. <p klase = "teksto-info" > Enean eu leo ​​quam. Pellentesque nga arkos ti lacinia quam venenatis. </p>
  5. <p klase = "teksto-balligi" > Duis mollis, est saan a komodo luktus, nisi erat porttitor ligula. </p>

Dagiti abbreviation

Estilo a pannakaipatungpal ti <abbr>elemento ti HTML para kadagiti abbreviation ken acronym tapno maipakita ti napalawa a bersion iti hover. Dagiti abbrevio nga addaan iti titleattribute ket addaan iti nalawag a tulnek a baba a beddeng ken ti kursor ti tulong iti panag-hover, a mangipaay ti kanayonan a konteksto iti panag-hover.

<abbr>

Para iti napalawa a teksto iti atiddog ​​a panag-hover ti maysa nga abbreviation, iraman ti titleattribute.

Ti maysa nga abbreviation ti sao nga attribute ket attr .

<abbr title = "kababalin" > attr </abbr> 

<abbr class="initialism">

Inayon .initialismiti abbreviation para iti basbassit bassit a font-size.

HTML ti kasayaatan a banag sipud idi naiwa a tinapay.

<abbr title = "Panagmarka ti HyperText" class = "inisialismo" > HTML </abbr>  

Dagiti Adres

Ipresentar ti impormasion a pakakontakan para iti kaasitgan nga inapo wenno ti intero a bagi ti trabaho.

<address>

Ipreserba ti panagpormat babaen ti panangipatingga kadagiti amin a linia iti <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890. Ti panagadal ti panagbiag ti tao
Buo a Nagan
[email protected]
  1. <address>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 nga <br>
  4. San Francisco, CA 94107 nga <br>
  5. <abbr titulo = "Telepono" > P: </abbr> (123) 456-7890
  6. </address>
  7.  
  8. <address>
  9. <strong> Buo a Nagan </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </address>

Dagiti sitas ti bloke

Para iti panangadaw kadagiti bloke ti linaon manipud iti sabali a taudan iti uneg ti dokumentom.

Default nga blockquote

Balkoten <blockquote>ti aniaman nga HTML kas quote. Para kadagiti diretso a sitas irekomendarmi ti <p>.

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

  1. <blockquote ti panag-block>
  2. <p> Lorem ipsum dolor agtugaw nga amet, consectetur adipiscing elit. Integer nga posuere erat a ante. </p>
  3. </blockquote ti panagsurat>

Blockquote dagiti pagpilian

Dagiti panagbalbaliw ti estilo ken linaon para kadagiti simple a panagduduma iti maysa a pagalagadan a blockquote.

Panagnagan iti maysa a gubuayan

Inayon ti <small>tag para iti panangilasin ti taudan. Balkoten ti nagan ti taudan nga obra iti <cite>.

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

Maysa a nalatak iti Source Title
  1. <blockquote ti panag-block>
  2. <p> Lorem ipsum dolor agtugaw nga amet, consectetur adipiscing elit. Integer nga posuere erat a ante. </p>
  3. <small> Maysa a nalatak <cite title = "Paulo ti Gubuayan" > Paulo ti Gubuayan </cite></small>
  4. </blockquote ti panagsurat>

Agsinnublat dagiti display

Usaren .pull-rightpara iti naitayab, kannawan a naitunos a blockquote.

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

Maysa a nalatak iti Source Title
  1. < klase ti blokequote = "guyod-a-kannigid" >
  2. ...
  3. </blockquote ti panagsurat>

Dagiti Listaan

Di naurnos

Listaan ​​dagiti banag a saan a nalawag a napateg ti urnos.

  • Lorem ipsum dolor agtugaw amet
  • Consectetur nga adipiscing nga elit
  • Integer nga molestie lorem iti masa
  • Facilisis iti pretium nisl nga aliquet
  • Nulla volutpat nga aliquam nga velit
    • Phasellus nga iaculis nga neque
    • Purus dagiti sodales nga ultricies
    • Vestibulum nga laoreet nga porttitor sem
    • Ac tristique nga libero nga volutpat ni
  • Faucibus porta nga lakos nga fringilla vel
  • Aenean agtugaw amet erat nunc
  • Eget nga porttitor nga lorem
  1. <ul> nga
  2. <li> ... </li> nga adda
  3. </ul>

Nabilin

Listaan ​​dagiti banag a ti urnos ket nalawag a napateg.

  1. Lorem ipsum dolor agtugaw amet
  2. Consectetur nga adipiscing nga elit
  3. Integer nga molestie lorem iti masa
  4. Facilisis iti pretium nisl nga aliquet
  5. Nulla volutpat nga aliquam nga velit
  6. Faucibus porta nga lakos nga fringilla vel
  7. Aenean agtugaw amet erat nunc
  8. Eget nga porttitor nga lorem
  1. <ol> nga
  2. <li> ... </li> nga adda
  3. </ol>

Saan nga estilo

Ikkaten ti default list-styleken kannigid a padding kadagiti banag ti listaan ​​(dagiti dagus nga ubbing laeng).

  • Lorem ipsum dolor agtugaw amet
  • Consectetur nga adipiscing nga elit
  • Integer nga molestie lorem iti masa
  • Facilisis iti pretium nisl nga aliquet
  • Nulla volutpat nga aliquam nga velit
    • Phasellus nga iaculis nga neque
    • Purus dagiti sodales nga ultricies
    • Vestibulum nga laoreet nga porttitor sem
    • Ac tristique nga libero nga volutpat ni
  • Faucibus porta nga lakos nga fringilla vel
  • Aenean agtugaw amet erat nunc
  • Eget nga porttitor nga lorem
  1. <ul klase = "saan nga estilo" >
  2. <li> ... </li> nga adda
  3. </ul>

Inline nga

Ikabil amin a banag ti listaan ​​iti maymaysa a linia nga addaan inline-blockken sumagmamano a nalag-an a padding.

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

Panangiladawan

Listaan ​​dagiti termino nga addaan kadagiti nainaig a panangiladawan kadagitoy.

Dagiti listaan ​​ti panangiladawan
Ti listaan ​​ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.
Euismod nga
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit nga saan nga mi porta gravida iti eget metus.
Malesuada nga porta
Etiam porta sem malesuada nga agtagibalay nga euismod.
  1. <dl> nga
  2. <dt> ... </dt> nga adda
  3. <dd> ... </dd> nga adda
  4. </dl>

Paisaad nga deskripsion

Mangaramid kadagiti termino ken deskripsion nga <dl>agpila nga agkakadua.

Dagiti listaan ​​ti panangiladawan
Ti listaan ​​ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.
Euismod nga
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit nga saan nga mi porta gravida iti eget metus.
Malesuada nga porta
Etiam porta sem malesuada nga agtagibalay nga euismod.
Felis euismod nga semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris kondimentum nibh, ut fermentum masa laeng agtugaw amet risus.
  1. <dl klase = "dl-paisaad" >
  2. <dt> ... </dt> nga adda
  3. <dd> ... </dd> nga adda
  4. </dl>

Ulo nga agpangato!Dagiti horizontal a listaan ​​ti panangiladawan ket mangputed kadagiti termino nga atiddog ​​unay tapno maibagay iti kannigid a panagtarimaan ti kolum text-overflow. Kadagiti akikid a viewport, agbaliwda iti default a naurnong a layout.

Inline nga

Balkoten dagiti inline a snippet ti kodigo babaen ti <code>.

Kas pagarigan, <section>rumbeng a mabalkot kas inline.
  1. Kas pagarigan , <kodigo> & lt ; section & gt ;</ code > ket rumbeng a maibalkot a kas inline .

Basic nga bloke

Usaren <pre>para iti adu a linia ti kodigo. Siguraduen a makalisi iti aniaman a bracket ti anggulo iti kodigo para iti umno a panagiparang.

<p>Pagarigan a teksto ditoy...</p>
  1. <pre> nga
  2. <p>Pagarigan a teksto ditoy...</p>
  3. </pre>

Ulo nga agpangato!Siguraduen nga agtalinaed ti kodigo iti uneg <pre>dagiti etiketa nga asideg iti kannigid agingga a mabalin; i-renderna amin a tab.

Mabalinmo a pagpilian nga inayon ti .pre-scrollableklase a mangikeddeng ti max-height iti 350px ken mangipaay ti y-axis scrollbar.

Dagiti default nga estilo

Para iti kangrunaan nga estilo—nalag-an a padding ken dagiti laeng horizontal divider—inayonmo ti base class .tableiti aniaman a <table>.

# Nagan Apelyido Nagan ti agar-aramat
1 nga Marka Otto ni Otto @mdo nga
2. 2 Jacob ni Jacob Thornton nga @nalukmeg
3. Larry ni Larry ti Tumatayab @twitter nga
  1. < klase ti lamisaan = "lamisaan" >
  2. ...
  3. </table>

Opsional a klase

Inayon ti aniaman kadagiti sumaganad a klase iti .tablebatayan a klase.

.table-striped

Inayon ti zebra-striping iti ania man a hilera ti lamisaan iti uneg ti <tbody>babaen ti :nth-childCSS selector (saan a magun-od iti IE7-8).

# Nagan Apelyido Nagan ti agar-aramat
1 nga Marka Otto ni Otto @mdo nga
2. 2 Jacob ni Jacob Thornton nga @nalukmeg
3. Larry ni Larry ti Tumatayab @twitter nga
  1. < klase ti lamisaan = "lamisaan nga garitgaritan" >
  2. ...
  3. </table>

.table-bordered

Inayon dagiti beddeng ken nagtimbukel a suli iti lamisaan.

# Nagan Apelyido Nagan ti agar-aramat
1 nga Marka Otto ni Otto @mdo nga
Marka Otto ni Otto @getbootstrap nga
2. 2 Jacob ni Jacob Thornton nga @nalukmeg
3. Larry ti Tumatayab @twitter nga
  1. < clase ti lamisaan = "lamisaan-nabeddengan" >
  2. ...
  3. </table>

.table-hover

Pagbalinen ti estado ti hover kadagiti hilera ti lamisaan iti uneg ti <tbody>.

# Nagan Apelyido Nagan ti agar-aramat
1 nga Marka Otto ni Otto @mdo nga
2. 2 Jacob ni Jacob Thornton nga @nalukmeg
3. Larry ti Tumatayab @twitter nga
  1. < klase ti lamisaan = "lamisaan-a-hover" >
  2. ...
  3. </table>

.table-condensed

Pagbalinenna dagiti lamisaan nga ad-adda a kompakto babaen ti panangputedna iti cell padding iti kagudua.

# Nagan Apelyido Nagan ti agar-aramat
1 nga Marka Otto ni Otto @mdo nga
2. 2 Jacob ni Jacob Thornton nga @nalukmeg
3. Larry ti Tumatayab @twitter nga
  1. < klase ti lamisaan = "lamisaan-napaababa" >
  2. ...
  3. </table>

Opsional a klase ti hilera

Usaren dagiti klase ti konteksto tapno mangkolor kadagiti hilera ti lamisaan.

Klase Panangiladawan
.success Ipamatmatna ti naballigi wenno positibo nga aramid.
.error Ipamatmatna ti napeggad wenno mabalin a negatibo nga aramid.
.warning Ipamatmatna ti pakdaar a mabalin a kasapulan ti atension.
.info Nausar a kas alternatibo kadagiti default nga estilo.
# Produkto Bayad nga Naala Estado
1 nga TB - Binulan nga 01/04/2012 nga aldaw Naaprubaran
2. 2 TB - Binulan nga 02/04/2012 nga aldaw Nagkedked
3. TB - Binulan nga 03/04/2012 nga aldaw Naisardeng biit
4. TB - Binulan nga 04/04/2012 nga aldaw Tawagan ti sumrek tapno makumpirmar
  1. ...
  2. < tr klase = "balligi" >
  3. <td> 1 < /td> nga
  4. <td>TB - Binulan</ td >
  5. <td> 01 / 04 / 2012 nga aldaw < /td>
  6. <td>Naaprobaran</ td >
  7. </ tr >
  8. ...

Nasuportaran ti panagmarka ti lamisaan

Listaan ​​dagiti nasuportaran nga elemento ti HTML ti lamisaan ken no kasano a rumbeng nga usaren dagitoy.

Nailaktip Panangiladawan
<table> Element ti panagbalkot para iti panangiparang ti datos iti pormat ti tabular
<thead> Elemento ti pagkargaan para kadagiti hilera ti ulo ti lamisaan ( <tr>) tapno mangimarka kadagiti adigi ti lamisaan
<tbody> Elemento ti pagkargaan para kadagiti hilera ti lamisaan ( <tr>) iti bagi ti lamisaan
<tr> Elemento ti pagkargaan para iti maysa a grupo dagiti selula ti lamisaan ( <td>wenno <th>) nga agparang iti maymaysa a linia
<td> Default a selula ti lamisaan
<th> Espesial a selula ti lamisaan para kadagiti etiketa ti kolum (wenno hilera, depende iti sakup ken pannakaikabil).
<caption> Panangdeskribir wenno pakagupgopan no ania ti iggem ti lamisaan, nangnangruna a makatulong kadagiti agbasbasa iti iskrin
  1. <lamisaan>
  2. <kapsion> ... </kapsion>
  3. <ulo>
  4. <tr> nga
  5. <th> ... </th> nga adda
  6. <th> ... </th> nga adda
  7. </tr>
  8. </tulo>
  9. <tibagi>
  10. <tr> nga
  11. <td> ... </td> nga adda
  12. <td> ... </td> nga adda
  13. </tr>
  14. </tbagi>
  15. </table>

Dagiti default nga estilo

Dagiti indibidual a kontrol ti porma ket umawatda ti estilo, ngem awan ti ania man a kasapulan a batayan a klase iti <form>wenno dagiti dadakkel a panagbalbaliw iti marka. Agresulta kadagiti naurnong, kannigid-a-naitunos nga etiketa iti rabaw dagiti kontrol ti porma.

Tanda Pagarigan ti teksto ti tulong iti block-level ditoy.
  1. <porma>
  2. <set ti tay-ak>
  3. <leyenda> Sarita </leyenda>
  4. <label> Nagan ti etiketa </label>
  5. <input type = "teksto" placeholder = "Isurat ti maysa a banag..." >
  6. <span class = "help-block" > Pagarigan ti teksto ti tulong iti lebel ti bloke ditoy. </span>
  7. < klase ti etiketa = "kahon ti tsek" >
  8. <input type = "kahon ti tsek" > Kitaennak
  9. </label>
  10. <button type = "ipatuloden" klase = "btn" > Isumite </button>
  11. </fieldset ti tay-ak>
  12. </porma>

Dagiti opsional a layout

Nairaman iti Bootstrap ti tallo nga opsional a layout ti porma para kadagiti gagangay a kaso ti panagusar.

Pormas ti panagsapul

Inayon .form-searchiti porma ken .search-queryiti <input>para iti ekstra-natimbukel a panagserrek ti teksto.

  1. < klase ti porma = "porma-a-panagbiruk" >
  2. <input type = "teksto" klase = "input-medium a panagsaludsod-a-panagsaludsod" >
  3. <button type = "ipatulod" klase = "btn" > Agbiruk </button>
  4. </porma>

Inline nga porma

Inayon .form-inlinepara kadagiti kannigid-a-naitunos nga etiketa ken dagiti inline-block a kontrol para iti kompakto a layout.

  1. < klase ti porma = "porma-inline" >
  2. < tipo ti panagserrek = "teksto" klase = "panagserrek-bassit" a pagtengngel ti lugar = "Email" >
  3. <input type = "password" class = "input-bassit" nga lugar = "Password" >
  4. < klase ti etiketa = "kahon ti tsek" >
  5. <input type = "checkbox" > Laglagipennak
  6. </label>
  7. <button type = "ipatulod" klase = "btn" > Agpirma </button>
  8. </porma>

Paisaad a porma

Kannawan nga i-align dagiti etiketa ken i-flow dagitoy iti kannigid tapno agparang dagitoy iti isu met laeng a linia a kas kadagiti kontrol. Kasapulan ti kaaduan a panagbalbaliw ti marka manipud iti default a porma:

  • Inayon .form-horizontaliti porma
  • Balkoten dagiti etiketa ken kontrol iti.control-group
  • Inayon .control-labeliti etiketa
  • Balkoten ti aniaman a nainaig a kontrol .controlspara iti umno a panagtunos
  1. < klase ti porma = "porma-paisaad" >
  2. <div klase = "grupo-a-kontrol" >
  3. <label class = "kontrol-etiketa" para iti = "inputEmail" > Email </label>
  4. <div klase = "dagiti kontrol" >
  5. < tipo ti panagserrek = "teksto" id = "Email ti panagserrek" ti lugar = "Email" >
  6. </div>
  7. </div>
  8. <div klase = "grupo-a-kontrol" >
  9. <label class = "kontrol-etiketa" para iti = "inputPassword" > Kontrasenias </label>
  10. <div klase = "dagiti kontrol" >
  11. < tipo ti panagserrek = "kontrasenias" id = "Password ti panagserrek" placeholder = "Kontrasenias" >
  12. </div>
  13. </div>
  14. <div klase = "grupo-a-kontrol" >
  15. <div klase = "dagiti kontrol" >
  16. < klase ti etiketa = "kahon ti tsek" >
  17. <input type = "checkbox" > Laglagipennak
  18. </label>
  19. <button type = "ipatulod" klase = "btn" > Agpirma </button>
  20. </div>
  21. </div>
  22. </porma>

Nasuportaran dagiti kontrol ti porma

Dagiti pagarigan dagiti pagalagadan a kontrol ti porma a nasuportaran iti maysa a pagarigan a layout ti porma.

Dagiti Input

Kaaduan a gagangay a panangtengngel ti porma, dagiti tay-ak ti panagserrek a naibatay iti teksto. Iramanna ti suporta para kadagiti amin a kita ti HTML5: teksto, password, oras ti petsa, oras ti petsa-lokal, petsa, bulan, oras, lawas, numero, email, url, panagbiruk, tel, ken kolor.

Kasapulan ti panagusar iti naikeddeng typeiti amin a tiempo.

  1. < tipo ti panagserrek = "teksto" placeholder = "Panagserrek ti teksto" >

Lugar ti Teksto

Kontrol ti porma a mangsuporta iti adu a linia ti teksto. Baliwan ti rowsattribute no kasapulan.

  1. <dagiti hilera ti lugar ti teksto = "3" ></lugar ti teksto>

Dagiti checkbox ken radio

Dagiti kahon ti tsek ket para iti panagpili ti maysa wenno sumagmamano a pagpilian iti maysa a listaan ​​bayat a dagiti radio ket para iti panagpili ti maysa a pagpilian manipud iti adu.

Default (naurnong) .


  1. < klase ti etiketa = "kahon ti tsek" >
  2. < tipo ti input = "kahon ti tsek" pateg = "" >
  3. Ti umuna a pagpilian ket daytoy ken dayta—siguraduenyo nga iraman no apay a nagsayaat dayta
  4. </label>
  5.  
  6. < klase ti etiketa = "radio" >
  7. <input type = "radio" name = "dagiti pagpilianRadio" id = "dagiti pagpilianRadio1" pateg = "pagpilian1" a nasukimaten >
  8. Ti umuna a pagpilian ket daytoy ken dayta—siguraduenyo nga iraman no apay a nagsayaat dayta
  9. </label>
  10. < klase ti etiketa = "radio" >
  11. < tipo ti input = "radio" nagan = "dagiti pagpilianRadio" id = "dagiti pagpilianRadio2" pateg = "pagpilian2" >
  12. Ti pagpilian dua ket mabalin a sabali ken ti panangpili iti dayta ket mangikkat iti pagpilian iti maysa
  13. </label>

Inline dagiti kahon ti tsek

Inayon ti .inlineklase iti serye dagiti checkbox wenno radio para kadagiti kontrol agparang iti isu met laeng a linia.

  1. < klase ti etiketa = "kahon ti tsek iti inline" >
  2. < tipo ti input = "kahon ti tsek" id = "inlineCheckbox1" pateg = "pagpilian1" > 1
  3. </label>
  4. < klase ti etiketa = "kahon ti tsek iti inline" >
  5. < tipo ti input = "kahon ti tsek" id = "inlineCheckbox2" pateg = "pagpilian2" > 2
  6. </label>
  7. < klase ti etiketa = "kahon ti tsek iti inline" >
  8. < tipo ti input = "kahon ti tsek" id = "inlineCheckbox3" pateg = "pagpilian3" > 3
  9. </label>

Pilien ti

Usaren ti default a pagpilian wenno ikeddeng ti a multiple="multiple"tapno maminsan nga ipakita ti adu a pagpilian.


  1. <pilien>
  2. <pagpilian> 1 </pagpipilian>
  3. <pagpilian> 2 </pagpipilian>
  4. <pagpilian> 3 </pagpipilian>
  5. <pagpilian> 4 </pagpipilian>
  6. <pagpilian> 5 </pagpipilian>
  7. </pilien ti>
  8.  
  9. <pilien ti adu = "adu" >
  10. <pagpilian> 1 </pagpipilian>
  11. <pagpilian> 2 </pagpipilian>
  12. <pagpilian> 3 </pagpipilian>
  13. <pagpilian> 4 </pagpipilian>
  14. <pagpilian> 5 </pagpipilian>
  15. </pilien ti>

Panangpalawa kadagiti kontrol ti porma

Iti pananginayon iti rabaw dagiti addan a kontrol ti browser, ti Bootstrap ket mangiraman kadagiti dadduma pay a makatulong a paset ti porma.

Nasaksakbay ken naikapet nga inputs

Manginayon ti teksto wenno buton sakbay wenno kalpasan ti aniaman a teksto-based input. Do note nga dagiti selectelemento ket saan a nasuportaran ditoy.

Dagiti default a pagpilian

Balkoten ti an .add-onken an inputiti maysa kadagiti dua a klase tapno mai-prepend wenno mainayon ti teksto iti maysa nga input.

@

.00 nga
  1. <div klase = "panangserrek-a-prepend" >
  2. <span klase = "nainayon" > @ </span>
  3. < klase ti panagserrek = "span2" id = "prependedInput" a kita = "teksto" ti lugar = "Nagan ti agar-aramat" >
  4. </div>
  5. <div klase = "input-i-append" >
  6. < klase ti input = "span2" id = "naikapet ngaInput" tipo = "teksto" >
  7. <span klase = "nainayon" > .00 </span>
  8. </div>

Nagtipon

Usaren ti agpada a klase ken dua nga instansia ti .add-ontapno prepend ken i-append ti maysa nga input.

$ nga .00 nga
  1. <div class = "panangserrek-prepend input-inayon" >
  2. <span klase = "nainayon" > $ </span>
  3. < klase ti panagserrek = "span2" id = "naikapetNaidatag nga Input" tipo = "teksto" >
  4. <span klase = "nainayon" > .00 </span>
  5. </div>

Butones imbes a teksto

Imbes nga a <span>with text, usaren ti a .btntapno maikapet ti maysa a buton (wenno dua) iti maysa nga input.

  1. <div klase = "input-i-append" >
  2. < klase ti panagserrek = "span2" id = "naikapet a Buton ti Input" tipo = "teksto" >
  3. < klase ti buton = "btn" tipo = "buton" > Mapan! </button> nga
  4. </div>
  1. <div klase = "input-i-append" >
  2. < klase ti panagserrek = "span2" id = "naikapet a Butones ti Input" tipo = "teksto" >
  3. <buton klase = "btn" tipo = "buton" > Agbirok </button>
  4. < klase ti buton = "btn" tipo = "buton" > Dagiti Pagpilian </button>
  5. </div>

Dagiti dropdown ti buton

  1. <div klase = "input-i-append" >
  2. < klase ti panagserrek = "span2" id = "naikapet aDropdownButton" tipo = "teksto" >
  3. <div klase = "btn-grupo" >
  4. < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >
  5. Aksion
  6. <span klase = "caret" </span>
  7. </button> nga
  8. <ul klase = "nababa-a-menu" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div klase = "panangserrek-a-prepend" >
  2. <div klase = "btn-grupo" >
  3. < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >
  4. Aksion
  5. <span klase = "caret" </span>
  6. </button> nga
  7. <ul klase = "nababa-a-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. < klase ti panagserrek = "span2" id = "nasaksakbay aDropdownButton" tipo = "teksto" >
  12. </div>
  1. <div class = "panangserrek-prepend input-inayon" >
  2. <div klase = "btn-grupo" >
  3. < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >
  4. Aksion
  5. <span klase = "caret" </span>
  6. </button> nga
  7. <ul klase = "nababa-a-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. < klase ti panagserrek = "span2" id = "naikapetNaisaganaDropdownButton" tipo = "teksto" >
  12. <div klase = "btn-grupo" >
  13. < klase ti buton = "btn dropdown-toggle" panagbalbaliw -datos = "pababa" >
  14. Aksion
  15. <span klase = "caret" </span>
  16. </button> nga
  17. <ul klase = "nababa-a-menu" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Nabingaybingay dagiti dropdown a grupo

  1. <porma>
  2. <div klase = "panangserrek-a-prepend" >
  3. <div klase = "btn-grupo" > ... </div>
  4. < tipo ti input = "teksto" >
  5. </div>
  6. <div klase = "input-i-append" >
  7. < tipo ti input = "teksto" >
  8. <div klase = "btn-grupo" > ... </div>
  9. </div>
  10. </porma>

Pormas ti panagsapul

  1. < klase ti porma = "porma-a-panagbiruk" >
  2. <div klase = "input-i-append" >
  3. < tipo ti input = "teksto" klase = "span2 a panagsapul-a-saludsod" >
  4. <button type = "ipatulod" klase = "btn" > Agbiruk </button>
  5. </div>
  6. <div klase = "panangserrek-a-prepend" >
  7. <button type = "ipatulod" klase = "btn" > Agbiruk </button>
  8. < tipo ti input = "teksto" klase = "span2 a panagsapul-a-saludsod" >
  9. </div>
  10. </porma>

Kontrolado ti panagdakkel

Usaren dagiti relatibo a klase ti panagdakkel a kas .input-largewenno maipada dagiti inputmo kadagiti kadakkel ti adigi ti grid babaen ti panagusar kadagiti .span*klase.

Dagiti input ti lebel ti bloke

Aramiden ti ania man <input>wenno <textarea>elemento nga agtignay a kas ti elemento ti lebel ti bloke.

  1. < klase ti iseserrek = "nga-angin-a-blok-ti-input" a kita = "teksto" a pagsaadan ti lugar = ".nga-angin-a-blok-a-pannakaserrek" >

Relatibo a panagdakkel

  1. < klase ti input = "input-mini" a kita = "teksto" a pagikabilan ti lugar = ".input-mini" >
  2. < klase ti input = "input-bassit" tipo = "teksto" placeholder = ".input-bassit" >
  3. < klase ti panagserrek = "panagserrek-a-medium" tipo = "teksto" a pagtengngel ti lugar = ".input-medium" >
  4. < klase ti iseserrek = "dakkel ti iseserrek" tipo = "teksto" placeholder = ".dakkel ti iseserrek" >
  5. < klase ti input = "input-xlarge" tipo = "teksto" placeholder = ".input-xlarge" >
  6. < klase ti input = "input-xxlarge" tipo = "teksto" placeholder = ".input-xxlarge" >

Ulo nga agpangato!Kadagiti masakbayan a bersion, baliwanmi ti panagusar kadagitoy a relatibo a klase ti panagserrek tapno maipada kadagiti kadakkel ti butonmi. Kas pagarigan, .input-largepaaduenna ti padding ken font-size ti maysa nga input.

Panagdakkel ti grid

Usaren .span1ti to .span12para kadagiti input a maipada kadagiti agpapada a kadakkel dagiti adigi ti grid.

  1. < klase ti panagserrek = "span1" a kita = "teksto" a pagsaadan = " .span1 " >
  2. < klase ti panagserrek = "span2" a kita = "teksto" a pagsaadan = " .span2 " >
  3. < klase ti panagserrek = "span3" a kita = "teksto" a pagsaadan = " .span3 " >
  4. <pilien ti klase = "span1" >
  5. ...
  6. </pilien ti>
  7. <pilien ti klase = "span2" >
  8. ...
  9. </pilien ti>
  10. <pilien ti klase = "span3" >
  11. ...
  12. </pilien ti>

Para kadagiti adu a grid input iti tunggal maysa a linia, usaren ti .controls-rowklase ti mangbalbaliw para iti umno nga espasyo . Daytoy ket agtaytayab kadagiti input tapno ag-collapse ti white-space, mangikeddeng kadagiti umno a margin, ken mangikkat ti float.

  1. <div klase = "dagiti kontrol" >
  2. < klase ti panagserrek = "span5" a kita = "teksto" a pagsaadan = " .span5 " >
  3. </div>
  4. <div class = "dagiti kontrol dagiti kontrol-hilera" >
  5. < klase ti panagserrek = "span4" a kita = "teksto" a pagtakderan = " .span4 " >
  6. < klase ti panagserrek = "span1" a kita = "teksto" a pagsaadan = " .span1 " >
  7. </div>
  8. ...

Dagiti di ma-edit nga input

Ipresentar ti datos iti porma a saan a ma-edit no saan nga agusar ti aktual a marka ti porma.

Dadduma ti mangipateg ditoy
  1. <span class = "input-xlarge uneditable-input" > Sumagmamano a pateg ditoy </span>

Pormaen dagiti tignay

Pagpatinggaen ti maysa a porma babaen ti maysa a grupo dagiti tignay (buttons). No maikabil iti uneg ti .form-actions, dagiti buton ket automatiko nga ag-indent tapno aglinya kadagiti kontrol ti porma.

  1. <div class = "porma-dagiti tignay" >
  2. <button type = "ipatulod" class = "btn btn-primary" > Idulin dagiti panagbalbaliw </button>
  3. < tipo ti buton = "buton" klase = "btn" > Kanselaen </button>
  4. </div>

Teksto ti tulong

Inline ken suporta ti lebel ti bloke para iti teksto ti tulong nga agparang iti aglawlaw dagiti kontrol ti porma.

Tulong iti inline

Teksto ti tulong iti inline
  1. <input type = "teksto" ><span class = "tulong-inline" > Teksto ti tulong iti uneg ti linia </span>

I-block ti tulong

At-atiddog ​​a bloke ti teksto ti tulong a mangburak iti baro a linia ken mabalin nga agsaknap iti labes ti maysa a linia.
  1. <input type = "text" ><span class = "help-block" > Ti at-atiddog ​​a bloke ti teksto ti tulong a mangburak iti baro a linia ken mabalin nga agsaknap iti labes ti maysa a linia. </span>

Porma dagiti estado ti panangkontrol

Mangted ti feedback kadagiti agar-aramat wenno bisita nga addaan kadagiti batayan nga estado ti feedback kadagiti kontrol ti porma ken dagiti etiketa.

I-put ti pokus

Ikkatenmi dagiti default outlinenga estilo kadagiti sumagmamano a kontrol ti porma ken iyaplikarmi ti box-shadowa iti lugarna para iti :focus.

  1. <input class = "input-xlarge" id = "naipamaysaInput" type = "teksto" pateg = "Daytoy ket naipamaysa..." >

Di umiso nga input

Dagiti panagserrek ti estilo babaen ti default a panagusar ti browser nga addaan iti :invalid. Ibaga ti a type, inayon ti requiredattribute no ti tay-ak ket saan a pagpilian, ken (no maipakat) ikeddeng ti maysa a pattern.

Daytoy ket saan a magun-od kadagiti bersion ti Internet Explorer 7-9 gapu ti kaawan ti suporta para kadagiti CSS a pseudo a managpili.

  1. < klase ti input = "span3" a kita = " kasapulan ti email" >

Dagiti baldado nga input

Inayon ti disabledattribute iti maysa nga input tapno malapdan ti panagserrek ti agar-aramat ken mangtignay ti naiduma bassit a langa.

  1. <input class = "input-xlarge" id = "disabledInput" type = "teksto" placeholder = "Nabaldado ti panagserrek ditoy..." nabaldado >

Kuna ti panangipaneknek

Ti Bootstrap ket mangiraman kadagiti estilo ti panangipaneknek para kadagiti mensahe ti biddut, pakdaar, impormasion, ken balligi. Tapno mausar, inayon ti maitutop a klase iti aglawlaw .control-group.

Mabalin nga adda nagbiddut
Pangngaasiyo ta ilintegyo ti biddut
Naala ti nagan ti agar-aramat
Woohoo nga!
  1. <div class = "pakdaar ti grupo-ti-kontrol" >
  2. <label class = "kontrol-etiketa" para iti = "inputWarning" > Iserrek nga addaan pakdaar </label>
  3. <div klase = "dagiti kontrol" >
  4. < tipo ti input = "teksto" id = "Pakdaar ti input" >
  5. <span class = "help-inline" > Mabalin nga adda nagbiddut </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "biddut ti kontrol-grupo" >
  10. <label class = "kontrol-etiketa" para iti = "inputError" > Iserrek nga addaan iti biddut </label>
  11. <div klase = "dagiti kontrol" >
  12. < tipo ti panagserrek = "teksto" id = "Biddut ti panagserrek" >
  13. <span class = "help-inline" > Pangngaasi nga ilinteg ti biddut </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "ipakaammo ti kontrol-grupo" >
  18. <label class = "kontrol-etiketa" para iti = "inputInfo" > Iserrek nga addaan iti impormasion </label>
  19. <div klase = "dagiti kontrol" >
  20. < tipo ti panagserrek = "teksto" id = "Impormasion ti panagserrek" >
  21. <span class = "help-inline" > Ti nagan ti agar-aramat ket naaladan </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "balligi ti kontrol-grupo" >
  26. <label class = "kontrol-etiketa" para iti = "inputSuccess" > Iserrek nga addaan balligi </label>
  27. <div klase = "dagiti kontrol" >
  28. < tipo ti panagserrek = "teksto" id = "Bballigi ti panagserrek" >
  29. <span class = "tulong-inline" > Woohoo! </span>
  30. </div>
  31. </div>

Dagiti default a buton

Dagiti estilo ti buton ket mabalin a mayaplikar iti ania man nga addaan ti .btnklase a naipakat. Nupay kasta, kadawyan a kayatmo nga iyaplikar dagitoy iti laeng <a>ken <button>dagiti elemento para iti kasayaatan a panagiparang.

Buton klase="" Panangiladawan
btn Standard nga abuabu nga buton nga may gradient
btn btn-primary Mangipaay ti ekstra a makita a dagsen ken mangilasin ti kangrunaan nga aramid iti maysa a grupo dagiti buton
btn btn-info Nausar a kas alternatibo kadagiti default nga estilo
btn btn-success Ipamatmatna ti naballigi wenno positibo nga aramid
btn btn-warning Ipamatmatna a rumbeng a maaramid ti panagannad iti daytoy nga aramid
btn btn-danger Ipamatmatna ti napeggad wenno mabalin a negatibo nga aramid
btn btn-inverse Agsinnublat a natayengteng nga abuabu a buton, saan a naigalut iti semantiko nga aramid wenno panagusar
btn btn-link Ipaganetgetmo unay ti maysa a buton babaen ti panangaramidmo iti dayta a kasla silpo bayat a taginayonem ti kababalin ti buton

Krus ti panagtunos ti browser

Ti IE9 ket saan a mang-crop kadagiti background gradient kadagiti nagtimbukel a suli, isu nga ikkatenmi daytoy. Mainaig, ti IE9 ket mang-janify kadagiti baldado buttonnga elemento, a mangiparang ti teksto nga abuabu nga addaan iti naalas a teksto-anniniwan a ditay mabalin nga ilinteg.

Dagiti kadakkel ti buton

Magarbo a dakdakkel wenno basbassit a butones? Inayon ti .btn-large, .btn-small, wenno .btn-minipara kadagiti kanayonan a kadakkel.

  1. <p> nga
  2. <button class = "btn btn-dakkel a btn-pangruna" type = "button" > Dakkel a buton </button>
  3. <button class = "btn btn-dakkel" tipo = "buton" > Dakkel a buton </button>
  4. </p>
  5. <p> nga
  6. < klase ti buton = "btn btn-primary" tipo = "buton" > Buton ti kasisigud </button>
  7. <buton klase = "btn" tipo = "buton" > Buton ti kasisigud </button>
  8. </p>
  9. <p> nga
  10. <buton klase = "btn btn-bassit a btn-pangruna" tipo = "buton" > Bassit a buton </button>
  11. <buton klase = "btn btn-bassit" tipo = "buton" > Bassit a buton </button>
  12. </p>
  13. <p> nga
  14. < klase ti buton = "btn btn-mini btn-pangruna" tipo = "buton" > Mini buton </buton>
  15. < klase ti buton = "btn btn-mini" tipo = "buton" > Mini buton </buton>
  16. </p>

Mangaramid kadagiti buton ti block level—dagidiay mangsaklaw iti naan-anay a kalawa ti maysa a nagannak— babaen ti pananginayon iti .btn-block.

  1. <buton klase = "btn btn-dakkel a btn-blok btn-pangruna" tipo = "buton" > Buton ti lebel ti bloke </button>
  2. <button class = "btn btn-dakkel a btn-block" tipo = "button" > Buton ti lebel ti bloke </button>

Kasasaad ti baldado

Pagbalinen a kasla saan a mai-click dagiti buton babaen ti panangikusna kadakuada iti 50%.

Angkla nga elemento

Inayon ti .disabledklase kadagiti <a>buton.

Panguna a silpo Inaig

  1. <a href = "#" class = "btn btn-dakkel a btn-pangruna a nabaldado" > Panguna a silpo </a>
  2. <a href = "#" klase = "btn btn-dakkel a nabalbaliwan" > Silpo </a>

Ulo nga agpangato!Usarenmi a .disabledkas maysa a klase ti utilidad ditoy, a kapada ti gagangay a .activeklase, isu nga awan ti kasapulan a pangrugian. Kasta met, daytoy a klase ket para laeng iti estetika; masapul nga usarem ti kostumbre a JavaScript tapno mapasardeng dagiti silpo ditoy.

Elemento ti buton

Inayon ti disabledattribute kadagiti <button>buton.

  1. <button type = "button" class = "btn btn-dakkel a btn-pangruna a nabalbaliwan" nabalbaliwan = "nabaldado" > Panguna a buton </button>
  2. < kita ti buton = "buton" klase = "btn btn-dakkel" nabaldado > Buton </buton>

Maysa a klase, adu a tag

Usaren ti .btnklase iti maysa a <a>, <button>, wenno <input>elemento.

Inaig
  1. <a klase = "btn" href = "" > Silpo </a>
  2. <buton klase = "btn" tipo = "ipatulod" > Buton </buton>
  3. < klase ti panagserrek = "btn" a kita = "buton" a pateg = "Panagserrek" >
  4. < klase ti panagserrek = "btn" tipo = "ipatuloden" pateg = "Isubmitir" >

Kas ti kasayaatan nga aramid, padasem nga ipada ti elemento para iti kontekstomo tapno masigurado ti panagtunos ti panagiparang ti krus-browser. No addaanka iti input, usarem ti <input type="submit">para iti butonmo.

Inayon dagiti klase iti maysa nga <img>elemento tapno nalaka nga estilo dagiti ladawan iti ania man a proyekto.

140x140 nga 140x140 nga 140x140 nga
  1. <img src = "..." klase = "img-natimbukel" >
  2. <img src = "..." klase = "img-sirkulo" >
  3. <img src = "..." klase = "img-polaroid" >

Ulo nga agpangato! .img-roundedken .img-circlesaan nga agtrabaho iti IE7-8 gapu iti kaawan ti border-radiussuporta.

Dagiti glifo nga ikono

140 nga ikono iti porma ti sprite, a magun-od iti natayengteng nga abuabu (default) ken puraw, nga inted babaen ti Glyphicons .

  • icon-sarming nga
  • ikono-musika
  • icon-panagsapul
  • icon-sobre nga
  • icon-puso nga
  • icon-bituen
  • icon-bituen-empty
  • icon-nga agus-usar
  • ikono-pelikula
  • icon-maika-dakkel
  • icon-th
  • icon-ti-listaan
  • icon-ok nga
  • icon-ikkaten
  • ikono-ti-panag-zoom
  • ikono-a-panag-zoom-out
  • icon-off nga
  • ikono-senyales
  • icon-cog nga
  • icon-basuraan
  • icon-pagtaengan
  • icon-file nga
  • icon-panawen
  • ikono-dalan
  • ikono-i-download-alt
  • icon-i-download
  • icon-i-upload
  • ikono-inbox
  • icon-play-a-sirkulo
  • icon-uliten
  • ikono-pabaro
  • ikono-listaan-alt
  • ikono-kandado
  • icon-bandera nga
  • dagiti ikono-headphone
  • icon-tomo-a-naiddep
  • icon-tomo-nga-agpababa
  • ikono-tomo-nga-up
  • ikono-qrcode nga
  • ikono-barcode nga
  • ikono-ti-tag
  • dagiti icon-tag
  • icon-libro
  • icon-marka ti libro
  • ikono-i-print
  • ikono-kamera
  • ikono-a-letra
  • icon-bold nga
  • ikono-italiko nga
  • ikono-teksto-kangato
  • ikono-teksto-kalawa
  • ikono-agtunos-kannigid
  • icon-align-a-sentro
  • ikono-agtunos-kannigid
  • icon-align-ikalintegan
  • ikono-listaan
  • ikono-indent-kannigid
  • ikono-indent-kannigid
  • icon-rupa-panawen-video
  • icon-ladawan
  • icon-lapis nga
  • ikono-mapa-marker
  • ikono-i-adjust
  • icon-tint nga
  • ikono-urnosen
  • ikono-ibinglay
  • ikono-sukimat
  • ikono-iyakar
  • icon-addang-nga agpaatras
  • icon-napartak-nga agpaatras
  • icon-nga agpalikud
  • icon-play nga
  • icon-pause ti panagsardeng
  • ikono-panagsardeng
  • icon-agpasango
  • icon-napartak-nga-agpasango
  • icon-addang-nga-agpasango
  • ikono-i-eject
  • ikono-chevron-kannigid
  • ikono-chevron-kannigid
  • icon-plus-a-pagilasinan
  • icon-minus-a-pagilasinan
  • icon-ikkaten-a-pagilasinan
  • icon-ok-a-pagilasinan
  • icon-saludsod-a-pagilasinan
  • icon-info-a-pagilasinan
  • ikono-i-screenshot
  • icon-ikkaten-ti-sirkulo
  • ikono-ok-sirkulo nga
  • ikono-ban-a-sirkulo
  • icon-pana-kannigid
  • icon-pana-kannigid
  • icon-pana-nga-nga-ngato
  • icon-pana-nga-pababa
  • ikono-ibinglay-alt
  • icon-a-padakkel-a-napno
  • icon-baliwan ti kadakkel-bassit
  • icon-plus nga
  • ikono-minus nga
  • icon-asterisko nga
  • icon-pag-exclamation-a-pagilasinan
  • icon-regalo nga
  • icon-bulong nga
  • icon-apuy nga
  • icon-mata-a-luktan
  • icon-mata-a-asideg
  • icon-pakdaar-a-pagilasinan
  • icon-plano nga
  • ikono-kalendario
  • icon-random nga
  • ikono-komento
  • ikono-imán nga
  • ikono-chevron-nga-nga-up
  • ikono-chevron-nga agpababa
  • ikono-ti-retweet
  • icon-kariton ti panaggatang
  • ikono-ti-folder-a-serraan
  • icon-folder-a-luktan
  • ikono-baliwan ti kadakkel-a-bertikal
  • ikono-baliwan ti kadakkel-paisaad
  • ikono-hdd nga
  • ikono-bullhorn nga
  • ikono-kampana
  • icon-sertipiko nga
  • icon-a-dama nga agpangato
  • icon-a-dama nga agpababa
  • icon-ima-kannawan
  • icon-ima-kannigid
  • icon-i-ima-nga-up
  • icon-ima-nga-ibaba
  • icon-sirkulo-pana-kannawan
  • icon-sirkulo-pana-kannigid
  • icon-sirkulo-pana-nga-nga-ngato
  • icon-sirkulo-pana-nga-agpababa
  • ikono-globo nga
  • icon-lave nga
  • icon-dagiti trabaho
  • icon-a pagsala
  • icon-malettina nga
  • icon-a naan-anay nga iskrin

Glyphicons nga atribusion

Dagiti Glyphicons Halflings ket gagangay a saan a magun-od a libre, ngem ti maysa nga urnos iti nagbaetan ti Bootstrap ken dagiti agparpartuat ti Glyphicons ket nangaramid daytoy a posible nga awan ti gastos kenka a kas dagiti agparparang-ay. Kas panagyaman, kiddawenmi nga iramanmo ti opsional a silpo nga agsubli iti Glyphicons kaanoman a praktikal.


No kasano nga usaren

Amin nga ikono ket agkasapulan ti <i>etiketa nga addaan iti naisangayan a klase, a nasaksakbay iti icon-. Tapno mausar, ikabilmo ti sumaganad a kodigo iti dandani sadinoman:

  1. <i klase = "ikono-panagbiruk" </i>

Adda met dagiti estilo a magun-odan para kadagiti nabaliktad (puraw) nga ikono, a naaramid a nakasagana nga addaan iti maysa nga ekstra a klase. Espesipiko nga ipatungpalmi daytoy a klase kadagiti hover ken aktibo nga estado para kadagiti nav ken dropdown a silpo.

  1. <i class = "ikono-agbirok ti ikono-puraw" ></i>

Ulo nga agpangato!No agus-usar kadagiti abay dagiti kuerdas ti teksto, a kas kadagiti buton wenno dagiti silpo ti nav, siguraduen a mangibati ti espasyo kalpasan ti <i>etiketa para iti umno a panagsisina.


Dagiti pagarigan ti icon

Usaren dagitoy kadagiti buton, grupo ti buton para iti toolbar, nabigasion, wenno dagiti prepended a panagserrek ti porma.

Dagiti Buton

Grupo ti buton iti maysa a toolbar ti buton
  1. <div klase = "btn-a baras ti ramit" >
  2. <div klase = "btn-grupo" >
  3. <a klase = "btn" href = "#" ><i klase = "ikono-a-tunos-kannigid" ></i></a>
  4. <a klase = "btn" href = "#" ><i klase = "ikon-a-tunos-a-sentro" ></i></a>
  5. <a klase = "btn" href = "#" ><i klase = "ikono-a-tunos-kannigid" ></i></a>
  6. <a klase = "btn" href = "#" ><i klase = "ikon-itunos-ti-ikalintegan" ></i></a>
  7. </div>
  8. </div>
Dropdown iti maysa a grupo ti buton
  1. <div klase = "btn-grupo" >
  2. <a class = "btn btn-primary" href = "#" ><i klase = "ikono-a-usar nga ikono-puraw" ></i> User </a>
  3. <a klase = "btn btn-pangruna a panagpababa-a-mabaliwan" data-toggle = "agpababa" href = "#" ><span klase = "caret" ></span></a>
  4. <ul klase = "nababa-a-menu" >
  5. <li><a href = "#" ><i klase = "ikono-lapis" </i> Urnosen </a></li>
  6. <li><a href = "#" ><i klase = "ikono-basura" </i> Ikkaten </a></li>
  7. <li><a href = "#" ><i klase = "sirkulo-ti-iparit-ti-ikono" ></i> Iparit </a></li>
  8. <li klase = "mangbingay" </li>
  9. <li><a href = "#" ><i klase = "siak" ></i> Agaramid ti admin </a></li>
  10. </ul>
  11. </div>
Dagiti kadakkel ti buton
  1. <a klase = "btn btn-dakkel" href = "#" ><i klase = "ikono-bituen" ></i> Bituen </a>
  2. <a klase = "btn btn-bassit" href = "#" ><i klase = "ikono-bituen" ></i> Bituen </a>
  3. <a klase = "btn btn-mini" href = "#" ><i klase = "ikono-bituen" ></i> Bituen </a>

Panaglayag

  1. <ul klase = "nav nav-listaan" >
  2. <li class = "aktibo" ><a href = "#" ><i klase = "ikono-pagtaengan nga ikono-puraw" </i> Pagtaengan </a></li>
  3. <li><a href = "#" ><i klase = "libro-a-ikono" </i> Biblioteka </a></li>
  4. <li><a href = "#" ><i klase = "ikono-lapis" ></i> Dagiti aplikasion </a></li>
  5. <li><a href = "#" ><i klase = "siak" ></i> Nadumaduma </a></li>
  6. </ul>

Porma dagiti tay-ak

  1. <div klase = "grupo-a-kontrol" >
  2. <label class = "kontrol-etiketa" para iti = "inputIcon" > Adres ti email </label>
  3. <div klase = "dagiti kontrol" >
  4. <div klase = "panangserrek-a-prepend" >
  5. <span class = "nainayon" ><i klase = "ikono-sobre" ></i></span>
  6. < klase ti panagserrek = "span2" id = "Icon ti panagserrek" tipo = "teksto" >
  7. </div>
  8. </div>
  9. </div>