CSS di basa

In cima à u scaffolding, l'elementi HTML basi sò stilati è rinfurzati cù classi estensibili per furnisce un aspettu frescu è coherente.

Intestazioni è copia di corpu

Scala tipografica

L'intera griglia tipografica hè basatu annantu à dui Less variables in our variables.less file: @baseFontSizeand @baseLineHeight. U primu hè a dimensione di fonti di basa utilizata in tuttu è u sicondu hè l'altezza di a linea di basa.

Adupremu quelli variàbili, è qualchì matematica, per creà i marghjini, i paddings è l'altezza di linea di tutti i nostri tipi è più.

Esempiu di testu di corpu

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 di u corpu di piombu

Fate un paràgrafu spiccà aghjunghjendu .lead.

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

h1. Titre 1

h2. Titre 2

h3. Titre 3

h4. Titre 4

h5. Titre 5
h6. Titre 6

Enfasi, indirizzu è abbreviazione

Elementu Usu Opcional
<strong> Per enfatizà un snippet di testu cù impurtante Nimu
<em> Per enfatizà un snippet di testu cù stress Nimu
<abbr> Avvolge l'abbreviazioni è l'acronimi per vede a versione ampliata nantu à u passaghju

Includite titlel'attributu facultativu per u testu allargatu

Utilizà .initialisma classa per l'abbreviazioni maiuscule.
<address> Per infurmazione di cuntattu per u so antenatu più vicinu o tuttu u corpu di u travagliu Preservà a formatting finendu tutte e linee cù<br>

Utilizendu l'enfasi

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.

Nota: Sentite liberu di utilizà <b>è <i>in HTML5, ma u so usu hà cambiatu un pocu. <b>hè destinatu à mette in risaltu parolle o frasi senza trasmette più impurtanza mentre <i>hè soprattuttu per voce, termini tecnichi, etc.

Esempi di indirizzu

Eccu dui esempi di cumu l' <address>etichetta pò esse usata:

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

Esempi di abbreviazioni

L'abbreviazioni cù un titleattributu anu un bordu di fondu cù punti luce è un cursore d'aiutu nantu à u passaghju. Questu dà à l'utilizatori una indicazione extra chì qualcosa serà mostratu nantu à u passaghju.

Aghjunghjite a initialismclassa à una abbreviazione per aumentà l'armunia tipografica dendu una dimensione di testu ligeramente più chjuca.

HTML hè u megliu dapoi u pane fettu.

Un'abbreviazione di a parolla attributu hè attr .

Blockquotes

Elementu Usu Opcional
<blockquote> Elementu à livellu di bloccu per cite u cuntenutu da una altra fonte

Aghjunghjite citel'attributu per l'URL fonte

Utilizà .pull-leftè .pull-rightclassi per l'opzioni flotate
<small> Elementu facultativu per aghjunghje una citazione à l'utilizatori, tipicamente un autore cù titulu di travagliu Pone u <cite>attornu à u titulu o u nome di a fonte

Per include una citazione di bloccu, imbulighjate <blockquote>ogni HTML cum'è cita. Per i citazioni dritte ricumandemu un <p>.

Includite un <small>elementu facultativu per cite a vostra fonte è uttene un trattino &mdash;prima per scopi di stile.

  1. <quota di bloccu>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Qualchissia famosu </small>
  4. </blockquote>

Esempiu di citazioni di blocchi

I blockquotes predeterminati sò stilati cusì:

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

Qualchissia famosu in Body of work

Per flottà u vostru blockquote à a diritta, aghjunghje class="pull-right":

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

Qualchissia famosu in Body of work

Listi

Senza ordine

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem à 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 à 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

Cumandatu

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem à 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

Descrizzione

<dl>

Lista di descrizzione
Una lista di descrizzione hè perfetta per definisce i 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.

Descrizzione horizontale

<dl class="dl-horizontal">

Lista di descrizzione
Una lista di descrizzione hè perfetta per definisce i 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, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

A testa alta ! I listi di descrizzione orizontali truncaranu i termini chì sò troppu longu per mette in a correzione di a colonna di manca text-overflow. In viste più strette, cambiaranu à u layout stacked predeterminatu.

In linea

Imbulighjate snippets inline di codice cù <code>.

  1. Per esempiu , a sezione < code> </ code > deve esse impannillata cum'è in linea .

Bloccu basicu

Aduprà <pre>per parechje linee di codice. Assicuratevi di scappà qualsiasi parentesi angulari in u codice per una resa curretta.

<p>Esempiu di testu quì...</p>
  1. <pre>
  2. <p>Esempiu di testu quì...</p>
  3. </pre>

Nota: Assicuratevi di mantene u codice in <pre>tags u più vicinu à a manca; renderà tutte e tabulazioni.

Pudete opzionalmente aghjunghje a .pre-scrollableclassa chì stabilisce una altezza massima di 350px è furnisce una barra di scorrimentu di l'asse y.

Google Prettify

Pigliate u stessu <pre>elementu è aghjunghje duie classi opzionali per un rendering rinfurzatu.

  1. <p> Testu di mostra quì... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Esempiu di testu quì...</p>
  4. </pre>

Scaricate google-code-prettify è vede u readme per cumu utilizà.

Marcatura di a tavola

Tag Descrizzione
<table> Elementu di imballaggio per a visualizazione di dati in un formatu tabulare
<thead> Elementu di cuntainer per e file di intestazioni di a tabella ( <tr>) per etichettate e colonne di a tabella
<tbody> Elementu di cuntainer per e file di tavulinu ( <tr>) in u corpu di a tavula
<tr> Elementu di cuntainer per un inseme di cellule di tavula ( <td>o <th>) chì appare nantu à una sola fila
<td> Cellula di a tabella predefinita
<th> Cella di tabella speciale per e etichette di colonna (o fila, secondu u scopu è a pusizione)
Deve esse aduprata in un<thead>
<caption> Descrizzione o riassuntu di ciò chì a tavula cuntene, soprattuttu utile per i lettori di schermu
  1. <tavula>
  2. <testa>
  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>

Opzioni di tavulinu

Nome Classe Descrizzione
Default Nimu Nisun stili, solu colonne è fila
Basic .table Solu linee horizontale trà e fila
Cunfinata .table-bordered Arrotonda i cantoni è aghjunghjenu u cunfini esternu
Striscia zebra .table-striped Aghjunghje un culore di fondu grisgiu chjaru à e fila strana (1, 3, 5, etc.)
Cundensatu .table-condensed Taglia l'imbottitura verticale à a mità, da 8px à 4px, in tutti tdè thelementi

Esempi di tavule

1. Stili di tavulinu predefinitu

I tavule sò automaticamente stilati cù solu uni pochi di cunfini per assicurà a leggibilità è mantene a struttura. Cù 2.0, a .tableclassa hè necessaria.

  1. <table class = "table" >
  2. </table>
# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter

2. Tavula strisciata

Fate un pocu di fantasia cù i vostri tavulini aghjunghjendu zebra-striping - basta aghjunghje a .table-stripedclassa.

Nota: I tavulini strisciati utilizanu u :nth-childselettore CSS è ùn sò micca dispunibili in IE7-IE8.

  1. <table class = "tavula à strisce" >
  2. </table>
# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter

3. Tavula cunfinata

Aghjunghjite cunfini intornu à tutta a tavola è anguli arrotondati per scopi estetici.

  1. <table class = "tavula bordata da tavola" >
  2. </table>
# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
Marcu Ottu @getbootstrap
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter

4. Tavola cundensata

Fate i vostri tavulini più compacti aghjunghjendu a .table-condensedclassa per tagliate u padding di cellula di a tavola à a mità (da 8px à 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter

5. Unisce tutti !

Sentite liberu di cumminà qualsiasi di e classi di tavule per ottene diverse sguardi utilizendu qualsiasi di e classi dispunibili.

  1. <table class = "tavula-tavula-strisciata-tavola bordata-tavola cundensata" >
  2. ...
  3. </table>
Nome interu
# Nomu Casata Nome d'utilizatore
1 Marcu Ottu @mdo
2 Ghjacobbu Thornton @grassu
3 Larry l'uccello @twitter

HTML flessibile è CSS

A più bona parte di e forme in Bootstrap hè chì tutti i vostri inputs è cuntrolli pareanu grandi, ùn importa micca cumu si custruiscenu in u vostru marcatu. Nisun HTML superfluu hè necessariu, ma furnimu i mudelli per quelli chì ne necessitanu.

Disposizioni più complicate venenu cù classi succinte è scalabili per un stilu faciule è un ligame di l'avvenimenti, cusì site coperto à ogni passu.

Quattru layout inclusi

Bootstrap vene cun supportu per quattru tippi di layout di forma:

  • Verticale (default)
  • Ricerca
  • In linea
  • Orizzontale

Diversi tipi di schemi di forma necessitanu alcuni cambiamenti à u marcatu, ma i cuntrolli stessi restanu è si cumportanu uguali.

Cuntrolla stati è più

E forme di Bootstrap includenu stili per tutti i cuntrolli di forma di basa cum'è input, textarea, è selezziunate chì aspettate. Ma vene ancu cù una quantità di cumpunenti persunalizati cum'è inputs appiccicati è preposti è supportu per liste di checkboxes.

Stati cum'è l'errore, l'avvirtimentu è u successu sò inclusi per ogni tipu di cuntrollu di forma. Include ancu stili per i cuntrolli disabilitati.

Quattru tipi di forme

Bootstrap furnisce un marcatu simplice è stili per quattru stili di forme web cumuni.

Nome Classe Descrizzione
Verticale (default) .form-vertical (micca necessariu) Etichette impilate, allineate à manca sopra i cuntrolli
In linea .form-inline Etichetta allineata à manca è cuntrolli di bloccu in linea per un stile compactu
Ricerca .form-search Input di testu extra arrotondatu per una estetica tipica di ricerca
Orizzontale .form-horizontal Float à manca, etichette allineate à destra nantu à a stessa linea cum'è i cuntrolli

Forme d'esempiu chì utilizanu solu cuntrolli di forma, senza marcatura extra

Forma basica

Predefiniti intelligenti è ligeri senza marcatura extra.

Esempiu di testu d'aiutu à livellu di bloccu quì.

  1. <form class = "bene" >
  2. <label> Nome di l'etichetta </label>
  3. <input type = "text" class = "span3" placeholder = "Digita qualcosa..." >
  4. <span class = "help-block" > Esempiu di testu d'aiutu à livellu di bloccu quì. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Verificatemi
  7. </label>
  8. <button type = "submit" class = "btn" > Invia </button>
  9. </form>

Forma di ricerca

Aghjunghjite .form-searchà a forma è .search-queryà u input.

  1. <form class = "ricerca bè in forma" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Ricerca </button>
  4. </form>

Forma in linea

Aghjunghjite .form-inlineà finezza l'alineazione verticale è u spaziu di i cuntrolli di forma.

  1. <form class = "bene form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "E-mail" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Ricurdativi di mè
  6. </label>
  7. <button type = "submit" class = "btn" > Sign in </button>
  8. </form>

Forme horizontale

Mostrati à a diritta sò tutti i cuntrolli di forma predeterminati chì supportemu. Eccu a lista bulleted:

  • input di testu (testu, password, email, etc.)
  • checkbox
  • radiu
  • selezziunà
  • selezzione multipla
  • input di u schedariu
  • area di testu

In più di u testu in forma libera, qualsiasi input basatu in testu HTML5 appare cusì.

Esempiu di marcatura

Data l'esempiu di forma sopra, quì hè u marcatu assuciatu cù u primu gruppu di input è cuntrollu. I classi .control-group, .control-label, è .controlssò tutti necessarii per styling.

  1. <form class = "form-horizontal" >
  2. <set di campi>
  3. <legend> Testu di legenda </legend>
  4. <div class = "gruppu di cuntrollu" >
  5. <label class = "control-label" for = "input01" > Input testu </label>
  6. <div class = "cuntrolli" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Supportu u testu d'aiutu </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Stati di cuntrollu di forma

Bootstrap presenta stili per i stati focalizzati è supportati da u navigatore disabled. Eliminate u Webkit predeterminatu outlineè applicà un box-shadowin u so locu per :focus.


Validazione di forma

Include ancu stili di validazione per errori, avvirtimenti è successu. Per utilizà, aghjunghje a classa d'errore à u circondu .control-group.

  1. <fieldset
  2. class = "errore di u gruppu di cuntrollu" >
  3. </fieldset>
Qualchì valore quì
Qualcosa pò esse andatu male
Per piacè corregge l'errore
Woohoo!
Woohoo!

Estende i cuntrolli di forma

Prepend & Append inputs

Gruppi di input - cù testu appiccicatu o prepended - furnisce un modu faciule per dà più cuntestu per i vostri inputs. Grandi esempi includenu u signu @ per i nomi d'utilizatori di Twitter o $ per i finanzii.


Checkboxes è radiu

Finu à a versione 1.4, Bootstrap necessitava un marcatu extra attornu à e caselle di spunta è radiu per impilà. Avà, hè una questione simplice di ripetizione di <label class="checkbox">ciò chì avvolge u <input type="checkbox">.

I caselle di cuntrollu in linea è i radii sò ancu supportati. Solu aghjunghje .inlineà qualsiasi .checkboxo .radioè avete finitu.


Forme in linea è append / prepend

Per aduprà prepend o append inputs in una forma inline, assicuratevi di mette u .add-onè inputnantu à a stessa linea, senza spazii.


Forme di testu d'aiutu

Per aghjunghje u testu d'aiutu per i vostri inputs di furmulariu, include un testu d'aiutu in linea <span class="help-inline">o un bloccu di testu d'aiutu cù <p class="help-block">dopu l'elementu di input.

Aduprate e stesse .span*classi da u sistema di griglia per e dimensioni di input.

Pudete ancu aduprà classi statiche chì ùn anu micca mappatu à a griglia, adattate à i stili CSS responsive, o cunta per varii tipi di cuntrolli (per esempiu, inputvs. select).

@

Eccu alcuni testu d'aiutu

.00
Eccu più testu d'aiutu
$ .00

Nota: L'etichette circundanu tutte l'opzioni per aree di clicu assai più grande è una forma più utilizable.

Pulsante class="" Descrizzione
btn Pulsante grisgiu standard cù gradiente
btn btn-primary Fornisce un pesu visuale extra è identifica l'azzione primaria in un set di buttoni
btn btn-info Adupratu cum'è una alternativa à i stili predeterminati
btn btn-success Indica una azione riescita o pusitiva
btn btn-warning Indica chì a prudenza deve esse presa cù questa azione
btn btn-danger Indica una azione periculosa o potenzialmente negativa
btn btn-inverse Alternate u buttone grisgiu scuru, micca ligatu à una azzione semantica o usu

Pulsanti per l'azzioni

Cum'è una cunvenzione, i buttoni sò solu esse utilizati per l'azzioni mentre i hyperlinks sò da esse utilizati per l'uggetti. Per esempiu, "Download" deve esse un buttone mentre "attività recente" deve esse un ligame.

Stili di buttone pò esse appiicati à qualcosa cù a .btnclassa applicata. Tuttavia, di solitu vulete applicà questi solu à elementi <a>è <button>elementi.

Cumpatibilità cross browser

IE9 ùn taglia micca i gradienti di fondu nantu à i cantoni arrotondati, cusì l'eliminemu. Related, IE9 jankifies buttonelementi disattivati, rende u testu grisgiu cù una brutta ombra di testu chì ùn pudemu micca riparà.

Taglie multiple

Vulete i buttoni più grande o più chjucu? Aghjunghjite .btn-large, .btn-small, o .btn-miniper duie dimensioni supplementari.


Statu disattivatu

Per i buttoni disattivati, aghjunghje a .disabledclassa à i ligami è l' disabledattributu per <button>elementi.

Link primariu Link

A testa alta ! Avemu usatu .disabledcum'è una classa di utilità quì, simile à a .activeclassa cumuni, cusì ùn hè micca necessariu prefissu.

Una classe, parechje tag

Aduprate a .btnclassa nantu à un elementu <a>, <button>, o .<input>

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "invia" >
  3. Pulsante
  4. </button>
  5. <input class = "btn" type = "button"
  6. valore = "Input" >
  7. <input class = "btn" type = "invia"
  8. valore = "Invia" >

Cum'è a megghiu pratica, pruvate à currisponde à l'elementu per u vostru cuntestu per assicurà chì u rendering cross-browser currispondente. Sè vo avete un input, utilizate un <input type="submit">per u vostru buttone.

  • icona-vetru
  • icona-musica
  • icona-cerca
  • icona-busta
  • icona-cuore
  • icona-stella
  • icona-stella-vuota
  • icona-utilizatori
  • icona-film
  • icona-th-grande
  • icona-th
  • icona-th-list
  • icona - ok
  • icona-eliminà
  • icona-zoom-in
  • icona-zoom-out
  • icona-off
  • icona-signale
  • icona-cog
  • icona-trash
  • icona-casa
  • icona-file
  • icona-tempu
  • icona-strada
  • icona-download-alt
  • icona-download
  • icona-upload
  • icona-inbox
  • icon-play-circle
  • icona-ripetizione
  • icona-refresh
  • icon-list-alt
  • icona-lock
  • icona-bandiera
  • icona-cuffie
  • icona-volume-off
  • icona-volume-down
  • icona-volume-up
  • icona-qrcode
  • icona-codice a barre
  • icona-tag
  • icona-tags
  • icona-libru
  • icona-marcatore
  • icona-stampa
  • icona-camera
  • icona-font
  • icona-grassa
  • icona-italic
  • icona-testu-altezza
  • icona-text-width
  • icona-align-left
  • icona-align-center
  • icona-align-destra
  • icona-align-justify
  • lista di icone
  • icona-indent-left
  • icona-indent-destra
  • icona-facetime-video
  • icona-imagine
  • icona-lapis
  • icona-mappa-marcatore
  • icona-ajustà
  • icona-tint
  • icona-edit
  • icona-share
  • icona-verificà
  • icona-move
  • icona-passu-in daretu
  • icona-fast-backward
  • icona-in daretu
  • icona-play
  • icona-pausa
  • icona-stop
  • icona-avanti
  • icona-fast-forward
  • icona-passu-avanti
  • icona-eject
  • icona-chevron-left
  • icona-chevron-destra
  • icona-plus-segnu
  • icona-segnu-minus
  • icona-eliminà-segnu
  • icona-ok-segnu
  • icona-questione-segnu
  • icona-info-segnu
  • icona-screenshot
  • icona-eliminà-circle
  • icona-ok-circle
  • icona-ban-circle
  • icona-freccia-left
  • icona-freccia-destra
  • icona-freccia-up
  • icona-freccia in giù
  • icona-share-alt
  • icona-resize-full
  • icona-resize-small
  • icona-plus
  • icona-minus
  • icona-asteriscu
  • icona-segnu-esclamazione
  • icona-rigalu
  • icona-foglia
  • icona-focu
  • icona-ochju-apertu
  • icona-ochju-close
  • icona-segnu-avvertimentu
  • icona-pianu
  • icona-calendaru
  • icona-aleatoriu
  • icona-cumentu
  • icona-magnete
  • icona-chevron-up
  • icona-chevron-down
  • icona-retweet
  • icona-carrettu
  • icon-folder-close
  • icona-cartulare-apertu
  • icona-resize-verticale
  • icona-resize-horizontal
  • icona-hdd
  • icona-bullhorn
  • icona-campana
  • icona-certificatu
  • icona-pollice in su
  • icona-pollice in giù
  • icona-manu-diritta
  • icona-manu-manu
  • icona-hand-up
  • icona-manu in giù
  • icona-circle-arrow-right
  • icona-circle-arrow-left
  • icona-circle-arrow-up
  • icona-circle-arrow-down
  • icona-globu
  • icona-chiave
  • icone-tasks
  • icona-filtru
  • icona-cartinetta
  • icona-fullscreen

Custruitu cum'è un sprite

Invece di fà ogni icona una dumanda extra, l'avemu cumpilata in un sprite - una mansa d'imaghjini in un schedariu chì usa CSS per pusà l'imaghjini cù background-position. Questu hè u stessu metudu chì avemu usatu in Twitter.com è hà travagliatu bè per noi.

Tutte e classi di l'icone sò prefissate .icon-per u spaziu di nomi è u scopu propiu, cum'è i nostri altri cumpunenti. Questu aiutà à evità cunflitti cù altri strumenti.

Glyphicons ci hà cuncessu l'usu di i Halflings stabiliti in u nostru toolkit open-source, sempre chì furnimu un ligame è creditu quì in i documenti. Per piacè cunsiderà fà u listessu in i vostri prughjetti.

Cumu aduprà

Bootstrap usa una <i>tag per tutte l'icone, ma ùn anu micca classi di casu - solu un prefissu cumuni. Per aduprà, mette u codice seguente quasi in ogni locu:

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

Ci sò ancu stili dispunibuli per l'icone invertite (bianche), preparate cù una classe extra:

  1. <i class = "icona-cerca icona-bianca" ></i>

Ci hè 140 classi da sceglie per i vostri icone. Basta à aghjunghje una <i>tag cù e classi ghjuste è site stabilitu. Pudete truvà a lista completa in sprites.less o ghjustu quì in stu documentu.

A testa alta ! Quandu s'utilice accantu à stringhe di testu, cum'è in i buttoni o ligami di navigazione, assicuratevi di lascià un spaziu dopu à l' <i>etichetta per un spaziu propiu.

Casi d'usu

L'icone sò grandi, ma induve l'avete aduprà? Eccu uni pochi di idee:

  • Cum'è visuale per a vostra navigazione laterale
  • Per una navigazione puramente guidata da icone
  • Per i buttoni per aiutà à trasmette u significatu di una azzione
  • Cù ligami per sparte u cuntestu nantu à a destinazione di l'utilizatore

Essenzialmente, in ogni locu pudete mette un <i>tag, pudete mette un icona.

Esempii

Aduprate in i buttoni, gruppi di buttone per una barra di strumenti, navigazione, o input di forma preposta.