In cima à u scaffolding, l'elementi HTML basi sò stilati è rinfurzati cù classi estensibili per furnisce un aspettu frescu è coherente.
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ù.
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.
Fate un paràgrafu spiccà aghjunghjendu .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| 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 .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> |
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.
Eccu dui esempi di cumu l' <address>etichetta pò esse usata:
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 .
| Elementu | Usu | Opcional |
|---|---|---|
<blockquote> |
Elementu à livellu di bloccu per cite u cuntenutu da una altra fonte | Aghjunghjite .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 —prima per scopi di stile.
- <quota 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
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
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.
Imbulighjate snippets inline di codice cù <code>.
- Per esempiu , a sezione < code> </ code > deve esse impannillata cum'è in linea .
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>
- <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.
Pudete opzionalmente aghjunghje a .pre-scrollableclassa chì stabilisce una altezza massima di 350px è furnisce una barra di scorrimentu di l'asse y.
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à.
| 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 |
- <tavula>
- <testa>
- <tr>
- <th> ... </th>
- <th> ... </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| 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 |
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>
| # | Nomu | Casata | Nome d'utilizatore |
|---|---|---|---|
| 1 | Marcu | Ottu | @mdo |
| 2 | Ghjacobbu | Thornton | @grassu |
| 3 | Larry | l'uccello |
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.
- <table class = "tavula à strisce" >
- …
- </table>
| # | Nomu | Casata | Nome d'utilizatore |
|---|---|---|---|
| 1 | Marcu | Ottu | @mdo |
| 2 | Ghjacobbu | Thornton | @grassu |
| 3 | Larry | l'uccello |
Aghjunghjite cunfini intornu à tutta a tavola è anguli arrotondati per scopi estetici.
- <table class = "tavula bordata da tavola" >
- …
- </table>
| # | Nomu | Casata | Nome d'utilizatore |
|---|---|---|---|
| 1 | Marcu | Ottu | @mdo |
| Marcu | Ottu | @getbootstrap | |
| 2 | Ghjacobbu | Thornton | @grassu |
| 3 | Larry l'uccello | ||
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>
| # | Nomu | Casata | Nome d'utilizatore |
|---|---|---|---|
| 1 | Marcu | Ottu | @mdo |
| 2 | Ghjacobbu | Thornton | @grassu |
| 3 | Larry l'uccello | ||
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-tavola bordata-tavola cundensata" >
- ...
- </table>
| Nome interu | |||
|---|---|---|---|
| # | Nomu | Casata | Nome d'utilizatore |
| 1 | Marcu | Ottu | @mdo |
| 2 | Ghjacobbu | Thornton | @grassu |
| 3 | Larry l'uccello | ||
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.
Bootstrap vene cun supportu per quattru tippi di layout di forma:
Diversi tipi di schemi di forma necessitanu alcuni cambiamenti à u marcatu, ma i cuntrolli stessi restanu è si cumportanu uguali.
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.
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 |
Predefiniti intelligenti è ligeri senza marcatura extra.
- <form class = "bene" >
- <label> Nome di l'etichetta </label>
- <input type = "text" class = "span3" placeholder = "Digita qualcosa..." >
- <span class = "help-block" > Esempiu di testu d'aiutu à livellu di bloccu quì. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Verificatemi
- </label>
- <button type = "submit" class = "btn" > Invia </button>
- </form>
Aghjunghjite .form-searchà a forma è .search-queryà u input.
- <form class = "ricerca bè in forma" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Ricerca </button>
- </form>
Aghjunghjite .form-inlineà finezza l'alineazione verticale è u spaziu di i cuntrolli di forma.
- <form class = "bene form-inline" >
- <input type = "text" class = "input-small" placeholder = "E-mail" >
- <input type = "password" class = "input-small" placeholder = "Password" >
- <label class = "checkbox" >
- <input type = "checkbox" > Ricurdativi di mè
- </label>
- <button type = "submit" class = "btn" > Sign in </button>
- </form>
Mostrati à a diritta sò tutti i cuntrolli di forma predeterminati chì supportemu. Eccu a lista bulleted:
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.
- <form class = "form-horizontal" >
- <set di campi>
- <legend> Testu di legenda </legend>
- <div class = "gruppu di cuntrollu" >
- <label class = "control-label" for = "input01" > Input testu </label>
- <div class = "cuntrolli" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Supportu u testu d'aiutu </p>
- </div>
- </div>
- </fieldset>
- </form>
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.
Include ancu stili di validazione per errori, avvirtimenti è successu. Per utilizà, aghjunghje a classa d'errore à u circondu .control-group.
- <fieldset
- class = "errore di u gruppu di cuntrollu" >
- …
- </fieldset>
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.
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.
Per aduprà prepend o append inputs in una forma inline, assicuratevi di mette u .add-onè inputnantu à a stessa linea, senza spazii.
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.
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.
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:
- <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è 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.
L'icone sò grandi, ma induve l'avete aduprà? Eccu uni pochi di idee:
Essenzialmente, in ogni locu pudete mette un <i>tag, pudete mette un icona.
Aduprate in i buttoni, gruppi di buttone per una barra di strumenti, navigazione, o input di forma preposta.