Base CSS

Sa itaas ng scaffolding, ang mga pangunahing elemento ng HTML ay ini-istilo at pinahusay ng mga napapalawak na klase upang magbigay ng bago, pare-parehong hitsura at pakiramdam.

Mga heading at body copy

Typographic scale

Ang buong typographic grid ay batay sa dalawang Less variables sa aming variables.less file: @baseFontSizeat @baseLineHeight. Ang una ay ang batayang laki ng font na ginamit sa kabuuan at ang pangalawa ay ang batayang taas ng linya.

Ginagamit namin ang mga variable na iyon, at ilang matematika, upang gawin ang mga margin, padding, at line-height ng lahat ng aming uri at higit pa.

Halimbawa ng body text

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.

Lead body copy

Gawing kakaiba ang isang talata sa pamamagitan ng pagdaragdag ng .lead.

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

h1. Pamagat 1

h2. Pamagat 2

h3. Pamagat 3

h4. Pamagat 4

h5. Pamagat 5
h6. Pamagat 6

Emphasis, address, at abbreviation

Elemento Paggamit Opsyonal
<strong> Para sa pagbibigay-diin sa isang snippet ng text na may mahalaga wala
<em> Para sa pagbibigay-diin sa isang snippet ng text na may stress wala
<abbr> Binabalot ang mga pagdadaglat at acronym upang ipakita ang pinalawak na bersyon sa hover

Isama ang opsyonal na titlekatangian para sa pinalawak na teksto

Gumamit .initialismng klase para sa malalaking abbreviation.
<address> Para sa impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno nito o sa buong katawan ng trabaho Panatilihin ang pag-format sa pamamagitan ng pagtatapos ng lahat ng mga linya sa<br>

Gamit ang diin

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Tandaan: Huwag mag-atubiling gamitin <b>at <i>sa HTML5, ngunit medyo nagbago ang kanilang paggamit. <b>ay nilalayong i-highlight ang mga salita o parirala nang hindi nagbibigay ng karagdagang kahalagahan habang <i>kadalasan ay para sa boses, teknikal na termino, atbp.

Mga halimbawang address

Narito ang dalawang halimbawa kung paano magagamit ang <address>tag:

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

Halimbawa ng mga pagdadaglat

Ang mga abbreviation na may titleattribute ay may light dotted bottom border at help cursor sa hover. Nagbibigay ito sa mga user ng karagdagang indikasyon na may ipapakita sa hover.

Idagdag ang initialismklase sa isang abbreviation upang mapataas ang typographic harmony sa pamamagitan ng pagbibigay dito ng mas maliit na laki ng text.

Ang HTML ay ang pinakamagandang bagay mula noong hiniwang tinapay.

Ang pagdadaglat ng salitang attribute ay attr .

Blockquotes

Elemento Paggamit Opsyonal
<blockquote> Block-level na elemento para sa pagsipi ng nilalaman mula sa ibang pinagmulan

Magdagdag citeng attribute para sa source URL

Gamitin .pull-leftat .pull-rightmga klase para sa mga floated na opsyon
<small> Opsyonal na elemento para sa pagdaragdag ng isang pagsipi na nakaharap sa gumagamit, karaniwang isang may-akda na may pamagat ng gawa Ilagay ang <cite>paligid ng pamagat o pangalan ng pinagmulan

Upang magsama ng blockquote, balutin ang <blockquote>anumang HTML bilang quote. Para sa mga tuwid na panipi, inirerekumenda namin ang isang <p>.

Magsama ng opsyonal <small>na elemento upang banggitin ang iyong pinagmulan at makakakuha ka ng em dash &mdash;bago ito para sa mga layunin ng pag-istilo.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Isang taong sikat </small>
  4. </blockquote>

Halimbawa ng blockquotes

Ang mga default na blockquotes ay naka-istilo nang ganito:

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

Isang taong sikat sa Body of work

Upang palutangin ang iyong blockquote sa kanan, idagdag ang class="pull-right":

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

Isang taong sikat sa Body of work

Mga listahan

Hindi nakaayos

<ul>

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

Walang istilo

<ul class="unstyled">

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

Inutusan

<ol>

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

Paglalarawan

<dl>

Mga listahan ng paglalarawan
Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Pahalang na paglalarawan

<dl class="dl-horizontal">

Mga listahan ng paglalarawan
Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Heads up! Ang mga listahan ng pahalang na paglalarawan ay puputulin ang mga terminong masyadong mahaba upang magkasya sa kaliwang column fix text-overflow. Sa mas makitid na viewport, sila ay magbabago sa default na nakasalansan na layout.

Nasa linya

I-wrap ang mga inline na snippet ng code gamit ang <code>.

  1. Halimbawa , ang <code> section </ code > ay dapat na nakabalot bilang inline .

Pangunahing bloke

Gamitin <pre>para sa maraming linya ng code. Tiyaking takasan ang anumang mga anggulong bracket sa code para sa wastong pag-render.

<p>Sample text dito...</p>
  1. <pre>
  2. <p>Sample ng text dito...</p>
  3. </pre>

Tandaan: Tiyaking panatilihin ang code sa loob <pre>ng mga tag na malapit sa kaliwa hangga't maaari; ire-render nito ang lahat ng tab.

Maaari mong opsyonal na idagdag ang .pre-scrollableklase na magtatakda ng max-height na 350px at magbibigay ng y-axis scrollbar.

Google Prettify

Kunin ang parehong <pre>elemento at magdagdag ng dalawang opsyonal na klase para sa pinahusay na pag-render.

  1. <p> Sample text dito... </p>
  1. <pre class = "prettyprint
  2. mga linenum" >
  3. <p>Sample ng text dito...</p>
  4. </pre>

I-download ang google-code-prettify at tingnan ang readme kung paano gamitin.

Markup ng talahanayan

Tag Paglalarawan
<table> Wrapping element para sa pagpapakita ng data sa isang tabular na format
<thead> Elemento ng container para sa mga hilera ng header ng talahanayan ( <tr>) upang lagyan ng label ang mga column ng talahanayan
<tbody> Elemento ng lalagyan para sa mga hilera ng talahanayan ( <tr>) sa katawan ng talahanayan
<tr> Elemento ng container para sa isang hanay ng mga cell ng talahanayan ( <td>o <th>) na lumalabas sa isang row
<td> Default na cell ng talahanayan
<th> Espesyal na cell ng talahanayan para sa mga label ng column (o row, depende sa saklaw at pagkakalagay)
Dapat gamitin sa loob ng a<thead>
<caption> Paglalarawan o buod ng kung ano ang hawak ng talahanayan, lalo na kapaki-pakinabang para sa mga screen reader
  1. <talahanayan>
  2. <ulo>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Mga pagpipilian sa talahanayan

Pangalan Klase Paglalarawan
Default wala Walang mga istilo, mga column at row lang
Basic .table Mga pahalang na linya lamang sa pagitan ng mga hilera
Bordered .table-bordered Umiikot sa mga sulok at nagdaragdag ng panlabas na hangganan
Zebra-stripe .table-striped Nagdaragdag ng mapusyaw na kulay ng background sa mga kakaibang hilera (1, 3, 5, atbp)
Naka-condensed .table-condensed Binabawasan ang vertical padding sa kalahati, mula 8px hanggang 4px, sa loob ng lahat tdat mga thelemento

Mga halimbawang talahanayan

1. Default na mga istilo ng talahanayan

Ang mga talahanayan ay awtomatikong naka-istilo na may ilang mga hangganan lamang upang matiyak ang pagiging madaling mabasa at mapanatili ang istraktura. Sa 2.0, .tablekinakailangan ang klase.

  1. <table class = "table" >
  2. </table>
# Pangalan Huling pangalan Username
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @twitter

2. May guhit na mesa

Maging medyo magarbo sa iyong mga talahanayan sa pamamagitan ng pagdaragdag ng zebra-striping—idagdag lang ang .table-stripedklase.

Tandaan: Ginagamit ng mga striped table ang :nth-childCSS selector at hindi available sa IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Pangalan Huling pangalan Username
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @twitter

3. Bordered table

Magdagdag ng mga hangganan sa paligid ng buong talahanayan at mga bilugan na sulok para sa aesthetic na layunin.

  1. <table class = "table table-bordered" >
  2. </table>
# Pangalan Huling pangalan Username
1 marka Otto @mdo
marka Otto @getbootstrap
2 Jacob Thornton @mataba
3 Larry the Bird @twitter

4. Condensed table

Gawing mas compact ang iyong mga talahanayan sa pamamagitan ng pagdaragdag ng .table-condensedklase upang gupitin sa kalahati ang table cell padding (mula 8px hanggang 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Pangalan Huling pangalan Username
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @twitter

5. Pagsamahin silang lahat!

Huwag mag-atubiling pagsamahin ang alinman sa mga klase sa talahanayan upang makamit ang iba't ibang hitsura sa pamamagitan ng paggamit ng alinman sa mga magagamit na klase.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Buong pangalan
# Pangalan Huling pangalan Username
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @twitter

Flexible na HTML at CSS

Ang pinakamagandang bahagi tungkol sa mga form sa Bootstrap ay ang lahat ng iyong mga input at kontrol ay mukhang mahusay kahit paano mo itayo ang mga ito sa iyong markup. Walang kinakailangang labis na HTML, ngunit nagbibigay kami ng mga pattern para sa mga nangangailangan nito.

May mga mas kumplikadong layout na may maikli at nasusukat na mga klase para sa madaling pag-istilo at pag-binding ng kaganapan, kaya saklaw ka sa bawat hakbang.

Kasama ang apat na layout

Ang Bootstrap ay may suporta para sa apat na uri ng mga layout ng form:

  • Patayo (default)
  • Maghanap
  • Nasa linya
  • Pahalang

Ang iba't ibang uri ng mga layout ng form ay nangangailangan ng ilang pagbabago sa markup, ngunit ang mga kontrol mismo ay nananatili at pareho ang kilos.

Mga estado ng kontrol at higit pa

Kasama sa mga form ng Bootstrap ang mga istilo para sa lahat ng mga kontrol ng base form tulad ng input, textarea, at piliin na iyong inaasahan. Ngunit may kasama rin itong ilang custom na bahagi tulad ng mga nakadugtong at naka-prepend na input at suporta para sa mga listahan ng mga checkbox.

Ang mga estado tulad ng error, babala, at tagumpay ay kasama para sa bawat uri ng kontrol sa form. Kasama rin ang mga istilo para sa mga hindi pinaganang kontrol.

Apat na uri ng anyo

Nagbibigay ang Bootstrap ng simpleng markup at mga istilo para sa apat na istilo ng karaniwang mga web form.

Pangalan Klase Paglalarawan
Patayo (default) .form-vertical (hindi kailangan) Naka-stack, naka-left-aligned na mga label sa mga kontrol
Nasa linya .form-inline Naka-left-aligned na label at inline-block na mga kontrol para sa compact na istilo
Maghanap .form-search Extra-rounded text input para sa isang tipikal na aesthetic sa paghahanap
Pahalang .form-horizontal Lutang sa kaliwa, naka-align sa kanan na mga label sa parehong linya bilang mga kontrol

Mga halimbawang form gamit lamang ang mga kontrol sa form, walang dagdag na markup

Pangunahing anyo

Mga default na matalino at magaan na walang dagdag na markup.

Halimbawa ng block-level na help text dito.

  1. <form class = "well" >
  2. <label> Pangalan ng label </label>
  3. <input type = "text" class = "span3" placeholder = "Type something..." >
  4. <span class = "help-block" > Halimbawa ng block-level na help text dito. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Tingnan ako
  7. </label>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </form>

Form ng paghahanap

Idagdag .form-searchsa form at .search-querysa input.

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

Inline na form

Idagdag .form-inlinesa finesse ang vertical alignment at spacing ng form controls.

  1. <form class = "well form-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" > Tandaan ako
  6. </label>
  7. <button type = "submit" class = "btn" > Mag-sign in </button>
  8. </form>

Mga pahalang na anyo

Ipinapakita sa kanan ang lahat ng default na kontrol ng form na sinusuportahan namin. Narito ang naka-bullet na listahan:

  • mga input ng teksto (teksto, password, email, atbp)
  • checkbox
  • radyo
  • pumili
  • maramihang pili
  • input ng file
  • textarea

Bilang karagdagan sa freeform na teksto, ang anumang HTML5 na text-based na input ay lalabas nang ganito.

Halimbawang markup

Dahil sa halimbawang layout ng form sa itaas, narito ang markup na nauugnay sa unang input at control group. Ang .control-group, .control-label, at .controlsmga klase ay kailangan lahat para sa pag-istilo.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Legend text </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Text input </label>
  6. <div class = "mga kontrol" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Supporting help text </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Mga estado ng kontrol ng form

Nagtatampok ang Bootstrap ng mga istilo para sa nakatutok at disabledestado na sinusuportahan ng browser. Inalis namin ang default na Webkit outlineat inilapat ang isang box-shadowbilang kapalit nito para sa :focus.


Pagpapatunay ng form

Kasama rin dito ang mga istilo ng pagpapatunay para sa mga error, babala, at tagumpay. Upang magamit, idagdag ang klase ng error sa nakapaligid na .control-group.

  1. <fieldset
  2. class = "control-group error" >
  3. </fieldset>
Ilang halaga dito
Maaaring may nangyaring mali
Pakitama ang error
Woohoo!
Woohoo!

Pagpapalawak ng mga kontrol sa form

Maghanda at magdagdag ng mga input

Ang mga pangkat ng input—na may nakadugtong o naka-prepend na text—ay nagbibigay ng madaling paraan upang magbigay ng higit pang konteksto para sa iyong mga input. Kasama sa magagandang halimbawa ang @ sign para sa mga username sa Twitter o $ para sa pananalapi.


Mga checkbox at radyo

Hanggang sa v1.4, ang Bootstrap ay nangangailangan ng dagdag na markup sa paligid ng mga checkbox at radyo upang i-stack ang mga ito. Ngayon, ito ay isang simpleng bagay ng pag-uulit ng <label class="checkbox">na bumabalot sa <input type="checkbox">.

Sinusuportahan din ang mga inline na checkbox at radyo. Idagdag lang .inlinesa alinman .checkboxo .radioat tapos ka na.


Mga inline na form at idugtong/i-prepend

Upang gumamit ng prepend o magdagdag ng mga input sa isang inline na form, tiyaking ilagay ang .add-onat inputsa parehong linya, nang walang mga puwang.


Bumuo ng text ng tulong

Upang magdagdag ng text ng tulong para sa iyong mga input ng form, isama ang inline na text ng tulong na may <span class="help-inline">o isang block ng text ng tulong na may <p class="help-block">pagkatapos ng elemento ng pag-input.

Gamitin ang parehong mga .span*klase mula sa grid system para sa mga laki ng input.

Maaari ka ring gumamit ng mga static na klase na hindi nagmamapa sa grid, umaangkop sa mga tumutugon na istilo ng CSS, o nagsasaalang-alang sa iba't ibang uri ng mga kontrol (hal., inputvs. select).

@

Narito ang ilang text ng tulong

.00
Narito ang higit pang text ng tulong
$ .00

Tandaan: Ang mga label ay pumapalibot sa lahat ng mga opsyon para sa mas malalaking lugar ng pag-click at isang mas magagamit na form.

Pindutan class="" Paglalarawan
btn Karaniwang grey na button na may gradient
btn btn-primary Nagbibigay ng dagdag na visual na timbang at kinikilala ang pangunahing aksyon sa isang hanay ng mga pindutan
btn btn-info Ginamit bilang alternatibo sa mga default na istilo
btn btn-success Nagsasaad ng matagumpay o positibong aksyon
btn btn-warning Isinasaad ang pag-iingat na dapat gawin sa pagkilos na ito
btn btn-danger Nagsasaad ng mapanganib o potensyal na negatibong pagkilos
btn btn-inverse Kahaliling dark grey na button, hindi nakatali sa isang semantic na aksyon o paggamit

Mga pindutan para sa mga aksyon

Bilang isang kumbensyon, ang mga pindutan ay dapat lamang gamitin para sa mga aksyon habang ang mga hyperlink ay gagamitin para sa mga bagay. Halimbawa, ang "I-download" ay dapat na isang pindutan habang ang "kamakailang aktibidad" ay dapat na isang link.

Maaaring ilapat ang mga istilo ng button sa anumang bagay na inilapat sa .btnklase. Gayunpaman, karaniwang gusto mong ilapat ang mga ito sa mga <a>elemento <button>lamang.

Cross browser compatibility

Hindi tina-crop ng IE9 ang mga gradient ng background sa mga bilugan na sulok, kaya inaalis namin ito. Kaugnay, ine-jankifie ng IE9 ang mga hindi pinaganang buttonelemento, na nagre-render ng text na kulay abo na may masamang text-shadow na hindi namin maaayos.

Maramihang laki

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Magdagdag ng .btn-large, .btn-small, o .btn-minipara sa dalawang karagdagang laki.


Estadong may kapansanan

Para sa mga naka-disable na button, idagdag ang .disabledklase sa mga link at ang disabledattribute para sa mga <button>elemento.

Pangunahing link Link

Heads up! Ginagamit namin .disabledbilang isang utility class dito, katulad ng karaniwang .activeklase, kaya walang prefix ang kinakailangan.

Isang klase, maraming tag

Gamitin ang .btnklase sa isang <a>, <button>, o <input>elemento.

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

Bilang pinakamahusay na kasanayan, subukang itugma ang elemento para sa iyong konteksto upang matiyak na tumutugma ang cross-browser na pag-render. Kung mayroon kang input, gumamit <input type="submit">ng para sa iyong button.

  • icon-salamin
  • icon-musika
  • icon-search
  • icon-envelope
  • icon-puso
  • icon-star
  • icon-star-walang laman
  • icon-user
  • icon-pelikula
  • icon-ika-malaki
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-alis
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-basura
  • icon-bahay
  • icon-file
  • icon-time
  • icon-daan
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-ulitin
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphone
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • mga icon-tag
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-taas
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-kanan
  • icon-facetime-video
  • icon-larawan
  • icon-lapis
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-paatras
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-kaliwa
  • icon-chevron-kanan
  • icon-plus-sign
  • icon-minus-sign
  • icon-alis-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-alis-bilog
  • icon-ok-bilog
  • icon-ban-circle
  • icon-arrow-kaliwa
  • icon-arrow-kanan
  • icon-arrow-up
  • icon-arrow-pababa
  • icon-share-alt
  • icon-resize-full
  • icon-resize-maliit
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-regalo
  • icon-leaf
  • icon-apoy
  • icon-eye-open
  • icon-eye-close
  • icon-babala-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-bukas
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-kamay-kanan
  • icon-kamay-kaliwa
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-kanan
  • icon-circle-arrow-kaliwa
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-mga gawain
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Itinayo bilang isang sprite

Sa halip na gawing dagdag na kahilingan ang bawat icon, pinagsama-sama namin ang mga ito sa isang sprite—isang grupo ng mga larawan sa isang file na gumagamit ng CSS upang iposisyon ang mga larawan gamit ang background-position. Ito ang parehong paraan na ginagamit namin sa Twitter.com at ito ay gumana nang maayos para sa amin.

Ang lahat ng mga klase ng icon ay may prefix na .icon-para sa wastong namespace at scoping, katulad ng aming iba pang mga bahagi. Makakatulong ito na maiwasan ang mga salungatan sa iba pang mga tool.

Binigyan kami ng Glyphicons ng paggamit ng Halflings set sa aming open-source toolkit hangga't nagbibigay kami ng link at credit dito sa docs. Mangyaring isaalang-alang ang paggawa ng pareho sa iyong mga proyekto.

Paano gamitin

Gumagamit ang Bootstrap ng <i>tag para sa lahat ng icon, ngunit wala silang case class—isang nakabahaging prefix lang. Upang magamit, ilagay ang sumusunod na code sa halos kahit saan:

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

Mayroon ding mga istilong magagamit para sa mga inverted (white) na icon, na ginawang handa sa isang dagdag na klase:

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

Mayroong 140 klase na mapagpipilian para sa iyong mga icon. Magdagdag lang <i>ng tag na may mga tamang klase at nakatakda ka na. Mahahanap mo ang buong listahan sa sprites.less o dito mismo sa dokumentong ito.

Heads up! Kapag gumagamit ng katabi ng mga string ng text, tulad ng sa mga button o nav link, siguraduhing mag-iwan ng puwang pagkatapos ng <i>tag para sa wastong espasyo.

Mga kaso ng paggamit

Mahusay ang mga icon, ngunit saan gagamitin ang mga ito? Narito ang ilang ideya:

  • Bilang mga visual para sa iyong sidebar navigation
  • Para sa isang nabigasyon na puro icon-driven
  • Para sa mga pindutan upang makatulong na ihatid ang kahulugan ng isang aksyon
  • Na may mga link upang ibahagi ang konteksto sa patutunguhan ng isang user

Mahalaga, kahit saan maaari kang maglagay ng <i>tag, maaari kang maglagay ng icon.

Mga halimbawa

Gamitin ang mga ito sa mga button, mga grupo ng button para sa isang toolbar, navigation, o mga naka-prepend na form input.