Base nga CSS

Iti rabaw ti andamio, dagiti batayan nga elemento ti HTML ket naistilo ken napasayaat babaen dagiti mapalawa a klase tapno mangipaay ti presko, agtultuloy a langa ken rikna.

Dagiti paulo & kopia ti bagi

Tipograpiko a timbangan

Ti sibubukel a grid ti tipograpiko ket naibatay iti dua a Basbassit a variable iti variables.less file-tayo: @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 matematika, tapno mangpartuat kadagiti margin, padding, ken line-heights ti amin a kitami ken dadduma pay.

Pagarigan ti bagi a teksto

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.

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.

h1. Paulo 1

h2. Paulo 2

h3. Paulo 3

h4. Paulo 4

h5. Paulo 5
h6. Paulo 6

Ipaganetget, adres, ken abbreviation

Elemento Panagusar Opsional
<strong> Para iti panangipaganetget iti maysa a snippet ti teksto nga addaan iti napateg Awan
<em> Para iti panangipaganetget iti maysa a snippet ti teksto nga addaan iti stress Awan
<abbr> Balkoten dagiti abbreviation ken acronym tapno maipakita ti napalawa a bersion iti hover

Iraman ti opsional nga titleattribute para iti napalawa a teksto

Usaren ti .initialismklase para kadagiti dadakkel nga abbreviation.
<address> Para iti impormasion a pakakontakan para iti kaasitgan nga inapona wenno ti intero a bagi ti trabaho Ipreserba ti panagpormat babaen ti panangipatingga kadagiti amin a linia babaen ti<br>

Panangusar iti panangipaganetget

Fusce dapibus , tellus ac cursus commodo , tortor mauris kondimento nibh , ut fermentum masa justo agtugaw amet risus. Maecenas nga faucibus nga mollis nga interdum. Nulla vitae elit libero, maysa a pharetra nga augue.

Pakaammo: Siwayawaya nga usaren <b>ken <i>iti HTML5, ngem nagbaliw bassit ti pannakausar dagitoy. <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.

Pagarigan dagiti adres

Adtoy ti dua a pagarigan no kasano <address>a mausar ti tag:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890. Ti panagadal ti panagbiag ti tao
Buo nga Nagan
[email protected]

Dagiti pagarigan nga abbreviation

Dagiti abbreviation nga addaan iti titleattribute ket addaan iti nalawag a tulnek a baba a beddeng ken ti kursor ti tulong iti hover. Daytoy ket mangted kadagiti agar-aramat ti ekstra a pakakitaan ti maysa a banag a maipakita iti hover.

Inayon ti initialismklase iti abbreviation tapno mapaadu ti typographic harmony babaen ti panangted iti basbassit bassit a kadakkel ti teksto.

HTML ti kasayaatan a banag sipud idi naiwa a tinapay.

Ti maysa nga abbreviation ti sao nga attribute ket attr .

Dagiti sitas ti bloke

Elemento Panagusar Opsional
<blockquote> Block-level nga elemento para iti panagadaw ti linaon manipud iti sabali a taudan

Manginayon ti citeattribute para iti taudan nga URL

Usaren .pull-leftken .pull-rightdagiti klase para kadagiti floated a pagpilian
<small> Opsional nga elemento para iti pananginayon ti maysa a sitasion a nakasango iti agar-aramat, kadawyan nga autor nga addaan iti paulo ti obra Ikabil ti <cite>aglawlaw ti paulo wenno nagan ti gubuayan

Tapno mairaman ti blockquote, baluten <blockquote>ti ania man nga HTML a kas ti sitas. Para kadagiti diretso a sitas irekomendarmi ti <p>.

Iraman ti opsional <small>nga elemento a mangdakamat iti taudanmo ket makagun-odka iti em dash &mdash;sakbay daytoy para kadagiti panggep ti estilo.

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

Pagarigan dagiti blockquote

Dagiti kasisigud a blockquote ket nai-estilo a kas ti kastoy:

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

Maysa a nalatak iti Bagi ti trabaho

Tapno mai-float ti blockquote-mo iti kannawan, inayon ti class="pull-right":

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

Maysa a nalatak iti Bagi ti trabaho

Dagiti Listaan

Di naurnos

<ul>

  • 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

Saan nga estilo

<ul class="unstyled">

  • 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

Nabilin

<ol>

  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

Panangiladawan

<dl>

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.

Paisaad nga deskripsion

<dl class="dl-horizontal">

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.

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

  1. Kas pagarigan , ti <code> a paset </ 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>

Pakaammo: Siguraduen nga pagtalinaeden 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.

Google nga Pag-prettify

Alaen ti isu met laeng <pre>nga elemento ken manginayon ti dua nga opsional a klase para iti napasayaat a panagiparang.

  1. <p> Pagarigan ti teksto ditoy... </p>
  1. <pre klase = "napintas nga imprenta ."
  2. dagiti linenum" >
  3. <p>Pagarigan a teksto ditoy...</p>
  4. </pre>

I-download ti google-code-prettify ken kitaen ti readme no kasano nga usaren.

Pagmarka ti lamisaan

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)
Masapul nga usaren iti uneg ti a<thead>
<caption> Panangdeskribir wenno pakagupgopan no ania ti iggem ti lamisaan, nangnangruna a makatulong kadagiti agbasbasa iti iskrin
  1. <lamisaan>
  2. <ulo>
  3. <tr> nga
  4. <th> ... </th> nga adda
  5. <th> ... </th> nga adda
  6. </tr>
  7. </tulo>
  8. <tibagi>
  9. <tr> nga
  10. <td> ... </td> nga adda
  11. <td> ... </td> nga adda
  12. </tr>
  13. </tbagi>
  14. </table>

Dagiti pagpilian iti lamisaan

Nagan Klase Panangiladawan
Default Awan Awan dagiti estilo, basta kolum ken hilera
Kadawyan .table Dagiti laeng horizontal a linia iti nagbaetan dagiti hilera
Nabeddengan .table-bordered Agtimbukel kadagiti suli ken mangnayon iti makinruar a beddeng
Zebra-garitan .table-striped Manginayon ti nalawag nga abuabu a kolor ti likudan kadagiti karkarna a hilera (1, 3, 5, kdpy) .
Napaababa .table-condensed Putdenna ti bertikal a padding iti kagudua, manipud iti 8px aginggana iti 4px, iti uneg ti amin tdken thdagiti elemento

Pagarigan dagiti lamisaan

1. Dagiti default nga estilo ti lamisaan

Dagiti lamisaan ket automatiko nga estilo nga addaan laeng kadagiti sumagmamano a beddeng tapno masigurado ti pannakabasa ken mataginayon ti estruktura. Iti 2.0, .tablekasapulan ti klase.

  1. < klase ti lamisaan = "lamisaan" >
  2. ...
  3. </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

2. Lamisaan nga may garitgaritan

Agbalinka a magarbo bassit kadagiti lamisaanmo babaen ti pananginayon iti zebra-striping—inayonmo laeng ti .table-stripedklase.

Pakaammo: Dagiti garitgaritan a lamisaan ket agus-usar ti :nth-childCSS a mangpili ken saan a magun-od iti IE7-IE8.

  1. < klase ti lamisaan = "lamisaan nga garitgaritan" >
  2. ...
  3. </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

3. Nabeddengan ti lamisaan

Inayon dagiti beddeng iti aglawlaw ti intero a lamisaan ken nagtimbukel a suli para kadagiti panggep ti estetika.

  1. < clase ti lamisaan = "lamisaan-nabeddengan" >
  2. ...
  3. </table>
# 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

4. Napaababa a lamisaan

Pagbalinem dagiti lamisaanmo nga ad-adda a kompakto babaen ti pananginayon ti .table-condensedklase tapno mangputed ti table cell padding iti kagudua (manipud iti 8px agingga iti 4px).

  1. < klase ti lamisaan = "lamisaan-napaababa" >
  2. ...
  3. </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 ti Tumatayab @twitter nga

5. Pagtiponem amin dagitoy!

Marikna a nawaya a pagtitiponen ti aniaman kadagiti klase ti lamisaan tapno magun-od dagiti nadumaduma a langa babaen ti panangusar iti aniaman kadagiti magun-odan a klase.

  1. <table class = "lamisaan a garitgaritan ti lamisaan a nabeddengan ti lamisaan a napaababa" >
  2. ...
  3. </table>
Buo nga nagan
# 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

Nalaka a maibagay nga HTML ken CSS

Ti kasayaatan a paset maipapan kadagiti porma iti Bootstrap ket amin nga input ken kontrolmo ket nagsayaat ti langana uray kasano ti panangibangonmo kadagitoy iti markup-mo. Awan ti kasapulan a sobra nga HTML, ngem ipaaymi dagiti padron para kadagidiay agkasapulan iti dayta.

Dagiti ad-adu a komplikado a layout ket umay nga addaan kadagiti ababa ken maipadakkel a klase para iti nalaka nga estilo ken panagtengngel ti pasamak, isu a masakupanka iti tunggal addang.

Uppat a layout ti nairaman

Ti Bootstrap ket addaan iti suporta para kadagiti uppat a kita ti layout ti porma:

  • Bertikal (default) .
  • Agbirok
  • Inline nga
  • Paidda

Dagiti nadumaduma a kita ti layout ti porma ket agkasapulan kadagiti sumagmamano a panagbalbaliw iti panagmarka, ngem dagiti kontrol a mismo ket agtalinaed ken agtigtignayda a kas met laeng.

Kontrol dagiti estado ken dadduma pay

Dagiti porma ti Bootstrap ket mangiraman kadagiti estilo para kadagiti amin a kontrol ti batayan a porma a kas ti input, textarea, ken pilien a namnamaem. Ngem daytoy ket umay pay nga addaan kadagiti sumagmamano a kostumbre a paset a kas dagiti naikapet ken nasakbay nga input ken suporta para kadagiti listaan ​​dagiti kahon ti tsek.

Dagiti estado a kas ti biddut, pakdaar, ken balligi ket nairaman para iti tunggal maysa a kita ti panagtengngel ti porma. Nairaman pay dagiti estilo para kadagiti baldado a kontrol.

Uppat a kita ti porma

Ti Bootstrap ket mangipaay ti simple a panagmarka ken dagiti estilo para kadagiti uppat nga estilo dagiti gagangay a porma ti web.

Nagan Klase Panangiladawan
Bertikal (default) . .form-vertical (saan a kasapulan) . Naurnong, kannigid a naitunos nga etiketa iti rabaw dagiti kontrol
Inline nga .form-inline Kannigid-a-naitunos nga etiketa ken dagiti inline-block a kontrol para iti kompakto nga estilo
Agbirok .form-search Extra-rounded text input para iti gagangay nga estetika ti panagbiruk
Paidda .form-horizontal Agtaytayab kadagiti kannigid, kannawan a naitunos nga etiketa iti isu met laeng a linia a kas dagiti kontrol

Pagarigan dagiti porma nga agus-usar laeng kadagiti kontrol ti porma, awan ti ekstra a marka

Pangrugian a porma

Smart ken nalag-an ti default nga awan ti extra markup.

Pagarigan ti teksto ti tulong iti block-level ditoy.

  1. <porma ti klase = "bueno" >
  2. <label> Nagan ti etiketa </label>
  3. <input type = "teksto" klase = "span3" placeholder = "Isurat ti maysa a banag..." >
  4. <span class = "help-block" > Pagarigan ti teksto ti tulong iti lebel ti bloke ditoy. </span>
  5. < klase ti etiketa = "kahon ti tsek" >
  6. <input type = "kahon ti tsek" > Kitaennak
  7. </label>
  8. <button type = "ipatuloden" klase = "btn" > Isumite </button>
  9. </porma>

Pormas ti panagsapul

Inayon .form-searchiti porma ken .search-queryiti input.

  1. <porma klase = "bueno porma-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-inlinetapno mapino ti bertikal a panagtunos ken panagsisina dagiti kontrol ti porma.

  1. < klase ti porma = "bueno 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 dagiti porma

Naipakita iti kannawan amin dagiti default a kontrol ti porma a suportaranmi. Ania ti listaan ​​ti bulleted:

  • dagiti panagserrek ti teksto (teksto, password, email, kdpy) .
  • kahon ti tsek
  • radio
  • agpili
  • adu a pilien
  • panagserrek ti file
  • lugar ti teksto

Malaksid ti nawaya a porma a teksto, ania man nga HTML5 a teksto-a naibatay a panagserrek ket agparang a kas iti kasta.

Pagarigan ti markup

No maited ti pagarigan a layout ti porma iti ngato, ditoy ti markup a nainaig iti umuna nga input ken kontrol a grupo. Ti .control-group, .control-label, ken .controlsdagiti klase ket kasapulan amin para iti estilo.

  1. < klase ti porma = "porma-paisaad" >
  2. <set ti tay-ak>
  3. <leyenda> Teksto ti sarsarita </legend>
  4. <div klase = "grupo-a-kontrol" >
  5. <label class = "kontrol-etiketa" para iti = "input01" > Iserrek ti teksto </label>
  6. <div klase = "dagiti kontrol" >
  7. < tipo ti input = "teksto" a klase = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Panangsuporta ti teksto ti tulong </p>
  9. </div>
  10. </div>
  11. </fieldset ti tay-ak>
  12. </porma>

Porma dagiti estado ti panangkontrol

Ti Bootstrap ket mangitampok kadagiti estilo para kadagiti nasuportaran ti browser a naipamaysa ken disableddagiti estado. Ikkatenmi ti default a Webkit outlineken iyaplikarmi ti box-shadowa iti lugarna para iti :focus.


Panangipaneknek ti porma

Daytoy ket mangiraman pay kadagiti estilo ti panangipaneknek para kadagiti biddut, pakdaar, ken balligi. Tapno mausar, inayon ti klase ti biddut iti aglawlaw .control-group.

  1. <set ti tay-ak
  2. klase = "biddut ti kontrol-grupo" >
  3. ...
  4. </fieldset ti tay-ak>
Dadduma ti mangipateg ditoy
Mabalin nga adda nagbiddut
Pangngaasiyo ta ilintegyo ti biddut
Woohoo nga!
Woohoo nga!

Panangpalawa kadagiti kontrol ti porma

Prepend & i-append dagiti input

Dagiti grupo ti input—nga addaan iti naikapet wenno nasaksakbay a teksto—ket mangipaay iti nalaka a wagas a mangted iti ad-adu a konteksto para kadagiti inputmo. Dagiti naindaklan a pagarigan ket mairaman ti @ sign para kadagiti nagan ti agar-aramat ti Twitter wenno $ para iti pinansia.


Dagiti checkbox ken radio

Agingga iti v1.4, ti Bootstrap ket kasapulanna ti ekstra a panagmarka iti aglawlaw dagiti kahon ti tsek ken dagiti radio tapno maitumpok dagitoy. Ita, simple laeng a banag ti panangulit iti <label class="checkbox">dayta a mangbalkot iti <input type="checkbox">.

Masuportaran met dagiti inline checkbox ken radio. Basta inayonmo .inlineti aniaman .checkboxwenno .radioket nalpaskan.


Inline dagiti pormas ken append/prepend

Tapno agusar kadagiti prepend wenno append nga input iti inline a porma, siguraduen nga ikabil ti .add-onken inputiti isu met laeng a linia, nga awan dagiti espasyo.


Pormaen ti teksto ti tulong

Tapno manginayon ti teksto ti tulong para kadagiti panagserrek ti pormam, iraman ti inline a teksto ti tulong nga addaan <span class="help-inline">wenno ti bloke ti teksto ti tulong nga addaan <p class="help-block">kalpasan ti elemento ti panagserrek.

Usaren dagiti isu met laeng .span*a klase manipud iti sistema ti grid para kadagiti kadakkel ti input.

Mabalinmo pay nga usaren dagiti estatiko a klase a saan a mangmapa iti grid, makibagay kadagiti sumungsungbat nga estilo ti CSS, wenno mangkuenta kadagiti nadumaduma a kita ti kontrol (kas pagarigan, inputvs. select).

@

Adda ditoy ti sumagmamano a tulong a teksto

.00 nga
Adtoy ti ad-adu pay a tulong a teksto
$ nga .00 nga

Pakaammo: Dagiti etiketa ket manglikmut kadagiti amin a pagpilian para kadagiti dakdakkel nga amang a lugar ti panagpidut ken ti ad-adu a mausar a porma.

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

Butones para kadagiti tignay

Kas maysa a konbension, dagiti buton ket rumbeng laeng a mausar para kadagiti tignay bayat a dagiti hyperlink ket mausar para kadagiti banag. Kas pagarigan, ti "I-download" ket rumbeng a maysa a buton bayat a ti "nabiit pay nga aktibidad" ket rumbeng a maysa a silpo.

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 kadagiti laeng <a>ken <button>dagiti elemento.

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.

Adu ti kadakkelna

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


Kasasaad ti baldado

Para kadagiti baldado a buton, inayon ti .disabledklase kadagiti silpo ken ti disabledattribute para kadagiti <button>elemento.

Panguna a silpo Inaig

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.

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. < klase ti buton = "btn" tipo = "ipatulod" >
  3. Buton
  4. </button> nga
  5. < klase ti panagserrek = "btn" tipo = "buton".
  6. pateg = "Input" >
  7. < klase ti panagserrek = "btn" tipo = "ipatulod".
  8. value = "Isubmitir" >

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

  • 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

Naibangon a kas maysa nga sprite

Imbes a pagbalinen ti tunggal maysa nga ikono a maysa nga ekstra a kiddaw, inurnongmi dagitoy iti maysa nga sprite—maysa a bunggoy dagiti ladawan iti maysa a file nga agus-usar ti CSS a mangiposision kadagiti ladawan babaen ti background-position. Daytoy met laeng ti pamay-an nga us-usarenmi iti Twitter.com ken nasayaat ti panagtrabahona kadakami.

Amin a klase ti ikono ket naidasig iti .icon-para iti umno a namespacing ken scoping, a kas dagiti dadduma a pasettayo. Makatulong daytoy tapno maliklikan ti panagsusupiat kadagiti dadduma nga alikamen.

Ti Glyphicons ket nangited kadakami ti panagusar kadagiti Halflings a naikabil iti open-source a toolkitmi no la ketdi mangipaaykami ti silpo ken kredito ditoy kadagiti docs. Pangngaasiyo ta ibilangyo ti panangaramid iti kasta met laeng kadagiti proyektoyo.

No kasano nga usaren

Ti Bootstrap ket agus-usar ti <i>etiketa para kadagiti amin nga ikono, ngem awan ti klase ti kasoda—maysa laeng a naibingbingay a pangrugian. Tapno mausar, ikabilmo ti sumaganad a kodigo iti dandani sadinoman:

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

Adda pay dagiti estilo a magun-od para kadagiti nabaliktad (puraw) nga ikono, a naaramid a nakasagana babaen ti maysa nga ekstra a klase:

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

Adda 140 a klase a pagpilian para kadagiti icon-mo. Basta mangnayonka iti <i>tag nga addaan kadagiti umno a klase ket naikabilka. Mabalinmo a sapulen ti kompleto a listaan ​​iti sprites.less wenno ditoy mismo iti daytoy a dokumento.

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.

Usaren dagiti kaso

Nasayaat dagiti icon, ngem sadino ti pangusaran ti maysa kadagita? Adtoy ti sumagmamano nga ideya:

  • Kas visuals para iti nabigasionmo iti sidebar
  • Para iti puro nga icon-driven a nabigasion
  • Para kadagiti buton a makatulong a mangipakaammo iti kaipapanan ti maysa nga aramid
  • Adda dagiti silpo a mangibinglay ti konteksto iti destinasion ti maysa nga agar-aramat

Kangrunaanna, sadinoman a mabalinmo nga ikabil ti <i>tag, mabalinmo ti mangikabil iti icon.

Dagiti pagarigan

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