CSS de bază

Pe lângă schele, elementele HTML de bază sunt stilate și îmbunătățite cu clase extensibile pentru a oferi un aspect și o senzație proaspătă, consistentă.

Titluri și text

Scara tipografica

Întreaga grilă tipografică se bazează pe două variabile Less din fișierul nostru variabile.less: @baseFontSizeși @baseLineHeight. Prima este dimensiunea fontului de bază folosită pe tot parcursul, iar a doua este înălțimea liniei de bază.

Folosim acele variabile și ceva matematică pentru a crea marginile, umpluturile și înălțimile liniilor de toate tipurile noastre și altele.

Exemplu de corp de 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.

Copia corpului principal

Faceți un paragraf în evidență adăugând .lead.

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

h1. Titlul 1

h2. Titlul 2

h3. Titlul 3

h4. Titlul 4

h5. Titlul 5
h6. Titlul 6

Accentuare, adresă și abreviere

Element Utilizare Opțional
<strong> Pentru a sublinia un fragment de text cu important Nici unul
<em> Pentru a sublinia un fragment de text cu stres Nici unul
<abbr> Include abrevieri și acronime pentru a afișa versiunea extinsă la trecerea cursorului

Includeți un titleatribut opțional pentru textul extins

Utilizați .initialismclasa pentru abrevieri cu majuscule.
<address> Pentru informații de contact pentru cel mai apropiat strămoș al său sau pentru întregul corp de lucru Păstrați formatarea prin încheierea tuturor liniilor cu<br>

Folosind accentul

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.

Notă: Simțiți-vă liber să utilizați <b>și <i>în HTML5, dar utilizarea lor s-a schimbat puțin. <b>este menit să evidențieze cuvinte sau expresii fără a transmite o importanță suplimentară, în timp ce <i>este mai ales pentru voce, termeni tehnici etc.

Exemple de adrese

Iată două exemple despre cum <address>poate fi utilizată eticheta:

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

Exemple de abrevieri

Abrevierile cu un titleatribut au un chenar de jos punctat ușor și un cursor de ajutor la hover. Acest lucru oferă utilizatorilor o indicație suplimentară că ceva va fi afișat la trecerea cursorului.

Adăugați initialismclasa la o abreviere pentru a crește armonia tipografică, oferindu-i o dimensiune de text puțin mai mică.

HTML este cel mai bun lucru de la feliile de pâine.

O abreviere a cuvântului atribut este attr .

Citate bloc

Element Utilizare Opțional
<blockquote> Element la nivel de bloc pentru citarea conținutului dintr-o altă sursă

Adăugați citeun atribut pentru adresa URL sursă

Utilizare .pull-leftși .pull-rightclase pentru opțiuni flotante
<small> Element opțional pentru adăugarea unei citate orientate către utilizator, de obicei un autor cu titlul lucrării Plasați în <cite>jurul titlului sau al numelui sursei

Pentru a include un blockquote, include <blockquote>orice HTML ca citat. Pentru citate drepte vă recomandăm un <p>.

Includeți un element opțional <small>pentru a vă cita sursa și veți primi o liniuță &mdash;înaintea acestuia în scopuri de styling.

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

Exemple de citate bloc

Citatele bloc implicite sunt stilate astfel:

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

Cineva celebru în Body of work

Pentru a vă muta citatul bloc la dreapta, adăugați class="pull-right":

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

Cineva celebru în Body of work

Liste

Neordonat

<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

Nestilat

<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

Ordonat

<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

Descriere

<dl>

Liste de descriere
O listă de descriere este perfectă pentru definirea termenilor.
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.

Descriere orizontală

<dl class="dl-horizontal">

Liste de descriere
O listă de descriere este perfectă pentru definirea termenilor.
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.

Atenție! Listele de descriere orizontale vor trunchia termenii care sunt prea lungi pentru a se potrivi în corecția coloanei din stânga text-overflow. În ferestrele de vizualizare mai înguste, acestea se vor schimba la aspectul implicit stivuit.

In linie

Înfășurați fragmente de cod inline cu <code>.

  1. De exemplu , secțiunea < code> </ code > ar trebui să fie înfășurată ca inline .

Bloc de bază

Utilizați <pre>pentru mai multe linii de cod. Asigurați-vă că scăpați de orice paranteze unghiulare din cod pentru o randare corectă.

<p>Exemplu de text aici...</p>
  1. <pre>
  2. <p>Exemplu de text aici...</p>
  3. </pre>

Notă: Asigurați-vă că păstrați codul în <pre>etichete cât mai aproape de stânga posibil; va reda toate filele.

Puteți adăuga opțional .pre-scrollableclasa care va seta o înălțime maximă de 350 px și va oferi o bară de derulare pe axa y.

Google Prettify

Luați același <pre>element și adăugați două clase opționale pentru randare îmbunătățită.

  1. <p> Exemplu de text aici... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Exemplu de text aici...</p>
  4. </pre>

Descărcați google-code-prettify și vedeți citiți-mă pentru modul de utilizare.

Markup tabel

Etichetă Descriere
<table> Element de împachetare pentru afișarea datelor în format tabelar
<thead> Element container pentru rândurile antetului tabelului ( <tr>) pentru a eticheta coloanele din tabel
<tbody> Element container pentru rândurile de tabel ( <tr>) din corpul tabelului
<tr> Element container pentru un set de celule de tabel ( <td>sau <th>) care apare pe un singur rând
<td> Celula implicită de tabel
<th> Celulă specială de tabel pentru etichetele de coloană (sau rând, în funcție de domeniul și de plasare)
Trebuie utilizate într-un<thead>
<caption> Descriere sau rezumat a ceea ce conține tabelul, util în special pentru cititorii de ecran
  1. <tabel>
  2. <cap>
  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. </tabel>

Opțiuni de masă

Nume Clasă Descriere
Mod implicit Nici unul Fără stiluri, doar coloane și rânduri
De bază .table Doar linii orizontale între rânduri
Mărginit .table-bordered Rotunjește colțurile și adaugă marginea exterioară
Dună zebră .table-striped Adaugă culoare de fundal gri deschis la rândurile impare (1, 3, 5 etc.)
Condensat .table-condensed Reduce căptușeala verticală în jumătate, de la 8px la 4px, în tdtoate thelementele

Exemple de tabele

1. Stiluri implicite de tabel

Tabelele sunt stilate automat cu doar câteva chenare pentru a asigura lizibilitatea și menține structura. Cu 2.0, .tableclasa este necesară.

  1. < clasa tabel = „tabel” >
  2. </tabel>
# Nume Numele de familie Nume de utilizator
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate

2. Masa cu dungi

Fă-ți un pic de fantezie cu mesele adăugând dungi zebră - doar adaugă .table-stripedclasa.

Notă: Tabelele cu dungi folosesc :nth-childselectorul CSS și nu sunt disponibile în IE7-IE8.

  1. <table class = "table table-striped" >
  2. </tabel>
# Nume Numele de familie Nume de utilizator
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry Pasarea @stare de nervozitate

3. Masă mărginită

Adăugați chenaruri în jurul întregii mese și colțuri rotunjite pentru scopuri estetice.

  1. <table class = "table table-bordered" >
  2. </tabel>
# Nume Numele de familie Nume de utilizator
1 marcă Otto @mdo
marcă Otto @getbootstrap
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate

4. Tabel condensat

Faceți tabelele mai compacte adăugând .table-condensedclasa pentru a tăia umplutura celulelor tabelului la jumătate (de la 8px la 4px).

  1. <table class = "table table-condensed" >
  2. </tabel>
# Nume Numele de familie Nume de utilizator
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate

5. Combină-le pe toate!

Simțiți-vă liber să combinați oricare dintre clasele de tabel pentru a obține aspecturi diferite utilizând oricare dintre clasele disponibile.

  1. <table class = "tabel table-striped table-bordered table-condensed" >
  2. ...
  3. </tabel>
Numele complet
# Nume Numele de familie Nume de utilizator
1 marcă Otto @mdo
2 Iacov Thornton @gras
3 Larry pasărea @stare de nervozitate

HTML și CSS flexibil

Cea mai bună parte a formularelor din Bootstrap este că toate intrările și controalele dvs. arată grozav, indiferent de modul în care le creați în markup. Nu este necesar HTML de prisos, dar oferim modele pentru cei care îl solicită.

Aspectele mai complicate vin cu clase succinte și scalabile pentru stilare ușoară și legare la evenimente, astfel încât să fiți acoperit la fiecare pas.

Patru machete incluse

Bootstrap vine cu suport pentru patru tipuri de aspecte de formulare:

  • Vertical (implicit)
  • Căutare
  • In linie
  • Orizontală

Diferite tipuri de aspecte de formular necesită unele modificări ale marcajului, dar controalele în sine rămân și se comportă la fel.

Controlează stările și nu numai

Formularele Bootstrap includ stiluri pentru toate controalele de bază ale formularului, cum ar fi intrarea, zona de text și selectarea la care v-ați aștepta. Dar vine și cu o serie de componente personalizate, cum ar fi intrări anexate și anexate și suport pentru liste de casete de selectare.

Stări precum eroarea, avertismentul și succesul sunt incluse pentru fiecare tip de control al formularului. Sunt incluse și stilurile pentru comenzile dezactivate.

Patru tipuri de forme

Bootstrap oferă markup și stiluri simple pentru patru stiluri de formulare web comune.

Nume Clasă Descriere
Vertical (implicit) .form-vertical (nu este necesar) Etichete stivuite, aliniate la stânga peste comenzi
In linie .form-inline Etichetă aliniată la stânga și comenzi pentru blocuri inline pentru un stil compact
Căutare .form-search Introducerea textului foarte rotunjită pentru o estetică tipică de căutare
Orizontală .form-horizontal Flotați etichetele aliniate la stânga, la dreapta pe aceeași linie ca și controalele

Exemple de formulare folosind doar controale de formular, fără markup suplimentar

Forma de bază

Setări implicite inteligente și ușoare, fără markup suplimentar.

Exemplu de text de ajutor la nivel de bloc aici.

  1. <form class = „bine” >
  2. <label> Numele etichetei </label>
  3. <input type = "text" class = "span3" placeholder = "Tastați ceva..." >
  4. <span class = "help-block" > Exemplu de text de ajutor la nivel de bloc aici. </span>
  5. <label class = "caseta de selectare" >
  6. <input type = "checkbox" > Verificați-mă
  7. </label>
  8. <button type = "submit" class = "btn" > Trimiteți </button>
  9. </form>

Formular de căutare

Adăugați .form-searchla formular și .search-queryla input.

  1. <form class = "bine form-search" >
  2. < tip de intrare = „text” class = „interogare de căutare-mediu de intrare” >
  3. <button type = "submit" class = "btn" > Căutare </button>
  4. </form>

Formular inline

Adăugați .form-inlinepentru finețe alinierea verticală și spațierea controalelor de formular.

  1. <form class = "bine form-inline" >
  2. <input type = "text" class = "input-small" substituent = "E-mail" >
  3. <input type = "parolă" class = "input-small" placeholder = "Parolă" >
  4. <label class = "caseta de selectare" >
  5. <input type = "checkbox" > Ține-mă minte
  6. </label>
  7. <button type = "submit" class = "btn" > Conectați-vă </button>
  8. </form>

Forme orizontale

În partea dreaptă sunt afișate toate controalele implicite ale formularelor pe care le acceptăm. Iată lista cu marcatori:

  • introducerea textului (text, parolă, e-mail etc.)
  • Caseta de bifat
  • radio
  • Selectați
  • selectie multipla
  • introducerea fișierului
  • zona textului

Pe lângă textul cu formă liberă, orice intrare bazată pe text HTML5 apare astfel.

Exemplu de marcare

Având în vedere modelul de formular de mai sus, iată marcajul asociat cu primul grup de intrare și control. Clasele .control-group, .control-label, și .controlssunt toate necesare pentru coafare.

  1. <form class = "form-horizontal" >
  2. <set de câmpuri>
  3. <legenda> Textul legendei </legenda>
  4. <div class = "grup de control" >
  5. <label class = "control-label" for = "input01" > Introducere text </label>
  6. <div class = "controale" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Text de ajutor compatibil </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Stări de control al formularului

Bootstrap oferă stiluri pentru disabledstate și concentrate acceptate de browser. Îndepărtăm Webkit-ul implicit outlineși aplicăm un box-shadowîn locul lui pentru :focus.


Validarea formularului

Include, de asemenea, stiluri de validare pentru erori, avertismente și succes. Pentru a utiliza, adăugați clasa de eroare la .control-group.

  1. <set de câmpuri
  2. class = "eroare de grup de control" >
  3. </fieldset>
O oarecare valoare aici
Poate că ceva nu a mers prost
Vă rugăm să corectați eroarea
Woo hoo!
Woo hoo!

Extinderea controalelor de formular

Adăugați și adăugați intrări

Grupurile de introducere - cu text adăugat sau anexat - oferă o modalitate ușoară de a oferi mai mult context pentru intrările dvs. Exemple excelente includ semnul @ pentru numele de utilizator Twitter sau $ pentru finanțe.


Casete de selectare și radiouri

Până la v1.4, Bootstrap necesita un marcaj suplimentar în jurul casetelor de selectare și a radiourilor pentru a le stivui. Acum, este o simplă chestiune de a repeta textul <label class="checkbox">care înfășoară <input type="checkbox">.

Casetele de selectare în linie și radiourile sunt, de asemenea, acceptate. Doar adăugați .inlinela oricare .checkboxsau .radioși gata.


Formulare în linie și adăugați/prevăzuți

Pentru a utiliza intrări de antecedente sau de adăugare într-un formular inline, asigurați-vă că plasați .add-onși inputpe aceeași linie, fără spații.


Formează text de ajutor

Pentru a adăuga text de ajutor pentru intrările din formular, includeți text de ajutor în linie cu <span class="help-inline">sau un bloc de text de ajutor <p class="help-block">după elementul de intrare.

Utilizați aceleași .span*clase din sistemul de grilă pentru dimensiunile de intrare.

De asemenea, puteți utiliza clase statice care nu se mapează la grilă, nu se adaptează la stilurile CSS receptive sau nu iau în considerare diferite tipuri de controale (de exemplu, inputvs. select).

@

Iată un text de ajutor

.00
Iată mai mult text de ajutor
$ .00

Notă: Etichetele înconjoară toate opțiunile pentru zone de clic mult mai mari și o formă mai utilizabilă.

Buton clasa="" Descriere
btn Buton gri standard cu gradient
btn btn-primary Oferă greutate vizuală suplimentară și identifică acțiunea principală într-un set de butoane
btn btn-info Folosit ca alternativă la stilurile implicite
btn btn-success Indică o acțiune reușită sau pozitivă
btn btn-warning Indică că trebuie luată precauție cu această acțiune
btn btn-danger Indică o acțiune periculoasă sau potențial negativă
btn btn-inverse Buton alternativ gri închis, care nu este legat de o acțiune sau utilizare semantică

Butoane pentru acțiuni

Ca o convenție, butoanele ar trebui să fie folosite numai pentru acțiuni, în timp ce hyperlinkurile trebuie folosite pentru obiecte. De exemplu, „Descărcare” ar trebui să fie un buton, în timp ce „activitate recentă” ar trebui să fie un link.

Stilurile de butoane pot fi aplicate oricărui lucru cu .btnclasa aplicată. Cu toate acestea, de obicei, veți dori să le aplicați numai la elemente <a>și <button>.

Compatibilitate între browsere

IE9 nu decupează degrade de fundal pe colțurile rotunjite, așa că îl eliminăm. Înrudit, IE9 dezactivează buttonelementele dezactivate, redând textul gri cu o umbră de text urâtă pe care nu o putem remedia.

Dimensiuni multiple

Vrei nasturi mai mari sau mai mici? Adăugați .btn-large, .btn-small, sau .btn-minipentru două dimensiuni suplimentare.


Stare dezactivată

Pentru butoanele dezactivate, adăugați .disabledclasa la linkuri și disabledatributul pentru <button>elemente.

Legătura principală Legătură

Atenție! Folosim .disabledaici ca o clasă de utilitate, similară cu .activeclasa comună, deci nu este necesar niciun prefix.

O clasă, mai multe etichete

Utilizați .btnclasa pe un element <a>, <button>, sau <input>.

Legătură
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "submit" >
  3. Buton
  4. </button>
  5. <input class = "btn" type = "button"
  6. valoare = "Intrare" >
  7. <input class = "btn" type = "submit"
  8. valoare = "Trimite" >

Ca cea mai bună practică, încercați să potriviți elementul pentru contextul dvs. pentru a asigura randarea pe mai multe browsere. Dacă aveți un input, utilizați un <input type="submit">pentru butonul dvs.

  • icoană-sticlă
  • icoană-muzică
  • icon-search
  • icoană-plic
  • icoana-inima
  • icoană-stea
  • pictogramă-stea-gol
  • pictogramă-utilizator
  • icoană-film
  • icon-th-mare
  • icoana-th
  • icon-a-lista
  • pictograma-ok
  • icon-eliminare
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icoană-semnal
  • pictogramă-cog
  • pictogramă-coș de gunoi
  • icon-acasă
  • icon-fișier
  • pictogramă-timp
  • icoană-drum
  • icon-download-alt
  • icon-descărcare
  • icon-upload
  • pictogramă-inbox
  • icon-play-cerc
  • pictogramă-repetare
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icoană-steag
  • pictogramă-căști
  • icon-volum-off
  • pictograma-volum-jos
  • pictogramă-creștere volum
  • pictogramă-qrcode
  • pictogramă-cod de bare
  • pictogramă-etichetă
  • pictograme-etichete
  • carte-icoană
  • pictogramă-marcaj
  • pictogramă-imprimare
  • pictogramă-camera
  • pictogramă-font
  • pictogramă-bold
  • pictogramă-italic
  • pictogramă-text-înălțime
  • pictogramă-text-lățime
  • icon-align-stânga
  • icon-align-center
  • icon-align-dreapta
  • icon-align-justify
  • lista de pictograme
  • pictogramă-indentare-stânga
  • pictograma-indentare-dreapta
  • icon-facetime-video
  • pictogramă-imagine
  • pictogramă-creion
  • pictogramă-hartă-marker
  • pictogramă-reglare
  • pictogramă-tentă
  • icon-edit
  • icon-share
  • pictogramă-verificare
  • pictogramă-mutare
  • pictogramă-pas-înapoi
  • pictogramă-rapid-înapoi
  • pictogramă-înapoi
  • icon-play
  • pictogramă-pauză
  • pictogramă-oprire
  • pictogramă-înainte
  • pictogramă-înainte rapidă
  • pictogramă-pas-înainte
  • icon-eject
  • pictogramă-chevron-stânga
  • pictograma-chevron-dreapta
  • pictogramă-plus-semn
  • pictogramă-semn-minus
  • pictogramă-elimină-semn
  • pictograma-ok-semn
  • pictogramă-întrebare-semn
  • pictogramă-semn-info
  • icon-captură de ecran
  • pictogramă-elimină-cerc
  • pictogramă-ok-cerc
  • pictogramă-ban-cerc
  • pictogramă-săgeată-stânga
  • pictogramă-săgeată-dreapta
  • pictogramă-săgeată-sus
  • pictogramă-săgeată-jos
  • icon-share-alt
  • icon-resize-full
  • icon-redimensionare-mic
  • icon-plus
  • pictogramă-minus
  • pictogramă-asterisc
  • pictogramă-semn-exclamație
  • icoană-cadou
  • icoană-frunză
  • icoana-foc
  • pictogramă-ochi-deschis
  • pictogramă-ochi-închis
  • pictogramă-semn-avertisment
  • icoană-plan
  • icoana-calendar
  • pictogramă-aleatorie
  • pictogramă-comentar
  • pictogramă-magnet
  • icon-chevron-up
  • pictogramă-chevron-jos
  • pictogramă-retweet
  • pictogramă-coș de cumpărături
  • icon-folder-close
  • icon-folder-deschide
  • icon-resize-vertical
  • pictogramă-redimensionare-orizontală
  • pictogramă-hdd
  • icoană-bulhorn
  • icoana-clopot
  • icon-certificat
  • pictogramă-degetul mare în sus
  • pictogramă-degetele în jos
  • pictograma-mana-dreapta
  • pictograma-mana-stânga
  • pictograma-mana sus
  • pictograma-mana-jos
  • pictogramă-cerc-săgeată-dreapta
  • pictogramă-cerc-săgeată-stânga
  • pictogramă-cerc-săgeată-sus
  • pictogramă-cerc-săgeată-jos
  • icoană-glob
  • icoană-cheie
  • pictograme-sarcini
  • pictogramă-filtru
  • icoană-servietă
  • pictogramă-ecran complet

Construit ca un sprite

În loc să facem din fiecare pictogramă o solicitare suplimentară, le-am compilat într-un sprite - o grămadă de imagini într-un singur fișier care utilizează CSS pentru a poziționa imaginile cu background-position. Aceasta este aceeași metodă pe care o folosim pe Twitter.com și a funcționat bine pentru noi.

Toate clasele de pictograme sunt prefixate cu .icon-pentru spații de nume și delimitare adecvate, la fel ca celelalte componente ale noastre. Acest lucru va ajuta la evitarea conflictelor cu alte instrumente.

Glyphicons ne-a permis să folosim setul Halflings din setul nostru de instrumente open-source, atâta timp cât oferim un link și un credit aici în documente. Vă rugăm să luați în considerare să faceți același lucru în proiectele dvs.

Cum se utilizează

Bootstrap folosește o <i>etichetă pentru toate pictogramele, dar nu au o clasă de majuscule - doar un prefix comun. Pentru a utiliza, plasați următorul cod aproape oriunde:

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

Există, de asemenea, stiluri disponibile pentru pictogramele inversate (albe), pregătite cu o clasă suplimentară:

  1. <i class = „icoană-căutare pictogramă-albă” ></i>

Există 140 de clase din care puteți alege pentru pictogramele dvs. Doar adăugați o <i>etichetă cu clasele potrivite și sunteți gata. Puteți găsi lista completă în sprites.less sau chiar aici, în acest document.

Atenție! Când utilizați lângă șiruri de text, ca în butoane sau link-uri de navigare, asigurați-vă că lăsați un spațiu după <i>etichetă pentru o spațiere adecvată.

Cazuri de utilizare

Pictogramele sunt grozave, dar unde le-ar folosi? Iată câteva idei:

  • Ca elemente vizuale pentru navigarea în bara laterală
  • Pentru o navigare pur bazată pe pictograme
  • Pentru butoane pentru a ajuta la transmiterea sensului unei acțiuni
  • Cu linkuri pentru a partaja context la destinația unui utilizator

În esență, oriunde poți pune o <i>etichetă, poți pune o pictogramă.

Exemple

Folosiți-le în butoane, grupuri de butoane pentru o bară de instrumente, navigare sau intrări de formulare anexate.