Córas greille

Sampla

Úsáideann córas greille Bootstrap sraith coimeádán, sraitheanna agus colúin chun ábhar a leagan amach agus a ailíniú. Tá sé tógtha le flexbox agus tá sé go hiomlán sofhreagrach. Anseo thíos tá sampla agus mionmhíniú ar conas a thagann an córas eangaí le chéile.

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

Cruthaíonn an sampla thuas trí cholún ar chomhleithead thar gach gléas agus radharc ag baint úsáide as ár n-aicmí greille réamhshainithe. Tá na colúin sin dírithe ar an leathanach leis an tuismitheoir .container.

Conas a oibríonn sé

Agus é á bhriseadh síos, seo mar a thagann an córas eangaí le chéile:

• Tacaíonn ár n-eangach le sé cinn sofhreagracha . Tá brisphointí bunaithe ar min-widthfhiosrúcháin ó na meáin, rud a chiallaíonn go mbíonn tionchar acu ar an brisphointe sin agus orthu siúd go léir os a chionn (m.sh., .col-sm-4baineann sé le sm, md, , lg, xl, agus xxl). Ciallaíonn sé seo gur féidir leat méid agus iompar coimeádán agus colún a rialú ag gach brisphointe.

• Lár na coimeádáin agus ceap go cothrománach d'ábhar. Úsáid .containerle haghaidh leithead picteilín sofhreagrach, .container-fluidle haghaidh width: 100%gach radharc agus gléas, nó coimeádán sofhreagrach (m.sh., .container-md) le haghaidh teaglaim de leithead sreabhán agus picteilín.

• Is cumhdaigh do cholúin iad sraitheanna. Tá cothrománach ag gach colún padding(ar a dtugtar gutter) chun an spás eatarthu a rialú. Déantar paddingé seo a fhrithghníomhú ansin ar na sraitheanna le corrlaigh dhiúltacha chun a chinntiú go bhfuil an t-ábhar i do cholúin ailínithe go radhairc síos ar an taobh clé. Tacaíonn sraitheanna freisin le ranganna mionathraithe chun méid na gcolún agus na ranganna gáitéir a chur i bhfeidhm go haonfhoirmeach chun spásáil d’ábhar a athrú.

• Tá na colúin thar a bheith solúbtha. Tá 12 cholún teimpléid ar fáil in aghaidh an tsraith, rud a ligeann duit teaglaim éagsúla d’eilimintí a chruthú a chuimsíonn líon ar bith de na colúin. Léiríonn ranganna colún líon na gcolún teimpléid a col-4théann trasna (m.sh. ceithre cinn). widths socraithe i gcéatadáin ionas go mbeidh an méid coibhneasta céanna agat i gcónaí.

• Tá gáitéir sofhreagrach agus inoiriúnaithe freisin. Tá ranganna gáitéir ar fáil thar gach briseadh, agus na méideanna céanna ar fad lenár spásáil imeall agus stuáil . Athraigh gáitéir chothrománacha le .gx-*ranganna, gáitéir ingearacha le .gy-*, nó gach gáitéir le .g-*ranganna. .g-0ar fáil freisin chun gáitéir a bhaint.

• Athróga Sass, léarscáileanna, agus meascáin cumhacht an eangach. Mura dteastaíonn uait na ranganna greille réamhshainithe in Bootstrap a úsáid, is féidir leat foinse ár ngreille Sass a úsáid chun do chuid féin a chruthú le níos mó marcáil shéimeantach. Áirímid freisin roinnt airíonna saincheaptha CSS chun na hathróga Sass seo a úsáid le haghaidh solúbthachta níos mó fós duit.

Bí ar an eolas faoi na teorainneacha agus na fabhtanna a bhaineann le flexbox , cosúil leis an éagumas chun roinnt eilimintí HTML a úsáid mar choimeádáin flex .

Roghanna greille

Is féidir le córas eangaí Bootstrap oiriúnú a dhéanamh ar na sé bhriseadh réamhshocraithe go léir, agus ar aon bhriseadhphointí a shaincheapann tú. Seo a leanas na sé shraith ghreille réamhshocraithe:

• Beag breise (xs)
• beag (sm)
• Meánach (md)
• Mór (lg)
• Mór breise (xl)
• Breise mór (xxl)

Mar a luadh thuas, tá a gcoimeádán féin, réimír aicme uathúil, agus modhnóirí ag gach ceann de na brisphointí seo. Seo mar a athraíonn an eangach thar na brisphointí seo:

Colúin uathleagan amach

Bain úsáid as ranganna colúin a bhaineann go sonrach le brisphointe le haghaidh méide éasca colúin gan aicme uimhrithe sainráite mar .col-sm-6.

Comh-leithead

Mar shampla, seo dhá leagan amach eangaí a bhaineann le gach feiste agus radharcphort, ó xsgo xxl. Cuir líon ar bith ranganna gan aonad isteach le haghaidh gach brisphointe atá uait agus beidh gach colún ar an leithead céanna.

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

Leithead colún amháin a shocrú

Ciallaíonn leagan amach uathoibríoch do cholúin ghreille flexbox freisin gur féidir leat leithead colúin amháin a shocrú agus na colúin siblíní a athrú go huathoibríoch timpeall air. Is féidir leat aicmí greille réamhshainithe (mar a thaispeántar thíos), meascáin eangaí, nó leithid inlíne a úsáid. Tabhair faoi deara go n-athróidh na colúin eile méid beag beann ar leithead an cholúin láir.

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

Ábhar leithead athraitheach

Úsáid col-{breakpoint}-autoranganna chun colúin a mhéid bunaithe ar leithead nádúrtha a n-ábhar.

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

Ranganna freagrúla

Áiríonn greille Bootstrap sé shraith de ranganna réamhshainithe chun leagan amach casta freagrúil a thógáil. Saincheap méid do cholúin ar fheistí breise beaga, beaga, meánacha, móra nó móra breise, cibé acu is cuí leat.

Gach brisphointí

Maidir le greillí atá mar an gcéanna, ó na gléasanna is lú go dtí an ceann is mó, bain úsáid as an .colagus .col-*ranganna. Sonraigh rang uimhrithe nuair a bheidh colún ar leith de mhéid uait; ar shlí eile, ná bíodh drogall ort cloí leis .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>

Cruachta go cothrománach

Ag baint úsáide as sraith amháin de .col-sm-*ranganna, is féidir leat a chruthú córas greille bunúsach a thosaíonn amach Cruachta agus a thiocfaidh cothrománach ag an brisphointe beag ( 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>

Measc agus meaitseáil

Nár mhaith leat do cholúin a chruachadh i roinnt sraitheanna eangaí? Úsáid meascán de ranganna éagsúla do gach sraith de réir mar is gá. Féach ar an sampla thíos le haghaidh smaoineamh níos fearr ar conas a oibríonn sé ar fad.

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

Colúin as a chéile

Bain úsáid as na ranganna sofhreagracha .row-cols-*chun líon na gcolún a shocrú go tapa is fearr a thugann d’inneachar agus do leagan amach. Cé go .col-*mbaineann na gnáth-aicmí leis na colúin aonair (m.sh., .col-md-4), socraítear ranganna na gcolún rónna ar an tuismitheoir .rowmar aicearra. Le .row-cols-autois féidir leat a leithead nádúrtha a thabhairt do na colúin.

Bain úsáid as na ranganna colúin rónna seo chun leagan amach bunúsach greille a chruthú go tapa nó chun leagan amach do chárta a rialú.

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

Is féidir leat an Sass mixin a théann leis a úsáid freisin, 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);
  }
}

Neadaithe

Chun d'ábhar a neadú leis an eangach réamhshocraithe, cuir sraith nua .rowagus sraith .col-sm-*colún laistigh de .col-sm-*cholún atá ann cheana féin. Ba cheart go gcuimseodh sraitheanna neadaithe sraith colún a chuireann suas le 12 nó níos lú (níl sé riachtanach go n-úsáideann tú gach ceann de na 12 cholún atá ar fáil).

<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

Agus comhaid foinse Bootstrap Sass á n-úsáid agat, tá an rogha agat athróga agus meascáin Sass a úsáid chun leagan amach leathanach saincheaptha, shéimeantach agus sofhreagrach a chruthú. Úsáideann ár ranganna greille réamhshainithe na hathróga agus na meascáin chéanna seo chun sraith iomlán de ranganna réidh le húsáid a sholáthar le haghaidh leagan amach tapa freagrúil.

Athróga

Cinneann athróga agus léarscáileanna líon na gcolún, leithead an gháitéir, agus an pointe fiosrúcháin meán ag a gcuirfear tús le colúin ar snámh. Bainimid úsáid astu seo chun na haicmí greille réamhshainithe atá doiciméadaithe thuas a ghiniúint, chomh maith le haghaidh na meascáin shaincheaptha atá liostaithe thíos.

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

Meascáin

Úsáidtear meascáin i gcomhar leis na hathróga eangaí chun CSS shéimeantach a ghiniúint do cholúin ghreille aonair.

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

Sampla úsáide

Is féidir leat na hathróga a mhodhnú le do luachanna saincheaptha féin, nó úsáid a bhaint as na meascáin lena luachanna réamhshocraithe. Seo sampla de na socruithe réamhshocraithe a úsáid chun leagan amach dhá cholún a chruthú le bearna idir.

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

Saincheapadh an eangach

Ag baint úsáide as ár n-athróga agus léarscáileanna Sass greille ionsuite, is féidir na ranganna greille réamhshainithe a shaincheapadh go hiomlán. Athraigh líon na sraitheanna, toisí na bhfiosruithe meán, agus leithid an choimeádáin - athchruinnigh ansin.

Colúin agus gáitéir

Is féidir líon na gcolún greille a mhionathrú trí athróga Sass. $grid-columnsa úsáidtear chun leithead (i faoin gcéad) de gach colún aonair a ghiniúint agus a $grid-gutter-widthleagann an leithead do gháitéir an cholúin.

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

Sraitheanna greille

Ag bogadh thar na colúin iad féin, féadfaidh tú líon na sraitheanna eangaí a shaincheapadh freisin. Dá mba rud é nach raibh uait ach ceithre shraith eangaí, dhéanfá an nuashonrú $grid-breakpointsagus $container-max-widthsrud éigin mar seo:

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

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

Nuair a bheidh aon athruithe á ndéanamh ar athróga nó ar léarscáileanna Sass, beidh ort do chuid athruithe a shábháil agus a chur le chéile. Má dhéantar é sin, déanfar sraith úrnua d'aicmí greille réamhshainithe a aschuir le haghaidh leithid, fritháirimh agus ordú colún. Déanfar fóntais infheictheachta sofhreagracha a nuashonrú freisin chun na pointí saincheaptha a úsáid. Bí cinnte luachanna eangaí a shocrú i px(ní rem, em, nó %).