Ottene u bassu nantu à i pezzi chjave di l'infrastruttura di Bootstrap, cumpresu u nostru approcciu per un sviluppu web megliu, più veloce è più forte.

HTML5 doctype

Bootstrap faci usu di certi elementi HTML è proprietà CSS chì necessitanu l'usu di u doctype HTML5. Includite à u principiu di tutti i vostri prughjetti.

<!doctype html>
<html lang="en">
  ...
</html>

Mobile prima

Cù Bootstrap 2, avemu aghjustatu stili amichevuli mobili opzionali per aspetti chjave di u quadru. Cù Bootstrap 3, avemu riscritto u prugettu per esse mobile friendly da u principiu. Invece di aghjunghje stili mobili opzionali, sò cotti ghjustu in u core. In fatti, Bootstrap hè mobile prima . I primi stili mobili ponu esse truvati in tutta a biblioteca inveci di schedarii separati.

Per assicurà un rendering correttu è u toccu di zoom, aghjunghje a meta tag viewport à u vostru <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Pudete disattivà e capacità di zoom in i dispositi mobili aghjunghjendu user-scalable=noà a meta tag di vista. Questu disattiva u zooming, chì significa chì l'utilizatori sò solu capaci di scroll, è i risultati in u vostru situ si sentenu un pocu più cum'è una applicazione nativa. In generale, ùn ricumandemu micca questu nantu à ogni situ, cusì fate prudenza!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Tipografia è ligami

Bootstrap stabilisce a visualizazione globale di basa, a tipografia è i stili di ligame. In particulare, noi:

Mettite background-color: #fff;nantu à ubody
Aduprate l' attributi @font-family-base, @font-size-base, è @line-height-basecum'è a nostra basa tipografica
Pone u culore di ligame globale via @link-colorè applicà i ligami sottumessi solu nantu:hover

Questi stili ponu esse truvati in scaffolding.less.

Normalize.css

Per un rendering cross-browser melloratu, usemu Normalize.css , un prughjettu di Nicolas Gallagher è Jonathan Neal .

Contenituri

Bootstrap richiede un elementu chì cuntene per imballà u cuntenutu di u situ è allughjà u nostru sistema di griglia. Pudete sceglie unu di dui cuntenituri per aduprà in i vostri prughjetti. Innota chì, per via paddingè più, nè u cuntainer hè embolicabile.

Aduprà .containerper un cuntainer responsive di larghezza fissa.

<div class="container">
  ...
</div>

Aduprate .container-fluidper un cuntainer à larghezza tutale, chì copre tutta a larghezza di a vostra vista.

<div class="container-fluid">
  ...
</div>

Bootstrap include un sistema di griglia fluida di primura mobile chì si scala in modu adattatu finu à 12 colonne à l'aumentu di a dimensione di u dispusitivu o di a vista. Include classi predefinite per opzioni di layout facili, è ancu mixin putenti per generà layout più semantici .

Introduzione

I sistemi di griglia sò utilizati per creà layout di pagina attraversu una seria di fila è colonne chì ospitanu u vostru cuntenutu. Eccu cumu funziona u sistema di griglia Bootstrap:

E fila deve esse piazzate in una .container(larghezza fissa) o .container-fluid(larghezza sana) per un allinamentu è un padding propiu.
Aduprate fila per creà gruppi horizontali di colonne.
U cuntenutu deve esse piazzatu in e culonni, è solu i culonni ponu esse figlioli immediati di fila.
Classi di griglia predefinite cum'è .rowè .col-xs-4sò dispunibili per fà rapidamente layout di griglia. Meno mixins pò ancu esse usatu per layout più semantichi.
I culonni creanu gutters (spazii trà u cuntenutu di a colonna) via padding. Ddu padding hè offset in fila per a prima è l'ultima colonna via margine negativu nantu à .rows.
U margine negativu hè per quessa chì l'esempii sottu sò outdented. Hè cusì chì u cuntenutu in e colonne di griglia hè allinatu cù un cuntenutu micca di griglia.
I culonni di a griglia sò creati specificendu u numeru di dodeci colonne dispunibuli chì vulete span. Per esempiu, trè culonni uguali aduprà trè .col-xs-4.
Se più di 12 culonni sò posti in una sola fila, ogni gruppu di colonne extra, cum'è una unità, si mette in una nova linea.
E classi di griglia s'applicanu à i dispositi cù larghezza di schermu più grande o uguali à e dimensioni di i punti di rottura, è annullanu e classi di griglia destinate à i dispositi più chjuchi. Dunque, per esempiu, applicà ogni .col-md-*classa à un elementu ùn affetterà micca solu u so stile nantu à i dispositi medii, ma ancu in i dispositi grossi se una .col-lg-*classa ùn hè micca presente.

Fighjate à l'esempii per applicà sti principii à u vostru codice.

Interrogazioni di media

Utilizemu e seguenti media queries in i nostri Less files per creà i punti di rottura chjave in u nostru sistema di griglia.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Occasionalmente espandemu in queste dumande di media per include un max-widthper limità CSS à un settore più ristrettu di dispositi.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Opzioni di griglia

Vede cumu l'aspetti di u sistema di griglia Bootstrap funzionanu in parechji dispositi cù una tavola pratica.

	Dispositivi extra chjuchi Telefoni (<768px)	Picculi dispositivi Tablet (≥768px)	Dispositivi medii Desktop (≥992px)	Dispositivi grandi Desktop (≥1200px)
Cumportamentu di griglia	Orizzontale in ogni mumentu	Collapsed to start, horizontal above breakpoints
Larghezza di u containeru	Nisunu (auto)	750 px	970 px	1170 px
Prefissu di classa	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# di culonni	12
A larghezza di a colonna	Auto	~ 62 px	~ 81 px	~ 97 px
Larghezza di gutter	30px (15px da ogni latu di una colonna)
Nestabile	Iè
Offsets	Iè
Ordine di a colonna	Iè

Esempiu: Stacked-to-horizontal

Utilizendu un unicu inseme di .col-md-*classi di griglia, pudete creà un sistema di griglia di basa chì principia impilatu nantu à i dispositi mobili è i dispositi di tavuletta (a gamma extra chjuca à chjuca) prima di diventà horizontale nantu à i dispositi desktop (mediu). Pone e colonne di griglia in qualsiasi .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Esempiu: Contenitore di fluidu

Trasforma ogni layout di griglia di larghezza fissa in un layout di larghezza completa cambiendu u vostru più esterno .containerin .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Esempiu: Mobile è desktop

Ùn vogliu micca chì e vostre colonne si impilate solu in i dispositi più chjuchi? Aduprate e classi di griglia di dispositivi extra chjuchi è mediu aghjunghjendu .col-xs-* .col-md-*à e vostre colonne. Vede l'esempiu quì sottu per una idea megliu di cumu tuttu funziona.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Esempiu: Mobile, tableta, desktop

Custruite nantu à l'esempiu precedente creendu layout ancu più dinamichi è putenti cù .col-sm-*classi di tablette.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Esempiu: imballaggio di colonna

Se più di 12 culonni sò posti in una sola fila, ogni gruppu di colonne extra, cum'è una unità, si mette in una nova linea.

.col-xs-9

.col-xs-4
Siccomu 9 + 4 = 13 > 12, stu div di 4-column-wide hè impannillatu nantu à una nova linea cum'è una unità contigua.

.col-xs-6
I culonni successivi cuntinueghjanu longu a nova linea.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Resetta a colonna responsiva

Cù i quattru livelli di griglie dispunibuli, site obligatu à sbattà in prublemi induve, in certi punti di rottura, e vostre colonne ùn si sguassate micca bè cum'è unu hè più altu ch'è l'altru. Per risolve questu, aduprate una cumminazione di a .clearfixè e nostre classi di utilità responsive .

.col-xs-6 .col-sm-3
Resize u vostru viewport o verificate u vostru telefunu per un esempiu.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In più di l'eliminazione di a colonna à i punti di rottura responsive, pudete avè bisognu di resettà offsets, push, o pulls . Vede questu in azzione in l'esempiu di griglia .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Eliminate i canotti

Eliminate i canali da una fila è e so colonne cù a .row-no-guttersclasse.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Colonne di compensazione

Sposta e colonne à a diritta usendu .col-md-offset-*classi. Queste classi aumentanu u margine di manca di una colonna per *colonne. Per esempiu, .col-md-offset-4si move .col-md-4nantu à quattru culonni.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Pudete ancu annullà l'offsets da i livelli di griglia più bassi cù .col-*-offset-0e classi.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Culonni di nidificazione

Per nidificà u vostru cuntenutu cù a griglia predeterminata, aghjunghje un novu .rowè un set di .col-sm-*colonne in una colonna esistente .col-sm-*. E fila nidificate duveranu include un inseme di colonne chì aghjunghjenu à 12 o menu (ùn hè micca necessariu chì aduprate tutte e 12 colonne dispunibili).

Livellu 1: .col-sm-9

Livellu 2: .col-xs-8 .col-sm-6

Livellu 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Ordine di a colonna

Cambia facilmente l'ordine di e nostre colonne di griglia integrate cù .col-md-push-*e .col-md-pull-*classi modificatori.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Meno mixin e variabili

In più di e classi di griglia predefinite per layout veloci, Bootstrap include Meno variabili è mixin per generà rapidamente i vostri propri layout semantici simplici.

Variabili

Variabili determinanu u numeru di colonne, a larghezza di u canale, è u puntu di dumanda di media à quale principià e colonne flottanti. Utilizemu questi per generà e classi di griglia predefinite documentate sopra, è ancu per i mixins persunalizati elencati quì sottu.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

I mixins sò usati in cunghjunzione cù e variàbili di griglia per generà CSS semanticu per e colonne di griglia individuali.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Esempiu di usu

Pudete mudificà e variàbili à i vostri valori persunalizati, o solu aduprà i mixins cù i so valori predeterminati. Eccu un esempiu di usu di i paràmetri predeterminati per creà un layout di dui culonne cù un spaziu trà.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Intestazioni

Tutti i tituli HTML, <h1>attraversu <h6>, sò dispunibili. .h1attraversu .h6classi sò ancu dispunibili, per quandu vulete currisponde à u stilu di fonti di un intestazione, ma vulete sempre chì u vostru testu sia affissatu in linea.

h1. Titulu Bootstrap	Semibold 36px
h2. Titulu Bootstrap	Semibold 30px
h3. Titulu Bootstrap	Semibold 24px
h4. Titulu Bootstrap	Semibold 18px
h5. Titulu Bootstrap	Semibold 14px
h6. Titulu Bootstrap	Semibold 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Crea un testu più liggeru, secundariu in ogni intestazione cù una <small>tag generica o a .smallclassa.

h1. Bootstrap heading Testu secundariu

h2. Bootstrap heading Testu secundariu

h3. Bootstrap heading Testu secundariu

h4. Bootstrap heading Testu secundariu

h5. Bootstrap heading Testu secundariu

h6. Bootstrap heading Testu secundariu

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Copia di corpu

U valore predeterminatu globale di Bootstrap font-sizehè 14px , cun un line-heightdi 1.428 . Questu hè appiicatu à <body>tutti i paragrafi. Inoltre, <p>(paragrafi) ricevenu un margine di fondu di a mità di a so altezza di linea calculata (10px per difettu).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

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.

<p class="lead">...</p>

Custruitu c�� Meno

A scala tipografica hè basatu annantu à dui Less variables in variables.less : @font-size-baseè @line-height-base. 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 simplice per creà i marghjini, i paddings è l'altezza di linea di tutti i nostri tipi è più. Personalizzali è Bootstrap si adatta.

Elementi di testu in linea

Testu marcatu

Per mette in risaltu una corsa di testu per via di a so rilevanza in un altru cuntestu, utilizate a <mark>tag.

Pudete aduprà a marca tag àevidenziatetestu.

You can use the mark tag to <mark>highlight</mark> text.

Testu eliminatu

Per indicà i blocchi di testu chì sò stati sguassati utilizate u <del>tag.

~~Questa linea di testu hè destinata à esse trattata cum'è testu sguassatu.~~

<del>This line of text is meant to be treated as deleted text.</del>

Testu strittu

Per indicà i blocchi di testu chì ùn sò più pertinenti utilizate a <s>tag.

~~Questa linea di testu hè destinata à esse trattata cum'è micca più precisa.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Testu inseritu

Per indicà aghjunte à u documentu utilizate l' <ins>etichetta.

Questa linea di testu hè destinata à esse trattata cum'è un aghjuntu à u documentu.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Testu sottolineatu

Per sottulinà u testu utilizate l' <u>etichetta.

Questa linea di testu serà resa cum'è sottolineata

<u>This line of text will render as underlined</u>

Aduprate l'etichette di enfasi predeterminate di HTML cù stili ligeri.

Picculu testu

Per de-emphasizing inline o blocchi di testu, utilizate l' <small>tag per stabilisce u testu à 85% a dimensione di u genitore. L'elementi di l'intestazione ricevenu u so propiu font-sizeper <small>elementi nidificati.

Pudete alternativamente aduprà un elementu in linea cù .smallin u locu di qualsiasi <small>.

Questa linea di testu hè destinata à esse trattata cum'è stampa fine.

<small>This line of text is meant to be treated as fine print.</small>

Audace

Per enfatizà un snippet di testu cù un pesu di font più pesante.

U seguente frammentu di testu hè resu cum'è testu in grassu .

<strong>rendered as bold text</strong>

Italicu

Per enfatizà un snippet di testu cù i corsi.

U seguente frammentu di testu hè resu cum'è testu in italicized .

<em>rendered as italicized text</em>

Elementi alternati

Sentite liberu di utilizà <b>è <i>in HTML5. <b>hè destinatu à mette in risaltu parolle o frasi senza trasmette più impurtanza mentre <i>hè soprattuttu per voce, termini tecnichi, etc.

Classi di allineamentu

Realignate facilmente u testu à i cumpunenti cù classi di allineamentu di testu.

Testu allinatu à manca.

Testu allinatu centru.

Testu allinatu ghjustu.

Testu ghjustificatu.

Nisun testu wrap.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Classi di trasfurmazioni

Trasfurmà u testu in cumpunenti cù classi di capitalizazione di testu.

Testu minuscule.

Testu in maiuscule.

Testu capitalizatu.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abbreviazioni

Implementazione stilizzata di l' <abbr>elementu HTML per l'abbreviazioni è l'acronimi per vede a versione ampliata nantu à u passaghju. L'abbreviazioni cù un titleattributu anu un bordu di fondu puntuatu chjaru è un cursore d'aiutu nantu à u passaghju, chì furnisce un cuntestu supplementu nantu à u passaghju è à l'utilizatori di tecnulugia assistive.

Abbreviazione basica

Un'abbreviazione di a parolla attributu hè attr .

<abbr title="attribute">attr</abbr>

Inizialisimu

Aghjunghjite .initialismà una abbreviazione per un font-size ligeramente più chjucu.

HTML hè u megliu dapoi u pane fettu.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Indirizzi

Presente infurmazione di cuntattu per l'antenatu più vicinu o tuttu u corpu di u travagliu. Preservate u furmatu finendu tutte e linee cù <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Nome
pienu [email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Blockquotes

Per cite blocchi di cuntenutu da una altra fonte in u vostru documentu.

Blockquote predefinitu

Avvolge <blockquote>ogni HTML cum'è cita. Per citazioni dritte, ricumandemu un <p>.

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Opzioni di blockquote

Cambia di stile è cuntenutu per variazioni simplici nantu à un standard <blockquote>.

Nomine una fonte

Aghjunghjite un <footer>per identificà a fonte. Imbulighjate u nome di u travagliu fonte in <cite>.

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

Qualchissia famosu in u Titulu Fonte

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Display alternati

Aghjunghjite .blockquote-reverseper un blockquote cù cuntenutu allineatu à destra.

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

Qualchissia famosu in u Titulu Fonte

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listi

Senza ordine

Una lista di elementi in quale l'ordine ùn importa micca esplicitamente.

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

<ul>
  <li>...</li>
</ul>

Cumandatu

Una lista di l'articuli in quale l'ordine importa esplicitamente.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem à massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Unstyled

Eliminate u margine predeterminatu list-styleè lasciatu nantu à l'articuli di lista (solu i zitelli immediati). Questu solu s'applica à l'articuli di lista di i zitelli immediati , vale à dì chì avete bisognu di aghjunghje a classa per qualsiasi liste anidata.

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

<ul class="list-unstyled">
  <li>...</li>
</ul>

In linea

Pone tutti l'articuli di lista nantu à una sola linea cù display: inline-block;un pocu padding light.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Descrizzione

Una lista di termini cù e so descrizzione assuciata.

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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Descrizzione horizontale

Fate i termini è e descrizioni in <dl>linea fiancu à fiancu. Accumincia impilati cum'è <dl>s predefiniti, ma quandu a barra di navigazione si espande, cusì fate queste.

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.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Auto-truncating

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

In linea

Imbulighjate snippets inline di codice cù <code>.

Per esempiu, <section>deve esse impannillatu cum'è in linea.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Input di l'utilizatori

Aduprate u <kbd>per indicà l'input chì hè tipicamente inseritu cù u teclatu.

Per cambià u cartulare, scrivite cdseguitu da u nome di u cartulare.
Per edità i paràmetri, appughjà ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Bloccu basicu

Aduprà <pre>per parechje linee di codice. Assicuratevi di scappà qualsiasi parentesi angulari in u codice per un rendering propiu.

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

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

Variabili

Per indicà variàbili utilizate l' <var>etichetta.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

Per indicà i blocchi mostra l'output da un prugramma utilizate l' <samp>etichetta.

Stu testu hè destinatu à esse trattatu cum'è output di mostra da un prugramma di computer.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Esempiu basicu

Per u stilu di basa - imbottitura ligera è solu divisori orizzontali - aghjunghje a classa di basa .tableà qualsiasi <table>. Pò esse super redundant, ma datu l'usu generalizatu di e tavule per altri plugins cum'è i calendari è i selettori di data, avemu optatu per isolà i nostri stili di tavule persunalizati.

Didascalia opzionale di a tavola.
#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry	l'uccello	@twitter

<table class="table">
  ...
</table>

Righe a strisce

Aduprà .table-stripedper aghjunghje zebra-striping à qualsiasi fila di tavulinu in u <tbody>.

Compatibilità cross-browser

I tavulini strisciati sò stilati via u :nth-childselettore CSS, chì ùn hè micca dispunibule in Internet Explorer 8.

#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry	l'uccello	@twitter

<table class="table table-striped">
  ...
</table>

Tavola bordata

Aghjunghjite .table-borderedper e fruntiere in tutti i lati di a tavula è e cellule.

#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry	l'uccello	@twitter

<table class="table table-bordered">
  ...
</table>

Hover rows

Aghjunghjite .table-hoverper attivà un statu di hover nantu à e file di tavule in un <tbody>.

#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry	l'uccello	@twitter

<table class="table table-hover">
  ...
</table>

Tavola cundensata

Aghjunghjite .table-condensedper fà i tavulini più compacti tagliendu l'imbottitura cellulare in a mità.

#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
3	Larry l'uccello		@twitter

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

Classi contestuale

Aduprate classi contestuale per colorà e file di tabella o celle individuali.

Classe	Descrizzione
`.active`	Applica u culore di hover à una fila o cellula particulare
`.success`	Indica una azione riescita o pusitiva
`.info`	Indica un cambiamentu informativu neutru o azzione
`.warning`	Indica un avvisu chì puderia avè bisognu d'attenzione
`.danger`	Indica una azzione periculosa o potenzialmente negativa

#	Intestazione di a colonna	Intestazione di a colonna	Intestazione di a colonna
1	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna
2	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna
3	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna
4	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna
5	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna
6	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna
7	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna
8	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna
9	Contenutu di a colonna	Contenutu di a colonna	Contenutu di a colonna

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu à una fila di tavuletta o cellula individuale furnisce solu una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugia assistive - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (u testu visibile in a fila / cellula pertinente di a tavula), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-onlyclasse.

Tavule rispunsevuli

Crea tavulini responsivi avvolgendu qualsiasi .tableper .table-responsivefà scorri orizzontalmente nantu à i picculi dispositi (sottu 768px). Quandu si vede nantu à qualcosa più grande di 768px di larghezza, ùn vi vede nisuna differenza in queste tavule.

Tagliatura / troncatura verticale

I tavulini responsive facenu usu di overflow-y: hidden, chì clips off qualsiasi cuntenutu chì va oltre i bordi inferiori o superiori di a tavola. In particulare, questu pò tagliate i menu drop-down è altri widgets di terzu.

Firefox è fieldsets

Firefox hà qualchì stilu di set di campu inghjustu chì implica widthchì interferiscenu cù a tavola responsiva. Questu ùn pò micca esse annullatu senza un hack specificu di Firefox chì ùn furnimu micca in Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Per più infurmazione, leghjite sta risposta Stack Overflow .

#	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula
1	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula
2	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula
3	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula

#	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula
1	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula
2	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula
3	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Esempiu basicu

I cuntrolli di forma individuale ricevenu automaticamente un stilu globale. Tutti i testi <input>, <textarea>, è <select>l'elementi cù .form-controlsò stabiliti per width: 100%;automaticamente. Imbulighjate l'etichette è i cuntrolli .form-groupper un spaziu ottimale.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Ùn mischjà micca gruppi di forma cù gruppi di input

Ùn mischjà micca i gruppi di forma direttamente cù i gruppi di input . Invece, nidificate u gruppu di input in u gruppu di forma.

Forma in linea

Aghjunghjite .form-inlineà u vostru furmulariu (chì ùn deve micca esse un <form>) per i cuntrolli allineati à manca è inline-block. Questu hè appiicatu solu à e forme in i viewports chì sò almenu 768px largu.

Pò esse bisognu di larghezza persunalizata

Inputs è selezzione sò width: 100%;applicati per difettu in Bootstrap. Dentru e forme inline, resettamu questu per width: auto;chì parechji cuntrolli ponu reside nantu à a stessa linea. Sicondu u vostru layout, larghezza persunalizata supplementaria pò esse dumandata.

Aghjunghjite sempre etichette

I lettori di schermu avaranu prublemi cù i vostri formi se ùn include micca una etichetta per ogni input. Per queste forme inline, pudete ammuccià l'etichette cù a .sr-onlyclassa. Ci sò altri metudi alternativi di furnisce una etichetta per i tecnulugii assistivi, cum'è u aria-label, aria-labelledbyo titlel'attributu. Se nimu di questi ùn hè presente, i lettori di schermu ponu ricorrere à l'usu di l' placeholderattributu, se presente, ma nutate chì l'usu di placeholdercum'è un sustitutu per altri metudi di etichettatura ùn hè micca cunsigliatu.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Forma horizontale

Aduprate e classi di griglia predefinite di Bootstrap per allineà etichette è gruppi di cuntrolli di forma in un layout horizontale aghjunghjendu .form-horizontalà a forma (chì ùn deve micca esse un <form>). Fendu cusì cambia .form-groups per cumportà cum'è fila di griglia, dunque ùn hè micca bisognu di .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Cuntrolli supportati

Esempii di cuntrolli di forma standard supportati in un layout di forma di esempiu.

Ingressi

U cuntrollu di forma più cumuni, campi di input basatu in testu. Include supportu per tutti i tipi HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, è color.

Dichjarazione di tipu necessaria

L'inputs seranu cumplettamente stilati solu s'ellu typehè dichjaratu bè.

<input type="text" class="form-control" placeholder="Text input">

Gruppi di input

Per aghjunghje testu integratu o buttone prima è / o dopu à qualsiasi testu basatu <input>, verificate u cumpunente di u gruppu di input .

Area di testu

U cuntrollu di forma chì sustene parechje linee di testu. Cambia rowsl'attributu quantu necessariu.

<textarea class="form-control" rows="3"></textarea>

Checkboxes è radiu

I checkboxes sò per selezziunà una o parechje opzioni in una lista, mentre chì i radii sò per selezziunate una opzione da parechje.

I caselle di verificazione disabilitate è i radii sò supportati, ma per furnisce un cursore "micca permessu" nantu à u passaghju di u genitore <label>, avete bisognu di aghjunghje a .disabledclasse à u genitore .radio, .radio-inline, .checkbox, o .checkbox-inline.

Default (stacked)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Casella di spunta in linea è radio

Aduprate .checkbox-inlineo .radio-inlineclassi in una seria di caselle di spunta o radiu per i cuntrolli chì appariscenu nantu à a stessa linea.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Casella di cuntrollu è radiu senza testu di l'etichetta

Se ùn avete micca testu in u <label>, l'input hè posizionatu cum'è aspittà. Attualmente funziona solu nantu à caselle di spunta è radio non-inline. Ricurdatevi di furnisce sempre una forma di etichetta per e tecnulugia di assistenza (per esempiu, usendu aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Selezziunate

Nota chì parechji menu selezziunati nativi, à dì in Safari è Chrome, anu anguli arrotondati chì ùn ponu micca mudificate cù border-radiuse pruprietà.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Per i <select>cuntrolli cù l' multipleattributu, parechje opzioni sò mostrate per automaticamente.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Control staticu

Quandu avete bisognu di mette u testu chjaru accantu à una forma di etichetta in una forma, utilizate a .form-control-staticclassa in un <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Focus statu

Eliminamu i outlinestili predeterminati in certi cuntrolli di forma è applicà un box-shadowin u so locu per :focus.

Demo `:focus`statu

L'input di l'esempiu di sopra usa stili persunalizati in a nostra documentazione per dimustrà u :focusstatu nantu à un .form-control.

Statu disattivatu

Aghjunghjite l' disabledattributu booleanu in un input per impedisce l'interazzione di l'utilizatori. L'inputs disattivati pareanu più ligeri è aghjunghjenu un not-allowedcursore.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

I campi disattivati

Aghjunghjite l' disabledattributu à a <fieldset>per disattivà tutti i cuntrolli in <fieldset>una volta.

Caveat nantu à e funziunalità di u ligame di`<a>`

Per automaticamente, i navigatori trattanu tutti i cuntrolli di forma nativa ( <input>, <select>è <button>elementi) in un <fieldset disabled>cum'è disabilitati, impediscendu l'interazzione di u teclatu è di u mouse nantu à elli. In ogni casu, se a vostra forma include ancu <a ... class="btn btn-*">elementi, questi saranu solu un stile di pointer-events: none. Cum'è nutatu in a sezione nantu à u statu disattivatu per i buttoni (è in particulare in a sub-sezzione per l'elementi di ancora), sta pruprietà CSS ùn hè ancu standardizzata è ùn hè micca cumplettamente supportata in Opera 18 è sottu, o in Internet Explorer 11, è hà vintu. Ùn impedisce micca à l'utilizatori di u teclatu di pudè fucalizza o attivà sti ligami. Allora per esse sicuru, utilizate JavaScript persunalizatu per disattivà tali ligami.

Compatibilità cross-browser

Mentre chì Bootstrap applicà sti stili in tutti i navigatori, Internet Explorer 11 è sottu ùn sustene micca cumplettamente l' disabledattributu in un <fieldset>. Aduprate JavaScript persunalizatu per disattivà u fieldset in questi navigatori.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Statu solu di lettura

Aghjunghjite l' readonlyattributu booleanu nantu à un input per impedisce a mudificazione di u valore di l'input. L'input di sola lettura parenu più ligeri (cum'è l'input disattivati), ma mantenenu u cursore standard.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Testu d'aiutu

Testu d'aiutu à u livellu di bloccu per i cuntrolli di forma.

Associà u testu d'aiutu cù cuntrolli di forma

U testu di l'aiutu deve esse assuciatu esplicitamente cù u cuntrollu di forma chì hè in relazione cù l'usu di l' aria-describedbyattributu. Questu hà da assicurà chì e tecnulugii d'assistenza - cum'è i lettori di schermu - annunceranu stu testu d'aiutu quandu l'utilizatore si cuncentra o entra in u cuntrollu.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Stati di validazione

Bootstrap include stili di validazione per errori, avvisi è stati di successu nantu à i cuntrolli di forma. Per utilizà, aghjunghje .has-warning, .has-error, o .has-successà l'elementu parent. Qualchese .control-label, .form-control, è .help-blockin quellu elementu riceverà i stili di validazione.

Trasmette u statu di validazione à tecnulugii assistivi è utilizatori daltonisti

Utilizà sti stili di validazione per denotà u statu di un cuntrollu di forma furnisce solu una indicazione visuale, basata in u culore, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu - o à l'utilizatori colorblind.

Assicuratevi chì una indicazione alternativa di statu hè ancu furnita. Per esempiu, pudete include un suggerimentu nantu à u statu in u <label>testu di u cuntrollu di forma stessu (cum'è u casu in l'esempiu di codice seguente), include un Glyphicon (cù un testu alternativu adattatu utilizendu a .sr-onlyclassa - vede l' esempii Glyphicon ), o furnisce un bloccu di testu d'aiutu supplementu . In particulare per i tecnulugii assistivi, i cuntrolli di forma invalida ponu ancu esse attribuiti un aria-invalid="true"attributu.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Cù icone opzionali

Pudete ancu aghjunghje icone di feedback opzionali cù l'aghjuntu .has-feedbackè l'icona ghjustu.

L'icone di feedback funzionanu solu cù <input class="form-control">elementi testuali.

Icone, etichette è gruppi di input

U posizionamentu manuale di l'icone di feedback hè necessariu per input senza etichetta è per gruppi di input cù un add-on à a diritta. Hè fortemente incuraghjitu à furnisce etichette per tutti l'inputs per ragioni di accessibilità. Se vulete impedisce chì e etichette sò affissate, oculte cù a .sr-onlyclasse. Se duvete fà senza etichette, aghjustate u topvalore di l'icona di feedback. Per i gruppi di input, aghjustate u rightvalore à un valore di pixel appropritatu secondu a larghezza di u vostru addon.

Trasmette u significatu di l'icona à e tecnulugia assistive

Per assicurà chì e tecnulugie d'assistenza - cum'è i lettori di schermu - trasmettenu currettamente u significatu di una icona, un testu oculatu addiziale deve esse inclusu cù a .sr-onlyclassa è assuciatu esplicitamente cù u cuntrollu di forma chì hè in relazione cù l'usu aria-describedby. In alternativa, assicuratevi chì u significatu (per esempiu, u fattu chì ci hè un avvisu per un campu di ingressu di testu particulari) hè trasmessu in una altra forma, cum'è cambià u testu di l'attuale <label>assuciatu cù u cuntrollu di a forma.

Ancu s'è l'esempii seguenti menzionanu digià u statu di validazione di i so cuntrolli di forma rispettivi in u <label>testu stessu, a tecnica sopra (usendu .sr-onlytestu è aria-describedby) hè stata inclusa per scopi illustrativi.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Icone opzionali in forme horizontale è in linea

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Icone opzionali cù `.sr-only`etichette nascoste

Se aduprate a .sr-onlyclassa per ammuccià un cuntrollu di forma <label>(piuttostu cà aduprà altre opzioni di etichettatura, cum'è l' aria-labelattributu), Bootstrap aghjustà automaticamente a pusizione di l'icona una volta chì hè stata aghjuntu.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Cuntrolla a taglia

Definite l'altitudine utilizendu classi cum'è .input-lg, è stabilisce l'larghezza utilizendu classi di colonna di griglia cum'è .col-lg-*.

Misure d'altezza

Crea cuntrolli di forma più alti o più corti chì currispondenu à e dimensioni di u buttone.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Formati di gruppi di forma horizontale

Dimensiona rapidamente l'etichette è i cuntrolli di forma in .form-horizontalaghjunghje .form-group-lgo .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Dimensione di a colonna

Imbulighjate l'inputs in culonni di griglia, o qualsiasi elementu parentale persunalizatu, per rinfurzà facilmente a larghezza desiderata.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Tag di buttone

Aduprate e classi di buttone nantu à un elementu <a>, <button>, o .<input>

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Usu specificu di u cuntestu

Mentre e classi di buttone pò esse aduprate nantu à <a>è <button>elementi, solu l' <button>elementi sò supportati in i nostri cumpunenti nav è navbar.

Ligami chì facenu cum'è buttoni

Se l' <a>elementi sò usati per agisce cum'è buttoni - attivazione di funziunalità in-pagina, invece di navigà à un altru documentu o sezione in a pagina attuale - anu da esse ancu datu un role="button".

Rendering cross-browser

Cum'è una bona pratica, ricumandemu assai di utilizà l' <button>elementu ogni volta chì hè pussibule per assicurà a resa di u navigatore cross-browser.

Frà l'altri cose, ci hè un bug in Firefox <30 chì ci impedisce di stabilisce i line-heightbuttoni <input>basati, facendu chì ùn anu micca esattamente l'altezza di l'altri buttoni in Firefox.

Opzioni

Aduprate qualsiasi di e classi di buttone dispunibili per creà rapidamente un buttone stilatu.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu à un buttone solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia evidenti da u cuntenutu stessu (u testu visibile di u buttone), o hè inclusa per mezu alternativu, cum'è un testu addiziale oculatu cù a .sr-onlyclasse.

Taglie

Vulete i buttoni più grande o più chjucu? Aggiungi .btn-lg, .btn-sm, o .btn-xsper dimensioni supplementari.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Crea i buttoni di livellu di bloccu - quelli chì spannu tutta a larghezza di un genitore - aghjunghjendu .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Statu attivu

I buttoni apparisceranu pressati (cù un sfondate più scuru, cunfini più scuri è ombra inserita) quandu attivu. Per <button>elementi, questu hè fattu via :active. Per <a>elementi, hè fattu cù .active. Tuttavia, pudete aduprà .activenantu à <button>s (è include l' aria-pressed="true"attributu) duvete bisognu di riplicà u statu attivu programmaticu.

Elementu buttone

Ùn ci hè bisognu di aghjunghje :activecum'è una pseudo-classe, ma se avete bisognu di furzà a stessa apparenza, vai avanti è aghjunghje .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Elementu di ancora

Aghjunghjite a .activeclassa à i <a>buttoni.

Link primariu Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Statu disattivatu

Fate chì i buttoni sembranu incliccabili sguassenduli torna cù opacity.

Elementu buttone

Aghjunghjite l' disabledattributu à i <button>buttoni.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Compatibilità cross-browser

Se aghjunghje l' disabledattributu à un <button>, Internet Explorer 9 è quì sottu rende u testu grisgiu cù una brutta ombra di testu chì ùn pudemu micca riparà.

Elementu di ancora

Aghjunghjite a .disabledclassa à i <a>buttoni.

Link primariu Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

Avvisu di funziunalità di ligame

Questa classa usa pointer-events: noneper pruvà à disattivà a funziunalità di ligame di <a>s, ma chì a pruprietà CSS ùn hè ancu standardizzata è ùn hè micca cumplettamente supportata in Opera 18 è sottu, o in Internet Explorer 11. Inoltre, ancu in i navigatori chì supportanu pointer-events: noneu teclatu. a navigazione ùn hè micca affettata, vale à dì chì l'utilizatori di u teclatu è l'utilizatori di tecnulugii assistivi puderanu attivà sti ligami. Allora per esse sicuru, utilizate JavaScript persunalizatu per disattivà tali ligami.

Imàghjini rispunsevuli

L'imaghjini in Bootstrap 3 ponu esse resi responsive-friendly via l'aghjunzione di a .img-responsiveclasse. Questu s'applica max-width: 100%;, height: auto;è display: block;à l'imaghjini in modu chì scala bè à l'elementu parent.

Per centru l'imaghjini chì utilizanu a .img-responsiveclasse, utilizate .center-blockinvece di .text-center. Vede a sezione di classi d'aiutu per più dettagli nantu à .center-blockl'usu.

Immagini SVG è IE 8-10

In Internet Explorer 8-10, l'imaghjini SVG .img-responsivesò di dimensioni sproporzionate. Per riparà questu, aghjunghje width: 100% \9;induve necessariu. Bootstrap ùn l'applica micca automaticamente perchè causa cumplicazioni à altri formati d'imaghjini.

<img src="..." class="img-responsive" alt="Responsive image">

Forme d'imaghjini

Aghjunghje classi à un <img>elementu per stilà facilmente l'imaghjini in ogni prughjettu.

Compatibilità cross-browser

Tenite in mente chì Internet Explorer 8 manca di supportu per i cantoni arrotondati.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Culori cuntestuali

Trasmette u significatu attraversu u culore cù una mansa di classi di utilità di enfasi. Quessi ponu ancu esse appiicati à i ligami è si scuriscenu nantu à u passaghju cum'è i nostri stili di ligame predeterminati.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Trattamentu di specificità

A volte, e classi di enfasi ùn ponu esse applicate per via di a specificità di un altru selettore. In a maiò parte di i casi, una soluzione sufficente hè di imbulighjà u vostru testu in una <span>cù a classe.

Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore hè o ovvia da u cuntenutu stessu (i culori cuntestuali sò solu utilizati per rinfurzà u significatu chì hè digià presente in u testu / marcatu), o hè inclusu per mezu alternativu, cum'è un testu addiziale oculatu cù a .sr-onlyclasse . .

Sfondi cuntestuali

Simile à e classi di culore di testu contextuale, facilmente stabilisce u sfondate di un elementu à qualsiasi classi contextuale. I cumpunenti di l'ancora si scuriscenu nantu à u passaghju, cum'è e classi di testu.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Trattamentu di specificità

A volte e classi di fondo contextuale ùn ponu esse applicate per via di a specificità di un altru selettore. In certi casi, una soluzione sufficente hè di imbulighjà u cuntenutu di u vostru elementu in una <div>cù a classe.

Trasmette u significatu à e tecnulugia assistive

Cum'è cù i culori contextuali , assicuratevi chì ogni significatu trasmessu per u culore hè ancu trasmessu in un formatu chì ùn hè micca puramente presentativu.

Chiudi icona

Aduprate l'icona di chiudi generica per rinfriscà u cuntenutu cum'è modali è alerti.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

Aduprate i carets per indicà a funziunalità è a direzzione di u dropdown. Nota chì u cursore predeterminatu s'inverterà automaticamente in i menu drop-up .

<span class="caret"></span>

galleggianti veloci

Float un elementu à manca o diritta cù una classa. !importanthè inclusu per evità prublemi di specificità. E classi ponu ancu esse aduprate cum'è mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Centru blocchi di cuntenutu

Pone un elementu à display: blockè centru via margin. Disponibile cum'è un mixin è classa.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Limpia facilmente floats aghjunghjendu .clearfix à l'elementu parent . Utiliza u micro clearfix popularizatu da Nicolas Gallagher. Pò esse ancu usatu cum'è mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Mostra è oculte u cuntenutu

Forza un elementu per esse mostratu o ammucciatu ( cumpresu per i lettori di schermu ) cù l'usu di .showe .hiddenclassi. Queste classi usanu !importantper evità cunflitti di specificità, cum'è i floats rapidi . Sò dispunibuli solu per basculà u livellu di bloccu. Puderanu ancu esse usatu cum'è mixins.

.hidehè dispunibule, ma ùn affetta micca sempre i lettori di schermu è hè obsoletu da v3.0.1. Aduprà .hiddeno .sr-onlyinvece.

Inoltre, .invisiblepò esse usatu per cambià solu a visibilità di un elementu, vale à displaydì chì ùn hè micca mudificatu è l'elementu pò ancu influenzà u flussu di u documentu.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Lettore di schermu è cuntenutu di navigazione di u teclatu

Oculta un elementu à tutti i dispositi eccettu i lettori di schermu cù .sr-only. Cumbine .sr-onlycù .sr-only-focusableper mostrà l'elementu di novu quandu hè focu (per esempiu da un utilizatore solu di u teclatu). Necessariu per seguità e migliori pratiche di accessibilità . Pò esse ancu usatu cum'è mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Sustituzione di l'imagine

Aduprate a .text-hideclassa o mixin per aiutà à rimpiazzà u cuntenutu di testu di un elementu cù una maghjina di fondo.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Per un sviluppu più veloce per u telefuninu, aduprate queste classi di utilità per mostrà è nasconde u cuntenutu per u dispositivu via media query. Includite ancu e classi di utilità per cambià u cuntenutu quandu sò stampati.

Pruvate di utilizà questi nantu à una basa limitata è evite micca di creà versioni completamente diverse di u stessu situ. Invece, aduprate per cumplementarii a presentazione di ogni dispusitivu.

Classi dispunibuli

Aduprate una sola o una cumminazione di e classi dispunibuli per cambià u cuntenutu trà i punti di rottura di vista.

	Dispositivi extra chjuchiTelefoni (<768px)	Picculi dispusitiviTablette (≥768px)	Dispositivi mediuDesktops (≥992px)	Apparecchi grandiDesktops (≥1200px)
`.visible-xs-*`	Visibile	Ammucciatu	Ammucciatu	Ammucciatu
`.visible-sm-*`	Ammucciatu	Visibile	Ammucciatu	Ammucciatu
`.visible-md-*`	Ammucciatu	Ammucciatu	Visibile	Ammucciatu
`.visible-lg-*`	Ammucciatu	Ammucciatu	Ammucciatu	Visibile
`.hidden-xs`	Ammucciatu	Visibile	Visibile	Visibile
`.hidden-sm`	Visibile	Ammucciatu	Visibile	Visibile
`.hidden-md`	Visibile	Visibile	Ammucciatu	Visibile
`.hidden-lg`	Visibile	Visibile	Visibile	Ammucciatu

Da a v3.2.0, e .visible-*-*classi per ogni breakpoint venenu in trè variazioni, una per ogni displayvalore di pruprietà CSS elencatu quì sottu.

Gruppu di classi	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Cusì, per schermi extra chjuchi ( xs) per esempiu, e .visible-*-*classi dispunibuli sò: .visible-xs-block, .visible-xs-inline, è .visible-xs-inline-block.

E classi .visible-xs, .visible-sm, .visible-md, è .visible-lgancu esistenu, ma sò obsoleti da v3.2.0 . Sò apprussimatamente equivalenti à .visible-*-block, eccettu cù casi speciali supplementari per <table>elementi toggling-related.

Classi di stampa

Simile à e classi responsive regulari, aduprate queste per cambià u cuntenutu per a stampa.

Classi	Browser	Stampa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Ammucciatu	Visibile
`.hidden-print`	Visibile	Ammucciatu

A classa .visible-printesiste ancu ma hè obsoleta da v3.2.0. Hè apprussimatamente equivalente à .visible-print-block, eccettu cù casi speciali supplementari per <table>elementi -related.

Casi di prova

Ridimensionà u vostru navigatore o caricate nantu à diversi dispositi per pruvà e classi di utilità rispunsevuli.

Visibile nantu à...

I marchi verdi indicanu chì l'elementu hè visibile in a vostra vista attuale.

Extra picculu ✔ Visibile nantu à x-small

Picculu ✔ Visibile nantu à picculi

Medium ✔ Visibile nantu à u mediu

Grande ✔ Visibile nantu à grande

Extra picculu è picculu ✔ Visibile nantu à x-picculi è chjuchi

Medium è grande ✔ Visibile nantu à mediu è grande

Extra picculu è mediu ✔ Visibile nantu à x-small è medium

Picculu è grande ✔ Visibile nantu à picculi è grandi

Extra petite è grande ✔ Visibile nantu à x-picculi è grande

Picculu è mediu ✔ Visibile nantu à picculi è medii

Ammucciatu nantu à...

Quì, i marchi verdi indicanu ancu chì l'elementu hè oculatu in a vostra vista attuale.

Extra picculu ✔ Oculatu nantu à x-small

Picculu ✔ Oculatu nantu à picculi

Medium ✔ Oculatu nantu à u mediu

Grande ✔ Oculatu nantu à grande

Extra picculu è picculu ✔ Oculatu nantu à x-picculi è chjuchi

Medium è grande ✔ Oculatu nantu à mediu è grande

Extra picculu è mediu ✔ Oculatu nantu à x-picculi è mediu

Picculu è grande ✔ Oculatu nantu à picculi è grandi

Extra petite è grande ✔ Oculatu nantu à x-picculi è grande

Picculu è mediu ✔ Oculatu nantu à picculi è medius

U CSS di Bootstrap hè custruitu nantu à Less, un preprocessore cù funziunalità supplementari cum'è variabili, mixin, è funzioni per cumpilà CSS. Quelli chì aspittàvanu di usà a fonte Less files invece di i nostri schedarii CSS compilati ponu aduprà e numerose variabili è mixins chì usemu in tuttu u quadru.

Variabili di griglia è mixin sò coperti in a sezione di u sistema Grid .

Cumpilazione di Bootstrap

Bootstrap pò esse usatu in almenu duie manere: cù u CSS compilatu o cù i schedarii Less source. Per cumpilà i Less files, cunsultate a sezione Getting Started per cumu cunfigurà u vostru ambiente di sviluppu per eseguisce i cumandamenti necessarii.

Strumenti di compilazione di terzu pò travaglià cù Bootstrap, ma ùn sò micca supportati da a nostra squadra di core.

Variabili

Variabili sò aduprate in tuttu u prugettu cum'è un modu per centralizà è sparte i valori cumunimenti usati cum'è culori, spazii, o pila di font. Per una ripartizione cumpleta, vede u Customizer .

Culori

Fate facilmente usu di dui schemi di culori: scala di grisgiu è semanticu. I culori in scala di grigi furniscenu un accessu rapidu à i sfumaturi di neru cumunimenti usati, mentre chì a semantica include diversi culori assignati à valori contextuali significativi.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Aduprate qualsiasi di sti variàbili di culore cum'è sò o riassignate à variàbili più significati per u vostru prughjettu.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Scaffolding

Un pocu di variabili per persunalizà rapidamente elementi chjave di u scheletru di u vostru situ.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Ligami

Stile facilmente i vostri ligami cù u culore ghjustu cù un solu valore.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Nota chì l' @link-hover-colorutiliza una funzione, un altru strumentu fantasticu da Less, per creà automaticamente u culore ghjustu. Pudete aduprà darken, lighten, saturate, è desaturate.

Tipografia

Stabilite facilmente a vostra tipografia, a dimensione di u testu, u principale, è più cù uni pochi di variabili veloci. Bootstrap faci l'usu di questi ancu per furnisce mixin tipografici faciuli.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Icone

Dui variabili rapidi per persunalizà u locu è u nome di file di e vostre icone.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Cumpunenti

I cumpunenti in tuttu Bootstrap utilizanu alcune variabili predeterminate per stabilisce valori cumuni. Eccu i più cumunimenti usati.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Mix di venditori

I mixins di venditori sò mixins per aiutà à supportà parechji navigatori includendu tutti i prefissi di venditori pertinenti in u vostru CSS compilatu.

Scatola di dimensioni

Resettate u mudellu di scatula di i vostri cumpunenti cù un solu mixin. Per u cuntestu, vede stu articulu utile da Mozilla .

U mixin hè obsoletu da v3.2.0, cù l'intruduzioni di Autoprefixer. Per priservà a cumpatibilità inversa, Bootstrap continuerà à aduprà u mixin internamente finu à Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Angoli arrotondati

Oghje tutti i navigatori muderni supportanu a border-radiuspruprietà senza prefissu. Comu tali, ùn ci hè micca .border-radius()mixin, ma Bootstrap include accurtatoghji per arrotonda rapidamente dui cantoni in un latu particulari di un ughjettu.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) ombre

Se u vostru publicu di destinazione usa l'ultime è i più grandi navigatori è i dispositi, assicuratevi di aduprà solu a box-shadowpruprietà per sè stessu. Sè avete bisognu di supportu per i vechji dispositi Android (pre-v4) è iOS (pre-iOS 5), utilizate u mixin deprecated per piglià u -webkitprefissu necessariu.

U mixin hè obsoletu da v3.1.0, postu chì Bootstrap ùn sustene micca ufficialmente e plataforme obsolete chì ùn sustene micca a pruprietà standard. Per priservà a cumpatibilità inversa, Bootstrap continuerà à aduprà u mixin internamente finu à Bootstrap v4.

Assicuratevi di utilizà rgba()i culori in l'ombra di a vostra scatula in modu chì si mischianu cum'è perfettamenti pussibule cù sfondi.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Transizzioni

Mixin multipli per a flessibilità. Stabilite tutte l'infurmazioni di transizione cun una, o specificate un ritardu è una durata separati in quantu necessariu.

I mixins sò obsoleti da v3.2.0 , cù l'intruduzioni di Autoprefixer. Per priservà a cumpatibilità inversa, Bootstrap continuerà à aduprà i mixins internamente finu à Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Trasformazioni

Rotate, scala, traduce (sposta), o distorce ogni ughjettu.

I mixins sò obsoleti da v3.2.0 , cù l'intruduzioni di Autoprefixer. Per priservà a cumpatibilità inversa, Bootstrap continuerà à aduprà i mixins internamente finu à Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animazioni

Un mixin unicu per aduprà tutte e proprietà d'animazione di CSS3 in una dichjarazione è altri mixin per e proprietà individuali.

I mixins sò obsoleti da v3.2.0 , cù l'intruduzioni di Autoprefixer. Per priservà a cumpatibilità inversa, Bootstrap continuerà à aduprà i mixins internamente finu à Bootstrap v4.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacità

Stabilite l'opacità per tutti i navigatori è furnisce un filterfallback per IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Testu di piazzamentu

Fornite cuntestu per i cuntrolli di forma in ogni campu.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Culonni

Generate colonne via CSS in un elementu unicu.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradienti

Trasforma facilmente qualsiasi dui culori in un gradiente di fondo. Avanzate più è stabilisce una direzzione, utilizate trè culori, o utilizate un gradiente radiale. Cù una sola mixin avete tutte e sintassi prefissate chì avete bisognu.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Pudete ancu specificà l'angolo di un gradiente lineare standard di dui culori:

#gradient > .directional(#333; #000; 45deg);

Sè avete bisognu di un gradiente in stile barbiere, hè faciule ancu. Basta à specificà un unicu culore è avemu da sopra à una striscia bianca traslucida.

#gradient > .striped(#333; 45deg);

Up the ante è utilizate trè culori invece. Pone u primu culore, u sicondu culore, u culore di u sicondu culore (un valore percentuale cum'è 25%), è u terzu culore cù questi mixins:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

A testa alta ! Se avete mai bisognu di caccià un gradiente, assicuratevi di caccià qualsiasi IE specificu filterchì pudete avè aghjustatu. Pudete fà questu utilizendu u .reset-filter()mixin à fiancu background-image: none;.

Mix di utilità

I mixin di utilità sò mixins chì combinanu proprietà CSS altrimenti senza relazione per ottene un scopu o compitu specificu.

Clearfix

Scurdate di aghjunghje class="clearfix"à qualsiasi elementu è invece aghjunghje u .clearfix()mixin induve apprupriatu. Utiliza u micro clearfix di Nicolas Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Centratura horizontale

Centra rapidamente ogni elementu in u so parente. Esige widtho max-widthda esse stabilitu.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Aiutanti di taglia

Specificà e dimensioni di un ughjettu più faciule.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Zone di testu ridimensionabili

Facilmente cunfigurate l'opzioni di resize per qualsiasi textarea, o qualsiasi altru elementu. Defaults à u cumpurtamentu normale di u navigatore ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Truncamentu di u testu

Truncate facilmente u testu cun ellipsis cun un solu mixin. Esige l'elementu per esse blocko inline-blocklivellu.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

L'imaghjini di a retina

Specificate dui percorsi di l'imaghjini è e dimensioni di l'imaghjini @1x, è Bootstrap furnisce una dumanda di media @2x. Sì avete parechje imagine per serve, cunzidira à scrive a vostra retina image CSS manualmente in una sola media query.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Mentre Bootstrap hè custruitu nantu à Less, hà ancu un portu ufficiale Sass . Mantenemu in un repositoriu GitHub separatu è gestionemu l'aghjurnamenti cù un script di cunversione.

Ciò chì hè inclusu

Siccomu u portu Sass hà un repo separatu è serve un publicu pocu sfarente, u cuntenutu di u prugettu differisce assai da u prughjettu principale di Bootstrap. Questu assicura chì u portu Sass hè cumpatibile cù quant'è più sistemi basati in Sass.

Strada	Descrizzione
`lib/`	Codice di gemma Ruby (configurazione Sass, integrazioni Rails è Compass)
`tasks/`	Scripts di cunvertitore (turnendu a monte di Less à Sass)
`test/`	Test di compilazione
`templates/`	Manifestu di u pacchettu di bussola
`vendor/assets/`	Sass, JavaScript è i fugliali di font
`Rakefile`	I travaglii interni, cum'è rake è cunvertisce

Visita u repositoriu GitHub di u portu Sass per vede questi schedari in azzione.

Installazione

Per infurmazione nantu à cumu installà è aduprà Bootstrap per Sass, cunsultate u repository GitHub readme . Hè a fonte più aghjurnata è include infurmazioni per l'usu cù Rails, Compass è prughjetti standard Sass.

Bootstrap per Sass

CSS

Panoramica

HTML5 doctype

Mobile prima

Tipografia è ligami

Normalize.css

Contenituri

Sistema di griglia

Introduzione

Interrogazioni di media

Opzioni di griglia

Esempiu: Stacked-to-horizontal

Esempiu: Contenitore di fluidu

Esempiu: Mobile è desktop

Esempiu: Mobile, tableta, desktop

Esempiu: imballaggio di colonna

Resetta a colonna responsiva

Eliminate i canotti

Colonne di compensazione

Culonni di nidificazione

Ordine di a colonna

Meno mixin e variabili

Variabili

Mixins

Esempiu di usu

Tipografia

Intestazioni

h1. Titulu Bootstrap

h2. Titulu Bootstrap

h3. Titulu Bootstrap

h4. Titulu Bootstrap

h5. Titulu Bootstrap

h6. Titulu Bootstrap

h1. Bootstrap heading Testu secundariu

h2. Bootstrap heading Testu secundariu

h3. Bootstrap heading Testu secundariu

h4. Bootstrap heading Testu secundariu

h5. Bootstrap heading Testu secundariu

h6. Bootstrap heading Testu secundariu

Copia di corpu

Copia di u corpu di piombu

Custruitu c�� Meno

Elementi di testu in linea

Testu marcatu

Testu eliminatu

Testu strittu

Testu inseritu

Testu sottolineatu

Picculu testu

Audace

Italicu

Elementi alternati

Classi di allineamentu

Classi di trasfurmazioni

Abbreviazioni

Abbreviazione basica

Inizialisimu

Indirizzi

Blockquotes

Blockquote predefinitu

Opzioni di blockquote

Nomine una fonte

Display alternati

Listi

Senza ordine

Cumandatu

Unstyled

In linea

Descrizzione

Descrizzione horizontale

Auto-truncating

Codice

In linea

Input di l'utilizatori

Bloccu basicu

Variabili

Sample output

Tavule

Esempiu basicu

Righe a strisce

Demo `:focus`statu

Caveat nantu à e funziunalità di u ligame di`<a>`

Icone opzionali cù `.sr-only`etichette nascoste