Système ya grille

Ndakisa

Système ya grille ya Bootstrap esalela série ya ba conteneurs, ba lignes, na ba colonnes pona ko layout pe ko aligner ba contenus. Etongami na flexbox mpe ezali na boyokani mobimba. Awa na se ezali ndakisa mpe ndimbola ya mozindo mpo na lolenge nini système ya grille esanganaka.

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

Ndakisa oyo ezali likolo esali ba colonnes misato ya bonene ekokani na kati ya ba appareils nionso mpe ba portes de vue na kosalelaka ba classes na biso ya grille oyo esili ko définir. Makonzí yango ezali na katikati ya lokasa oyo ezali na moboti .container.

Ndenge oyo esalaka

Kobuka yango, tala ndenge système ya grille esanganaka:

• Grille na biso esimbaka ba points de rupture motoba oyo ezo répondre . Ba points de rupture esalemi na min-widthba queries ya media, elingi koloba ezo affecter point de rupture wana pe ba oyo nionso likolo na yango (ndakisa, .col-sm-4etali sm, md, lg, xl, pe xxl). Yango elingi koloba okoki ko contrôler taille ya conteneur na colonne na comportement na point de rupture moko na moko.

• Ba conteneurs centre na horizontalement pad contenus na yo. Salelá .containermpo na bonene ya pixel oyo ezali koyanola, .container-fluidmpo na na width: 100%kati ya bisika nyonso ya kotala mpe bisaleli, to eloko oyo ezali koyanola (ndakisa, .container-md) mpo na kosangisa bonene ya fluide mpe ya pixel.

• Milɔngɔ́ ezali ba enveloppes mpo na makonzí. Kolona mokomoko ezali na horizontal padding(oyo babengaka gouttière) mpo na kotambwisa esika oyo ezali kati na yango. Yango paddingezali na nsima kotelemela na milɔngɔ́ oyo ezali na marge ya mabe mpo na kosala ete makambo oyo ezali na makonzí na yo ezala na molɔngɔ́ na miso na nse na ngámbo ya lobɔkɔ ya mwasi. Milɔngɔ́ mpe esungaka bakelasi ya modificateur mpo na kosalela na lolenge moko bonene ya makonzí mpe bakelasi ya gouttière mpo na kobongola espacement ya makambo na yo.

• Ba colonnes ezalaka incroyablement flexible. Ezali na ba colonnes ya modèle 12 oyo ezali na molongo moko, oyo epesaka yo nzela ya kosala ba combinaisons différentes ya ba éléments oyo ezo span nombre nionso ya ba colonnes. Ba kelasi ya makonzí elakisi motango ya makonzí ya modèle oyo esengeli kosala span (ndakisa, col-4spans minei). widths etiamaki na ba pourcentages donc ozala toujours na dimension relative moko.

• Ba gouttières ezali mpe responsive mpe personnalisable. Ba classes ya gouttière ezali na kati ya ba points de rupture nionso, na ba taille nionso ndenge moko na marge na biso na espacement ya remplissage . Bobongola ba gouttières horizontales na .gx-*ba classes, ba gouttières verticales na .gy-*, to ba gouttières nionso na .g-*ba classes. .g-0ezali mpe mpo na kolongola ba gouttières.

• Ba variables ya Sass, ba cartes, na ba mixins epesaka grille. Soki olingi te kosalela ba classes ya grille oyo esili ko définir na Bootstrap, okoki kosalela source ya grille na biso Sass pona kosala ya yo moko na marquage sémantique mingi. Tozali mpe na mwa ba propriétés personnalisées ya CSS mpo na ko consommer ba variables oyo ya Sass mpo na flexibilité encore plus grande mpo na yo.

Yeba ba limitations na ba bugs zinga zinga ya flexbox , lokola incapacité ya kosalela ba éléments mosusu ya HTML lokola ba conteneurs flex .

Ba options ya grille

Système ya grille ya Bootstrap ekoki ko adapter na ba points de rupture nionso motoba par défaut, na ba points de rupture nionso oyo o personnaliser. Ba niveaux motoba ya grille par défaut ezali boye :

• Extra ya moke (xs) .
• Moke (sm) .
• Moyen (md) .
• Monene (lg) .
• Monene mingi koleka (xl) .
• Extra ya monene mingi (xxl) .

Ndenge tolobaki yango likolo, moko na moko ya ba points de rupture oyo ezali na conteneur na yango, préfixe ya classe unique, mpe ba modificateurs. Tala ndenge grille ebongwanaka na kati ya ba points de rupture oyo:

Ba colonnes ya kosala automatiquement

Salelá bakelasi ya makonzí oyo etali esika ya kobuka mpo na kosala bonene ya makonzí na pɛtɛɛ nyonso kozanga kelasi oyo ezali na nimero ya polele lokola .col-sm-6.

Bonene ya ndenge moko

Ndakisa, awa ezali na ba layouts mibale ya grille oyo etali appareil nionso mpe na esika ya kotala, kobanda xsna xxl. Bakisa nombre nionso ya ba classes sans unité pona point de rupture moko na moko oyo esengeli pe colonne nionso ekozala na largeur moko.

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

Kobongisa bonene ya likonzi moko

Auto-layout mpo na makonzí ya grille flexbox elakisi mpe ete okoki kotya bonene ya colonne moko mpe kosala ete makonzí ya bandeko ebongola bonene na yango automatique zingazinga na yango. Okoki kosalela ba classes ya grille oyo esili kolimbolama liboso (lokola elakisami awa na se), ba mixins ya grille, to ba largeurs ya kati ya ligne. Yebá ete makonzí mosusu ekobongola bonene ata soki makonzí ya katikati ezali na bonene boni.

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

Contenu ya largeur variable

Salelá col-{breakpoint}-autobakelasi mpo na kopesa bonene ya makonzí na kotalela bonene ya bomoto ya makambo oyo ezali na kati na yango.

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

Bakelasi oyo ezali kopesa eyano

Grille ya Bootstrap ezali na ba niveaux motoba ya ba classes pré-définies mpo na kotonga ba layouts complexes oyo ezo répondre. Personnaliser taille ya ba colonnes na yo na ba appareils ya mike mingi, ya mike, ya moyenne, ya minene, to ya minene mingi ndenge nini omoni malamu.

Ba points de rupture nionso

Mpo na ba grille oyo ezali ndenge moko kobanda na ba dispositif ya moke tii na oyo ya monene, salelá ba classes .colmpe . .col-*Lakisa kelasi oyo ezali na banimero ntango ozali na mposa ya likonzi oyo ezali na bonene mpenza; soki te, yoká nsɔni te ya kokangama na .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>

Empilé na horizontal

Na kosalelaka ensemble moko ya ba .col-sm-*classes, okoki kosala système ya grille ya base oyo ebandi na ebele mpe ekomi horizontal na point de rupture ya moke ( 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>

Bosangisa mpe bosangisi

Olingi te ba colonnes na yo ezala kaka ebele na ba niveaux ya grille mosusu? Salelá kosangisa bakelasi ndenge na ndenge mpo na nivo mokomoko soki esengeli. Tala ndakisa oyo ezali awa na nse mpo na koyeba malamu ndenge oyo nyonso esalaka.

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

Molongo ya makonzí

Salelá .row-cols-*bakelasi oyo ezali koyanola mpo na kotya nokinoki motángo ya makonzí oyo ezali komonisa malamu makambo oyo ezali na kati mpe ndenge oyo ozali kosala. Alors que ba .col-*classes normales esalemaka na ba colonnes moko moko (par exemple, .col-md-4), ba classes ya ba colonnes ya molongo etiamaki na parent .rowlokola par défaut pona ba colonnes oyo ezali na kati. Na .row-cols-autoyo okoki kopesa ba colonnes largeur naturelle na bango.

Salelá bakelasi oyo ya makonzí ya molɔngɔ́ mpo na kosala nokinoki ba layouts ya grille ya moboko to mpo na kotambwisa mabongisi ya karte na yo mpe koboya ntango esengeli na nivo ya makonzí.

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

Okoki mpe kosalela mixin ya Sass oyo ezali elongo na yango, 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);
  }
}

Kosala zumbu

Mpo na kosala nest ya makambo na yo na grille ya liboso, bakisa ya sika .rowmpe ensemble ya .col-sm-*ba colonnes na kati ya .col-sm-*colonne oyo ezali. Milɔngɔ́ oyo ekangami esengeli kozala na ensemble ya makonzí oyo ebakisami kino na 12 to na nse (esengeli te osalela makonzí nyonso 12 oyo ezali).

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

Ntango ozali kosalela ba fichiers Sass ya source ya Bootstrap, ozali na option ya kosalela ba variables ya Sass mpe ba mixins mpo na kosala ba layouts ya page personnalisé, sémantique, mpe responsive. Ba classes na biso ya grille prédéfinies esalelaka ba variables na ba mixins oyo moko pona kopesa suite mobimba ya ba classes prêtes à utiliser pona ba layouts oyo ezo répondre rapide.

Ba variables oyo ezali

Ba variables mpe ba cartes elakisaka motango ya ba colonnes, largeur ya gouttière, mpe point ya requête ya media oyo esengeli kobanda ba colonnes flottante. Tosalelaka oyo mpo na kobimisa ba classes ya grille oyo esili kolimbolama liboso oyo ekomami likolo, mpe lisusu mpo na ba mixins personnalisés oyo etangami awa na se.

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

Ba mixins

Ba mixins esalelamaka elongo na ba variables ya grille pona kobimisa CSS sémantique pona ba colonne ya grille moko moko.

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

Ndakisa ya bosaleli

Okoki ko modifier ba variables na ba valeurs personnalisées na yo moko, to kosalela kaka ba mixins na ba valeurs na bango ya défaut. Tala ndakisa ya kosalela ba paramètres par défaut mpo na kosala layout ya ba colonnes mibale na espace entre.

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

Kobongisa grille na ndenge ya moto ye moko

Na kosalelaka ba variables na biso ya grille Sass oyo etongami na kati mpe ba cartes, ezali possible ya ko personnaliser entièrement ba classes ya grille prédéfinies. Bobongola motango ya ba niveaux, ba dimensions ya requête ya media, mpe ba largeurs ya conteneur —na sima recompiler.

Makonzí mpe ba gouttières

Motango ya ba colonne ya grille ekoki kobongisama na nzela ya ba variables ya Sass. $grid-columnsesalelamaka mpo na kobimisa bonene (na %) ya likonzi mokomoko ntango $grid-gutter-widthezali kotya bonene mpo na ba gouttières ya makonzí.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Ba niveaux ya grille

Koleka ba colonnes yango moko, okoki pe ko personnaliser nombre ya ba niveaux ya grille. Soki olingaki kaka ba niveaux minei ya grille, olingaki kosala mise à jour ya $grid-breakpointsmpe $container-max-widthsna eloko lokola oyo:

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

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

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).