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.

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 .

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 —sakbay daytoy para kadagiti panggep ti estilo.

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

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

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

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>

<pre> nga
  <p>Pagarigan a teksto ditoy...</p>
</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.

<p> Pagarigan ti teksto ditoy... </p>

<pre klase = "napintas nga imprenta ." 
     dagiti linenum" >
  <p>Pagarigan a teksto ditoy...</p>
</pre>

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

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

<lamisaan>
  <ulo>
    <tr> nga
      <th> ... </th> nga adda
      <th> ... </th> nga adda
    </tr>
  </tulo>
  <tibagi>
    <tr> nga
      <td> ... </td> nga adda
      <td> ... </td> nga adda
    </tr>
  </tbagi>
</table>

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.

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

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.

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

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

< clase ti lamisaan = "lamisaan-nabeddengan" > 
  ...
</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

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

< klase ti lamisaan = "lamisaan-napaababa" > 
  ...
</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

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.

<table class = "lamisaan a garitgaritan ti lamisaan a nabeddengan ti lamisaan a napaababa" > 
  ...
</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.

Pangrugian a porma

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

Nagan ti etiketa

Pagarigan ti teksto ti tulong iti block-level ditoy.

Kitaennak Idatag

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

Pormas ti panagsapul

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

Agbirok

<porma klase = "bueno porma-panagbiruk" > 
  <input type = "teksto" klase = "input-medium a panagsaludsod-a-panagsaludsod" >  
  <button type = "ipatulod" klase = "btn" > Agbiruk </button>  
</porma>

Inline nga porma

Inayon .form-inlinetapno mapino ti bertikal a panagtunos ken panagsisina dagiti kontrol ti porma.

Laglagipennak Agpirma

< klase ti porma = "bueno porma-inline" > 
  < tipo ti panagserrek = "teksto" klase = "panagserrek-bassit" a pagtengngel ti lugar = "Email" >   
  <input type = "password" class = "input-bassit" nga lugar = "Password" >   
  < klase ti etiketa = "kahon ti tsek" > 
    <input type = "checkbox" > Laglagipennak 
  </label>
  <button type = "ipatulod" klase = "btn" > Agpirma </button>  
</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

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

Kahon ti tsek

Ti umuna a pagpilian ket daytoy ken dayta—siguraduenyo nga iraman no apay a nagsayaat dayta

Pilien ti listaan

maysa a banag 2. 2 3. 4. 5.

Multicon-pilien

1 nga 2. 2 3. 4. 5.

Inserrek ti file

Lugar ti Teksto

Idulin dagiti panagbalbaliw Ikansela

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.

< klase ti porma = "porma-paisaad" > 
  <set ti tay-ak>
    <leyenda> Teksto ti sarsarita </legend>
    <div klase = "grupo-a-kontrol" > 
      <label class = "kontrol-etiketa" para iti = "input01" > Iserrek ti teksto </label>  
      <div klase = "dagiti kontrol" > 
        < tipo ti input = "teksto" a klase = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Panangsuporta ti teksto ti tulong </p> 
      </div>
    </div>
  </fieldset ti tay-ak>
</porma>

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.

<set ti tay-ak
  klase = "biddut ti kontrol-grupo" >
  ...
</fieldset ti tay-ak>

Naipamaysa nga input

Di ma-edit nga input

Dadduma ti mangipateg ditoy

Nabaldado ti input

Nabaldado ti kahon ti tsek

Daytoy ket maysa a baldado a kahon ti tsek

Input nga addaan pakdaar

Mabalin nga adda nagbiddut

Input nga addaan biddut

Pangngaasiyo ta ilintegyo ti biddut

Input nga addaan balligi

Woohoo nga!

Pilien buyogen ti balligi

1 nga 2. 2 3. 4. 5. Woohoo nga!

Idulin dagiti panagbalbaliw Ikansela

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.

Pormaen dagiti kadakkel ti grid

1 nga 2. 2 3. 4. 5. 1 nga 2. 2 3. 4. 5. 1 nga 2. 2 3. 4. 5.

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

Agsisinnublat dagiti kadakkel

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

Nasaksakbay a teksto

@

Adda ditoy ti sumagmamano a tulong a teksto

Naikapet a teksto

.00 nga

Adtoy ti ad-adu pay a tulong a teksto

Append ken prepend

$ nga .00 nga

Inayon ti buton

Mapan!

Dua-buton ti append

Agbirok Dagiti Pagpilian

Inline dagiti kahon ti tsek

1 nga 2. 2 3.

Dagiti kahon ti tsek

Ti umuna a pagpilian ket daytoy ken dayta—siguraduenyo nga iraman no apay a nagsayaat dayta Mabalin met a kitaen ti pagpilian dua ken mairaman kadagiti resulta ti porma Mabalin met a kitaen ken mairaman ti pagpilian a maikatlo—wen, napagtengmo dayta—ket mairaman kadagiti resulta ti porma

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.

Dagiti buton ti radio

Ti umuna a pagpilian ket daytoy ken dayta—siguraduenyo nga iraman no apay a nagsayaat dayta Ti pagpilian dua ket mabalin a sabali ken ti panangpili iti dayta ket mangikkat iti pagpilian iti maysa

Idulin dagiti panagbalbaliw Ikansela

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.

Panguna nga aramid Aksion

Panguna nga aramid Aksion

Panguna nga aramid Aksion

Kasasaad ti baldado

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

Panguna a silpo Inaig

Panguna nga buton Buton

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 Buton

<a klase = "btn" href = "" > Silpo </a>  
< klase ti buton = "btn" tipo = "ipatulod" >  
  Buton
</button> nga
< klase ti panagserrek = "btn" tipo = "buton".  
         pateg = "Input" >
< klase ti panagserrek = "btn" tipo = "ipatulod".  
         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:

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

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

Ipabaro Checkout ti panagbayad Ikkaten

Komento Dagiti Pagsaad Ad-adu pay nga Impormasion

Address ti email