Grid nhyehyɛe

Nhwɛsoɔ

Bootstrap grid nhyehyɛe no de containers, rows, ne columns ahorow a ɛtoatoa so di dwuma de hyehyɛ nneɛma no na ɛne no hyia. Wɔde flexbox na esii na ɛyɛ nea ɛyɛ adwuma yiye. Ase hɔ no yɛ nhwɛso ne nkyerɛkyerɛmu a emu dɔ a ɛfa sɛnea grid nhyehyɛe no bom ho.

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

Nhwɛsoɔ a ɛwɔ atifi hɔ no yɛ nkorabata mmiɛnsa a ne tɛtrɛtɛ yɛ pɛ wɔ mfiri ne hwɛbea nyinaa so denam yɛn grid adesua a yɛadi kan akyerɛkyerɛ mu no so. Saa nkyerɛwde ahorow no wɔ kratafa no mfinimfini a ɔwofo no ka ho .container.

Sɛnea ɛyɛ adwuma

Sɛ yɛbubu no a, sɛdeɛ grid nhyehyɛeɛ no bom nie:

• Yɛn grid no boa breakpoints asia a ɛyɛ mmuae . Breakpoints gyina min-widthmedia nsɛmmisa so, a ɛkyerɛ sɛ ɛka saa breakpoint no ne wɔn a wɔwɔ n’atifi nyinaa (sɛ nhwɛso no, .col-sm-4ɛfa sm, md, lg, xl, ne xxl). Wei kyerɛ sɛ wobɛtumi adi container ne column kɛseɛ ne suban so denam breakpoint biara so.

• Containers mfinimfini na horizontally pad wo nsɛm. Fa di dwuma .containerma piksel ntrɛwmu a ɛyɛ mmuae, .container-fluidma width: 100%wɔ hwɛbea ne mfiri nyinaa so, anaasɛ ade a ɛyɛ mmuae (sɛ nhwɛso no, .container-md) ma nsu ne piksel ntrɛwmu a wɔaka abom.

• Rows yɛ ntama a wɔde kyekyere adum ho. Adum biara wɔ horizontal padding(a wɔfrɛ no gutter) a wɔde hwɛ baabi a ɛda wɔn ntam no so. Afei wɔde nsensanee a enye siw eyi paddingano wɔ nkyerɛwde ahorow no so de hwɛ hu sɛ nneɛma a ɛwɔ wo nkyerɛwde ahorow no mu no hyia wɔ benkum so wɔ aniwa so. Rows nso boa modifier classes ma wɔde column sizing ne gutter classes di dwuma pɛpɛɛpɛ de sesa wo content no ntam kwan.

• Adum ahorow no yɛ nea wotumi sesa mu ma ɛyɛ nwonwa. Template columns 12 na ɛwɔ hɔ wɔ row biara mu, ɛma wotumi yɛ element ahorow a wɔaka abom ahorow a ɛtrɛw column dodow biara mu. Kɔlam adesua ahorow kyerɛ template kɔla dodow a ɛsɛ sɛ ɛtrɛw (sɛ nhwɛso no, col-4span anan). widths no wɔde ato ɔha mu nkyekyɛmu mu enti bere nyinaa wowɔ relative sizing koro no ara.

• Gutters nso yɛ nea ɛyɛ adwuma na wotumi sesa. Gutter adesua ahorow wɔ hɔ wɔ breakpoints nyinaa mu, a ne nyinaa kɛse te sɛ yɛn margin ne padding spacing . Sesa nsu a ɛkɔ soro a ɛwɔ .gx-*adesua ahorow, nsu a ɛkɔ fam a ɛwɔ .gy-*, anaasɛ nsu a ɛkɔ fam nyinaa a ɛwɔ .g-*adesua ahorow. .g-0no nso wɔ hɔ a wɔde beyi nsu a ɛkɔ nsu mu no afi hɔ.

• Sass variables, maps, ne mixins ma grid no nya ahoɔden. Sɛ wompɛ sɛ wode grid adesua ahorow a wɔahyɛ ato hɔ no bedi dwuma wɔ Bootstrap mu a, wubetumi de yɛn grid no fibea Sass ayɛ w’ankasa de a ɛwɔ nkyerɛase agyiraehyɛde pii. Yɛsan nso de CSS amanneɛbɔ agyapade bi ka ho de di saa Sass nsakrae ahorow yi ma ɛyɛ mmerɛw kɛse mpo ma wo.

Hu anohyeto ne mfomso a ɛwɔ flexbox ho , te sɛ HTML nneɛma bi a wuntumi mfa nni dwuma sɛ flex containers .

Grid a wobetumi apaw

Bootstrap grid nhyehyɛe no betumi ayɛ nsakrae wɔ default breakpoints asia no nyinaa mu, ne breakpoints biara a wobɛsesa no. Default grid tiers asia no te sɛ nea edidi so yi:

• Nneɛma nketenkete a ɛboro so (xs) .
• Ketekete (sm) .
• Mfinimfini (md) .
• Nneɛma akɛse (lg) .
• Nneɛma akɛse a ɛboro so (xl) .
• Extra kɛse a ɛboro so (xxl) .

Sɛnea yɛaka wɔ atifi hɔ no, saa breakpoints yi mu biara wɔ n’ankasa container, class prefix soronko, ne modifiers. Sɛnea grid no sesa wɔ saa breakpoints yi so ni:

Auto-layout nkyerɛwde ahorow

Fa breakpoint-specific column classes di dwuma ma column sizing a ɛnyɛ den a enni class a wɔde nɔma a ɛda adi pefee te sɛ .col-sm-6.

Ntrɛwmu a ɛyɛ pɛ

Sɛ nhwɛso no, grid nhyehyɛe abien a ɛfa mfiri ne viewport biara ho ni, efi xskosi xxl. Fa unit-less class dodow biara ka ho ma breakpoint biara a wuhia na column biara bɛyɛ ne tɛtrɛtɛ koro.

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

Setting column biako trɛw

Auto-layout for flexbox grid columns nso kyerɛ sɛ wobɛtumi ahyɛ column baako trɛw na woama anuanom columns no ayɛ ne kɛseɛ asesa ne kɛseɛ atwa ho ahyia. Wubetumi de grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu (sɛnea wɔakyerɛ wɔ ase hɔ no), grid mixins, anaa inline ntrɛwmu adi dwuma. Hyɛ no nsow sɛ nkyerɛwde afoforo no bɛsesa ne kɛse ɛmfa ho sɛnea mfinimfini adum no trɛw te.

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

Nsɛm a ɛwɔ ntrɛwmu a ɛsakrasakra

Fa col-{breakpoint}-autoadesua ahorow di dwuma de ma nkyerɛwde ahorow no kɛse gyina wɔn mu nsɛm no abɔde mu trɛw so.

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

Adesua ahorow a wɔde mmuae ma

Bootstrap no grid no ka tiers asia a wɔadi kan akyerɛkyerɛ adesuakuw ahorow a wɔde besisi mmuae nhyehyɛe ahorow a ɛyɛ den. Yɛ wo columns no kɛse wɔ mfiri nketewa, nketewa, mfinimfini, akɛse, anaa akɛse a ɛboro so so sɛnea wuhu sɛ ɛfata.

Nneɛma a wɔde bubu mu nyinaa

Sɛ wopɛ grids a ɛyɛ pɛ fi mfiri nketewa so kosi kɛse so a, fa .colne .col-*adesua ahorow no di dwuma. Kyerɛ adesuakuw a wɔde nɔma ahyɛ mu bere a wuhia kɔla a ne kɛse titiriw; anyɛ saa a, ntwentwɛn wo nan ase sɛ wobɛbata .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>

Wɔaboaboa ano akɔ soro

Sɛ wode .col-sm-*adesua ahorow biako di dwuma a, wubetumi ayɛ grid nhyehyɛe titiriw a efi ase a wɔaboaboa ano na ɛbɛyɛ horizontal wɔ breakpoint ketewa ( 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>

Fa fra na fa fra mu

Wompɛ sɛ wo columns no bɛ stack kɛkɛ wɔ grid tiers binom mu? Fa adesua ahorow a wɔaka abom di dwuma ma tier biara sɛnea ɛho hia. Hwɛ nhwɛso a ɛwɔ ase ha no na woanya sɛnea ne nyinaa yɛ adwuma no ho adwene pa.

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

Fa nkyerɛwde ahorow no toatoa so

Fa .row-cols-*adesua ahorow a ɛyɛ mmuae no di dwuma fa hyehyɛ nkyerɛwde dodow a ɛkyerɛ wo nsɛm ne wo nhyehyɛe no yiye no ntɛm. Bere a .col-*adesua ahorow a ɛyɛ daa no fa nkyerɛwde ahorow no ankorankoro ho (sɛ nhwɛso no, .col-md-4), wɔde nkyerɛwde ahorow no adesua ahorow no si ɔwofo no so .rowsɛ ɔkwan tiawa. Wo ne .row-cols-autowo betumi ama adum no wɔn abɔde mu trɛw.

Fa saa row columns classes yi yɛ ntɛm yɛ basic grid layouts anaasɛ hwɛ wo card layouts so.

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

Wubetumi nso de Sass mixin a ɛka ho no adi dwuma, 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);
  }
}

Nesting a wɔde yɛ buw

Sɛ wopɛ sɛ wode default grid no hyɛ wo nsɛm no mu a, fa kɔla foforo .rowne .col-sm-*nkyerɛwde ahorow ka ho wɔ .col-sm-*kɔla bi a ɛwɔ hɔ dedaw no mu. Ɛsɛ sɛ nested rows no de columns ahorow a ɛka bom yɛ 12 anaa nea ennu saa ka ho (ɛnhia sɛ wode columns 12 a ɛwɔ hɔ no nyinaa bedi dwuma).

<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

Sɛ wode Bootstrap no source Sass fael ahorow redi dwuma a, wowɔ hokwan sɛ wode Sass variables ne mixins bedi dwuma de ayɛ custom, semantic, ne responsive page layouts. Yɛn grid adesua ahorow a wɔakyerɛkyerɛ mu dedaw no de saa nsakrae ne mixins koro yi ara di dwuma de ma adesua ahorow a wɔasiesie sɛ wɔde bedi dwuma no nyinaa ma nhyehyɛe ahorow a ɛyɛ mmuae ntɛmntɛm.

Nneɛma a Ɛsakra

Nsakraeɛ ne asase mfonini kyerɛ nkorabata dodoɔ, gutter trɛw, ne media asɛmmisa beaeɛ a wɔbɛhyɛ nkorabata a ɛsensɛn nsuo ase. Yɛde eyinom di dwuma de yɛ grid adesua ahorow a wɔahyɛ ato hɔ a wɔakyerɛw ho asɛm wɔ atifi hɔ no, ne afei nso mixins a wɔahyɛ da ayɛ a wɔakyerɛw wɔ ase ha no.

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

Nneɛma a wɔde frafra

Wɔde mixins di dwuma de ka grid variables no ho de yɛ semantic CSS ma grid columns ankorankoro.

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

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Nhwɛso a wɔde di dwuma

Wubetumi asesa variables no akɔ w’ankasa custom values ​​no mu, anaasɛ wode mixins no adi dwuma kɛkɛ ne wɔn default values ​​no. Nhwɛsoɔ a ɛfa default nhyehyeɛ no a wode bɛyɛ nhyehyɛɛ a ɛwɔ kɔla mmienu a ɛwɔ nsonsonoeɛ wɔ ntam no nie.

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

Grid no a wɔreyɛ no sɛnea wopɛ

Sɛ yɛde yɛn grid Sass variables ne maps a wɔasisi no di dwuma a, ɛyɛ yie sɛ wobɛsesa grid classes a wɔadi kan akyerɛkyerɛ mu no koraa. Sesa tiers dodow, media abisade nsusuwii, ne container no trɛw—afei san boaboa ano.

Adum ne nsu a ɛkɔ nsu mu

Wobetumi asesa grid columns dodow no denam Sass variables so. $grid-columnswɔde di dwuma de yɛ ntrɛwmu (wɔ ɔha biara mu) a ɛwɔ adum ankorankoro biara mu bere a $grid-gutter-widthɛde ntrɛwmu ma adum no nsu a ɛkɔ nsu mu no.

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

Grid a ɛwɔ sorosoro

Sɛ wokɔ akyiri sen columns no ankasa a, wubetumi nso ayɛ grid tiers dodow no ho nhyehyɛe. Sɛ wopɛ grid tiers anan pɛ a, anka wobɛma $grid-breakpointsne no ayɛ foforo $container-max-widthsakɔ biribi te sɛ eyi mu:

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

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

Sɛ woreyɛ nsakraeɛ biara wɔ Sass variables anaa maps no mu a, ɛho bɛhia sɛ wode wo nsakraeɛ no sie na wosan boaboa ano. Saa a wobɛyɛ no bɛma woanya grid adesua ahorow a wɔadi kan akyerɛkyerɛ mu no foforo koraa ama column widths, offsets, ne ordering. Wɔbɛsan ayɛ mmuaeɛ visibility utilities no foforɔ de adi dwuma wɔ custom breakpoints no mu. Hwɛ sɛ wode grid values ​​bɛhyɛ px(ɛnyɛ rem, em, anaa %).