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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

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:

Esempi di abbreviazioni

L'abbreviazioni sò stilate cù u testu in maiuscule è un bordu di fondu cù punti luce. Hanu ancu un cursore d'aiutu in u passaghju per chì l'utilizatori anu indicazione extra chì qualcosa serà mostratu nantu à u passaghju.

HTML hè u megliu dapoi u pane fettu.

Un'abbreviazione di a parolla attributu hè attr .

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 —prima per scopi di stile.

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

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

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.

In linea

Imbulighjate snippets inline di codice cù <code>.

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

Bloccu basicu

Aduprà <pre>per parechje linee di codice. Assicuratevi di trasfurmà ogni caret in i so caratteri Unicode per un rendering correttu.

<p>Esempiu di testu quì...</p>

<pre>
  <p>Esempiu di testu quì...</p>
</pre>

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

Google Prettify

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

<p> Testu di mostra quì... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Esempiu di testu quì...</p>
</pre>

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

<tavula>
  <testa>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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.

<table class = "table" > 
  …
</table>

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

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

<table class = "tavola à strisce di tavulinu" > 
  …
</table>

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

<table class = "tavula bordata da tavola" > 
  …
</table>

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

<table class = "table table-condensed" > 
  …
</table>

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

<table class = "tavula-tavula-strisciata table-bordered table-condensata" > 
  ...
</table>

HTML è CSS flessibili

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 è rilegatura di l'eventi, 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.

Cù v2.0, avemu predefiniti più ligeri è intelligenti per i stili di forma. Nisuna marcatura extra, solu cuntrolli di forma.

Riflettu stili WebKit predeterminati, aghjunghje solu .form-searchper campi di ricerca arrotondati extra.

L'inputs sò livellu di bloccu per inizià. Per .form-inlineè .form-horizontal, usemu inline-block.

Ciò chì hè inclusu

A manca 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

Novi predefiniti cù v2.0

Finu à v1.4, i stili di forma predeterminati di Bootstrap anu utilizatu u layout horizontale. Cù Bootstrap 2, avemu eliminatu quella limitazione per avè predefiniti più intelligenti è scalabili per ogni forma.

Stati di navigatore riprogettati

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 aduprà, aghjunghje a classa d'errore à u circondu .control-group.

<fieldset
  class = "errore di u gruppu di cuntrollu" >
  …
</fieldset>

Prepende è aghjunghje 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 verificazione 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.

Testu d'aiutu di furmà

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.

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.

Per ancore è forme

Stili di buttone pò esse appiicati à qualsiasi cosa cù l' .btnapplicata. Tuttavia, di solitu vulete applicà questi solu à elementi <a>è <button>elementi.

Nota: Tutti i buttoni devenu include a .btnclassa. Stili di buttone deve esse appiicati <button>è <a>elementi per a coerenza.

Taglie multiple

Vulete i buttoni più grande o più chjucu? Amparate!

Azzione primaria Azzione

Azzione primaria Azzione

Statu disattivatu

Per i buttoni disattivati, utilizate .btn-disabledper ligami è :disabledper <button>elementi.

Azzione primaria Azzione

Azzione primaria Azzione

Cumpatibilità cross browser

In IE9, abbandunemu u gradiente nantu à tutti i buttoni in favore di i cantoni arrotondati cum'è IE9 ùn tagliate gradienti di fondo à i cantoni.

Related, IE9 jankifies buttonelementi disattivati, rende u testu grisgiu cù una brutta ombra di testu - sfurtunatamenti ùn pudemu micca riparà questu.

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à

Cù v2.0.0, avemu optatu per utilizà un <i>tag per tutti i nostri icone, ma ùn anu micca classi di casu - solu un prefissu cumuni. Per aduprà, mette u codice seguente quasi in ogni locu:

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

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

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

Ci hè 120 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.

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.

Refresh Cuntrolla Sguassà

Cumentu Settings More Info