Bazo CSS

Aldone al la skafaldaro, bazaj HTML-elementoj estas stilitaj kaj plibonigitaj per etendeblaj klasoj por provizi freŝan, konsekvencan aspekton kaj senton.

Titoloj kaj korpa kopio

Tipografia skalo

La tuta tipografia krado baziĝas sur du Malpli variabloj en nia variablos.less dosiero: @baseFontSizekaj @baseLineHeight. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco.

Ni uzas tiujn variablojn, kaj iom da matematiko, por krei la randojn, kompletiĝojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli.

Ekzempla korpa teksto

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.

Ĉefa korpokopio

Elstarigu alineon aldonante .lead.

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

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5
h6. Titolo 6

Emfazo, adreso kaj mallongigo

Elemento Uzado Laŭvola
<strong> Por emfazi fragmenton de teksto kun grava Neniu
<em> Por emfazi fragmenton de teksto kun emfazo Neniu
<abbr> Envolvas mallongigojn kaj akronimojn por montri la vastigitan version surŝvegante

Inkluzivi laŭvolan titleatributon por vastigita teksto

Uzu .initialismklason por majusklaj mallongigoj.
<address> Por kontaktinformoj por ĝia plej proksima prapatro aŭ la tuta laboro Konservu formatadon finante ĉiujn liniojn per<br>

Uzante emfazon

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

Noto: Bonvolu uzi <b>kaj <i>en HTML5, sed ilia uzado iom ŝanĝiĝis. <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.

Ekzemplaj adresoj

Jen du ekzemploj pri kiel la <address>etikedo povas esti uzata:

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

Ekzemplaj mallongigoj

Mallongigoj kun titleatributo havas malpezan punktan malsupran randon kaj helpkursoron sur ŝvebado. Ĉi tio donas al uzantoj kroman indikon, ke io estos montrita dum ŝvebado.

Aldonu la initialismklason al mallongigo por pliigi tipografian harmonion donante al ĝi iomete pli malgrandan tekstgrandecon.

HTML estas la plej bona afero ekde tranĉaĵigita pano.

Mallongigo de la vorto atributo estas attr .

Blokcitaĵoj

Elemento Uzado Laŭvola
<blockquote> Bloknivela elemento por citi enhavon de alia fonto

Aldonu citeatributon por fonta URL

Uzo .pull-leftkaj .pull-rightklasoj por flositaj opcioj
<small> Laŭvola elemento por aldoni uzantan citaĵon, tipe aŭtoro kun titolo de verko Metu la <cite>ĉirkaŭ la titolon aŭ nomon de fonto

Por inkluzivi blokcitaĵon, <blockquote>ĉirkaŭprenu ajnan HTML kiel la citaĵon. Por rektaj citaĵoj ni rekomendas <p>.

Enmetu laŭvolan <small>elementon por citi vian fonton kaj vi ricevos em streketon &mdash;antaŭ ĝi por stilaj celoj.

  1. <blokcitaĵo>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Iu fama </small>
  4. </blockquote>

Ekzemplaj blokcitaĵoj

Defaŭltaj blokcitaĵoj estas stilitaj kiel tia:

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

Iu fama en Korpo de laboro

Por flosigi vian blokcitaĵon dekstren, aldonu class="pull-right":

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

Iu fama en Korpo de laboro

Listoj

Neordigita

<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

Senstila

<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

Ordonita

<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

Priskribo

<dl>

Priskriblistoj
Priskriba listo estas perfekta por difini terminojn.
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.

Horizontala priskribo

<dl class="dl-horizontal">

Priskriblistoj
Priskriba listo estas perfekta por difini terminojn.
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, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Atentu! Horizontalaj priskriblistoj detranĉos terminojn kiuj estas tro longaj por konveni en la maldekstra kolumna riparo text-overflow. En pli mallarĝaj vidfenestroj, ili ŝanĝos al la defaŭlta staplita aranĝo.

En linio

Envolvu enliniajn fragmentojn de kodo per <code>.

  1. Ekzemple , <code> sekcio < / code > devus esti envolvita kiel enlinia .

Baza bloko

Uzu <pre>por pluraj linioj de kodo. Nepre eskapu iujn ajn angulajn krampojn en la kodo por taŭga bildigo.

<p>Ekzempla teksto ĉi tie...</p>
  1. <pre>
  2. <p>Ekzempla teksto ĉi tie...</p>
  3. </pre>

Noto: Nepre konservu kodon ene de <pre>etikedoj kiel eble plej proksime maldekstre; ĝi bildigos ĉiujn langetojn.

Vi povas laŭvole aldoni la .pre-scrollableklason, kiu starigos maksimuman altecon de 350px kaj disponigos y-akson rulumbren.

Google Prettify

Prenu la saman <pre>elementon kaj aldonu du laŭvolajn klasojn por plibonigita bildigo.

  1. <p> Ekzempla teksto ĉi tie... </p>
  1. <pre klaso = "bela presaĵo
  2. linenums" >
  3. <p>Ekzempla teksto ĉi tie...</p>
  4. </pre>

Elŝutu google-code-prettify kaj vidu la legu min por kiel uzi.

Tabelmarko

Etikedo Priskribo
<table> Envolva elemento por montri datumojn en tabelformato
<thead> Uja elemento por tabelkaplinioj ( <tr>) por etikedi tabelkolumnojn
<tbody> Uja elemento por tabelvicoj ( <tr>) en la korpo de la tabelo
<tr> Uja elemento por aro de tabelĉeloj ( <td><th>) kiu aperas sur ununura vico
<td> Defaŭlta tabelĉelo
<th> Speciala tabelĉelo por kolumno (aŭ vico, depende de amplekso kaj lokigo) etikedoj
Devas esti uzata ene de<thead>
<caption> Priskribo aŭ resumo de tio, kion enhavas la tabelo, precipe utila por ekranlegantoj
  1. <tablo>
  2. <kapo>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </ tr >
  7. </thead>
  8. <tkorpo>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </ tr >
  13. </tbody>
  14. </tablo>

Tabelopcioj

Nomo Klaso Priskribo
Defaŭlte Neniu Neniuj stiloj, nur kolumnoj kaj vicoj
Baza .table Nur horizontalaj linioj inter vicoj
Bordita .table-bordered Rondigas angulojn kaj aldonas eksteran randon
Zebro-strio .table-striped Aldonas helgrizan fonkoloron al neparaj vicoj (1, 3, 5, ktp)
Kondensita .table-condensed Duonigas vertikalan remburaĵon, de 8px ĝis 4px, ene de ĉiuj tdkaj thelementoj

Ekzemplaj tabeloj

1. Defaŭltaj tablostiloj

Tabeloj estas aŭtomate stilitaj kun nur kelkaj randoj por certigi legeblecon kaj konservi strukturon. Kun 2.0, la .tableklaso estas postulata.

  1. <table class = "tablo" >
  2. </tablo>
# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter

2. Striita tablo

Fariĝu iom kun viaj tabloj aldonante zebro-striadon—nur aldonu la .table-stripedklason.

Noto: Striitaj tabloj uzas la :nth-childCSS-elektilon kaj ne haveblas en IE7-IE8.

  1. <table class = "tabelo-striita" >
  2. </tablo>
# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la birdo @twitter

3. Bordita tablo

Aldonu randojn ĉirkaŭ la tuta tablo kaj rondigitajn angulojn por estetikaj celoj.

  1. <table class = "tabelo-bordita" >
  2. </tablo>
# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter

4. Kondensita tablo

Faru viajn tabelojn pli kompaktajn aldonante la .table-condensedklason por tranĉi tabelĉelplenigon en duono (de 8px ĝis 4px).

  1. <table class = "tabelo densigita" >
  2. </tablo>
# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter

5. Kombinu ilin ĉiujn!

Bonvolu kombini iun ajn el la tabelklasoj por atingi malsamajn aspektojn uzante iun ajn el la disponeblaj klasoj.

  1. <table class = "tabelo-striita tablo-borda tablo-kondensita" >
  2. ...
  3. </tablo>
Plena nomo
# Antaŭnomo Familia nomo Uzantnomo
1 Mark Otto @mdo
2 Jakobo Thornton @graso
3 Larry la Birdo @twitter

Fleksebla HTML kaj CSS

La plej bona parto pri formoj en Bootstrap estas, ke ĉiuj viaj enigaĵoj kaj kontroloj aspektas bonege, negrave kiel vi konstruas ilin en via markado. Ne necesas superflua HTML, sed ni provizas la ŝablonojn por tiuj, kiuj postulas ĝin.

Pli komplikaj aranĝoj venas kun koncizaj kaj skaleblaj klasoj por facila stilado kaj evento-ligado, do vi estas kovrita ĉe ĉiu paŝo.

Kvar aranĝoj inkludis

Bootstrap venas kun subteno por kvar specoj de formularaj aranĝoj:

  • Vertikala (defaŭlte)
  • Serĉu
  • En linio
  • Horizontala

Malsamaj specoj de formularenpaĝigoj postulas kelkajn ŝanĝojn al markado, sed la kontroloj mem restas kaj kondutas same.

Kontrolu ŝtatojn kaj pli

La formoj de Bootstrap inkluzivas stilojn por ĉiuj bazaj formularaj kontroloj kiel enigo, teksta areo kaj elekto, kiun vi atendus. Sed ĝi ankaŭ venas kun kelkaj kutimaj komponantoj kiel aldonitaj kaj antaŭmetitaj enigaĵoj kaj subteno por listoj de markobutonoj.

Ŝtatoj kiel eraro, averto kaj sukceso estas inkluzivitaj por ĉiu speco de formo-kontrolo. Ankaŭ inkluzivitaj stiloj por malebligitaj kontroloj.

Kvar specoj de formoj

Bootstrap provizas simplan markadon kaj stilojn por kvar stiloj de komunaj retformularoj.

Nomo Klaso Priskribo
Vertikala (defaŭlte) .form-vertical (ne bezonata) Stakigitaj, maldekstre vicigitaj etikedoj super kontroloj
En linio .form-inline Maldekstre vicigitaj etikedoj kaj enlini-blokaj kontroloj por kompakta stilo
Serĉu .form-search Eksterronda teksta enigo por tipa serĉa estetiko
Horizontala .form-horizontal Flosu maldekstren, dekstren vicigitajn etikedojn sur la sama linio kiel kontroloj

Ekzemplaj formoj uzante nur formularajn kontrolojn, sen ekstra markado

Baza formo

Inteligentaj kaj malpezaj defaŭltoj sen ekstra markado.

Ekzemplo-bloknivela helpteksto ĉi tie.

  1. <form klaso = "nu" >
  2. <label> Etikednomo </label>
  3. <input type = "text" class = "span3" placeholder = "Entajpu ion..." >
  4. <span class = "help-block" > Ekzemplo de bloknivela helpteksto ĉi tie. </span>
  5. <label class = "markbutono" >
  6. <input type = "markbox" > Kontrolu min
  7. </etikedo>
  8. <button type = "submit" class = "btn" > Sendi </button>
  9. </form>

Serĉformularo

Aldonu .form-searchal la formo kaj .search-queryal la input.

  1. <form class = "bone formo-serĉo" >
  2. <input type = "text" class = "enigo-meza serĉ-demando" >
  3. <button type = "submit" class = "btn" > Serĉu </button>
  4. </form>

Enlinia formo

Aldonu .form-inlineal fajneco la vertikalan vicigon kaj interspacon de formularaj kontroloj.

  1. <form class = "bone formo-enlinia" >
  2. <input type = "text" class = "input-small" placeholder = "Retpoŝto" >
  3. <input type = "pasvorto" class = "input-small" placeholder = "Pasvorto" >
  4. <label class = "markbutono" >
  5. <input type = "markbox" > Memoru min
  6. </etikedo>
  7. <button type = "submit" class = "btn" > Ensalutu </button>
  8. </form>

Horizontala formoj

Montritaj dekstre estas ĉiuj defaŭltaj formularaj kontroloj, kiujn ni subtenas. Jen la buleta listo:

  • tekstaj enigoj (teksto, pasvorto, retpoŝto, ktp)
  • markobutono
  • radio
  • elektu
  • multobla elekto
  • enigo de dosiero
  • tekstareo

Krom liberforma teksto, ajna HTML5 tekst-bazita enigo aperas tiel.

Ekzempla markado

Konsiderante la supran ekzemplan formularan aranĝon, jen la markado asociita kun la unua enigo kaj kontrolgrupo. La .control-group, .control-label, kaj .controlsklasoj estas ĉiuj postulataj por stilado.

  1. <form class = "form-horizontala" >
  2. <kamparo>
  3. <legend> Legenda teksto </legend>
  4. <div class = "kontrolgrupo" >
  5. <label class = "control-label" for = "input01" > Enigo de teksto </label>
  6. <div class = "kontroloj" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Subtena helpteksto </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Formkontrolaj ŝtatoj

Bootstrap prezentas stilojn por retumilo-subtenataj fokusitaj kaj disabledŝtatoj. Ni forigas la defaŭltan Webkit outlinekaj aplikas a box-shadowen ĝia loko por :focus.


Formvalidigo

Ĝi ankaŭ inkluzivas validajn stilojn por eraroj, avertoj kaj sukceso. Por uzi, aldonu la erarklason al la ĉirkaŭa .control-group.

  1. <kamparo
  2. klaso = "kontrolgrupo-eraro" >
  3. </fieldset>
Iom da valoro ĉi tie
Eble io misfunkciis
Bonvolu korekti la eraron
Uu!
Uu!

Etendante formularajn kontrolojn

Antaŭmeti kaj aldonu enigojn

Enigogrupoj—kun almetita aŭ antaŭmetita teksto—provizas facilan manieron doni pli da kunteksto por viaj enigaĵoj. Grandaj ekzemploj inkluzivas la @-signon por Twitter-uzantnomoj aŭ $ por financoj.


Markobutonoj kaj radioj

Ĝis v1.4, Bootstrap postulis kroman markadon ĉirkaŭ markobutonoj kaj radioj por stakigi ilin. Nun, estas simpla afero ripeti la <label class="checkbox">kiu envolvas la <input type="checkbox">.

Enliniaj markobutonoj kaj radioj ankaŭ estas subtenataj. Nur aldonu .inlineal iu .checkbox.radiokaj vi finis.


Enliniaj formoj kaj aldoni/antaŭigi

Por uzi antaŭmeti aŭ aldoni enigaĵojn en enlinia formo, nepre metu la .add-onkaj inputsur la sama linio, sen spacoj.


Formu helptekston

Por aldoni helptekston por viaj formularaj enigaĵoj, inkludu enlinian helptekston kun <span class="help-inline">aŭ helpan tekstoblokon kun <p class="help-block">post la eniga elemento.

Uzu la samajn .span*klasojn de la kradsistemo por eniggrandecoj.

Vi ankaŭ povas uzi senmovajn klasojn kiuj ne mapas al la krado, ne adaptiĝas al la respondemaj CSS-stiloj, aŭ ne respondecas pri diversaj specoj de kontroloj (ekz., inputkontraŭ select).

@

Jen iom da helpteksto

.00
Jen pli da helpteksto
$ .00

Noto: Etikedoj ĉirkaŭas ĉiujn eblojn por multe pli grandaj klakaj areoj kaj pli uzebla formo.

Butono klaso="" Priskribo
btn Norma griza butono kun gradiento
btn btn-primary Provizas ekstran vidan pezon kaj identigas la ĉefan agon en aro de butonoj
btn btn-info Uzita kiel alternativo al la defaŭltaj stiloj
btn btn-success Indikas sukcesan aŭ pozitivan agon
btn btn-warning Indikas singardemon pri ĉi tiu ago
btn btn-danger Indikas danĝeran aŭ eble negativan agon
btn btn-inverse Alterna malhelgriza butono, ne ligita al semantika ago aŭ uzo

Butonoj por agoj

Kiel konvencio, butonoj devas esti uzataj nur por agoj dum hiperligiloj estas uzeblaj por objektoj. Ekzemple, "Elŝutu" devus esti butono dum "lasta agado" devus esti ligilo.

Butonstiloj povas esti aplikitaj al io ajn kun la .btnklaso aplikata. Tamen, kutime vi volas apliki ĉi tiujn nur al <a>kaj <button>elementoj.

Interkongruo de retumilo

IE9 ne tondas fonajn gradientojn sur rondetaj anguloj, do ni forigas ĝin. Rilata, IE9 jankigas malfunkciigitajn buttonelementojn, farante tekston griza kun aĉa tekst-ombro, kiun ni ne povas ripari.

Multoblaj grandecoj

Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Aldonu .btn-large, .btn-small, aŭ .btn-minipor du pliaj grandecoj.


Malfunkciigita ŝtato

Por malebligitaj butonoj, aldonu la .disabledklason al ligiloj kaj la disabledatributon por <button>elementoj.

Primara ligilo Ligo

Atentu! Ni uzas .disabledĉi tie kiel utilan klason, similan al la komuna .activeklaso, do ne necesas prefikso.

Unu klaso, pluraj etikedoj

Uzu la .btnklason sur <a>, <button>, aŭ <input>elemento.

Ligo
  1. <a class = "btn" href = "" > Ligo </a>
  2. <button class = "btn" type = "sendi" >
  3. Butono
  4. </butono>
  5. <input class = "btn" type = "butono"
  6. valoro = "Enigo" >
  7. <input class = "btn" type = "sendi"
  8. valoro = "Sendu" >

Kiel plej bona praktiko, provu kongrui kun la elemento por via kunteksto por certigi kongruan trans-retumilon bildigon. Se vi havas input, uzu <input type="submit">por via butono.

  • ikono-vitro
  • ikono-muziko
  • ikono-serĉo
  • ikono-koverto
  • ikono-koro
  • ikono-stelo
  • ikono-stelo-malplena
  • ikono-uzanto
  • ikono-filmo
  • ikono-th-granda
  • ikono-th
  • ikono-th-listo
  • ikono-ok
  • ikono-forigi
  • ikono-zoom-en
  • ikono-malgrandigi
  • ikono-malŝaltita
  • ikono-signalo
  • ikono-kogo
  • ikono-rubo
  • ikono-hejmo
  • ikono-dosiero
  • ikono-tempo
  • ikono-vojo
  • ikono-elŝuto-alt
  • ikono-elŝuto
  • ikono-alŝuto
  • ikono-enirkesto
  • ikono-ludado-cirklo
  • ikono-ripeto
  • ikono-refreŝigi
  • ikono-listo-alt
  • ikono-seruro
  • ikono-flago
  • ikono-aŭdiloj
  • ikono-volumo-malŝaltita
  • ikono-volumen-malsupren
  • ikono-volumen-supren
  • ikono-qrkodo
  • ikono-strekkodo
  • ikono-etikedo
  • ikon-etikedoj
  • ikono-libro
  • ikono-legosigno
  • ikono-presaĵo
  • ikono-fotilo
  • ikono-tiparo
  • ikono-grasa
  • ikono-kursiva
  • ikono-teksto-alteco
  • ikono-teksto-larĝo
  • ikono-vicigi-maldekstren
  • icon-align-center
  • ikono-vicigi-dekstre
  • ikono-vicigi-pravigi
  • ikono-listo
  • ikono-indent-maldekstre
  • ikono-indent-dekstra
  • ikono-facetime-video
  • ikono-bildo
  • ikono-krajono
  • ikono-mapo-markilo
  • ikono-ĝustigi
  • ikono-nuanco
  • ikono-redakti
  • ikono-kunhavigo
  • ikono-kontrolo
  • ikono-movo
  • ikono-paŝo-malantaŭen
  • ikono-rapide-malantaŭen
  • ikono-malantaŭen
  • ikono-ludado
  • ikono-paŭzo
  • ikono-halto
  • ikono-antaŭen
  • ikono-rapide-antaŭen
  • ikono-paŝo-antaŭen
  • ikono-elĵeto
  • ikono-ĉevrono-maldekstre
  • ikono-ĉevron-dekstra
  • ikono-plus-signo
  • ikono-minus-signo
  • ikono-forigi-signo
  • ikono-ok-signo
  • ikono-demando-signo
  • ikono-informsigno
  • ikono-ekrankopio
  • ikono-forigi-cirklo
  • ikono-ok-cirklo
  • ikono-malpermeso-cirklo
  • ikono-sago-maldekstre
  • ikono-sago-dekstra
  • ikono-sago-supren
  • ikono-sago-malsupren
  • ikono-kunhavigi-alt
  • ikono-regrandigo-plena
  • ikono-regrandigi-malgranda
  • ikono-plus
  • ikono-minuso
  • ikono-asterisko
  • ikono-ekkrio-signo
  • ikono-donaco
  • ikono-folio
  • ikono-fajro
  • ikono-okulo-malfermita
  • ikono-okulo-proksima
  • ikono-averto-signo
  • ikono-aviadilo
  • ikono-kalendaro
  • ikono-hazarda
  • ikono-komento
  • ikono-magneto
  • ikono-ĉevron-supren
  • ikono-ĉevron-malsupren
  • ikono-retweet
  • ikono-aĉetĉaro
  • ikono-dosierujo-fermi
  • ikono-dosierujo-malfermita
  • ikono-regrandigo-vertikala
  • ikono-regrandigo-horizontala
  • ikono-hdd
  • ikono-bovkorno
  • ikono-sonorilo
  • ikono-atestilo
  • ikono-dikfingro-supren
  • ikono-dikfingroj-malsupren
  • ikono-mano-dekstra
  • ikono-mano-maldekstre
  • ikono-mano-supren
  • ikono-man-malsupren
  • ikono-cirklo-sago-dekstra
  • ikono-cirklo-sago-maldekstre
  • ikono-cirklo-sago-supren
  • ikono-cirklo-sago-malsupren
  • ikono-globo
  • ikono-ŝlosilo
  • ikono-taskoj
  • ikono-filtrilo
  • ikono-tetujo
  • ikono-plena ekrano

Konstruita kiel sprite

Anstataŭ fari ĉiun ikonon ekstra peto, ni kompilis ilin en sprite - amason da bildoj en unu dosiero, kiu uzas CSS por poziciigi la bildojn per background-position. Ĉi tiu estas la sama metodo, kiun ni uzas ĉe Twitter.com kaj ĝi bone funkciis por ni.

Ĉiuj ikonaj klasoj estas antaŭfiksitaj .icon-por taŭga nomspaco kaj amplekso, same kiel niaj aliaj komponantoj. Ĉi tio helpos eviti konfliktojn kun aliaj iloj.

Glyphicons donis al ni uzon de la Halflings aro en nia malfermfonta ilaro kondiĉe ke ni provizas ligilon kaj krediton ĉi tie en la dokumentoj. Bonvolu konsideri fari la samon en viaj projektoj.

Kiel uzi

Bootstrap uzas <i>etikedon por ĉiuj ikonoj, sed ili havas neniun uzklason—nur komunan prefikson. Por uzi, metu la sekvan kodon preskaŭ ie ajn:

  1. <i klaso = "ikono-serĉo" ></i>

Estas ankaŭ disponeblaj stiloj por renversitaj (blankaj) ikonoj, pretaj per unu ekstra klaso:

  1. <i klaso = "ikono-serĉa ikono-blanka" ></i>

Estas 140 klasoj por elekti por viaj ikonoj. Nur aldonu <i>etikedon kun la ĝustaj klasoj kaj vi estas preta. Vi povas trovi la plenan liston en sprites.less aŭ ĝuste ĉi tie en ĉi tiu dokumento.

Atentu! Kiam vi uzas apud tekstoĉenoj, kiel en butonoj aŭ navigaciaj ligiloj, nepre lasu spacon post la <i>etikedo por taŭga interspaco.

Uzkazoj

Ikonoj estas bonegaj, sed kie oni uzus ilin? Jen kelkaj ideoj:

  • Kiel bildoj por via flanka navigado
  • Por simple ikon-movita navigado
  • Por butonoj por helpi transdoni la signifon de ago
  • Kun ligiloj por kunhavi kuntekston sur la celo de uzanto

Esence, ie ajn vi povas meti <i>etikedon, vi povas meti ikonon.

Ekzemploj

Uzu ilin en butonoj, butongrupoj por ilobreto, navigado aŭ antaŭmetitaj formularenigaĵoj.