Source

Sistema de graella

Utilitzeu la nostra potent quadrícula flexible per a mòbils per crear dissenys de totes les formes i mides gràcies a un sistema de dotze columnes, cinc nivells de resposta predeterminats, variables i mixins Sass i dotzenes de classes predefinides.

Com funciona

El sistema de graella de Bootstrap utilitza una sèrie de contenidors, files i columnes per dissenyar i alinear el contingut. Està creat amb flexbox i és totalment sensible. A continuació es mostra un exemple i una visió en profunditat de com s'uneix la graella.

Nou o no coneixeu Flexbox? Llegiu aquesta guia de CSS Tricks flexbox per obtenir antecedents, terminologia, directrius i fragments de codi.

Una de les tres columnes

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

L'exemple anterior crea tres columnes d'amplada igual en dispositius petits, mitjans, grans i molt grans utilitzant les nostres classes de quadrícula predefinides. Aquestes columnes estan centrades a la pàgina amb el pare .container.

Desglossant-lo, a continuació es mostra com funciona:

Els contenidors proporcionen un mitjà per centrar i estampar horitzontalment el contingut del vostre lloc. Utilitzeu -lo .containerper a una amplada de píxel sensible o .container-fluidper width: 100%a totes les mides de visualització i dispositiu.
Les files són embolcalls per a columnes. Cada columna té horitzontal padding(anomenat canaló) per controlar l'espai entre elles. Això paddinges contraresta a les files amb marges negatius. D'aquesta manera, tot el contingut de les columnes s'alinea visualment al costat esquerre.
En un disseny de quadrícula, el contingut s'ha de col·locar dins de columnes i només les columnes poden ser fills immediats de les files.
Gràcies a flexbox, les columnes de quadrícula sense una especificació widthes dissenyaran automàticament com a columnes d'amplada igual. Per exemple, quatre casos de .col-smseran automàticament un 25% d'amplada a partir del petit punt d'interrupció. Consulteu la secció de columnes de disseny automàtic per obtenir més exemples.
Les classes de columnes indiquen el nombre de columnes que voleu utilitzar de les 12 possibles per fila. Per tant, si voleu tres columnes d'amplada igual, podeu utilitzar .col-4.
Les columnes widths'estableixen en percentatges, de manera que sempre són fluides i de mida en relació amb el seu element pare.
Les columnes tenen horitzontals paddingper crear els canals entre columnes individuals, però, podeu eliminar-les marginde les files i paddingde les columnes .no-guttersamb .row.
Perquè la quadrícula respongui, hi ha cinc punts d'interrupció de la quadrícula, un per a cada punt d' interrupció responsiu : tots els punts d'interrupció (extra petit), petits, mitjans, grans i molt grans.
Els punts d'interrupció de la quadrícula es basen en consultes de mitjans d'amplada mínima, és a dir , s'apliquen a aquest punt d'interrupció i a tots els que hi ha a sobre (p. ex., .col-sm-4s'aplica a dispositius petits, mitjans, grans i molt grans, però no al primer punt d' xsinterrupció).
Podeu utilitzar classes de graella predefinides (com ara .col-4) o mixins de Sass per a un marcatge més semàntic.

Tingueu en compte les limitacions i errors al voltant de flexbox , com ara la impossibilitat d'utilitzar alguns elements HTML com a contenidors flexibles .

Opcions de graella

Tot i que Bootstrap utilitza ems o rems per definir la majoria de mides, pxs s'utilitzen per als punts d'interrupció de la graella i les amplades dels contenidors. Això és degut a que l'amplada de la finestra gràfica és en píxels i no canvia amb la mida del tipus de lletra .

Vegeu com funcionen els aspectes del sistema de graella Bootstrap en diversos dispositius amb una taula pràctica.

	Extra petit <576px	Petit ≥576 píxels	Mitjà ≥768 píxels	Gran ≥992px	Extra gran ≥1200px
Amplada màxima del contenidor	Cap (automàtic)	540 píxels	720 píxels	960 píxels	1140 píxels
Prefix de classe	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# de columnes	12
Amplada del canal	30 px (15 px a cada costat d'una columna)
Encaixable	Sí
Ordenació de columnes	Sí

Columnes de disseny automàtic

Utilitzeu classes de columnes específiques del punt d'interrupció per facilitar la mida de les columnes sense una classe numerada explícita com .col-sm-6.

Ample igual

Per exemple, aquí hi ha dos dissenys de quadrícula que s'apliquen a cada dispositiu i finestra gràfica, des de xsfins a xl. Afegiu qualsevol nombre de classes sense unitats per a cada punt d'interrupció que necessiteu i cada columna tindrà la mateixa amplada.

1 de 2

2 de 2

1 de 3

2 de 3

3 de 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Les columnes d'amplada igual es poden dividir en diverses línies, però hi va haver un error de flexbox de Safari que va impedir que això funcionés sense un fitxer explícit flex-basiso border. Hi ha solucions alternatives per a versions anteriors del navegador, però no haurien de ser necessàries si esteu actualitzats.

Columna

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Configuració d'una amplada de columna

La disposició automàtica de les columnes de quadrícula Flexbox també significa que podeu establir l'amplada d'una columna i que les columnes germanes canviïn automàticament la mida al seu voltant. Podeu utilitzar classes de quadrícula predefinides (com es mostra a continuació), mixins de quadrícula o amplades en línia. Tingueu en compte que les altres columnes canviaran la mida sense importar l'amplada de la columna central.

1 de 3

2 de 3 (més ample)

3 de 3

1 de 3

2 de 3 (més ample)

3 de 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contingut d'amplada variable

Utilitzeu col-{breakpoint}-autoclasses per dimensionar columnes en funció de l'amplada natural del seu contingut.

1 de 3

Contingut d'amplada variable

3 de 3

1 de 3

Contingut d'amplada variable

3 de 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Multifila d'igual amplada

Creeu columnes d'amplada igual que abastin diverses files inserint un .w-100lloc on voleu que les columnes es trenquin a una línia nova. Feu que les pauses responguin barrejant .w-100amb algunes utilitats de visualització sensibles .

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Classes responsives

La graella de Bootstrap inclou cinc nivells de classes predefinides per crear dissenys responsius complexos. Personalitzeu la mida de les vostres columnes en dispositius molt petits, petits, mitjans, grans o molt grans com us convingui.

Tots els punts d'interrupció

Per a les quadrícules que siguin iguals des del dispositiu més petit fins al més gran, utilitzeu les classes .coli . .col-*Especifiqueu una classe numerada quan necessiteu una columna de mida particular; en cas contrari, no dubteu a cenyir-vos a .col.

col

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Apilat a horitzontal

Mitjançant un únic conjunt de .col-sm-*classes, podeu crear un sistema de graella bàsic que comenci apilat i es converteixi en horitzontal en el petit punt d'interrupció ( sm).

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Barrejar i combinar

No voleu que les vostres columnes simplement s'apilin en alguns nivells de quadrícula? Utilitzeu una combinació de diferents classes per a cada nivell segons sigui necessari. Vegeu l'exemple següent per a una millor idea de com funciona tot.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

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

Alineació

Utilitzeu les utilitats d'alineació de flexbox per alinear columnes verticalment i horitzontalment.

Alineació vertical

Una de les tres columnes

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Una de les tres columnes

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Alineació horitzontal

Una de les dues columnes

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Sense canalons

Els canals entre columnes a les nostres classes de quadrícula predefinides es poden eliminar amb .no-gutters. Això elimina la margins negativa .rowi l'horitzontal paddingde totes les columnes secundàries immediates.

Aquí teniu el codi font per crear aquests estils. Tingueu en compte que les substitucions de columnes només tenen l'abast de les primeres columnes secundàries i s'orienten mitjançant el selector d'atributs . Tot i que això genera un selector més específic, el farciment de columnes encara es pot personalitzar encara més amb les utilitats d'espaiat .

Necessites un disseny de punta a punta? Deixeu anar el pare .containero .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

A la pràctica, així és com es veu. Tingueu en compte que podeu continuar utilitzant-ho amb totes les altres classes de graella predefinides (incloses les amplades de columnes, els nivells de resposta, les reordenacions i molt més).

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

.col-6 .col-md-4

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

Embolcall de la columna

Si es col·loquen més de 12 columnes dins d'una sola fila, cada grup de columnes addicionals, com una unitat, s'ajustarà a una línia nova.

.col-9

.col-4
Com que 9 + 4 = 13 > 12, aquest div de 4 columnes s'embolica en una línia nova com una unitat contigua.

.col-6
Les columnes posteriors continuen per la nova línia.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-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-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Salts de columna

Trencar columnes a una línia nova a flexbox requereix un petit truc: afegiu un element width: 100%on vulgueu embolicar les vostres columnes a una línia nova. Normalment això s'aconsegueix amb múltiples .rows, però no tots els mètodes d'implementació poden tenir en compte això.

.col-6 .col-sm-3

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

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

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

També podeu aplicar aquesta interrupció en punts d'interrupció específics amb les nostres utilitats de visualització sensibles .

.col-6 .col-sm-4

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

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

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

Reordenació

Ordena classes

Utilitzeu .order-classes per controlar l' ordre visual del vostre contingut. Aquestes classes són sensibles, de manera que podeu establir el orderpunt d'interrupció per (p. ex., .order-1.order-md-2). Inclou suport per 1a través 12dels cinc nivells de quadrícula.

Primer, però sense ordre

Segon, però últim

Tercer, però primer

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

També hi ha classes responsive .order-firsti que canvien el valor d'un element aplicant i ( ), respectivament. Aquestes classes també es poden barrejar amb les classes numerades segons sigui necessari..order-lastorderorder: -1order: 13order: $columns + 1.order-*

Primer, però últim

Segon, però desordenat

Tercer, però primer

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Columnes de compensació

Podeu compensar les columnes de la quadrícula de dues maneres: les nostres .offset-classes de quadrícula sensibles i les nostres utilitats de marge . Les classes de quadrícula tenen la mida per coincidir amb les columnes, mentre que els marges són més útils per a dissenys ràpids on l'amplada del desplaçament és variable.

Classes offset

Mou les columnes cap a la dreta amb .offset-md-*classes. Aquestes classes augmenten el marge esquerre d'una columna per *columnes. Per exemple, .offset-md-4es mou .col-md-4sobre quatre columnes.

.col-md-4

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

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

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

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

A més d'esborrar columnes als punts d'interrupció sensibles, és possible que hàgiu de restablir els desplaçaments. Vegeu això en acció a l'exemple de quadrícula .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-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 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Utilitats de marge

Amb el pas a flexbox a la v4, podeu utilitzar utilitats de marge com .mr-autoper forçar les columnes germanes allunyades les unes de les altres.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Nidificació

Per niuar el contingut amb la quadrícula predeterminada, afegiu un .rowconjunt de columnes noves dins d'una columna .col-sm-*existent . .col-sm-*Les files imbricades haurien d'incloure un conjunt de columnes que sumen 12 o menys (no cal que utilitzeu les 12 columnes disponibles).

Nivell 1: .col-sm-9

Nivell 2: .col-8 .col-sm-6

Nivell 2: .col-4 .col-sm-6

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

Sass mixins

Quan utilitzeu els fitxers Sass d'origen de Bootstrap, teniu l'opció d'utilitzar variables i mixins Sass per crear dissenys de pàgina personalitzats, semàntics i sensibles. Les nostres classes de graella predefinides utilitzen aquestes mateixes variables i mixins per proporcionar un conjunt complet de classes llestes per utilitzar per a dissenys de resposta ràpida.

Les variables

Les variables i els mapes determinen el nombre de columnes, l'amplada del canal i el punt de consulta de mitjans en què començar les columnes flotants. Els fem servir per generar les classes de quadrícula predefinides documentades anteriorment, així com per als mixins personalitzats que s'enumeren a continuació.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Els mixins s'utilitzen juntament amb les variables de graella per generar CSS semàntic per a columnes de graella individuals.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Exemple d'ús

Podeu modificar les variables als vostres propis valors personalitzats o simplement utilitzar els mixins amb els seus valors predeterminats. Aquí teniu un exemple d'ús de la configuració predeterminada per crear un disseny de dues columnes amb un espai entre ells.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Contingut principal

Contingut secundari

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personalització de la graella

Utilitzant les nostres variables i mapes Sass de graella integrats, és possible personalitzar completament les classes de graella predefinides. Canvieu el nombre de nivells, les dimensions de la consulta de mitjans i l'amplada del contenidor; després torneu a compilar.

Columnes i canalons

El nombre de columnes de la graella es pot modificar mitjançant variables Sass. $grid-columnss'utilitza per generar les amplades (en percentatge) de cada columna individual mentre $grid-gutter-widthestableix l'amplada per als canalons de la columna.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Grades de quadrícula

Més enllà de les columnes, també podeu personalitzar el nombre de nivells de quadrícula. Si només volguéssiu quatre nivells de quadrícula, actualitzeu $grid-breakpointsi $container-max-widthsa alguna cosa com això:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Quan feu qualsevol canvi a les variables o mapes de Sass, haureu de desar els canvis i tornar-los a compilar. En fer-ho, sortirà un nou conjunt de classes de quadrícula predefinides per a amplades de columnes, desplaçaments i ordres. Les utilitats de visibilitat responsives també s'actualitzaran per utilitzar els punts d'interrupció personalitzats. Assegureu-vos d'establir els valors de la quadrícula a px(no rem, em, o %).