Rafitra Grid

Ampiasao ny gridbox flexbox voalohany amin'ny finday mahery vaika mba hananganana lamina amin'ny endrika sy habe rehetra noho ny rafitra tsanganana roa ambin'ny folo, ambaratonga enina mamaly ny default, fari-pitsipika Sass sy mixins, ary kilasy am-polony efa voafaritra mialoha.

Amin'ity pejy ity

OHATRA

Ny rafitry ny grid Bootstrap dia mampiasa andiana kaontenera, andalana ary tsanganana mba hamolavolana sy hampifanaraka ny atiny. Namboarina tamin'ny flexbox izy io ary mamaly tanteraka. Ity ambany ity ny ohatra iray sy ny fanazavana lalina momba ny fomba fiarahan'ny rafitra grid.

Vaovao na tsy mahazatra amin'ny flexbox? Vakio ity torolalana flexbox CSS Tricks ity ho an'ny fiaviana, ny teny, ny torolàlana ary ny sombin-kaody.

Tsanganana

html

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

Ity ohatra etsy ambony ity dia mamorona tsanganana telo mitovy sakany manerana ny fitaovana rehetra sy ny seranan-tsambo amin'ny fampiasana ny kilasin'ny grid efa voafaritra mialoha. Ireo tsanganana ireo dia eo afovoan'ny pejy misy ny ray aman-dreny .container.

Ahoana ny fiasan'izany

Amin'ny fandravana azy dia izao no fomba ivondronan'ny rafitra grid:

Manohana teboka fiatoana enina mandray andraikitra ny grid-nay . Mifototra amin'ny min-widthfangatahan'ny haino aman-jery ny teboka fiatoana, midika izany fa misy fiantraikany amin'io teboka tapaka io sy ireo rehetra eo amboniny (oh: .col-sm-4mihatra amin'ny sm, md, lg, xl, ary xxl). Midika izany fa azonao atao ny mifehy ny haben'ny kaontenera sy ny tsanganana ary ny fitondran-tena isaky ny tapaka.
Afovoany ny kaontenera ary asio marindrano ny atiny. Ampiasao .containerho an'ny sakan'ny piksela mamaly, .container-fluidho an'ny width: 100%faritra rehetra mijery sy fitaovana, na fitoeran-javatra mandray andraikitra (oh, .container-md) ho an'ny fitambaran'ny sakan'ny rano sy ny piksel.
Ny andalana dia fonosina ho an'ny tsanganana. Ny tsanganana tsirairay dia manana marindrano padding(antsoina hoe tatatra) mba hifehezana ny habaka eo anelanelan'izy ireo. Avy paddingeo dia toherina amin'ny andalana misy sisiny ratsy izany mba hiantohana fa ny atiny ao amin'ny tsangananao dia mirindra tsara amin'ny ilany havia. Ny row koa dia manohana ny kilasy modifier mba hampiharana mitovy ny haben'ny tsanganana sy ny tatatra mba hanovana ny elanelan'ny atiny.
Ny tsanganana dia tena miovaova. Misy tsanganana môdely 12 azo alaina isaky ny andalana, ahafahanao mamorona fitambarana singa samihafa izay mirefy tsanganana maromaro. Ny kilasin'ny tsanganana dia manondro ny isan'ny tsanganana môdely ho avela (oh: col-4efatra). widths dia napetraka amin'ny isan-jato ka mitovy habe foana ianao.
Ny tatatra ihany koa dia mandray andraikitra sy azo zahana. Ny kilasin'ny tatatra dia misy amin'ny toerana tapaka rehetra, mitovy habe amin'ny sisiny sy ny elanelan'ny padding . Ovay ny tatatra marindrano misy .gx-*kilasy, tatatra mitsangana misy .gy-*, na ny tatatra rehetra misy .g-*kilasy. .g-0misy ihany koa ny manala tatatra.
Ny fari-piainana Sass, ny sarintany ary ny mixins dia manome hery ny grid. Raha tsy te hampiasa ny kilasin'ny grid efa voafaritra mialoha ao amin'ny Bootstrap ianao dia azonao atao ny mampiasa ny loharanon'ny grid Sass mba hamoronana anao manokana miaraka amin'ny marika semantika kokoa. Ampidirinay ihany koa ny toetra amam-panao CSS sasany hampiasaina ireo fari-pahalalana Sass ireo mba ho mora kokoa ho anao.

Tandremo ny famerana sy ny bibikely manodidina ny flexbox , toy ny tsy fahafahana mampiasa singa HTML sasany ho toy ny container flex .

Grid safidy

Ny rafitry ny grids Bootstrap dia afaka mampifanaraka amin'ireo teboka enina tapaka rehetra, sy ireo teboka tapaka rehetra namboarinao. Ireto manaraka ireto ny andalana enina enina enina:

Kely fanampiny (xs)
Kely (sm)
antonony (md)
Lehibe (lg)
Lehibe fanampiny (xl)
Extra extra large (xxl)

Araka ny nomarihina etsy ambony, samy manana ny fitoerany manokana, ny prefix kilasy tokana, ary ny modifiers ny tsirairay amin'ireo teboka tapaka ireo. Toy izao ny fiovan'ny grid amin'ireo teboka tapaka ireo:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
fitoeran-javatra`max-width`	Tsy misy (auto)	540px	720px	960px	1140px	1320px
Prefix kilasy	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# tsanganana	12
Sakan'ny tatatra	1.5rem (.75rem eo ankavia sy havanana)
Talantalana manokana	ENY
Nestable	ENY
Filaharana tsanganana	ENY

Tsanganana fandrindrana mandeha ho azy

Mampiasà kilasy tsanganana manokana ho an'ny fametahana tsanganana mora tsy misy kilasy misy laharana mazava toy ny .col-sm-6.

Mitovy sakany

Ohatra, ireto misy rindrankajy roa mihatra amin'ny fitaovana tsirairay sy ny seranan-tsambo, manomboka xsamin'ny xxl. Ampio kilasy latsaky ny isa isaky ny teboka ilainao ary hitovy ny sakany ny tsanganana tsirairay.

1 amin'ny 2

2 ny 2

1 amin'ny 3

2 ny 3

3 ny 3

html

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

Fametrahana sakan'ny tsanganana iray

Ny fandrindrana mandeha ho azy ho an'ny tsanganana grid flexbox dia midika koa fa azonao atao ny mametraka ny sakan'ny tsanganana iray ary manana ny haben'ny tsanganana eo amin'ny manodidina azy. Azonao atao ny mampiasa ny kilasin'ny grid efa voafaritra mialoha (araka ny aseho eto ambany), ny fifangaroan'ny grid, na ny sakany an-tsipika. Mariho fa ny tsanganana hafa dia hanova ny habeny na inona na inona sakan'ny tsanganana afovoany.

1 amin'ny 3

2 amin'ny 3 (lehibe kokoa)

3 ny 3

1 amin'ny 3

2 amin'ny 3 (lehibe kokoa)

3 ny 3

html

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

Votoaty sakany miovaova

Mampiasà col-{breakpoint}-autokilasy hamehezana tsanganana mifototra amin'ny sakany voajanahary amin'ny atiny.

1 amin'ny 3

Votoaty sakany miovaova

3 ny 3

1 amin'ny 3

Votoaty sakany miovaova

3 ny 3

html

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

Kilasy mandray andraikitra

Ny grid's Bootstrap dia misy ambaratonga enina amin'ny kilasy efa voafaritra mialoha ho an'ny fananganana rindran-damina be pitsiny. Amboary ny haben'ny tsangananao amin'ny fitaovana kely, kely, antonony, lehibe, na lehibe kokoa araka izay hitanao fa mety.

Tapatapaka rehetra

Ho an'ny grids mitovy amin'ny fitaovana kely indrindra ka hatramin'ny lehibe indrindra, ampiasao ny .coland .col-*classes. Manondro kilasy misy laharana rehefa mila tsanganana manokana ianao; raha tsy izany, aza misalasala mifikitra amin'ny .col.

tsang

col-8

col-4

html

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

Mivondrona mankany amin'ny horizontaly

Amin'ny fampiasana .col-sm-*kilasy tokana iray dia azonao atao ny mamorona rafitra grid fototra izay manomboka mivondrona ary lasa mitsivalana eo amin'ny teboka tapaka kely ( sm).

col-sm-8

col-sm-4

col-sm

html

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

Afangaro ary ampifanaraho

Tsy tianao ve ny tsanganana mba hiangona fotsiny amin'ny ambaratonga sasany? Mampiasà fitambarana kilasy samihafa ho an'ny ambaratonga tsirairay araka izay ilaina. Jereo ny ohatra etsy ambany raha te hahalala tsara kokoa ny fomba fiasan'izy rehetra.

.col-md-8

.col-6 .col-md-4

.col-6

html

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

Andry andalana

Ampiasao ireo .row-cols-*kilasy mamaly mba hametrahana haingana ny isan'ny tsanganana izay manome tsara indrindra ny atiny sy ny drafitrao. Raha .col-*mihatra amin'ny tsanganana tsirairay ny kilasy mahazatra (oh, .col-md-4), ny kilasin'ny tsanganana andalana dia napetraka amin'ny ray aman-dreny .rowho toy ny hitsin-dàlana. Azonao .row-cols-autoatao ny manome ny andry ny sakany voajanahary.

Ampiasao ireto kilasin'ny tsanganana andalana ireto mba hamoronana lamina fototra fototra na hifehezana ny fandrafetana karatrao.

Tsanganana

html

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

Tsanganana

html

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

Tsanganana

html

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

Tsanganana

html

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

Tsanganana

html

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

Tsanganana

html

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

Azonao atao koa ny mampiasa ny mixin Sass miaraka aminy 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);
  }
}

akany

Mba hanakanana ny atiny amin'ny rindran-damina mahazatra, ampio tsanganana vaovao .rowsy andiana .col-sm-*tsanganana iray ao anatin'ny .col-sm-*tsanganana efa misy. Ny andalana voatokana dia tokony ahitana andiana tsanganana miampy 12 na latsaka (tsy voatery hampiasa ny tsanganana 12 rehetra misy ianao).

Ambaratonga 1: .col-sm-3

Ambaratonga 2: .col-8 .col-sm-6

Ambaratonga 2: .col-4 .col-sm-6

html

<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

Rehefa mampiasa fisie Sass loharanon'ny Bootstrap ianao dia manana safidy amin'ny fampiasana ny fari-pahaizan'ny Sass sy ny mixins mba hamoronana fandrafetana pejy mahazatra, semantika ary mandray andraikitra. Ny kilasin'ny grid efa nofaritanay dia mampiasa ireo fari-pahalalana sy mixins ireo ihany mba hanomezana andiana kilasy vonona hampiasaina ho an'ny fandrindrana mandray andraikitra haingana.

hiovaova

Ny fiovaovana sy ny sarintany no mamaritra ny isan'ny tsanganana, ny sakan'ny tatatra, ary ny toerana fangataham-baovao hanombohana tsanganana mitsingevana. Ampiasainay ireo mba hamoronana ny kilasin'ny grid efa voafaritra mialoha voarakitra etsy ambony, ary koa ho an'ny mixins mahazatra voatanisa etsy ambany.

$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

Ny mixins dia ampiasaina miaraka amin'ny fari-piainan'ny grid mba hamoronana CSS semantika ho an'ny tsanganana tsirairay.

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

Fampiasana ohatra

Azonao atao ny manova ny fari-piainana amin'ny soatoavinao manokana, na mampiasa fotsiny ny mixins miaraka amin'ny sanda mahazatra azy. Ity misy ohatra iray amin'ny fampiasana ny firafitry ny default mba hamoronana lamina misy tsanganana roa misy elanelana eo anelanelany.

.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);
  }
}

Votoaty fototra

Votoaty faharoa

html

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

Fanamboarana ny grid

Amin'ny fampiasana ny fari-piadidiana sy ny sari-tany Sass ao anatiny, dia azo atao ny mampifanaraka tanteraka ny kilasin'ny grid efa voafaritra mialoha. Ovay ny isan'ny ambaratonga, ny refin'ny fangatahana media, ary ny sakan'ny fitoeran-javatra—dia avereno amboarina.

Tsanganana sy tatatra

Ny isan'ny tsanganana grid dia azo ovaina amin'ny alàlan'ny fari-piadidiana Sass. $grid-columnsdia ampiasaina hamokarana ny sakany (amin'ny isan-jato) isaky ny tsanganana tsirairay ary $grid-gutter-widthmametraka ny sakany ho an'ny tatatra andry. $grid-row-columnsdia ampiasaina hametrahana ny isan'ny tsanganana ambony indrindra amin'ny .row-cols-*, izay isa mihoatra io fetra io dia tsy raharahaina.

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

Tiers Grid

Mifindra any ivelan'ny tsanganana, azonao atao koa ny mampifanaraka ny isan'ny tsanganana. Raha mila tiers grid efatra fotsiny ianao dia havaozina ny $grid-breakpointssy $container-max-widthsamin'ny zavatra toy izao:

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

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

Rehefa manao fanovana amin'ny fari-piadidiana na sari-tany Sass dia mila mitahiry ny fanovanao ianao ary manangona indray. Ny fanaovana izany dia hamokatra andiana kilasina grid efa voafaritra mialoha ho an'ny sakan'ny tsanganana, ny offset ary ny filaharana. Havaozina ihany koa ny fampitaovana fahitana mamaly mba hampiasana ireo teboka fiatoana mahazatra. Ataovy azo antoka ny mametraka ny soatoavin'ny grid px(tsy rem, em, na %).