Sistema de graella

Exemple

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 explicació en profunditat de com s'uneix el sistema de graella.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

L'exemple anterior crea tres columnes d'amplada igual a tots els dispositius i finestres mitjançant les nostres classes de quadrícula predefinides. Aquestes columnes estan centrades a la pàgina amb el pare .container.

Com funciona

Desglossant-ho, aquí és com s'uneix el sistema de graella:

• La nostra graella admet sis punts d'interrupció sensibles . Els punts d'interrupció es basen en min-widthconsultes de mitjans, és a dir, afecten aquest punt d'interrupció i tots els que hi ha a sobre (p. ex., .col-sm-4s'aplica a sm, md, lg, xli xxl). Això significa que podeu controlar la mida i el comportament dels contenidors i les columnes per cada punt d'interrupció.

• Els contenidors centren i empollen el contingut horitzontalment. Utilitzeu -lo .containerper a una amplada de píxel sensible, .container-fluidper width: 100%a totes les finestres i dispositius, o un contenidor sensible (p. ex., .container-md) per a una combinació d'amplada de píxel i fluid.

• Les files són embolcalls per a columnes. Cada columna té horitzontal padding(anomenat canaló) per controlar l'espai entre elles. A paddingcontinuació, això es contraresta a les files amb marges negatius per garantir que el contingut de les columnes estigui alineat visualment al costat esquerre. Les files també admeten classes modificadores per aplicar de manera uniforme la mida de la columna i classes de canal per canviar l'espaiat del contingut.

• Les columnes són increïblement flexibles. Hi ha 12 columnes de plantilla disponibles per fila, cosa que us permet crear diferents combinacions d'elements que abasten qualsevol nombre de columnes. Les classes de columnes indiquen el nombre de columnes de plantilla per abastar (p. ex., col-4abasta quatre). widths s'estableixen en percentatges, de manera que sempre tingueu la mateixa mida relativa.

• Els canalons també són sensibles i personalitzables. Les classes de canalons estan disponibles en tots els punts d'interrupció, amb les mateixes mides que el nostre marge i espai de farciment . Canvieu els canalons horitzontals amb .gx-*classes, els canals verticals amb .gy-*, o tots els canalons amb .g-*classes. .g-0també està disponible per eliminar canalons.

• Les variables Sass, els mapes i els mixins alimenten la xarxa. Si no voleu utilitzar les classes de quadrícula predefinides a Bootstrap, podeu utilitzar el Sass font de la nostra quadrícula per crear-ne la vostra amb un marcatge més semàntic. També incloem algunes propietats personalitzades de CSS per consumir aquestes variables Sass per obtenir una flexibilitat encara més gran.

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

El sistema de quadrícula de Bootstrap es pot adaptar als sis punts d'interrupció predeterminats i als punts d'interrupció que personalitzeu. Els sis nivells de graella predeterminats són els següents:

• Extra petit (xs)
• Petit (sm)
• Mitjà (md)
• Gran (lg)
• Extragran (xl)
• Extra gran (xxl)

Com s'ha indicat anteriorment, cadascun d'aquests punts d'interrupció té el seu propi contenidor, prefix de classe únic i modificadors. A continuació es mostra com canvia la quadrícula en aquests punts d'interrupció:

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 xxl. Afegiu qualsevol nombre de classes sense unitats per a cada punt d'interrupció que necessiteu i cada columna tindrà la mateixa amplada.

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

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.

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

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

Classes responsives

La graella de Bootstrap inclou sis 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.

<div class="container">
  <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>
</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).

<div class="container">
  <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>
</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.

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

Columnes de fila

Utilitzeu les .row-cols-*classes responsives per definir ràpidament el nombre de columnes que millor representen el vostre contingut i disseny. Mentre que les classes normals .col-*s'apliquen a les columnes individuals (per exemple, .col-md-4), les classes de columnes de fila s'estableixen al pare .rowcom a predeterminada per a les columnes contingudes. Amb .row-cols-autopodeu donar a les columnes la seva amplada natural.

Utilitzeu aquestes classes de columnes de fila per crear ràpidament dissenys bàsics de quadrícula o per controlar els dissenys de les vostres targetes i anul·lar-los quan sigui necessari a nivell de columna.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

També podeu utilitzar el Sass mixin que l'acompanya row-cols(),

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

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

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>
</div>

Sass

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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

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

<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: 1.5rem !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 %).