twitter-bootstrap-3 => Sistema di griglia

Query multimediali

Utilizziamo le seguenti query multimediali nei nostri file Less per creare i punti chiave nel nostro sistema di grid.

/* 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 ci espandiamo su queste query multimediali per includere una larghezza massima per limitare i CSS a un insieme più ristretto di dispositivi.

@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

Che cos'è Bootstrap Grid System

Il sistema di griglia Bootstrap offre il modo rapido e semplice per creare layout di siti Web reattivi.

Bootstrap 3 include classi di griglia predefinite per creare rapidamente layout di griglia per diversi tipi di dispositivi come telefoni cellulari, tablet, laptop e desktop, ecc.

Ad esempio, è possibile utilizzare la classe .col-xs- * per creare colonne della griglia per dispositivi extra-piccoli come i telefoni cellulari, analogamente la classe .col-sm- * per dispositivi con schermo piccolo come i tablet, la classe .col-md- * per dispositivi di medie dimensioni come desktop e .col-lg- * per schermi desktop di grandi dimensioni.

La seguente tabella riassume alcune delle caratteristiche chiave del nuovo sistema di griglia

	Dispositivi di piccole dimensioni (<768px)	Compresse di piccoli dispositivi (≥768px)	Dispositivi medi Desktop (≥992px)	Desktop dispositivi di grandi dimensioni (≥1200px)
Comportamento della griglia	Orizzontale in ogni momento
Larghezza del contenitore	Nessuno (auto)	750px	970 px	1170px
Prefisso di classe	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
N. di colonne	12	12	12	12
Larghezza della colonna	Auto	~ 62px	~ 81px	~ 97px
Larghezza di gronda	30 px (15 px su ciascun lato di una colonna)
inseribile	sì
offset	sì
Ordinamento colonna	sì

Impilati-to-orizzontale

Utilizzando un singolo set di classi di griglia .col-md-* , è possibile creare un sistema di griglia di base che inizia accatastato su dispositivi mobili e tablet (dalla gamma extra piccola a piccola) prima di diventare orizzontale su dispositivi desktop (medi). Colloca le colonne della griglia in qualsiasi .row .

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

Contenitore fluido

Trasforma il layout di una griglia a larghezza fissa in un layout a larghezza intera, modificando il .container più esterno .container-fluid .

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

Mobile e desktop

Non vuoi che le tue colonne si impilino semplicemente in dispositivi più piccoli? Utilizza le classi di griglia di dispositivi extra small e medium aggiungendo .col-xs-* .col-md-* alle colonne. Vedere l'esempio di seguito per una migliore idea di come tutto funzioni.

<!-- 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>

Mobile, tablet, desktop

Costruisci sull'esempio precedente creando layout ancora più dinamici e potenti con le classi .col-sm-* .

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

Colonna a capo

Se più di 12 colonne sono posizionate all'interno di una singola riga, ciascun gruppo di colonne aggiuntive, come una unità, verrà inserito in una nuova riga.

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

Ripristino di colonne reattive

Con i quattro livelli di griglie disponibili sei destinato a incorrere in problemi in cui, in determinati punti di interruzione, le tue colonne non si cancellano abbastanza bene in quanto una è più alta dell'altra. Per risolvere ciò, utilizzare una combinazione di un .clearfix e le nostre classi di utilità responsive.

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

Oltre alla cancellazione della colonna nei punti di risposta reattivi, potrebbe essere necessario reimpostare offset, push o pull. Guarda questo in azione nell'esempio della 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>

Colonne di compensazione

Sposta le colonne a destra usando le .col-md-offset-* . Queste classi aumentano il margine sinistro di una colonna per * colonne. Ad esempio, .col-md-offset-4 sposta .col-md-4 su quattro colonne.

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

Puoi anche eseguire l'override degli offset dai livelli di griglia inferiori con le .col-*-offset-0 .

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

Colonne di nidificazione

Per annidare il contenuto con la griglia predefinita, aggiungi un nuovo .row e un insieme di .col-sm-* all'interno di una colonna .col-sm-* esistente. Le righe annidate devono includere un set di colonne che ne aggiungono fino a 12 o meno (non è necessario che tu utilizzi tutte le 12 colonne disponibili).

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

Ordinamento colonna

Modifica facilmente l'ordine delle colonne della griglia .col-md-push-* con le classi di modifica .col-md-push-* e .col-md-pull-* .

<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

Oltre alle classi di griglia predefinite per i layout veloci, Bootstrap include meno variabili e mixin per generare rapidamente i propri layout semplici e semantici.

variabili

Le variabili determinano il numero di colonne, la larghezza della grondaia e il punto di interrogazione del supporto su cui iniziare le colonne mobili. Li usiamo per generare le classi di griglia predefinite documentate sopra, così come per i mixin personalizzati elencati di seguito.

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

mixins

Le miscele vengono utilizzate in combinazione con le variabili di griglia per generare CSS semantico per singole colonne della griglia.

// 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));
  }
}

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

twitter-bootstrap-3
Sistema di griglia

Ricerca…