Bażi CSS

Minbarra l-armar, elementi HTML bażiċi huma stilati u msaħħa bi klassijiet estensibbli biex jipprovdu dehra u sensazzjoni friska u konsistenti.

Intestaturi u kopja tal-korp

Skala tipografika

Il-grilja tipografika kollha hija bbażata fuq żewġ varjabbli Inqas fil-fajl variables.less tagħna: @baseFontSizeu @baseLineHeight. L-ewwel hija d-daqs tat-tipa bażi użata matul u t-tieni hija l-għoli tal-linja bażi.

Aħna nużaw dawk il-varjabbli, u xi matematika, biex noħolqu l-marġini, paddings, u line-heights tat-tip kollu tagħna u aktar.

Eżempju tat-test tal-korp

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.

Kopja tal-korp taċ-ċomb

Agħmel paragrafu jispikkaw billi żżid .lead.

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

h1. Intestatura 1

h2. Intestatura 2

h3. Intestatura 3

h4. Intestatura 4

h5. Intestatura 5
h6. Intestatura 6

Enfasi, indirizz, u abbrevjazzjoni

Element Użu Fakultattiv
<strong> Għall-enfasi ta' snippet ta' test b'importanti Xejn
<em> Għall-enfasi ta' snippet ta' test bi stress Xejn
<abbr> Tiġbor l-abbrevjazzjonijiet u l-akronimi biex turi l-verżjoni estiża meta tgħaddi

Inkludi attribut fakultattiv titlegħal test estiż

Uża .initialismklassi għal abbrevjazzjonijiet kbar.
<address> Għal informazzjoni ta 'kuntatt għall-eqreb antenat tiegħu jew il-korp kollu tax-xogħol Ippreserva l-ifformattjar billi tispiċċa l-linji kollha bi<br>

Bl-użu ta 'enfasi

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

Nota: Ħossok liberu li tuża <b>u <i>fl-HTML5, iżda l-użu tagħhom inbidel xi ftit. <b>huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali filwaqt li <i>huwa l-aktar għal vuċi, termini tekniċi, eċċ.

Eżempji ta' indirizzi

Hawn żewġ eżempji ta’ kif <address>tista’ tintuża t-tikketta:

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

Abbrevjazzjonijiet ta' eżempju

L-abbrevjazzjonijiet titleb'attribut għandhom bordura ta' isfel ħafifa bit-tikek u cursor ta' għajnuna fuq id-daqq. Dan jagħti lill-utenti indikazzjoni żejda xi ħaġa se tintwera fuq il-passaġġ.

Żid il- initialismklassi ma' abbrevjazzjoni biex iżżid l-armonija tipografika billi tagħtiha daqs tat-test kemmxejn iżgħar.

HTML huwa l-aħjar ħaġa peress ħobż imqatta '.

Abbrevjazzjoni tal-kelma attribut hija attr .

Blockquotes

Element Użu Fakultattiv
<blockquote> Element ta' livell ta' blokk biex jiġi kkwotat kontenut minn sors ieħor

Żid citeattribut għall-URL tas-sors

Użu .pull-leftu .pull-rightklassijiet għal għażliet floated
<small> Element fakultattiv għaż-żieda ta' ċitazzjoni li tiffaċċja l-utent, tipikament awtur b'titlu tax-xogħol Poġġi <cite>madwar it-titlu jew l-isem tas-sors

Biex tinkludi blockquote, wrap <blockquote>madwar kwalunkwe HTML bħala l-kwotazzjoni. Għal kwotazzjonijiet dritti nirrakkomandaw <p>.

Inkludi element fakultattiv <small>biex tikkwota s-sors tiegħek u int ikollok sing em &mdash;qabel għal skopijiet ta 'grafika.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Xi ħadd famuż </small>
  4. </blockquote>

Eżempji ta 'blockquotes

Il-kwoti ta' blokk default huma msejsa hekk:

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

Xi ħadd famuż fil Body of work

Biex tpoġġi l-blockquote tiegħek lejn il-lemin, żid class="pull-right":

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

Xi ħadd famuż fil Body of work

Listi

Mhux ordnat

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in 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 sit amet erat nunc
  • Eget porttitor lorem

Unstyled

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in 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 sit amet erat nunc
  • Eget porttitor lorem

Ordnat

<ol>

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

Deskrizzjoni

<dl>

Listi ta' deskrizzjoni
Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Euismod
Vestibulum id ligula porta felis euismod sempre 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.

Deskrizzjoni orizzontali

<dl class="dl-horizontal">

Listi ta' deskrizzjoni
Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Euismod
Vestibulum id ligula porta felis euismod sempre 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 sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, torttor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Irjus up! Il-listi ta' deskrizzjoni orizzontali se jaqtgħu termini li huma twal wisq biex jidħlu fil-kolonna tax-xellug text-overflow. F'viewports idjaq, se jinbidlu għat-tqassim default stacked.

F'konformità

Kebbeb snippets inline tal-kodiċi b' <code>.

  1. Pereżempju , <code> taqsima </ code > għandha tkun imgeżwer bħala inline .

Blokk bażiku

Uża <pre>għal linji multipli ta 'kodiċi. Kun żgur li taħrab kwalunkwe parentesi angolari fil-kodiċi għal rendering xieraq.

<p>Kampjun ta' test hawn...</p>
  1. <pre>
  2. <p>Test tal-kampjun hawn...</p>
  3. </pre>

Nota: Kun żgur li żżomm il-kodiċi fi ħdan <pre>it-tikketti kemm jista 'jkun qrib ix-xellug; se tirrendi t-tabs kollha.

Tista' b'għażla żżid il- .pre-scrollableklassi li se tistabbilixxi għoli massimu ta' 350px u tipprovdi scrollbar tal-assi y.

Google Prettify

Ħu l-istess <pre>element u żid żewġ klassijiet fakultattivi għal rendering imtejjeb.

  1. <p> Test ta' kampjun hawn... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Test tal-kampjun hawn...</p>
  4. </pre>

Niżżel google-code-prettify u ara l-readme għal kif tuża.

Markup tal-mejda

Tag Deskrizzjoni
<table> Element ta' tgeżwir għall-wiri ta' data f'format tabulari
<thead> Element tal-kontenitur għar-ringieli tal-header tat-tabella ( <tr>) biex jittikkettaw il-kolonni tat-tabella
<tbody> Element tal-kontenitur għar-ringieli tal-mejda ( <tr>) fil-korp tat-tabella
<tr> Element tal-kontenitur għal sett ta' ċelluli tat-tabella ( <td>jew <th>) li jidher fuq ringiela waħda
<td> Ċellula tat-tabella default
<th> Ċellula speċjali tat-tabella għal tikketti tal-kolonna (jew ringiela, skont l-ambitu u t-tqegħid)
Għandhom jintużaw fi ħdan<thead>
<caption> Deskrizzjoni jew sommarju ta' dak li żżomm it-tabella, speċjalment utli għall-qarrejja tal-iskrin
  1. <tabella>
  2. <thead>
  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. </mejda>

Għażliet tal-mejda

Isem Klassi Deskrizzjoni
Default Xejn Ebda stili, kolonni u ringieli biss
Bażiku .table Linji orizzontali biss bejn ir-ringieli
Bordurat .table-bordered Dawwar il-kantunieri u żżid il-fruntiera ta 'barra
Żebra-strixxa .table-striped Iżżid kulur fl-isfond griż ċar għal ringieli fard (1, 3, 5, eċċ)
Kondensat .table-condensed Tnaqqas l-ikkuttunar vertikali bin-nofs, minn 8px sa 4px, fi ħdan l td- thelementi kollha

Tabelli ta' eżempju

1. Stili ta 'tabella default

It-tabelli huma awtomatikament stilati bi ftit fruntieri biss biex jiżguraw li jinqara u tinżamm l-istruttura. Bil 2.0, il- .tableklassi hija meħtieġa.

  1. <table class = "mejda" >
  2. </mejda>
# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @twitter

2. Tabella strixxata

Ikseb ftit fancy mat-tabelli tiegħek billi żżid zebra-striping—sempliċement żid il- .table-stripedklassi.

Nota: Tabelli strixxati jużaw is- :nth-childselettur CSS u mhumiex disponibbli f'IE7-IE8.

  1. <table class = "table table-striped" >
  2. </mejda>
# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @twitter

3. Mejda bil-borduri

Żid fruntieri madwar il-mejda kollha u kantunieri fit-tond għal skopijiet estetiċi.

  1. <table class = "tabella bil-bordijiet tal-mejda" >
  2. </mejda>
# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @twitter

4. Tabella kondensata

Agħmel it-tabelli tiegħek aktar kompatti billi żżid il- .table-condensedklassi biex tnaqqas l-ikkuttunar taċ-ċelluli tal-mejda bin-nofs (minn 8px għal 4px).

  1. <table class = "table table-condensed" >
  2. </mejda>
# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @twitter

5. Għaqqadhom kollha!

Ħossok liberu li tgħaqqad kwalunkwe waħda mill-klassijiet tal-mejda biex tikseb dehra differenti billi tuża kwalunkwe waħda mill-klassijiet disponibbli.

  1. <table class = "mejda strixxata tal-mejda bordata tal-mejda kondensata" >
  2. ...
  3. </mejda>
Isem sħiħ
# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @twitter

HTML u CSS flessibbli

L-aħjar parti dwar il-formoli f'Bootstrap hija li l-inputs u l-kontrolli kollha tiegħek jidhru tajbin irrispettivament minn kif tibnihom fil-markup tiegħek. L-ebda HTML superfluwu mhu meħtieġ, iżda nipprovdu l-mudelli għal dawk li jeħtieġuh.

Taqsim aktar ikkumplikat jiġu bi klassijiet konċiżi u li jistgħu jegħlbuhom għal stil faċli u rbit ta 'avvenimenti, sabiex tkun kopert f'kull pass.

Erba 'taqsim inklużi

Bootstrap jiġi b'appoġġ għal erba 'tipi ta' layouts tal-formoli:

  • Vertikali (default)
  • Fittex
  • F'konformità
  • Orizzontali

Tipi differenti ta' tqassim tal-formoli jeħtieġu xi bidliet fil-markup, iżda l-kontrolli nfushom jibqgħu u jġibu ruħhom l-istess.

Kontroll stati u aktar

Il-formoli ta 'Bootstrap jinkludu stili għall-kontrolli tal-forma bażi bħall-input, textarea, u agħżel li tistenna. Iżda tiġi wkoll b'numru ta 'komponenti tad-dwana bħal inputs mehmuża u prepended u appoġġ għal listi ta' kaxxi ta 'kontroll.

Stati bħal żball, twissija, u suċċess huma inklużi għal kull tip ta 'kontroll tal-formola. Inklużi wkoll stili għal kontrolli b'diżabilità.

Erba 'tipi ta' formoli

Bootstrap jipprovdi markup sempliċi u stili għal erba 'stili ta' forom tal-web komuni.

Isem Klassi Deskrizzjoni
Vertikali (default) .form-vertical (mhux meħtieġ) Tikketti f'munzelli, allinjati max-xellug fuq kontrolli
F'konformità .form-inline Tikketta allinjata max-xellug u kontrolli inline-block għal stil kompatt
Fittex .form-search Input ta' test extra-tond għal estetika ta' tfittxija tipika
Orizzontali .form-horizontal Float tikketti allinjati lejn ix-xellug, mal-lemin fuq l-istess linja bħall-kontrolli

Formoli ta' eżempju bl-użu biss ta' kontrolli tal-formoli, l-ebda marka żejda

Forma bażika

Defaults intelliġenti u ħfief mingħajr marka żejda.

Eżempju ta' test ta' għajnuna fil-livell ta' blokk hawn.

  1. <form class = "tajjeb" >
  2. <label> Isem it-tikketta </label>
  3. <input type = "test" class = "span3" placeholder = "Ittajpja xi ħaġa..." >
  4. <span class = "help-block" > Eżempju ta' test ta' għajnuna fil-livell ta' blokk hawn. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Iċċekkjani
  7. </label>
  8. <button type = "submit" class = "btn" > Ibgħat </button>
  9. </form>

Formola ta' tfittxija

Żid .form-searchmal-formola u .search-querymal- input.

  1. <form class = "fit-tfittxija tal-forma sew" >
  2. <input type = "test" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Fittex </button>
  4. </form>

Formola inline

Żid .form-inlinegħall-finezza l-allinjament vertikali u l-ispazjar tal-kontrolli tal-formola.

  1. <form class = "well form-inline" >
  2. <input type = "test" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Ftakarni
  6. </label>
  7. <button type = "submit" class = "btn" > Idħol </button>
  8. </form>

Forom orizzontali

Muri fuq il-lemin hemm il-kontrolli tal-formoli default kollha li nappoġġjaw. Hawn il-lista bulleted:

  • inputs tat-test (test, password, email, eċċ)
  • checkbox
  • radju
  • agħżel
  • għażla multipla
  • input tal-fajl
  • textarea

Minbarra test freeform, kwalunkwe input ibbażat fuq test HTML5 jidher bħal dan.

Eżempju ta 'markup

Minħabba t-tqassim tal-formola eżempju ta 'hawn fuq, hawn il-markup assoċjat mal-ewwel grupp ta' input u kontroll. Il- .control-group, .control-label, u .controlsklassijiet huma kollha meħtieġa għall-grafika.

  1. <form class = "forma-orizzontali" >
  2. <fieldset>
  3. <leġġenda> Test tal-leġġenda </leġġenda>
  4. <div class = "grupp ta' kontroll" >
  5. <label class = "control-label" for = "input01" > Input tat-test </label>
  6. <div class = "kontrolli" >
  7. <input type = "test" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Test ta' għajnuna ta' appoġġ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Stati ta' kontroll tal-formola

Bootstrap karatteristiċi stili għall-browser appoġġjati ffukati u disabledstati. Aħna nneħħu l-Webkit default outlineu napplikaw a box-shadowminfloku għal :focus.


Validazzjoni tal-formola

Jinkludi wkoll stili ta' validazzjoni għal żbalji, twissijiet, u suċċess. Biex tuża, żid il-klassi ta 'żball mal-madwar .control-group.

  1. <fieldset
  2. class = "żball tal-grupp ta' kontroll" >
  3. </fieldset>
Xi valur hawn
Xi ħaġa setgħet marret ħażin
Jekk jogħġbok ikkoreġi l-iżball
Woohoo!
Woohoo!

Estensjoni tal-kontrolli tal-formola

Prepend & ehmeż inputs

Gruppi ta' input—b'test mehmuż jew imqabbel—jipprovdu mod faċli biex tagħti aktar kuntest għall-inputs tiegħek. Eżempji kbar jinkludu s-sinjal @ għall-ismijiet tal-utent ta’ Twitter jew $ għall-finanzi.


Checkboxes u radjijiet

Sa v1.4, Bootstrap kien jeħtieġ markup żejjed madwar kaxxi ta' kontroll u radjijiet biex jiġbduhom. Issa, hija sempliċi kwistjoni li tirrepeti l- <label class="checkbox">li jdawwal il- <input type="checkbox">.

Inline checkboxes u radjijiet huma wkoll appoġġjati. Żid biss .inlinema 'kwalunkwe .checkboxjew .radiou lest.


Formoli inline u tehmeż/prepend

Biex tuża prepend jew tehmeż inputs f'forma inline, kun żgur li tpoġġi l- .add-onu inputfuq l-istess linja, mingħajr spazji.


Formola test ta' għajnuna

Biex iżżid test ta' għajnuna għall-inputs tal-formola tiegħek, inkludi test ta' għajnuna inline ma <span class="help-inline">' jew blokk ta' test ta' għajnuna <p class="help-block">wara l-element ta' input.

Uża l-istess .span*klassijiet mis-sistema tal-grilja għad-daqsijiet tal-input.

Tista 'wkoll tuża klassijiet statiċi li ma jimpenjawx mal-grid, jadattaw għall-istili CSS li jirrispondu, jew jagħtu kont għal tipi differenti ta' kontrolli (eż. inputvs. select).

@

Hawn xi test ta' għajnuna

.00
Hawn aktar test ta' għajnuna
$ .00

Nota: It-tikketti jdawru l-għażliet kollha għal żoni ta 'klikk ħafna akbar u forma aktar użabbli.

Buttuna klassi="" Deskrizzjoni
btn Buttuna griża standard bi gradjent
btn btn-primary Jipprovdi piż viżwali żejjed u jidentifika l-azzjoni primarja f'sett ta 'buttuni
btn btn-info Użat bħala alternattiva għall-istili default
btn btn-success Tindika azzjoni ta' suċċess jew pożittiva
btn btn-warning Jindika li għandha tittieħed kawtela b'din l-azzjoni
btn btn-danger Jindika azzjoni perikoluża jew potenzjalment negattiva
btn btn-inverse Buttuna alternattiva griża skura, mhux marbuta ma' azzjoni jew użu semantiku

Buttuni għal azzjonijiet

Bħala konvenzjoni, il-buttuni għandhom jintużaw biss għal azzjonijiet filwaqt li l-hyperlinks għandhom jintużaw għall-oġġetti. Pereżempju, "Niżżel" għandha tkun buttuna filwaqt li "attività riċenti" għandha tkun link.

L-istili tal-buttuni jistgħu jiġu applikati għal kull ħaġa bil- .btnklassi applikata. Madankollu, tipikament tkun trid tapplika dawn biss għal <a>u <button>elementi.

Kompatibilità cross browser

IE9 ma uċuħ gradjenti fl-isfond fuq kantunieri fit-tond, hekk aħna neħħiha. Relatati, IE9 jankifies buttonelementi b'diżabilità, tirrendi t-test griż b'test diżgustanti-dell li ma nistgħux nirranġaw.

Daqsijiet multipli

Fancy buttuni akbar jew iżgħar? Żid .btn-large, .btn-small, jew .btn-minigħal żewġ daqsijiet addizzjonali.


Stat b'diżabilità

Għal buttuni b'diżabilità, żid il- .disabledklassi mal-links u l- disabledattribut għall - <button>elementi.

Link primarju Link

Irjus up! Aħna nużaw .disabledbħala klassi ta 'utilità hawn, simili għall- .activeklassi komuni, għalhekk l-ebda prefiss mhu meħtieġ.

Klassi waħda, tikketti multipli

Uża l- .btnklassi fuq element <a>, <button>, jew <input>.

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "issottometti" >
  3. Buttuna
  4. </button>
  5. <input class = "btn" tip = "buttuna"
  6. valur = "Input" >
  7. <input class = "btn" type = "issottometti"
  8. valur = "Ibgħat" >

Bħala l-aħjar prattika, ipprova tqabbel l-element għalik il-kuntest biex tiżgura t-tqabbil ta' rendering bejn il-browser. Jekk għandek input, uża <input type="submit">għall-buttuna tiegħek.

  • ikona-ħġieġ
  • ikona-mużika
  • ikona-tfittxija
  • ikona-pakkett
  • ikona-qalb
  • ikona-istilla
  • icon-star-vojta
  • ikona-utent
  • ikona-film
  • ikona-th-kbar
  • ikona-th
  • ikona-th-lista
  • ikona-ok
  • ikona-tneħħija
  • ikona-zoom-in
  • icon-zoom-out
  • ikona mitfija
  • ikona-sinjal
  • ikona-cog
  • ikona-żibel
  • ikona-dar
  • ikona-fajl
  • ikona-ħin
  • ikona-triq
  • icon-download-alt
  • ikona-download
  • ikona-upload
  • icon-inbox
  • ikona-play-ċirku
  • ikona-repeti
  • ikona-aġġornament
  • ikona-lista-alt
  • icon-lock
  • ikona-bandiera
  • ikona-headphones
  • icon-volum-off
  • ikona-volum-isfel
  • ikona-volum up
  • ikona-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • ikona-ktieb
  • ikona-bookmark
  • ikona-istampar
  • ikona-kamera
  • ikona-font
  • ikona-tipa grassa
  • ikona-korsiv
  • ikona-test-għoli
  • icon-test-wisa'
  • icon-align-left
  • icon-align-center
  • icon-align-lemin
  • icon-align-justify
  • lista-ikona
  • ikona-inċiż-xellug
  • ikona-inċiż-lemin
  • icon-facetime-video
  • ikona-stampa
  • ikona-lapes
  • ikona-mappa-markatur
  • ikona-aġġustament
  • ikona-lewn
  • icon-edit
  • icon-share
  • ikona-kontroll
  • ikona-ċaqliq
  • ikona-pass-lura
  • ikona-veloċi-lura
  • ikona-lura
  • ikona-play
  • ikona-pawsa
  • ikona-waqfien
  • ikona-quddiem
  • icon-fast-forward
  • ikona-pass-quddiem
  • icon-eject
  • ikona-chevron-xellug
  • ikona-chevron-lemin
  • ikona-plus-sinjal
  • ikona-minus-sinjal
  • icon-neħħi-sinjal
  • ikona-ok-sinjal
  • ikona-mistoqsija-sinjal
  • ikona-informazzjoni-sinjal
  • ikona-screenshot
  • ikona-tneħħija-ċirku
  • ikona-ok-ċirku
  • ikona-projbizzjoni-ċirku
  • ikona-vleġġa-xellug
  • ikona-vleġġa-lemin
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-żgħir
  • icon-plus
  • ikona-minus
  • ikona-asterisk
  • icon-exclamation-sign
  • ikona-rigal
  • ikona-werqa
  • ikona-nar
  • ikona-għajn-miftuħa
  • icon-eye-close
  • ikona-sinjal-twissija
  • ikona-pjan
  • ikona-kalendarju
  • ikona-każwali
  • ikona-kumment
  • ikona-kalamita
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • ikona-folder-miftuħ
  • icon-resize-vertikali
  • icon-resize-orizzontali
  • ikona-hdd
  • ikona-bullhorn
  • ikona-qanpiena
  • ikona-ċertifikat
  • icon-thumbs-up
  • icon-thumbs-down
  • ikona-idejn-lemin
  • ikona-idejn-xellug
  • icon-hand-up
  • icon-hand-down
  • ikona-ċirku-vleġġa-lemin
  • ikona-ċirku-vleġġa-xellug
  • ikona-ċirku-vleġġa-up
  • ikona-ċirku-vleġġa-isfel
  • ikona-globu
  • icon-wrench
  • icon-kompiti
  • ikona-filtru
  • ikona-bagalja
  • ikona-fullscreen

Mibnija bħala sprite

Minflok ma nagħmlu kull ikona talba żejda, aħna kkumpilajnahom fi sprite—mazz ta 'immaġini f'fajl wieħed li juża CSS biex ipoġġi l-immaġini b' background-position. Dan huwa l-istess metodu li nużaw fuq Twitter.com u ħadem tajjeb għalina.

Il-klassijiet tal-ikoni kollha huma prefissati bi .icon-għal spazjar tal-ismijiet u skoping xieraq, bħall-komponenti l-oħra tagħna. Dan se jgħin biex jiġu evitati kunflitti ma 'għodod oħra.

Glyphicons tatna l-użu tas-sett Halflings fis-sett ta' għodda open-source tagħna sakemm nipprovdu link u kreditu hawn fid-doks. Jekk jogħġbok ikkunsidra li tagħmel l-istess fil-proġetti tiegħek.

Kif tuża

Bootstrap juża <i>tikketta għall-ikoni kollha, iżda m'għandhom l-ebda klassi tal-każ—prefiss komuni biss. Biex tuża, poġġi l-kodiċi li ġej kważi kullimkien:

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

Hemm ukoll stili disponibbli għal ikoni maqlubin (abjad), lesti bi klassi waħda żejda:

  1. <i klassi = "ikona-tfittxija ikona-abjad" ></i>

Hemm 140 klassi minn fejn tagħżel għall-ikoni tiegħek. Żid biss <i>tikketta bil-klassijiet it-tajba u int issettjat. Tista' ssib il-lista sħiħa fi sprites.less jew eżatt hawn f'dan id-dokument.

Irjus up! Meta tuża ħdejn strings ta 'test, bħal fil-buttuni jew nav links, kun żgur li tħalli spazju wara t- <i>tikketta għal spazjar xieraq.

Każijiet ta' użu

Ikoni huma kbar, imma fejn wieħed jużahom? Hawn huma ftit ideat:

  • Bħala viżwali għan-navigazzjoni tal-sidebar tiegħek
  • Għal navigazzjoni mmexxija minn ikoni purament
  • Għal buttuni biex jgħinu biex iwasslu t-tifsira ta 'azzjoni
  • B'links biex jaqsmu l-kuntest fuq id-destinazzjoni ta 'utent

Essenzjalment, kullimkien tista 'tpoġġi <i>tikketta, tista' tpoġġi ikona.

Eżempji

Użahom f'buttuni, gruppi ta 'buttuni għal toolbar, navigazzjoni, jew inputs ta' formola prepended.