Sistema ti grid

Pagwadan

Ti sistema ti grid ti Bootstrap ket agus-usar ti serye dagiti pagkargaan, dagiti hilera, ken dagiti adigi tapno mangilayout ken mangitunos ti linaon. Naaramid dayta iti flexbox ken naan-anay a makasungbat. Iti baba ket maysa a pagarigan ken ti nauneg a panangilawlawag no kasano nga agtitipon ti sistema ti grid.

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

Ti pagarigan iti ngato ket mangpartuat kadagiti tallo nga agpapada-kalawa a kolum iti ballasiw dagiti amin nga alikamen ken dagiti viewport babaen ti panagusar kadagiti nasakbay a naikeddeng a klase ti gridtayo. Dagita a kolum ket naisentro iti panid nga addaan iti nagannak .container.

No kasano ti panagandar dayta

Iti panangburak iti dayta, ditoy no kasano nga agtitipon ti sistema ti grid:

• Ti grid mi ket mangsuporta ti innem a responsive breakpoints . Dagiti breakpoint ket naibatay kadagiti min-widthpanagsaludsod ti media, a ti kayatna a sawen ket apektaranda dayta a breakpoint ken amin dagitoy iti ngato daytoy (kas pagarigan, .col-sm-4agaplikar iti sm, md, lg, xl, ken xxl). Kayatna a sawen a mabalinmo a kontrolen ti panagdakkel ti pagkargaan ken adigi ken kababalin babaen ti tunggal maysa a breakpoint.

• Containers center ken horizontally pad ti linaonmo. Usaren .containerpara iti sumungbat a kalawa ti pixel, .container-fluidpara iti width: 100%ballasiw dagiti amin a viewport ken dagiti alikamen, wenno ti sumungbat a pagkargaan (kas pagarigan, .container-md) para iti kombinasion ti pluido ken kalawa ti pixel.

• Dagiti hilera ket balkot para kadagiti adigi. Tunggal adigi ket addaan iti horizontal padding(maawagan iti gutter) a pangkontrol iti espasio iti nagbaetan dagitoy. Kalpasanna daytoy paddingket makontra kadagiti hilera nga addaan kadagiti negatibo a pingir tapno masigurado a ti linaon kadagiti kolummo ket makita a naitunos iti baba ti kannigid a sikigan. Dagiti hilera ket mangsuporta pay kadagiti klase ti mangbalbaliw tapno agpapada a mangyaplikar ti panagdakkel ti adigi ken dagiti klase ti gutter tapno agbaliw ti panagsisina ti linaonmo.

• Nakaskasdaaw ti kinalukneng dagiti adigi. Adda dagiti 12 a plantilia a kolum a magun-od iti tunggal maysa a hilera, a mangipalubos kenka a mangpartuat kadagiti nadumaduma a kombinasion dagiti elemento a mangsaklaw ti ania man a bilang dagiti adigi. Dagiti klase ti adigi ket mangipakita ti bilang dagiti kolum ti plantilia a mangsaklaw (kas pagarigan, col-4mangsaklaw ti uppat). widths ket naikeddeng kadagiti porsiento isu a kanayon nga addaanka iti isu met laeng a relatibo a panagdakkel.

• Nalaka met a makasungbat ken ma-customize dagiti gutter. Magun-odan dagiti klase ti gutter iti ballasiw ti amin a breakpoint, nga amin ket agpapada ti kadakkelda a kas iti margin ken padding spacing -tayo . Baliwan dagiti horizontal a kanal nga addaan kadagiti .gx-*klase, dagiti bertikal a kanal nga addaan iti .gy-*, wenno amin a kanal nga addaan kadagiti .g-*klase. .g-0magun-odan met a pangikkat kadagiti kanal.

• Dagiti Sass a variable, mapa, ken mixins ket mangpaandar ti grid. No dimo kayat nga usaren dagiti nasakbay a naikeddeng a klase ti grid iti Bootstrap, mabalinmo nga usaren ti taudan ti gridmi a Sass tapno mangpartuat ti bukodmo nga addaan iti ad-adu a semantiko a marka. Iramanmi pay ti sumagmamano a kostumbre a tagikua ti CSS tapno agkonsumo kadagitoy a variable ti Sass para iti ad-adu pay a kinalukneng para kenka.

Ammuem dagiti limitasion ken dagiti bug iti aglawlaw ti flexbox , a kas ti saan a pannakabael nga agusar kadagiti sumagmamano nga elemento ti HTML a kas dagiti paglaon ti flex .

Dagiti pagpilian iti grid

Ti sistema ti grid ti Bootstrap ket mabalinna ti makibagay iti ballasiw dagiti amin nga innem a default a breakpoint, ken ania man a breakpoint nga pasayaatem. Dagiti innem a default a grid tier ket kastoy:

• Ekstra nga bassit (xs) .
• Bassit nga (sm) .
• Kalalainganna (md) .
• Dakkel (lg) .
• Ekstra nga dakkel (xl) .
• Ekstra nga ekstra nga dakkel (xxl) .

Kas naibagbaga iti ngato, tunggal maysa kadagitoy a breakpoint ket addaan iti bukodna a pagkargaan, naisangayan a prefix ti klase, ken dagiti mangbalbaliw. Kastoy ti panagbalbaliw ti grid iti ballasiw dagitoy a breakpoint:

Auto-layout dagiti kolum

Usaren dagiti breakpoint-espesipiko a klase ti adigi para iti nalaka a panagdakkel ti adigi nga awan ti nalawag a nanumeroan a klase a kas ti .col-sm-6.

Agpapada ti kalawana

Kas pagarigan, ditoy ket dua a layout ti grid a maipakat iti tunggal maysa nga alikamen ken viewport, manipud xsiti aginggana iti xxl. Inayon ti ania man a bilang dagiti unit-less a klase para iti tunggal maysa a breakpoint a kasapulam ken tunggal maysa a kolum ket agpapada ti kalawana.

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

Panangisaad iti kalawa ti maysa a kolum

Ti auto-layout para kadagiti adigi ti grid ti flexbox ket kayatna pay a sawen a mabalinmo nga ikeddeng ti kalawa ti maysa a kolum ken dagiti agkabsat a kolum ket automatiko a mangbalbaliw ti kadakkel iti aglawlawna. Mabalinmo nga usaren dagiti nasakbay a naikeddeng a klase ti grid (kas naipakita iti baba), dagiti grid mixins, wenno dagiti kalawa ti inline. Imutektekanyo a dagiti dadduma a kolum ket agbaliwto ti kadakkelda urayno kasano ti kalawa ti tengnga a 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>

Nadumaduma ti kalawa a linaon

Usaren col-{breakpoint}-autodagiti klase tapno kadakkel dagiti kolum a naibatay iti natural a kalawa ti linaonda.

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

Dagiti makasungbat a klase

Ti grid ti Bootstrap ket mangiraman kadagiti innem a tukad dagiti nasakbay a naikeddeng a klase para iti panagbangon kadagiti komplikado a sumungbat a layout. Ipasayaat ti kadakkel dagiti kolummo kadagiti ekstra a bassit, bassit, kalalainganna, dakkel, wenno ekstra a dakkel nga alikamen nupay kasta makitam a maitutop.

Amin a breakpoint

Para kadagiti grid nga agpapada manipud kadagiti kabassitan kadagiti alikamen aginggana kadagiti kadakkelan, usaren ti .colken .col-*dagiti klase. Ibaga ti maysa a nanumeroan a klase no kasapulam ti partikular a kadakkel a kolum; no saan, agwayawayakayo a mangpetpet iti .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>

Naurnong agingga iti horizontal

Babaen ti panagusar ti maymaysa a grupo dagiti .col-sm-*klase, mabalinmo ti mangpartuat ti batayan a sistema ti grid a mangrugi a naurnong ken agbalin a horisontal iti bassit a 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>

Ilaok ken pagtunos

Dimo kayat a dagiti kolummo ket basta agtumpok iti sumagmamano a grid tier? Usaren ti kombinasion ti nadumaduma a klase para iti tunggal tier no kasapulan. Kitaen ti pagarigan iti baba para iti nasaysayaat nga ideya no kasano nga agtrabaho amin dayta.

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

Hilera dagiti kolum

Usaren dagiti sumungbat .row-cols-*a klase tapno napardas nga ikeddeng ti bilang dagiti kolum a kasayaatan a mangiparang iti linaon ken layoutmo. Idinto a dagiti gagangay a .col-*klase ket agaplikar kadagiti indibidual a kolum (kas pagarigan, .col-md-4), dagiti klase dagiti adigi ti hilera ket naikeddeng iti nagannak .rowa kas ti ab-ababa a dalan. Babaen .row-cols-autokenka mabalinmo nga ited dagiti adigi ti natural a kalawada.

Usaren dagitoy a klase dagiti adigi ti hilera tapno napardas a mangpartuat kadagiti batayan a layout ti grid wenno tapno makontrol dagiti layout ti kardmo.

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

Mabalinmo pay nga usaren ti naipakuyog a 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);
  }
}

Panag-umok

Tapno mai-nest ti linaonmo babaen ti default a grid, manginayon ti baro .rowken grupo dagiti .col-sm-*adigi iti uneg ti addan a .col-sm-*kolum. Dagiti naisanglad a hilera ket rumbeng a mangiraman ti maysa a grupo dagiti adigi a mangnayon aginggana ti 12 wenno basbassit (saan a kasapulan nga usarem amin dagiti 12 a magun-od a kolum).

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

No agus-usar kadagiti taudan a Sass a papeles ti Bootstrap, addaanka iti pagpilian nga agusar kadagiti variable ken mixin ti Sass tapno mangpartuat kadagiti kostumbre, semantiko, ken makasungbat a layout ti panid. Dagiti nasakbay a naikeddeng a klasemi ti grid ket agus-usar kadagitoy met laeng a variable ken dagiti mixin tapno mangipaay ti sibubukel a suite dagiti nakasagana nga usaren a klase para kadagiti napardas a sumungbat a layout.

Dagiti Variable

Dagiti variable ken mapa ket mangikeddeng ti bilang dagiti adigi, ti kalawa ti kanal, ken ti puntos ti panagsaludsod ti media a pangrugian kadagiti agtaytayab nga adigi. Usarenmi dagitoy tapno mangpataud kadagiti nasakbay a naikeddeng a klase ti grid a nadokumento iti ngato, ken kasta met para kadagiti kostumbre a mixin a nailista iti baba.

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

Dagiti Mixin

Dagiti mixin ket naus-usar a maikuyog kadagiti grid a variable tapno mangpataud ti semantiko a CSS para kadagiti indibidual a grid a kolum.

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

Pagarigan ti panagusar

Mabalinmo a baliwan dagiti variable kadagiti bukodmo a kostumbre a pateg, wenno usarem laeng dagiti mixin nga addaan kadagiti default a pategda. Adda ditoy ti pagarigan ti panagusar kadagiti default a panagitunos tapno mangpartuat ti dua-a-kolum a layout nga addaan iti giwang iti nagbaetan.

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

Panangpasayaat iti grid

Babaen ti panagusar kadagiti naibangon a grid Sass a variable ken mapami, mabalin a naan-anay a maibagay dagiti nasakbay a naikeddeng a klase ti grid. Baliwan ti bilang dagiti tier, dagiti dimension ti panagsaludsod ti media, ken dagiti kalawa ti pagkargaan—kalpasanna ti panagtipon manen.

Adigi ken kanal

Ti bilang dagiti adigi ti grid ket mabalin a mabaliwan babaen dagiti variable ti Sass. $grid-columnsket maus-usar a mangpataud kadagiti kalawa (iti porsiento) ti tunggal maysa nga indibidual nga adigi bayat nga $grid-gutter-widthikeddeng ti kalawa para kadagiti kanal ti adigi.

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

Dagiti tukad ti grid

Iti panaglabas dagiti adigi a mismo, mabalinmo pay nga ipasadaan ti bilang dagiti grid tier. No kayatmo laeng ti uppat a grid tier, i-update-mo ti $grid-breakpointsken $container-max-widthsiti maysa a banag a kas iti daytoy:

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

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

No mangaramidka kadagiti ania man a panagbalbaliw kadagiti variable wenno mapa ti Sass, kasapulam nga idulinen dagiti panagbalbaliwmo ken agtipon manen. Ti panagaramid iti daytoy ket mangiruar ti baro a grupo dagiti nasakbay a naikeddeng a klase ti grid para kadagiti kalawa ti adigi, dagiti offset, ken panagurnos. Dagiti responsibo a utilidad ti pannakakita ket ma-update pay tapno agusar kadagiti kostumbre a breakpoint. Siguraduen nga ikeddeng dagiti pateg ti grid iti px(saan a rem, em, wenno %).