Grid sistem
Yuz wi pawaful mobayl-fɔs fleksbɔks grid fɔ bil layout dɛn we gɛt ɔl di shep ɛn saiz dɛn tank to wan twɛlv kɔlɔm sistem, siks difɔlt rispɔnsiv taya dɛn, Sass vɛriɔbul ɛn miksin dɛn, ɛn dɔzin klas dɛn we dɛn dɔn prɛdifayn.
Ɛgzampul
Bootstrap in grid sistem de yuz wan siriɔs kɔntena, row, ɛn kɔlɔm fɔ layout ɛn alaynɛt kɔntinyu. I bil wit flexbox ɛn i ful-ɔp fɔ ansa. Dis dɔŋ ya na ɛgzampul ɛn dip ɛksplen bɔt aw di grid sistɛm kam togɛda.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Di ɛgzampul we de ɔp de mek tri ikwal-wid kɔlɔm dɛn akɔdin to ɔl di divays ɛn viupɔt dɛn we de yuz wi grid klas dɛn we wi dɔn pridifayn. Dɛn kɔlɔm dɛn de de na di sɛnt na di pej wit di mama ɔ papa .container
.
Aw i de wok
We yu brok am dɔŋ, na so di grid sistɛm kam togɛda:
-
Wi grid de sɔpɔt siks rispɔnsiv brekpɔynt dɛn . Brekpɔynt dɛn de bays pan
min-width
midia kwɛstyɔn dɛn, we min se dɛn de afɛkt da brekpɔynt de ɛn ɔl di wan dɛn we de ɔp am (ɛgz., i.col-sm-4
de aplay tosm
,md
,lg
,xl
, ɛnxxl
). Dis min se yu kin kɔntrol kɔntena ɛn kɔlɔm saiz ɛn bihayvya bay ɛni brekpɔynt. -
Kontena dɛn sɛnt ɛn ɔrizɔntal pad yu kɔntinyu. Yuz
.container
fɔ wan rispɔnsiv piksɛl wid,.container-fluid
fɔwidth: 100%
akɔdin to ɔl di viupɔt ɛn divays dɛn, ɔ wan rispɔnsiv kɔntena (ɛgz.,.container-md
) fɔ wan kɔmbaynshɔn fɔ fluid ɛn piksɛl wit. -
Row na wrap fɔ kɔlɔm dɛn. Ɛni kɔlɔm gɛt ɔrizɔntal
padding
(we dɛn kɔl gɔta) fɔ kɔntrol di spes bitwin dɛn. Dɔnpadding
dɛn kin kɔntrakt dis na di row dɛn we gɛt nɛgitiv margin fɔ mek shɔ se di tin dɛn we de insay yu kɔlɔm dɛn de alaynɛd dɔŋ di lɛft say. Row dɛn de sɔpɔt bak modifya klas dɛn fɔ yunifom aplay kɔlɔm saiz ɛn gɔta klas dɛn fɔ chenj di spɛshal say we yu kɔntinyu fɔ de. -
Kɔlɔm dɛn kin rili chenj. 12 tɛmplat kɔlɔm dɛn de fɔ ɛni row, we de mek yu ebul fɔ mek difrɛn kɔmbaynshɔn dɛn fɔ ɛlimɛnt dɛn we de span ɛni nɔmba pan kɔlɔm dɛn. Kɔlɔm klas dɛn de sho di nɔmba fɔ di tɛmplat kɔlɔm dɛn fɔ span (ɛgz.,
col-4
span 4).width
s dεn set in pasεnshכn so yu כltεm gεt di sem rilitiv sayzin. -
Guta dɛn bak kin ansa ɛn dɛn kin kɔstɔmayz dɛn. Guta klas dɛn de akɔdin to ɔl di brekpoint dɛn, wit ɔl di sem saiz dɛn we wi margin ɛn padding spacing . Chenj ɔrizɔntal gɔta dɛn wit
.gx-*
klas, vertikal gɔta dɛn wit.gy-*
, ɔ ɔl di gɔta dɛn wit.g-*
klas dɛn..g-0
de bak fɔ pul di gɔta dɛn. -
Sass variebul, map, ɛn mixins pawa di grid. If yu nɔ want fɔ yuz di grid klas dɛn we dɛn dɔn prɛdifayn na Bootstrap, yu kin yuz wi grid in sɔs Sass fɔ mek yu yon wit mɔ sɛmantik mak. Wi inklud bak sɔm CSS kɔstɔm prɔpati dɛn fɔ kɔnsum dɛn Sass vɛriɔbul dɛn ya fɔ ivin big fleksibiliti fɔ yu.
Yu fɔ no di limiteshɔn ɛn di bɔg dɛn we de rawnd flexbox , lɛk di we aw yu nɔ ebul fɔ yuz sɔm HTML ɛlimɛnt dɛn as fleks kɔntena dɛn .
Grid opshɔn dɛn
Bootstrap in grid sistem kin adap akɔdin to ɔl di siks difɔlt brekpɔynt dɛn, ɛn ɛni brekpɔynt we yu kɔstɔmayz. Di siks difɔlt grid taya dɛn na dɛn wan ya:
- Ekstra smɔl (xs) .
- Smɔl (sm) .
- Midul (md) ɛn .
- Big big wan (lg) .
- Ekstra big (xl) .
- Ekstra ekstra big (xxl) .
As wi bin dɔn tɔk ɔp, ɛni wan pan dɛn brekpɔynt dɛn ya gɛt in yon kɔntena, in yon klas prɛfiks, ɛn modifya dɛn. Na so di grid de chenj akɔdin to dɛn brekpɔynt ya:
xs <576px na di pikchɔ |
sm ≥576px fɔ di pikchɔ |
md ≥768px fɔ di pikchɔ |
lg ≥992px fɔ di pikchɔ |
xl ≥1200px fɔ di pikchɔ |
xxl ≥1400px fɔ di pikchɔ |
|
---|---|---|---|---|---|---|
Kɔntinɛnt we dɛn kin put insaymax-width |
Nɔn nɔ de (ɔto) . | 540px na di pikchɔ | 720px na di pikchɔ | 960px na di pikchɔ | 1140px na di pikchɔ | 1320px na di pikchɔ |
Klas prɛfiks | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# fɔ kɔlɔm dɛn | 12 we de tɔk bɔt | |||||
Width fɔ di gɔta | 1.5rem (.75rem na lɛft ɛn rayt) | |||||
Kɔstɔm gɔta dɛn | Yɛs | |||||
Nestable fɔ di wan dɛn we de | Yɛs | |||||
Kɔlɔm fɔ ɔda | Yɛs |
Ɔto-layout kɔlɔm dɛn
Yutilayz brekpoint-spɛsifi k kɔlɔm klas fɔ izi kɔlɔm saiz we nɔ gɛt ɛksplisit nɔmba klas lɛk .col-sm-6
.
Ikual-width
Fɔ ɛgzampul, na tu grid layout dɛn ya we de aplay to ɛvri divays ɛn viupɔt, frɔm xs
to xxl
. Ad ɛni nɔmba fɔ klas dɛn we nɔ gɛt yunit fɔ ɛni brekpɔynt we yu nid ɛn ɛvri kɔlɔm go bi di sem wit.
<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>
Set wan kɔlɔm wit
Oto-layout fɔ flexbox grid kɔlɔm dɛn min bak se yu kin sɛt di wit fɔ wan kɔlɔm ɛn mek di brɔda ɛn sista dɛn kɔlɔm dɛn ɔtomɛtik chenj di sayz rawnd am. Yu kin yuz grid klas dɛn we dɛn dɔn difayn bifo tɛm (as dɛn sho dɔŋ ya), grid miksin dɛn, ɔ inlayn wit dɛn. Notis se di ɔda kɔlɔm dɛn go chenj di sayz ilɛksɛf di sɛnta kɔlɔm big.
<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 width kɔntinyu fɔ de
Yuz col-{breakpoint}-auto
klas fɔ saiz kɔlɔm dɛn bay di natura width fɔ dɛn kɔntinyu.
<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>
Klas dɛn we de ansa
Bootstrap in grid inklud siks taya dɛn fɔ prɛdifayn klas dɛn fɔ bil kɔmpleks rispɔnsiv layout dɛn. Kastamayz di sayz fɔ yu kɔlɔm dɛn pan ɛkstra smɔl, smɔl, midul, big, ɔ ɛkstra big divays dɛn aw yu si se i fayn.
Ɔl di brekpoint dɛn
Fɔ grid dɛn we na di sem frɔm di smɔl wan dɛn to di big wan dɛn, yuz di .col
ɛn .col-*
klas dɛn. Spɛsifikɛt wan klas we gɛt nɔmba we yu nid wan kɔlɔm we gɛt patikyula sayz; if nɔto dat, fil fri fɔ stik to .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>
Stak to ɔrizɔntal
Yuz wan singl set fɔ .col-sm-*
klas, yu kin mek wan besik grid sistem we de stat aut stak ɛn bi ɔrizɔntal na di smɔl brekpoint ( 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>
Miks ɛn mach
Yu nɔ want yu kɔlɔm dɛn fɔ jɔs stak insay sɔm grid taya dɛn? Yuz wan kɔmbaynshɔn fɔ difrɛn klas dɛn fɔ ɛni taya as nid de. Si di ɛgzampul we de dɔŋ fɔ no mɔ bɔt aw ɔltin de wok.
<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>
Row kɔlɔm dɛn
Yuz di .row-cols-*
klas dɛn we de ansa fɔ sɛt kwik kwik wan di nɔmba fɔ di kɔlɔm dɛn we go sho yu kɔntinyu ɛn layout fayn fayn wan. We nɔmal .col-*
klas dɛn de aplay to di wan wan kɔlɔm dɛn (ɛgz., .col-md-4
), di rɔw kɔlɔm dɛn klas dɛn de sɛt pan di mama ɛn papa .row
as sɔtkat. Wit .row-cols-auto
yu kin giv di kolm dem dia natural width.
Yuz dɛn row kɔlɔm klas dɛn ya fɔ mek di bɛsis grid layout dɛn kwik kwik wan ɔ fɔ kɔntrol yu kad layout dɛn.
<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>
Yu kin yuz di Sass mixin we de wit am bak, 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);
}
}
Fɔ mek dɛn nɛst
Fɔ nest yu kɔntinyu wit di difɔlt grid, ad nyu .row
ɛn sɛt fɔ .col-sm-*
kɔlɔm dɛn insay wan .col-sm-*
kɔlɔm we dɔn de. Di rɔw dɛn we dɛn dɔn nɛst fɔ gɛt wan sɛt fɔ kɔlɔm dɛn we ad to 12 ɔ smɔl pas dat (i nɔ nid fɔ mek yu yuz ɔl di 12 kɔlɔm dɛn we de).
<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 we bin de
We yu de yuz Bootstrap in sɔs Sass fayl dɛn, yu gɛt di opshɔn fɔ yuz Sass vɛriɔbul ɛn miksin dɛn fɔ mek kɔstɔm, sɛmantik, ɛn rispɔnsiv pej layout dɛn. Wi prɛdifayn grid klas dɛn de yuz dɛn sem vɛriɔbul ɛn miksin dɛn ya fɔ gi wan ol suit fɔ rɛdi-to-yuz klas dɛn fɔ fast rispɔnsiv layout dɛn.
Di tin dɛn we kin chenj
Variables ɛn map dɛn de sho di nɔmba fɔ di kɔlɔm dɛn, di gɔta wit, ɛn di midia kwɛstyɔn pɔynt usay fɔ bigin fɔ flɔt kɔlɔm dɛn. Wi de yuz dɛn wan ya fɔ jenarayz di prɛdifayn grid klas dɛn we dɛn dɔn dɔkyumɛnt ɔp, ɛn bak fɔ di kɔstɔm miksin dɛn we de dɔŋ ya.
$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
);
Mixin dɛn
Mixins de yuz in kɔnjɔkt wit di grid vɛriɔbul dɛn fɔ jenarayz sɛmantik CSS fɔ wan wan grid kɔlɔm dɛn.
// 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);
Ɛgzampul aw fɔ yuz am
Yu kin chenj di vɛriɔbul dɛn to yu yon kɔstɔm valyu dɛn, ɔ jɔs yuz di miksin dɛn wit dɛn difɔlt valyu dɛn. Na dis na ɛgzampul fɔ yuz di difɔlt sɛtin dɛn fɔ mek tu-kɔlɔm layout wit gap bitwin.
.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>
Fɔ kɔstɔmayt di grid
Yuz wi bilt-in grid Sass vɛriɔbul ɛn map dɛn, i pɔsibul fɔ kɔmplit wan kɔstɔmayz di grid klas dɛn we dɛn dɔn prɛdifayn. Chenj di nɔmba fɔ di taya dɛn, di midia kwɛstyɔn dimɛnshɔn dɛn, ɛn di kɔntena wit dɛn—dɛn yu fɔ kɔmpila am bak.
Kɔlɔm ɛn gɔta dɛn
Di nɔmba fɔ di grid kɔlɔm dɛn kin chenj via Sass vɛriɔbul dɛn. $grid-columns
na in de yuz fɔ jenarayz di wit (insay pasɛnt) fɔ ɛni wan wan kɔlɔm we i de $grid-gutter-width
sɛt di wit fɔ di kɔlɔm gɔta dɛn.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Grid taya dɛn
We yu de muf pas di kɔlɔm dɛnsɛf, yu kin kɔstɔmayt bak di nɔmba fɔ di grid taya dɛn. If yu bin want jɔs 4 grid taya, yu go ɔpdet di $grid-breakpoints
ɛn $container-max-widths
to sɔntin lɛk dis:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
We yu de mek ɛni chenj to di Sass vɛriɔbul ɔ map dɛn, yu go nid fɔ kip yu chenj dɛn ɛn kɔmpilayt bak. If yu du dat, i go autput wan brand nyu sɛt fɔ pridifayn grid klas fɔ kɔlɔm wit, ɔfset, ɛn ɔda. Rispɔnsiv visibiliti yutiliti dɛn go ɔpdet bak fɔ yuz di kɔstɔm brekpɔynt dɛn. Mek shɔ se yu sɛt grid valyu dɛn na px
(nɔto rem
, em
, ɔ %
).