Sistèm griyaj

Egzanp

Sistèm kadriyaj Bootstrap la sèvi ak yon seri de resipyan, ranje, ak kolòn pou layout ak aliman kontni. Li bati ak flexbox epi li konplètman reponn. Anba a se yon egzanp ak yon eksplikasyon an pwofondè sou fason sistèm kadriyaj la vini ansanm.

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

Egzanp ki pi wo a kreye twa kolòn egal-lajè atravè tout aparèy ak fenèt lè l sèvi avèk klas griy predefini nou yo. Kolòn sa yo santre nan paj paran an .container.

Ki jan li fonksyone

Kraze li desann, men ki jan sistèm nan kadriyaj vini ansanm:

• Griy nou an sipòte sis pwen rupture ki reponn . Breakpoints yo baze sou min-widthdemann medya yo, sa vle di yo afekte pwen breakpoint sa a ak tout moun ki anwo yo (egzanp, .col-sm-4aplike a sm, md, lg, xl, ak xxl). Sa vle di ou ka kontwole gwosè veso ak kolòn ak konpòtman pa chak pwen.

• Kontenè santre ak orizontal pad kontni ou. Itilize .containerpou yon lajè piksèl ki reponn, .container-fluidpou width: 100%atravè tout fenèt ak aparèy, oswa yon veso ki reponn (egzanp, .container-md) pou yon konbinezon de lajè likid ak piksèl.

• Ranje yo se anbalaj pou kolòn. Chak kolòn gen orizontal padding(yo rele yon goutyè) pou kontwole espas ki genyen ant yo. Sa a paddingse Lè sa a, kontrekare sou ranje yo ak maj negatif asire kontni an nan kolòn ou yo vizyèlman aliyen desann bò gòch la. Ranje yo sipòte tou klas modifikatè pou aplike menm jan gwosè kolòn ak klas goutyè pou chanje espas sa a nan kontni ou.

• Kolòn yo ekstrèmman fleksib. Gen 12 kolòn modèl ki disponib pou chak ranje, sa ki pèmèt ou kreye diferan konbinezon de eleman ki span nenpòt kantite kolòn. Klas kolòn yo endike kantite kolòn modèl pou span (pa egzanp, col-4span kat). widthyo mete nan pousantaj pou ou toujou gen menm gwosè relatif la.

• Goutyè yo tou reponn ak personnalisable. Klas goutyè yo disponib nan tout pwen rupture yo, ak tout menm gwosè ak espas maj ak padding nou yo . Chanje goutyè orizontal ak .gx-*klas, goutyè vètikal ak .gy-*, oswa tout goutyè ki gen .g-*klas. .g-0disponib tou pou retire goutyè yo.

• Sass varyab, kat, ak mixins pouvwa griy la. Si ou pa vle sèvi ak klas griy predefini yo nan Bootstrap, ou ka sèvi ak sous griy nou an Sass pou kreye pwòp ou a ak plis maketing semantik. Nou gen ladan tou kèk pwopriyete koutim CSS pou konsome varyab Sass sa yo pou menm pi gwo fleksibilite pou ou.

Ou dwe konsyan de limit ak ensèk ki genyen nan flexbox , tankou enkapasite pou itilize kèk eleman HTML kòm resipyan flex .

Opsyon griyaj

Sistèm kadriyaj Bootstrap la ka adapte atravè tout sis breakpoints default, ak nenpòt breakpoints ou personnaliser. Sis nivo kadriyaj default yo jan sa a:

• Ti siplemantè (xs)
• ti (sm)
• Mwayen (md)
• Gwo (lg)
• Siplemantè (xl)
• Siplemantè gwo (xxl)

Jan nou note pi wo a, chak nan pwen rupture sa yo gen pwòp veso pa yo, prefiks klas inik, ak modifikasyon yo. Men ki jan kadriyaj la chanje atravè pwen rupture sa yo:

Kolòn oto-layout

Sèvi ak klas kolòn espesifik pwen breakpoint pou gwosè kolòn fasil san yon klas nimewote klè tankou .col-sm-6.

Egal-lajè

Pou egzanp, isit la gen de layout kadriyaj ki aplike nan chak aparèy ak viewport, soti xsnan xxl. Ajoute nenpòt kantite inite-mwens klas pou chak breakpoint ou bezwen ak chak kolòn yo pral menm lajè.

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

Mete yon sèl lajè kolòn

Oto-layout pou kolòn kadriyaj flexbox vle di tou ou ka mete lajè yon kolòn epi gen kolòn frè ak sè yo otomatikman redimansyone alantou li. Ou ka itilize klas griy predefini (jan yo montre anba a), melanj griy, oswa lajè enline. Remake byen ke lòt kolòn yo pral redimansyone kèlkeswa lajè kolòn santral la.

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

Kontni lajè varyab

Sèvi ak col-{breakpoint}-autoklas pou gwosè kolòn yo baze sou lajè natirèl kontni yo.

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

Klas ki reponn

Kadriyaj Bootstrap a gen ladan sis nivo klas predefini pou bati konsepsyon konplèks reponn. Pèsonalize gwosè kolòn ou yo sou aparèy siplemantè piti, ti, mwayen, gwo oswa siplemantè, sepandan ou wè anfòm.

Tout breakpoints

Pou kadriyaj ki se menm bagay la soti nan pi piti a nan aparèy nan pi gwo a, sèvi .colak .col-*klas yo ak. Espesifye yon klas nimewote lè ou bezwen yon kolòn ki gen gwosè patikilyèman; otreman, santi yo lib pou rete sou .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>

Anpile sou orizontal

Sèvi ak yon sèl seri .col-sm-*klas, ou ka kreye yon sistèm kadriyaj debaz ki kòmanse anpile epi ki vin orizontal nan ti pwen an ( 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>

Melanje ak matche ak

Ou pa vle kolòn ou yo tou senpleman pile nan kèk nivo kadriyaj? Sèvi ak yon konbinezon de diferan klas pou chak nivo jan sa nesesè. Gade egzanp ki anba a pou yon pi bon lide sou kijan li fonksyone.

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

Kolòn ranje

Sèvi ak .row-cols-*klas yo reponn byen vit mete kantite kolòn ki pi byen rann kontni ou ak layout. Tandiske klas nòmal .col-*yo aplike nan kolòn endividyèl yo (egzanp, .col-md-4), klas kolòn ranje yo mete sou paran an .rowkòm yon default pou kolòn ki genyen yo. Avèk .row-cols-autoou ka bay kolòn yo lajè natirèl yo.

Sèvi ak klas kolòn ranje sa yo pou kreye byen vit fòm griy debaz oswa pou kontwole fòm kat ou a epi pase sou plas lè sa nesesè nan nivo kolòn.

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

Ou ka itilize tou Sass mixin ki akonpaye la 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);
  }
}

Nidifikasyon

Pou fè nich kontni ou a ak kadriyaj default la, ajoute yon nouvo .rowak seri .col-sm-*kolòn nan yon .col-sm-*kolòn ki deja egziste. Ranje anbrike yo ta dwe gen ladan yon seri kolòn ki ajoute jiska 12 oswa mwens (li pa oblije itilize tout 12 kolòn ki disponib).

<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

Lè w ap itilize dosye Sass sous Bootstrap yo, ou gen opsyon pou w sèvi ak varyab Sass ak mixin pou kreye fòm paj koutim, semantik ak reponn. Klas kadriyaj predefini nou yo itilize menm varyab ak mixin sa yo pou bay tout yon seri klas ki pare pou itilize pou kouman yo reponn rapid.

Varyab

Varyab ak kat detèmine kantite kolòn yo, lajè goutyè yo, ak pwen rechèch medya yo kote yo kòmanse kolòn k ap flote. Nou itilize sa yo pou jenere klas griy predefini dokimante pi wo a, osi byen ke pou mixin koutim ki nan lis anba a.

$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

Mixins yo itilize ansanm ak varyab kadriyaj yo pou jenere CSS semantik pou kolòn kadriyaj endividyèl yo.

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

Egzanp itilizasyon

Ou ka modifye varyab yo nan pwòp valè koutim ou, oswa jis itilize mixin yo ak valè default yo. Men yon egzanp lè w sèvi ak anviwònman default yo pou kreye yon layout de kolòn ak yon espas ant.

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

Pèrsonalizasyon kadriyaj la

Sèvi ak varyab ak kat Sass kadriyaj entegre nou an, li posib pou konplètman pèsonalize klas griy predefini yo. Chanje kantite nivo, dimansyon rechèch medya yo, ak lajè veso a—apresa rekonpile.

Kolòn ak goutyè

Kantite kolòn kadriyaj yo ka modifye atravè varyab Sass. $grid-columnsyo itilize pou jenere lajè yo (an pousan) nan chak kolòn endividyèl pandan y ap $grid-gutter-widthmete lajè a pou goutyè yo kolòn.

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

Nivo kadriyaj

Deplase pi lwen pase kolòn yo tèt yo, ou ka tou Customize kantite nivo kadriyaj la. Si ou te vle jis kat nivo kadriyaj, ou ta mete ajou $grid-breakpointsak $container-max-widthsnan yon bagay tankou sa a:

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

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

Lè w ap fè nenpòt chanjman nan varyab oswa kat Sass yo, w ap bezwen sove chanjman ou yo epi rekonpile. Lè w fè sa, sa pral pwodwi yon nouvo seri klas griy predefini pou lajè kolòn, konpanse, ak lòd. Yo pral mete ajou sèvis piblik vizibilite yo tou pou yo sèvi ak pwen koutim yo. Asire w ke ou mete valè kadriyaj nan px(pa rem, em, oswa %).