Grid system

Halimbawa

Gumagamit ang grid system ng Bootstrap ng isang serye ng mga container, row, at column para mag-layout at mag-align ng content. Ito ay binuo gamit ang flexbox at ganap na tumutugon. Nasa ibaba ang isang halimbawa at isang malalim na paliwanag kung paano nagsasama-sama ang grid system.

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

Ang halimbawa sa itaas ay lumilikha ng tatlong magkaparehong lapad na mga column sa lahat ng device at viewport gamit ang aming mga paunang natukoy na klase ng grid. Nakasentro ang mga column na iyon sa page kasama ang magulang .container.

Paano ito gumagana

Kung pinaghihiwa-hiwalay ito, narito kung paano nagsasama-sama ang grid system:

• Sinusuportahan ng aming grid ang anim na tumutugon na breakpoint . Ang mga breakpoint ay batay sa mga min-widthquery sa media, ibig sabihin, naaapektuhan ng mga ito ang breakpoint na iyon at ang lahat ng nasa itaas nito (hal., .col-sm-4nalalapat sa sm, md, lg, xl, at xxl). Nangangahulugan ito na maaari mong kontrolin ang sukat at gawi ng container at column sa bawat breakpoint.

• Igitna ang mga container at pahalang na i-pad ang iyong content. Gamitin .containerpara sa isang tumutugong lapad ng pixel, .container-fluidpara sa width: 100%lahat ng viewport at device, o isang tumutugong lalagyan (hal, .container-md) para sa kumbinasyon ng tuluy-tuloy at lapad ng pixel.

• Ang mga row ay mga wrapper para sa mga column. Ang bawat column ay may pahalang padding(tinatawag na gutter) para sa pagkontrol sa espasyo sa pagitan nila. Pagkatapos ay kinokontra ito paddingsa mga row na may mga negatibong margin upang matiyak na ang nilalaman sa iyong mga column ay biswal na nakahanay sa kaliwang bahagi. Sinusuportahan din ng mga row ang mga klase ng modifier upang pantay na ilapat ang mga klase sa laki ng column at gutter upang baguhin ang espasyo ng iyong content.

• Ang mga column ay hindi kapani-paniwalang flexible. Mayroong 12 template na column na available sa bawat row, na nagbibigay-daan sa iyong lumikha ng iba't ibang kumbinasyon ng mga elemento na sumasaklaw sa anumang bilang ng mga column. Isinasaad ng mga klase ng column ang bilang ng mga column na template na sasakupin (hal., col-4sumasaklaw sa apat). widths ay nakatakda sa mga porsyento upang palagi kang magkaroon ng parehong kamag-anak na sukat.

• Ang mga kanal ay tumutugon din at nako-customize. Available ang mga klase ng gutter sa lahat ng breakpoint, na may lahat ng parehong laki ng aming margin at padding spacing . Baguhin ang mga pahalang na gutters na may mga .gx-*klase, vertical gutters na may .gy-*, o lahat ng gutters na may mga .g-*klase. .g-0ay magagamit din upang alisin ang mga kanal.

• Ang mga sass variable, mapa, at mixin ay nagpapagana sa grid. Kung hindi mo gustong gamitin ang mga paunang natukoy na klase ng grid sa Bootstrap, maaari mong gamitin ang Sass na pinagmulan ng aming grid upang lumikha ng sarili mong may mas maraming semantic markup. Nagsasama rin kami ng ilang custom na property ng CSS para gamitin ang mga Sass variable na ito para sa mas higit na flexibility para sa iyo.

Magkaroon ng kamalayan sa mga limitasyon at mga bug sa paligid ng flexbox , tulad ng kawalan ng kakayahang gumamit ng ilang elemento ng HTML bilang mga flex container .

Mga pagpipilian sa grid

Maaaring umangkop ang grid system ng Bootstrap sa lahat ng anim na default na breakpoint, at anumang breakpoint na iyong iko-customize. Ang anim na default na grid tier ay ang mga sumusunod:

• Napakaliit (xs)
• Maliit (sm)
• Katamtaman (md)
• Malaki (lg)
• Sobrang laki (xl)
• Extra extra large (xxl)

Gaya ng nabanggit sa itaas, ang bawat isa sa mga breakpoint na ito ay may sariling lalagyan, natatanging prefix ng klase, at mga modifier. Narito kung paano nagbabago ang grid sa mga breakpoint na ito:

Auto-layout na mga column

Gumamit ng mga klase ng column na tukoy sa breakpoint para sa madaling pag-size ng column nang walang tahasang may bilang na klase tulad ng .col-sm-6.

Pantay na lapad

Halimbawa, narito ang dalawang grid layout na nalalapat sa bawat device at viewport, mula xshanggang xxl. Magdagdag ng anumang bilang ng mga unit-less na klase para sa bawat breakpoint na kailangan mo at ang bawat column ay magiging parehong lapad.

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

Pagtatakda ng isang lapad ng column

Ang auto-layout para sa mga column ng flexbox grid ay nangangahulugan din na maaari mong itakda ang lapad ng isang column at awtomatikong i-resize ang magkapatid na column sa paligid nito. Maaari kang gumamit ng mga paunang natukoy na klase ng grid (tulad ng ipinapakita sa ibaba), grid mixin, o inline na lapad. Tandaan na ang iba pang mga column ay magbabago ng laki anuman ang lapad ng gitnang column.

<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 na nilalaman ng lapad

Gumamit col-{breakpoint}-autong mga klase sa laki ng mga column batay sa natural na lapad ng kanilang nilalaman.

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

Mga klaseng tumutugon

Kasama sa grid ng Bootstrap ang anim na tier ng mga paunang natukoy na klase para sa pagbuo ng mga kumplikadong tumutugon na layout. I-customize ang laki ng iyong mga column sa sobrang maliit, maliit, katamtaman, malaki, o napakalaking device gayunpaman sa tingin mo ay angkop.

Lahat ng breakpoints

Para sa mga grid na pareho mula sa pinakamaliit na device hanggang sa pinakamalaki, gamitin ang .colat mga .col-*klase. Tukuyin ang isang may bilang na klase kapag kailangan mo ng partikular na laki ng column; kung hindi, huwag mag-atubiling manatili 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>

Nakasalansan sa pahalang

Gamit ang isang solong hanay ng mga .col-sm-*klase, maaari kang lumikha ng isang pangunahing sistema ng grid na nagsisimula nang nakasalansan at nagiging pahalang sa maliit na 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 and match

Ayaw mo bang mag-stack lang ang iyong mga column sa ilang grid tier? Gumamit ng kumbinasyon ng iba't ibang klase para sa bawat tier kung kinakailangan. Tingnan ang halimbawa sa ibaba para sa isang mas mahusay na ideya kung paano gumagana ang lahat.

<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 hanay ng hilera

Gamitin ang mga tumutugong .row-cols-*klase upang mabilis na maitakda ang bilang ng mga column na pinakamahusay na nagbibigay ng iyong content at layout. Samantalang ang mga normal .col-*na klase ay nalalapat sa mga indibidwal na column (hal, .col-md-4), ang mga row column na klase ay nakatakda sa magulang .rowbilang default para sa mga nilalamang column. Sa pamamagitan .row-cols-autong maaari mong bigyan ang mga haligi ng kanilang natural na lapad.

Gamitin ang mga row column na klase na ito upang mabilis na gumawa ng mga pangunahing layout ng grid o upang kontrolin ang mga layout ng iyong card at i-override kapag kinakailangan sa antas ng column.

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

Maaari mo ring gamitin ang kasamang 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);
  }
}

Pugad

Upang i-nest ang iyong content sa default na grid, magdagdag ng bago .rowat hanay ng mga .col-sm-*column sa loob ng isang kasalukuyang .col-sm-*column. Ang mga nested row ay dapat na may kasamang hanay ng mga column na nagdaragdag ng hanggang 12 o mas kaunti (hindi kinakailangan na gamitin mo ang lahat ng 12 available na 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

Kapag gumagamit ng pinagmulang Sass file ng Bootstrap, mayroon kang opsyon na gumamit ng mga Sass variable at mixin para gumawa ng custom, semantic, at tumutugon na mga layout ng page. Ginagamit ng aming mga paunang natukoy na mga klase sa grid ang parehong mga variable at mixin upang magbigay ng isang buong hanay ng mga klase na handa nang gamitin para sa mabilis na tumutugon na mga layout.

Mga variable

Tinutukoy ng mga variable at mapa ang bilang ng mga column, ang lapad ng gutter, at ang media query point kung saan sisimulan ang mga lumulutang na column. Ginagamit namin ang mga ito upang bumuo ng mga paunang natukoy na klase ng grid na nakadokumento sa itaas, pati na rin para sa mga custom na mix na nakalista sa ibaba.

$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

Ginagamit ang mga mixin kasabay ng mga variable ng grid upang makabuo ng semantic CSS para sa mga indibidwal na column ng 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);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Halimbawa ng paggamit

Maaari mong baguhin ang mga variable sa sarili mong mga custom na value, o gamitin lang ang mga mixin kasama ng kanilang mga default na value. Narito ang isang halimbawa ng paggamit ng mga default na setting upang lumikha ng layout na may dalawang hanay na may pagitan.

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

Gamit ang aming built-in na grid na mga variable at mapa ng Sass, posibleng ganap na i-customize ang mga paunang natukoy na klase ng grid. Baguhin ang bilang ng mga tier, ang mga dimensyon ng query ng media, at ang lapad ng container—pagkatapos ay muling i-compile.

Mga haligi at kanal

Ang bilang ng mga grid column ay maaaring mabago sa pamamagitan ng Sass variable. $grid-columnsay ginagamit upang bumuo ng mga lapad (sa porsyento) ng bawat indibidwal na column habang $grid-gutter-widthitinatakda ang lapad para sa mga gutter ng column.

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

Mga tier ng grid

Ang paglipat sa kabila ng mga column mismo, maaari mo ring i-customize ang bilang ng mga grid tier. Kung gusto mo lamang ng apat na grid tier, i-update mo ang $grid-breakpointsat $container-max-widthssa isang bagay na tulad nito:

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

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

Kapag gumagawa ng anumang mga pagbabago sa mga variable o mapa ng Sass, kakailanganin mong i-save ang iyong mga pagbabago at muling i-compile. Ang paggawa nito ay maglalabas ng bagong hanay ng mga paunang natukoy na klase ng grid para sa mga lapad ng column, mga offset, at pag-order. Ia-update din ang mga responsive visibility utilities para magamit ang mga custom na breakpoint. Tiyaking itakda ang mga halaga ng grid sa px(hindi rem, em, o %).