Base nga CSS

Sa ibabaw sa scaffolding, ang mga batakang elemento sa HTML gi-istilo ug gipauswag sa mga mapadako nga mga klase aron makahatag usa ka bag-o, makanunayon nga hitsura ug pagbati.

Mga ulohan ug kopya sa lawas

Typographic scale

Ang tibuok typographic grid gibase sa duha ka Less variables sa among variables.less file: @baseFontSizeug @baseLineHeight. Ang una mao ang base nga gidak-on sa font nga gigamit sa tibuok ug ang ikaduha mao ang base-line-gitas-on.

Gigamit namo kadtong mga baryable, ug pipila ka matematika, sa paghimo sa mga margin, paddings, ug line-heights sa tanan namong tipo ug uban pa.

Pananglitan sa teksto sa lawas

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Panguna nga kopya sa lawas

Paghimo og usa ka parapo nga talagsaon pinaagi sa pagdugang .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Ulohan 1

h2. Ulohan 2

h3. Ulohan 3

h4. Ulohan 4

h5. Ulohan 5
h6. Ulohan 6

Emphasis, adres, ug abbreviation

elemento Paggamit Kapilian
<strong> Alang sa paghatag gibug-aton sa usa ka snippet sa teksto nga adunay hinungdanon Wala
<em> Alang sa paghatag gibug-aton sa usa ka snippet sa teksto nga adunay stress Wala
<abbr> Giputos ang mga abbreviation ug acronym aron ipakita ang gipalapdan nga bersyon sa hover

Ilakip ang opsyonal titlenga hiyas para sa gipalapdan nga teksto

Gamita .initialismang klase alang sa dagkong mga abbreviation.
<address> Alang sa impormasyon sa pagkontak alang sa iyang labing duol nga katigulangan o sa tibuok lawas sa trabaho Ipreserbar ang pag-format pinaagi sa pagtapos sa tanang linya sa<br>

Gigamit ang pagpasiugda

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Espesye sa tanom nga bulak ang Maecenas faucibus mollis interdum. Nulla vitae elit libero, usa ka pharetra augue.

Mubo nga sulat: Mobati nga gawasnon sa paggamit <b>ug <i>sa HTML5, apan ang ilang paggamit nausab og gamay. <b>gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya samtang <i>kadaghanan alang sa tingog, teknikal nga mga termino, ug uban pa.

Pananglitan nga mga adres

Ania ang duha ka pananglitan kung giunsa paggamit ang <address>tag:

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

Pananglitan nga mga minubo

Ang mga abbreviation nga adunay titleattribute adunay light dotted bottom border ug help cursor sa hover. Naghatag kini sa mga tiggamit og dugang nga timailhan nga adunay ipakita sa hover.

Idugang ang initialismklase sa usa ka minubo aron madugangan ang typographic harmony pinaagi sa paghatag niini og gamay nga gidak-on sa teksto.

Ang HTML mao ang labing maayo nga butang sukad sa hiniwa nga tinapay.

Ang minubo sa pulong nga attribute kay attr .

Blockquotes

elemento Paggamit Kapilian
<blockquote> Block-level nga elemento para sa pagkutlo sa sulod gikan sa laing tinubdan

Idugang citeang attribute para sa source URL

Paggamit .pull-leftug .pull-rightmga klase alang sa floated nga mga kapilian
<small> Opsyonal nga elemento para sa pagdugang ug giatubang sa user nga citation, kasagaran usa ka awtor nga adunay titulo sa trabaho Ibutang ang <cite>palibot sa titulo o ngalan sa tinubdan

Aron maapil ang usa ka blockquote, ibutang <blockquote>ang bisan unsang HTML ingon nga kinutlo. Alang sa tul-id nga mga kinutlo among girekomendar ang usa ka <p>.

Ilakip ang usa ka opsyonal <small>nga elemento sa pagkutlo sa imong tinubdan ug makakuha ka og em dash &mdash;sa wala pa kini alang sa mga katuyoan sa pag-istilo.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Usa ka tawo nga bantogan </small>
  4. </blockquote>

Pananglitan blockquotes

Ang mga default nga blockquotes gi-istilo sa ingon:

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

Usa ka sikat sa Lawas sa trabaho

Aron molutaw ang imong blockquote sa tuo, idugang class="pull-right":

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

Usa ka sikat sa Lawas sa trabaho

Mga lista

Wala ma-order

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ug masa
  • Facilisis sa pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Espesye sa tanom nga bulak ang Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat ug
  • Faucibus porta lacus fringilla vel
  • Aenean naglingkod amet erat nunc
  • Eget porttitor lorem

Dili istilo

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ug masa
  • Facilisis sa pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Espesye sa tanom nga bulak ang Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat ug
  • Faucibus porta lacus fringilla vel
  • Aenean naglingkod amet erat nunc
  • Eget porttitor lorem

Nagmando

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem ug masa
  4. Facilisis sa pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean naglingkod amet erat nunc
  8. Eget porttitor lorem

Deskripsyon

<dl>

Mga lista sa paghulagway
Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ug eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal nga paghulagway

<dl class="dl-horizontal">

Mga lista sa paghulagway
Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ug eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Espesye sa tanom nga bulak ang Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Taas ang ulo! Ang pinahigda nga mga lista sa deskripsyon moputol sa mga termino nga taas kaayo aron mohaum sa wala nga kolum nga ayuhon text-overflow. Sa mas pig-ot nga viewports, sila mag-ilis sa default stacked layout.

Inline

I-wrap ang inline nga mga snippet sa code gamit ang <code>.

  1. Pananglitan , < code> section </ code > kinahanglang iputos isip inline .

Basic block

Gigamit <pre>alang sa daghang linya sa code. Siguruha nga makalikay sa bisan unsang mga anggulo nga bracket sa code alang sa husto nga paghubad.

<p>Sample nga teksto dinhi...</p>
  1. <pre>
  2. <p>Sample nga teksto dinhi...</p>
  3. </pre>

Mubo nga sulat: Siguroha nga ibutang ang code sulod sa <pre>mga tag nga duol sa wala kutob sa mahimo; kini maghatag sa tanan nga mga tab.

Mahimo nimong idugang ang .pre-scrollableklase nga magbutang usa ka taas nga gitas-on nga 350px ug maghatag usa ka y-axis scrollbar.

Google Pagpatahom

Kuhaa ang parehas <pre>nga elemento ug idugang ang duha nga opsyonal nga mga klase alang sa gipaayo nga paghubad.

  1. <p> Sample nga teksto dinhi... </p>
  1. <pre class = "prettyprint
  2. linyanum" >
  3. <p>Sample nga teksto dinhi...</p>
  4. </pre>

Pag-download sa google-code-prettify ug tan-awa ang readme kung unsaon paggamit.

Markup sa lamesa

Tag Deskripsyon
<table> Pagputos nga elemento alang sa pagpakita sa datos sa usa ka tabular nga pormat
<thead> Elemento sa sudlanan alang sa mga laray sa header sa lamesa ( <tr>) aron markahan ang mga kolum sa lamesa
<tbody> Kontainer nga elemento para sa mga laray sa lamesa ( <tr>) sa lawas sa lamesa
<tr> Container element para sa set sa table cell ( <td>o <th>) nga makita sa usa ka laray
<td> Default nga selyula sa lamesa
<th> Espesyal nga table cell para sa column (o row, depende sa scope ug placement) nga mga label
Kinahanglang gamiton sulod sa a<thead>
<caption> Deskripsyon o summary sa kung unsa ang gihuptan sa lamesa, labi na mapuslanon alang sa mga magbabasa sa screen
  1. <lamesa>
  2. <ulo>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </head>
  8. <lawas>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Mga kapilian sa lamesa

Ngalan Klase Deskripsyon
Default Wala Walay mga estilo, mga kolum ug mga laray lang
sukaranan .table Mga pinahigda lang nga linya tali sa mga laray
Bordered .table-bordered Gilibutan ang mga kanto ug gidugang ang gawas nga utlanan
Zebra-stripe .table-striped Nagdugang ug gaan nga gray nga kolor sa background sa katingad-an nga mga laray (1, 3, 5, ug uban pa)
Gipamub-an .table-condensed Giputol ang bertikal nga padding sa tunga, gikan sa 8px hangtod 4px, sulod sa tanan tdug thmga elemento

Mga pananglitan nga mga lamesa

1. Default nga mga estilo sa lamesa

Ang mga lamesa awtomatiko nga gi-istilo nga adunay pipila ra nga mga utlanan aron masiguro nga mabasa ug mapadayon ang istruktura. Uban sa 2.0, .tablegikinahanglan ang klase.

  1. < klase sa lamesa = "lamesa" >
  2. </table>
# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @twitter

2. Gilis nga lamesa

Paglingaw og gamay sa imong mga lamesa pinaagi sa pagdugang og zebra-striping—idugang lang ang .table-stripedklase.

Mubo nga sulat: Ang mga striped nga lamesa naggamit sa :nth-childCSS selector ug dili magamit sa IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @twitter

3. Bordered nga lamesa

Idugang ang mga utlanan sa tibuok lamesa ug mga lingin nga mga kanto para sa aesthetic nga mga katuyoan.

  1. <table class = "table table-bordered" >
  2. </table>
# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
Mark Si Otto @getbootstrap
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter

4. Gipamub-an nga lamesa

Himua nga mas compact ang imong mga lamesa pinaagi sa pagdugang sa .table-condensedklase sa pagputol sa table cell padding sa tunga (gikan sa 8px hangtod sa 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter

5. Combine silang tanan!

Mobati nga gawasnon sa paghiusa sa bisan unsang mga klase sa lamesa aron makab-ot ang lainlaing hitsura pinaagi sa paggamit sa bisan unsang magamit nga mga klase.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Tibuok nga ngalan
# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter

Flexible nga HTML ug CSS

Ang labing kaayo nga bahin bahin sa mga porma sa Bootstrap mao nga ang tanan nimong mga input ug mga kontrol nindot tan-awon bisan giunsa nimo kini paghimo sa imong markup. Wala'y gikinahanglan nga sobra nga HTML, apan naghatag kami og mga sumbanan alang niadtong nagkinahanglan niini.

Ang labi ka komplikado nga mga layout moabut uban ang malip-ot ug mabag-o nga mga klase alang sa dali nga pag-istilo ug pagbugkos sa panghitabo, mao nga nasakup ka sa matag lakang.

Upat ka mga layout gilakip

Ang Bootstrap adunay suporta alang sa upat ka mga klase sa mga layout sa porma:

  • Bertikal (default)
  • Pangitaa
  • Inline
  • Pahigda

Ang lain-laing mga matang sa porma nga mga layout nanginahanglan pipila ka mga pagbag-o sa pagmarka, apan ang mga kontrol sa ilang kaugalingon nagpabilin ug naglihok nga parehas.

Control states ug uban pa

Ang mga porma sa Bootstrap naglakip sa mga estilo alang sa tanan nga mga kontrol sa base nga porma sama sa input, textarea, ug pagpili nga imong gipaabut. Apan kini usab adunay daghang mga naandan nga sangkap sama sa gidugtong ug giandam nga mga input ug suporta alang sa mga lista sa mga checkbox.

Ang mga estado sama sa sayup, pasidaan, ug kalampusan gilakip alang sa matag matang sa pagkontrol sa porma. Apil usab ang mga estilo para sa mga kontrol nga may kapansanan.

Upat ka matang sa porma

Naghatag ang Bootstrap og yano nga markup ug mga istilo alang sa upat nga mga istilo sa kasagarang mga porma sa web.

Ngalan Klase Deskripsyon
Bertikal (default) .form-vertical (dili kinahanglan) Gi-stack, wala nga linya nga mga label sa mga kontrol
Inline .form-inline Naa sa wala nga linya nga label ug inline-block nga mga kontrol para sa compact nga istilo
Pangitaa .form-search Extra-rounded text input para sa usa ka tipikal nga search aesthetic
Pahigda .form-horizontal Paglutaw sa wala, na-align sa tuo nga mga label sa parehas nga linya sama sa mga kontrol

Pananglitan nga mga porma gamit lang ang mga kontrol sa porma, walay dugang nga markup

Batakang porma

Smart ug gaan nga mga default nga wala’y dugang nga marka.

Pananglitan nga teksto sa tabang sa lebel sa block dinhi.

  1. <porma nga klase = "maayo" >
  2. <label> Ngalan sa label </label>
  3. <input type = "text" class = "span3" placeholder = "Type something..." >
  4. <span class = "help-block" > Pananglitan nga block-level help text dinhi. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Susiha ko
  7. </label>
  8. <button type = "submit" class = "btn" > Isumite </button>
  9. </porma>

Pagpangita nga porma

Idugang .form-searchsa porma ug .search-querysa input.

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

Inline nga porma

Idugang .form-inlinearon mapino ang bertikal nga paglinya ug gilay-on sa mga kontrol sa porma.

  1. <form class = "maayong porma-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Hinumdumi ko
  6. </label>
  7. <button type = "submit" class = "btn" > Sign in </button>
  8. </porma>

Horizontal nga mga porma

Gipakita sa tuo ang tanan nga default nga mga kontrol sa porma nga among gisuportahan. Ania ang bullet list:

  • mga input sa teksto (teksto, password, email, ug uban pa)
  • checkbox
  • radyo
  • pilia
  • daghang pagpili
  • input sa file
  • textarea

Dugang sa freeform nga teksto, ang bisan unsang HTML5 nga text-based input makita nga sama niini.

Pananglitan nga markup

Gihatag sa ibabaw nga pananglitan nga porma nga layout, ania ang markup nga nalangkit sa unang input ug control group. Ang .control-group, .control-label, ug .controlsmga klase kay gikinahanglan para sa pag-istilo.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Teksto sa leyenda </legend>
  4. <div class = "kontrol-grupo" >
  5. <label class = "control-label" for = "input01" > Text input </label>
  6. <div class = "kontrol" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Suporta nga tabang text </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </porma>

Mga estado sa pagkontrol sa porma

Ang Bootstrap adunay mga istilo alang sa gisuportahan sa browser nga naka-focus ug disabledestado. Among tangtangon ang default nga Webkit outlineug i-apply ang usa box-shadowsa dapit niini para sa :focus.


Pag-validate sa porma

Naglakip usab kini sa mga istilo sa pag-validate alang sa mga sayup, pasidaan, ug kalampusan. Aron magamit, idugang ang klase sa sayup sa palibot .control-group.

  1. <fieldset
  2. class = "control-group error" >
  3. </fieldset>
Pipila ka bili dinhi
Tingali adunay nahitabo nga sayup
Palihog tul-ira ang sayop
Woohoo!
Woohoo!

Pagpalapad sa mga kontrol sa porma

Pag-andam ug pagdugang sa mga input

Ang mga grupo sa pag-input-nga adunay gidugtong o gi-prepend nga teksto-naghatag usa ka dali nga paagi aron mahatagan ang dugang nga konteksto alang sa imong mga input. Ang maayong mga pananglitan naglakip sa @ sign para sa mga username sa Twitter o $ para sa panalapi.


Mga checkbox ug radyo

Hangtod sa v1.4, ang Bootstrap nanginahanglan ug dugang nga marka sa palibot sa mga checkbox ug mga radyo aron ma-stack kini. Karon, kini usa ka yano nga butang sa pagsubli sa <label class="checkbox">nga nagputos sa <input type="checkbox">.

Gisuportahan usab ang mga inline nga checkbox ug radyo. Idugang lang .inlinesa bisan unsa .checkboxo .radioug nahuman ka.


Inline nga mga porma ug idugang/i-prepend

Aron magamit ang prepend o idugang ang mga input sa usa ka inline nga porma, siguroha nga ibutang ang .add-onug inputsa parehas nga linya, nga wala’y mga espasyo.


Porma sa tabang nga teksto

Aron makadugang sa tabang nga teksto alang sa imong mga porma nga mga input, ilakip ang inline nga tabang nga teksto nga adunay <span class="help-inline">o usa ka tabang nga text block nga adunay <p class="help-block">pagkahuman sa input nga elemento.

Gamita ang parehas nga .span*mga klase gikan sa sistema sa grid alang sa mga gidak-on sa input.

Mahimo usab nimong gamiton ang mga static nga klase nga wala mag-mapa sa grid, mopahiangay sa responsive nga mga estilo sa CSS, o mag-asoy sa lain-laing matang sa kontrol (pananglitan, inputvs. select).

@

Ania ang pipila ka tabang nga teksto

.00
Ania ang dugang tabang text
$ .00

Mubo nga sulat: Ang mga label naglibot sa tanang mga opsyon alang sa mas dagkong mga lugar sa pag-klik ug usa ka mas magamit nga porma.

Butang klase="" Deskripsyon
btn Standard nga gray nga butones nga adunay gradient
btn btn-primary Naghatag dugang nga gibug-aton sa panan-aw ug nagpaila sa panguna nga aksyon sa usa ka hugpong sa mga buton
btn btn-info Gigamit isip alternatibo sa mga default nga estilo
btn btn-success Nagpakita sa usa ka malampuson o positibo nga aksyon
btn btn-warning Nagpakita nga kinahanglan nga mag-amping sa kini nga aksyon
btn btn-danger Nagpakita ug delikado o posibleng negatibo nga aksyon
btn btn-inverse Alternate dark gray nga butones, wala gihigot sa semantiko nga aksyon o paggamit

Mga buton alang sa mga aksyon

Isip usa ka kombensiyon, ang mga buton kinahanglan lang gamiton alang sa mga aksyon samtang ang mga hyperlink kay gamiton alang sa mga butang. Pananglitan, ang "Pag-download" kinahanglan usa ka buton samtang ang "bag-o nga kalihokan" kinahanglan usa ka link.

Ang mga istilo sa buton mahimong magamit sa bisan unsang butang nga gipadapat sa .btnklase. Bisan pa, kasagaran gusto nimo nga gamiton kini sa mga elemento lamang <a>ug .<button>

Cross browser compatibility

Ang IE9 wala mag-crop sa mga gradient sa background sa mga lingin nga mga kanto, mao nga among tangtangon kini. Nalambigit, IE9 jankifies disabled buttonelemento, rendering teksto gray uban sa usa ka ngil-ad nga text-anino nga kita dili ayuhon.

Daghang gidak-on

Gusto nga mas dako o mas gagmay nga mga buton? Idugang .btn-largeang , .btn-small, o .btn-minipara sa duha ka dugang nga gidak-on.


Baldado nga estado

Para sa disabled nga mga buton, idugang ang .disabledklase sa mga link ug ang disabledattribute para sa <button>mga elemento.

Panguna nga link Link

Taas ang ulo! Gigamit namon .disabledingon usa ka klase sa utility dinhi, parehas sa kasagaran nga .activeklase, busa wala’y prefix nga gikinahanglan.

Usa ka klase, daghang tag

Gamita ang .btnklase sa usa ka <a>, <button>, o <input>elemento.

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "submit" >
  3. Butang
  4. </button>
  5. <input class = "btn" type = "button"
  6. bili = "Input" >
  7. <input class = "btn" type = "isumite"
  8. bili = "Isumite" >

Isip usa ka labing maayo nga praktis, sulayi nga ipares ang elemento alang kanimo nga konteksto aron masiguro nga magkatugma ang cross-browser nga paghubad. Kung naa kay input, gamita ang <input type="submit">para sa imong buton.

  • icon-bildo
  • icon-musika
  • icon-pagpangita
  • icon-sobre
  • icon-kasingkasing
  • icon-bituon
  • icon-star-walay sulod
  • icon-user
  • icon-film
  • icon-ika-dako
  • icon-ika
  • icon-ika-lista
  • icon-ok
  • icon-pagtangtang
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-basura
  • icon-balay
  • icon-file
  • icon-panahon
  • icon-dalan
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-lingin
  • icon-subli
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tag
  • icon-libro
  • icon-bookmark
  • icon-print
  • icon-kamera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-gitas-on
  • icon-text-lapad
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-listahan
  • icon-indent-left
  • icon-indent-tuo
  • icon-facetime-video
  • icon-larawan
  • icon- lapis
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • pagsusi sa icon
  • icon-lihok
  • icon-lakang-paatras
  • icon-fast-backward
  • icon-paatras
  • icon-play
  • icon-pause
  • icon-stop
  • icon-sa unahan
  • icon-fast-forward
  • icon-lakang-sa unahan
  • icon-eject
  • icon-chevron-wala
  • icon-chevron-tuo
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-pagtangtang-lingin
  • icon-ok-lingin
  • icon-ban-lingin
  • icon-arrow-wala
  • icon-arrow-tuo
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-puno
  • icon-resize-gamay
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-regalo
  • icon-dahon
  • icon-sunog
  • icon-mata-bukas
  • icon-eye-close
  • icon-warning-sign
  • icon-eroplano
  • icon-kalendaryo
  • icon-random
  • icon-komento
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-kampana
  • icon-sertipiko
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-kamot-tuo
  • icon-kamot-wala
  • icon-kamot
  • icon-hand-down
  • icon-circle-arrow-tuo
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-mga buluhaton
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Gitukod isip usa ka sprite

Imbis nga himoong dugang nga hangyo ang matag icon, gihugpong namo kini ngadto sa usa ka sprite—usa ka hugpong sa mga hulagway sa usa ka file nga naggamit sa CSS aron ipahimutang ang mga hulagway sa background-position. Kini ang parehas nga pamaagi nga among gigamit sa Twitter.com ug kini nagtrabaho og maayo alang kanamo.

Ang tanan nga mga klase sa mga icon adunay prefix .icon-alang sa tukma nga namespace ug scoping, sama sa among ubang mga sangkap. Makatabang kini nga malikayan ang mga panagsumpaki sa ubang mga himan.

Gihatagan kami sa Glyphicons sa paggamit sa Halflings set sa among open-source toolkit basta maghatag kami ug link ug credit dinhi sa mga docs. Palihug hunahunaa ang pagbuhat sa parehas sa imong mga proyekto.

Unsaon paggamit

Ang Bootstrap naggamit ug <i>tag para sa tanang icon, pero wala silay case class—usa lang ka shared prefix. Aron magamit, ibutang ang mosunod nga code bisan asa:

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

Adunay usab mga istilo nga magamit alang sa balit-ad (puti) nga mga icon, nga andam sa usa ka dugang nga klase:

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

Adunay 140 ka klase nga mapilian para sa imong mga icon. Pagdugang lang usa ka <i>tag nga adunay husto nga mga klase ug andam ka na. Makita nimo ang tibuok listahan sa sprites.less o dinhi mismo niini nga dokumento.

Taas ang ulo! Kung mogamit sa tupad sa mga kuwerdas sa teksto, sama sa mga buton o nav link, siguroha nga magbilin usa ka espasyo pagkahuman sa <i>tag alang sa husto nga gilay-on.

Paggamit sa mga kaso

Nindot ang mga icon, apan asa man kini gamiton? Ania ang pipila ka mga ideya:

  • Ingon mga biswal alang sa imong nabigasyon sa sidebar
  • Para sa lunsay nga icon-driven navigation
  • Para sa mga buton nga makatabang sa pagpasabot sa kahulogan sa usa ka aksyon
  • Uban ang mga link aron ipaambit ang konteksto sa destinasyon sa usa ka tiggamit

Sa tinuud, bisan asa nimo ibutang ang usa ka <i>tag, mahimo nimong ibutang ang usa ka icon.

Mga pananglitan

Gamita kini sa mga buton, mga grupo sa butones para sa usa ka toolbar, nabigasyon, o mga prepended nga porma nga mga input.