Sistema sa grid

Pananglitan

Ang sistema sa grid sa Bootstrap naggamit sa usa ka serye sa mga sudlanan, mga laray, ug mga kolum sa paghan-ay ug pag-align sa sulod. Gitukod kini gamit ang flexbox ug hingpit nga mosanong. Sa ubos usa ka pananglitan ug usa ka lawom nga pagpatin-aw kung giunsa ang sistema sa grid nagkahiusa.

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

Ang pananglitan sa ibabaw nagmugna og tulo ka managsama nga gilapdon nga mga kolum sa tanan nga mga aparato ug mga viewport gamit ang among gitakda nang daan nga mga klase sa grid. Kadtong mga kolum gisentro sa panid sa ginikanan .container.

Giunsa kini paglihok

Sa pagbungkag niini, ania kung giunsa ang sistema sa grid nagkahiusa:

• Ang among grid nagsuporta ug unom ka responsive breakpoints . Ang mga breakpoint gibase sa min-widthmga pangutana sa media, nagpasabot nga kini makaapekto sa breakpoint ug sa tanan nga anaa sa ibabaw niini (pananglitan, .col-sm-4magamit sa sm, md, lg, xl, ug xxl). Kini nagpasabot nga makontrol nimo ang sudlanan ug kolum nga gidak-on ug pamatasan sa matag breakpoint.

• Gisentro sa mga sudlanan ug gipahigda ang imong sulud. Gamita .containerpara sa responsive pixel width, .container-fluidpara width: 100%sa tanang viewports ug device, o responsive container (eg, .container-md) para sa kombinasyon sa fluid ug pixel widths.

• Ang mga laray maoy mga wrapper alang sa mga kolum. Ang matag kolum adunay pinahigda padding(gitawag nga gutter) aron makontrol ang luna tali kanila. Kini paddingdayon gikontra sa mga laray nga adunay negatibo nga mga margin aron masiguro nga ang sulud sa imong mga kolum makita nga na-align sa wala nga bahin. Gisuportahan usab sa mga laray ang mga klase sa modifier aron parehas nga magamit ang mga klase sa gidak-on sa kolum ug gutter aron usbon ang gilay-on sa imong sulud.

• Ang mga kolum hilabihan ka flexible. Adunay 12 ka template column nga anaa matag row, nga nagtugot kanimo sa paghimo og lain-laing mga kombinasyon sa mga elemento nga mosangkad sa bisan unsang gidaghanon sa mga column. Ang mga klase sa kolum nagpaila sa gidaghanon sa mga kolum sa template nga mosangkad (pananglitan, col-4nagsangkad sa upat). widths gitakda sa mga porsyento aron ikaw kanunay adunay parehas nga paryente nga gidak-on.

• Ang mga kanal usab responsive ug napasadya. Ang mga klase sa kanal magamit sa tanan nga mga breakpoint, nga adunay parehas nga gidak-on sa among margin ug spacing sa padding . Usba ang pinahigda nga mga kanal nga adunay .gx-*mga klase, mga bertikal nga mga kanal nga adunay .gy-*, o tanan nga mga kanal nga adunay .g-*mga klase. .g-0anaa usab sa pagtangtang sa mga kanal.

• Ang mga sass variables, mapa, ug mixins nagpalihok sa grid. Kung dili nimo gusto nga gamiton ang gitakda nang daan nga mga klase sa grid sa Bootstrap, mahimo nimong gamiton ang gigikanan sa among grid nga Sass aron mahimo ang imong kaugalingon nga adunay mas daghang semantiko nga marka. Giapil usab namo ang pipila ka mga custom nga CSS nga mga kabtangan aron magamit kini nga mga variable sa Sass alang sa labi pa nga kadali alang kanimo.

Pagmatngon sa mga limitasyon ug mga bug sa palibot sa flexbox , sama sa kawalay katakus sa paggamit sa pipila ka mga elemento sa HTML isip flex container .

Mga kapilian sa grid

Ang sistema sa grid sa Bootstrap mahimong mopahiangay sa tanan nga unom ka default nga mga breakpoint, ug bisan unsang mga breakpoint nga imong i-customize. Ang unom ka default grid tiers mao ang mosunod:

• Dugang gamay (xs)
• Gamay (sm)
• Medium (md)
• Dako (lg)
• Dako kaayo (xl)
• Dugang nga sobra ka dako (xxl)

Sama sa nahisgutan sa ibabaw, ang matag usa niini nga mga breakpoint adunay kaugalingon nga sudlanan, talagsaon nga prefix sa klase, ug mga modifier. Ania kung giunsa ang pagbag-o sa grid sa kini nga mga breakpoint:

Auto-layout nga mga kolum

Gamita ang mga klase sa kolum nga espesipiko sa breakpoint alang sa sayon ​​nga pagsukod sa kolum nga walay klaro nga numero nga klase sama sa .col-sm-6.

Parehas nga gilapdon

Pananglitan, aniay duha ka grid layout nga magamit sa matag device ug viewport, gikan xssa xxl. Idugang ang bisan unsang gidaghanon sa mga klase nga wala’y yunit alang sa matag breakpoint nga imong kinahanglan ug ang matag kolum parehas ang gilapdon.

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

Pagbutang sa usa ka kolum nga gilapdon

Ang auto-layout para sa flexbox grid columns nagpasabot usab nga mahimo nimong itakda ang gilapdon sa usa ka column ug ang mga igsoon nga column awtomatik nga mag-resize sa palibot niini. Mahimo nimong gamiton ang predefined grid classes (sama sa gipakita sa ubos), grid mixins, o inline widths. Timan-i nga ang ubang mga kolum magbag-o bisan unsa pa ang gilapdon sa tunga nga kolum.

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

Variable gilapdon sa sulod

Gamita col-{breakpoint}-autoang mga klase sa pagsukod sa mga kolum base sa natural nga gilapdon sa ilang sulod.

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

Responsive nga mga klase

Ang grid sa Bootstrap naglakip sa unom ka hut-ong sa predefined nga mga klase alang sa pagtukod og mga komplikadong responsive nga mga layout. Ipasibo ang gidak-on sa imong mga column sa sobra nga gamay, gamay, medium, dako, o sobra ka dako nga mga device bisan unsa ang imong nakita nga angay.

Tanan nga breakpoints

Para sa mga grid nga parehas gikan sa pinakagamay nga device hangtod sa kinadak-an, gamita ang .colug .col-*mga klase. Ipiho ang usa ka numero nga klase kung kinahanglan nimo ang usa ka partikular nga gidak-on nga kolum; kay kon dili, mobati nga gawasnon nga magpabilin sa .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>

Gipatong ngadto sa pinahigda

Gamit ang usa ka hugpong sa .col-sm-*mga klase, makahimo ka og usa ka batakang sistema sa grid nga nagsugod sa stacked ug mahimong pinahigda sa gamay nga breakpoint ( 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>

Mix ug match

Dili gusto nga ang imong mga kolum mag-stack lang sa pipila ka mga grid tier? Paggamit og kombinasyon sa lain-laing mga klase alang sa matag ang-ang kon gikinahanglan. Tan-awa ang panig-ingnan sa ubos alang sa usa ka mas maayo nga ideya kung giunsa kini tanan molihok.

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

Mga kolum sa linya

Gamita ang mga responsive .row-cols-*nga mga klase aron dali nga mabutang ang gidaghanon sa mga kolum nga labing maayo nga maghatag sa imong sulud ug layout. Samtang ang normal nga .col-*mga klase magamit sa indibidwal nga mga kolum (pananglitan, .col-md-4), ang mga row column nga mga klase gibutang sa ginikanan .rowingon usa ka shortcut. Uban sa .row-cols-autoimong mahimo sa paghatag sa mga haligi sa ilang natural nga gilapdon.

Gamita kini nga mga row column nga mga klase aron dali nga makahimo ug sukaranan nga mga layout sa grid o aron makontrol ang imong mga layout sa kard.

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

Mahimo usab nimo gamiton ang kauban nga Sass mixin 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);
  }
}

Nagsalag

Aron ibutang ang imong sulod sa default grid, pagdugang og bag-o .rowug set sa .col-sm-*mga column sulod sa kasamtangan nga .col-sm-*column. Ang mga nested row kinahanglang maglakip ug set sa mga column nga modugang hangtod sa 12 o mas gamay pa (dili kinahanglan nga gamiton nimo ang tanang 12 ka available nga column).

<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

Kung gigamit ang gigikanan sa Bootstrap nga mga file nga Sass, adunay ka kapilian sa paggamit sa mga variable ug mix sa Sass aron makahimo og kostumbre, semantiko, ug responsive nga mga layout sa panid. Ang among gitakda nang daan nga mga klase sa grid naggamit niining parehas nga mga variable ug mixin aron mahatagan ang usa ka tibuuk nga hugpong sa andam nga gamiton nga mga klase alang sa paspas nga pagtubag nga mga layout.

Mga variable

Ang mga variable ug mga mapa nagtino sa gidaghanon sa mga kolum, ang gilapdon sa gutter, ug ang punto sa pangutana sa media diin magsugod ang naglutaw nga mga kolum. Gigamit namo kini aron makamugna ang mga predefined grid classes nga nadokumento sa ibabaw, ingon man para sa custom mixins nga gilista sa ubos.

$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

Ang mga mixin gigamit kauban ang mga variable sa grid aron makamugna og semantic CSS alang sa indibidwal nga mga kolum sa grid.

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

Pananglitan sa paggamit

Mahimo nimong usbon ang mga variable sa imong kaugalingon nga naandan nga mga kantidad, o gamita lang ang mga mixin sa ilang mga default nga kantidad. Ania ang usa ka pananglitan sa paggamit sa default nga mga setting aron makahimo og duha ka kolum nga layout nga adunay gintang tali.

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

Pag-customize sa grid

Gamit ang among built-in nga grid nga Sass nga mga variable ug mapa, posible nga hingpit nga ipasibo ang gitakda nang daan nga mga klase sa grid. Usba ang gidaghanon sa mga hut-ong, ang mga dimensyon sa pangutana sa media, ug ang gilapdon sa sudlanan—dayon pag-compile pag-usab.

Mga kolum ug kanal

Ang gidaghanon sa mga kolum sa grid mahimong usbon pinaagi sa Sass variables. $grid-columnsgigamit sa paghimo sa mga gilapdon (sa porsyento) sa matag indibidwal nga kolum samtang $grid-gutter-widthnagtakda sa gilapdon alang sa mga gutter sa kolum.

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

Mga hut-ong sa grid

Ang paglihok sa unahan sa mga kolum mismo, mahimo usab nimo ipasibo ang gidaghanon sa mga tier sa grid. Kung gusto nimo upat lang ka grid tier, imong i-update ang $grid-breakpointsug $container-max-widthssa usa ka butang nga sama niini:

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

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

Kung maghimo ug bisan unsang mga pagbag-o sa mga variable o mapa sa Sass, kinahanglan nimo nga i-save ang imong mga pagbag-o ug i-compile pag-usab. Ang pagbuhat sa ingon magpagawas usa ka bag-ong set sa gitakda nang daan nga mga klase sa grid alang sa mga gilapdon sa kolum, mga offset, ug pag-order. Ang responsive visibility utilities ma-update usab aron magamit ang custom breakpoints. Siguruha nga ibutang ang mga kantidad sa grid sa px(dili rem, em, o %).