Grid system hmanga siam a ni

Entirna

Bootstrap-a grid system hian container, row leh column hrang hrang hmangin content layout leh align a siam a. Flexbox hmanga siam a ni a, fully responsive a ni. A hnuaia tarlan te hi grid system inzawmkhawm dan tur entirnan leh thuk taka sawifiahna a ni.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

A chunga entirnan hian kan predefined grid class hmangin device leh viewport zawng zawngah equal-width column pathum a siam a. Chu column te chu page chhungah a laiah a awm a parent nen .container.

A hnathawh dan

Breaking it down, hetiang hian grid system a inzawm khawm dan chu hetiang hi a ni:

• Kan grid hian responsive breakpoint paruk a support a . Breakpoints hi min-widthmedia zawhna atanga siam a ni a, chu breakpoint leh a chunga awm zawng zawng a nghawng tihna a ni (eg, .col-sm-4applies to sm, md, lg, xl, and xxl). Hei hian breakpoint tin hmangin container leh column sizing leh behavior i control thei tihna a ni.

• Containers center leh horizontal-in i content te chu pad rawh. .containerResponsive pixel width atan hmang la, .container-fluidviewport leh width: 100%device zawng zawngah hmang la, a nih loh .container-mdleh fluid leh pixel width inzawmkhawm atan responsive container (eg, ) hmang ang che.

• Rows hi column hrang hranga wrapper a ni. Column tin hian paddingan inkar space control nan horizontal (gutter an tih) an nei vek a. Chu paddingchu i column-a thu awmte chu veilam sir hnuai lama hmuh theiha a inmil theih nan negative margin hmanga row-ah counteract a ni. Rows hian modifier class te pawh a support bawk a, chu chuan column sizing chu uniform taka apply theih a ni a , gutter class te chu i content spacing thlak danglam turin a support bawk.

• Column te hi a flexible em em a ni. Row khatah template column 12 a awm a, chu chuan column engzat pawh huam thei element combination hrang hrang siam theih a ni. Column class-ah hian template column span tur zat a tarlang a (eg, col-4span pali). widths chu percentage-a set a nih avangin relative sizing inang i nei fo thin.

• Gutters pawh a responsive a, a duh angin a siam thei bawk. Gutter class hi breakpoint zawng zawngah a awm a, kan margin leh padding spacing nen a size inang vek a ni . Horizontal gutters chu .gx-*class neiin thlak la, vertical gutters chu , hmangin thlak rawh .gy-*, a nih loh leh gutters zawng zawng chu class neiin thlak rawh .g-*. .g-0gutters lakchhuahna tur pawh a awm bawk.

• Sass variable, map leh mixins te hian grid chu a tichak a ni. Bootstrap-a predefined grid class te hman i duh loh chuan kan grid source Sass hmangin semantic markup tam zawk nen i duh ang i siam thei ang. I tan flexibility nasa zawk neih theih nan heng Sass variable te hi consume turin CSS custom property thenkhat kan dah tel bawk.

Flexbox chhehvela limitation leh bugs awmte hre reng ang che , HTML element thenkhat flex container atana hman theih loh ang chi te hi hre reng ang che .

Grid duhthlan tur a awm

Bootstrap-a grid system hian default breakpoint paruk zawng zawngah a insiamrem thei a, breakpoint eng pawh i siam danglam thei bawk. Default grid tier paruk chu hetiang hi a ni:

• Extra te tak te (xs) .
• A te (sm) .
• Medium (md) a ni.
• A lian (lg) .
• A lian zawk (xl) .
• Extra extra lian (xxl) a awm bawk.

A chunga kan sawi tawh ang khan heng breakpoint tinte hian anmahni container, class prefix danglam bik, leh modifier an nei vek a. Heng breakpoint hrang hranga grid inthlak dan chu hetiang hi a ni:

Auto-layout theih a ni

.col-sm-6. _

A zau zawng inang vek

Entirnan, hetah hian grid layout pahnih kan rawn tarlang e, chu chu device leh viewport tinah hman theih a ni a, from xsto xxl. Breakpoint i mamawh apiang atan unit-less class engzat pawh dah la, column tin chu a zau zawng inang vek a ni ang.

<div class="container text-center">
  <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>

Column pakhat zau zawng setting

Flexbox grid column-te tana auto-layout hian column pakhat zau zawng i set thei a, a chhehvela unaupa column-te chu automatic-in a resize theih tihna a ni bawk. Grid class ruat lawk (a hnuaia tarlan ang hian), grid mixin, emaw inline width emaw i hmang thei bawk. Column dangte chu center column zau zawng engzat pawhin an size an thlak ang tih hre reng ang che.

<div class="container text-center">
  <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>

A zau zawng danglam thei content

Class hmangin col-{breakpoint}-autocolumn te chu an content awm dan natural width atanga size tur a ni.

<div class="container text-center">
  <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>

Responsive class hrang hrang neih a ni

Bootstrap-a grid-ah hian complex responsive layout siamna tur predefined class tier paruk a awm a. I column te size chu extra small, small, medium, large, or extra large device ah i duh angin customize rawh.

Breakpoint zawng zawng

Device te ber atanga a lian ber thlenga grid inang tak tak tan chuan .coland .col-*class te hi hmang ang che. Column lian bik i mamawh hunah number nei class tarlang rawh; chutiang a nih loh chuan, zalen takin .col.

<div class="container text-center">
  <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>

Stack a ni a, horizontal a ni

Class set khat hmangin .col-sm-*basic grid system i siam thei a, chu chu stacked atanga tan a ni a, breakpoint te tak te ( sm) ah chuan horizontal a lo ni ta a ni.

<div class="container text-center">
  <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>

Mix leh match

I column te chu grid tier thenkhatah stack mai mai turin i duh lo em ni? A tul angin tier tin tan class hrang hrang inzawmkhawm hmang ang che. A hnathawh zawng zawng hriatna tha zawk hriat duh chuan a hnuaia entîrna hi en rawh.

<div class="container text-center">
  <!-- 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>

Row column hrang hrang te

Responsive .row-cols-*class te hmangin i content leh layout render tha ber column zat chu rang takin set rawh. Normal .col-*class chu column hrang hrangah hman a nih laiin (eg, .col-md-4), row column class te chu parent-ah .rowshortcut angin set a ni. With .row-cols-autoyou chuan column te chu an natural width pe thei ang che.

Heng row columns class te hi rang taka basic grid layout siam nan emaw, i card layout control nan emaw hmang ang che.

<div class="container text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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>

A kaihhnawih Sass mixin pawh i hmang thei bawk ang, 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 tih a ni

Default grid hmanga i content nest tur chuan column awmsa chhungah column thar .rowleh set dah la . Nested row-ah hian column set 12 emaw a aia tlem emaw add tur a awm tur a ni (column awm 12 awm zawng zawng hman vek a ngai lo)..col-sm-*.col-sm-*

<div class="container text-center">
  <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 a ni

Bootstrap-a source Sass files i hman hian Sass variable leh mixins hmangin custom, semantic, leh responsive page layout siam theihna option i nei a ni. Kan predefined grid class te hian heng variable leh mixin ang chiah te hi hmangin fast responsive layouts atan ready-to-use class suite pum pui an pe thin.

Variables te pawh a awm

Variables leh maps hian column awm zat, gutter zau zawng, leh floating column tanna tur media query point a tichiang a ni. Hengte hi a chunga kan document tawh predefined grid class te siam nan kan hmang a, chubakah a hnuaia custom mixins tarlan te tan pawh kan hmang bawk.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$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 te a awm

Mixins te hi grid variable te nen inzawmin grid column hrang hrang tan semantic CSS siam nan hman a ni.

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

Entirna hman dan

Variable te chu i custom value ah i siam danglam thei a, a nih loh leh mixins te chu an default value nen i hmang mai thei bawk. Hetah hian default settings hmanga two-column layout siam dan tur entirnan kan rawn tarlang e, a inkarah gap awmin.

.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 chu a customize a

Kan built-in grid Sass variable leh maps hmang hian grid class ruahman lawk te chu a pumin kan customize theih a ni. Tier awm zat, media query dimension leh container zau zawng te thlak rawh—chutah recompile leh rawh.

Column leh gutter te a awm bawk

Grid column awm zat hi Sass variable hmangin siam danglam theih a ni. $grid-columnschu column pakhat zel zau zawng (za zela 10-a chhut) siam nan hman a ni a $grid-gutter-width, column gutter-te tan zau zawng a set thung. $grid-row-columnstih chu column tam ber set nan hman a ni a .row-cols-*, he limit aia tam number eng pawh hi ngaihthah a ni.

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

Grid tiers te a awm

Column ngei pawh kal pelin grid tier awm zat pawh i duh angin i siam thei bawk. Grid tier pali chauh i duh chuan $grid-breakpointsand $container-max-widthschu hetiang hian i update ang:

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

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

Sass variable emaw maps emaw i tihdanglam dawnin i tihdanglam chu i save a ngai ang a, i recompile a ngai ang. Chutianga tih chuan column zau zawng, offset leh ordering atan grid class set thar tak tak a output ang. Responsive visibility utilities te pawh custom breakpoints te hman theih turin update a ni bawk ang. Grid value te chu px(not rem, em, or %) ah set ngei ngei tur a ni.