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, fayv 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.
Aw i de wok
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 wan dip luk pan aw di grid kam togɛda.
Nyu to ɔ nɔ sabi flexbox? Rid dis CSS Tricks flexbox gayd fɔ bakgrɔn, tɛminɔlɔji, gaydlayn, ɛn kɔd snipɛt dɛn.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Di ɛgzampul we de ɔp de mek tri ikwal-wid kɔlɔm dɛn pan smɔl, midul, big, ɛn ɛkstra big divays dɛn we de yuz wi grid klas dɛn we wi dɔn disayd fɔ du. Dɛn kɔlɔm dɛn de de na di sɛntrɔm na di pej wit di mama ɔ papa .container
.
We yu brok am dɔŋ, na so i de wok:
- Kɔntena dɛn de gi wan we fɔ sɛnt ɛn ɔrizɔntal pad di tin dɛn we de insay yu sayt. Yuz
.container
fɔ wan piksɛl wid we de ansa ɔ.container-fluid
fɔwidth: 100%
akɔdin to ɔl di viupɔt ɛn divays saiz dɛn. - 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 pan di row dɛn we gɛt nɛgitiv margin. Dis we ya, ɔl di tin dɛn we de insay yu kɔlɔm dɛn de alaynɛd wit yu si dɔŋ di lɛft say. - Insay grid layout, kɔntinyu fɔ de insay kɔlɔm ɛn na kɔlɔm nɔmɔ kin bi pikin dɛn fɔ row dɛn wantɛm wantɛm.
- Tɛnki fɔ flexbox, grid kɔlɔm dɛn we nɔ gɛt wan spɛsifikɛd
width
go ɔtomɛtik layout as ikwal wit kɔlɔm dɛn. Fɔ ɛgzampul, 4 instans dɛn fɔ.col-sm
go ɔtomɛtik wan 25% waid frɔm di smɔl brekpɔynt ɛn ɔp. Si di ɔto-layout kɔlɔm dɛn sɛkshɔn fɔ no mɔ ɛgzampul dɛn. - Kɔlɔm klas dɛn de sho di nɔmba fɔ di kɔlɔm dɛn we yu go want fɔ yuz pan di 12 we pɔsibul fɔ ɛni row. So, if yu want tri kɔlɔm dɛn we gɛt ikwal-wid akɔdin, yu kin yuz
.col-4
. - Kɔlɔm
width
s dɛn sɛt insay pasɛnt, so dɛn kin ɔltɛm fluid ɛn saiz rilitiv to dɛn mama ɛn papa ɛlimɛnt. - Kɔlɔm dɛn gɛt ɔrizɔntal
padding
fɔ mek di gɔta dɛn bitwin wan wan kɔlɔm dɛn, bɔt, yu kin pul dimargin
frɔm rɔw dɛn ɛnpadding
frɔm kɔlɔm dɛn wit.no-gutters
pan di.row
. - Fɔ mek di grid ansa, fayv grid brek pɔynt dɛn de, wan fɔ ɛni brek pɔynt we de ansa : ɔl di brek pɔynt dɛn (ɛkstra smɔl), smɔl, midul, big, ɛn ɛkstra big.
- Grid brekpoint dɛn de bays pan minim width midia kwɛstyɔn dɛn, we min se dɛn de aplay to da wan brekpoint de ɛn ɔl di wan dɛn we de ɔp am (ɛgz., i
.col-sm-4
de aplay to smɔl, midul, big, ɛn ɛkstra big divays dɛn, bɔt nɔto di fɔsxs
brekpoint). - Yu kin yuz prɛdifayn grid klas dɛn (lɛk
.col-4
) ɔ Sass miksin fɔ mɔ sɛmantik mak.
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
Wail Bootstrap de yuz em
s ɔ rem
s fɔ difayn mɔs saiz dɛn, px
dɛn de yuz s fɔ grid brekpɔynt ɛn kɔntena wit. Dis na bikɔs di viupɔt wit na piksɛl ɛn i nɔ de chenj wit di font saiz .
Si aw aspek dɛn fɔ di Bootstrap grid sistem de wok akɔdin to bɔku divays dɛn wit wan tebul we izi fɔ yuz.
Ekstra smɔl <576px |
Smɔl ≥576px |
Midul ≥768px fɔ di wan dɛn we de |
Big big ≥992px |
Ekstra big ≥1200px |
|
---|---|---|---|---|---|
Maks kontena wit | Nɔn nɔ de (ɔto) . | 540px na di pikchɔ | 720px na di pikchɔ | 960px na di pikchɔ | 1140px na di pikchɔ |
Klas prɛfiks | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# fɔ kɔlɔm dɛn | 12 we de tɔk bɔt | ||||
Width fɔ di gɔta | 30px (15px na ɛni say na wan kɔlɔm) | ||||
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 xl
. 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>
Ikual-width multi-layn
Krio kɔlɔm dɛn we gɛt ikwal-wid we de span bɔku layn dɛn bay we yu put wan .w-100
usay yu want di kɔlɔm dɛn fɔ brok to nyu layn. Mek di brek dɛn rispɔnsiv bay we yu miks .w-100
wit sɔm rispɔnsiv displei yutiliti dɛn .
Wan Safari flexbox bɔg bin de we bin de mek dis nɔ wok witout wan klia flex-basis
ɔ border
. Wokarawnd dɛn de fɔ ol brawza vɛshɔn dɛn, bɔt dɛn nɔ fɔ nid if yu target brawza dɛn nɔ fɔdɔm insay di bɔg vɛshɔn dɛn.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</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 fayv 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 tay 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>
Gɔta dɛn
Gutters kin rispɔnsivli ajɔst bay brekpɔynt-spɛsifi k padding ɛn nɛgitiv margin yutiliti klas dɛn. Fɔ chenj di gɔta dɛn na wan givɛn row, pe wan nɛgitiv margin yutiliti na di .row
ɛn maching padding yutiliti dɛn na di .col
s. Di .container
ɔ mama ɔ .container-fluid
papa kin nid fɔ ajɔst bak fɔ avɔyd ɔvaflɔ we yu nɔ want, yuz bak matching padding utility.
Na wan ɛgzampul fɔ kɔstɔmayz di Bootstrap grid na di big ( lg
) brekpoint ɛn ɔp. Wi dɔn inkrisayz di .col
padding wit .px-lg-5
, kɔntrakt dat wit .mx-lg-n5
pan di mama ɛn papa .row
ɛn afta dat wi ajɔst di .container
wrap wit .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</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 row kɔlɔm dɛn klas dɛn de sɛt pan di mama ɛn papa .row
as sɔtkat.
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-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);
}
}
Alignmɛnt fɔ di wan dɛn we de
Yuz fleksbɔks alaynɛshɔn yutiliti fɔ alaynɛt kɔlɔm dɛn vertikal ɛn ɔrizɔntal wan. Internet Explorer 10-11 nɔ de sɔpɔt vertikal alaynɛshɔn fɔ fleks tin dɛn we di fleks kɔntena gɛt wan min-height
lɛk aw dɛn sho dɔŋ ya. Si Flexbugs #3 fɔ no mɔ bɔt dis.
Vɛtikal alaynɛshɔn
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Ɔrizɔntal alaynɛshɔn
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Nɔ gɛt gɔta dɛn
Di gɔta dɛn bitwin kɔlɔm dɛn na wi grid klas dɛn we wi dɔn disayd fɔ du, yu kin pul am wit .no-gutters
. Dis de pul di negatif margin
s frכm .row
εn di כrizכnal padding
frכm כl di imεdiεt pikin kכlכm dεm.
Na di sɔs kɔd fɔ mek dɛn stayl ya. Notis se di kɔlɔm ɔvarayd dɛn de skɔp to di fɔs pikin kɔlɔm dɛn nɔmɔ ɛn dɛn de tɔch dɛn bay atribyut sɛlɛktɔ . Pan ɔl we dis de mek wan mɔ spɛshal sɛlɛktɔ, dɛn kin stil kɔstɔmayz kɔlɔm pad mɔ wit spɛshal yutiliti dɛn .
Nid wan ed-to-ed dizayn? Drɔp di mama ɔ papa .container
ɔ .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
In praktis, na so i luk. Notis se yu kin kɔntinyu fɔ yuz dis wit ɔl di ɔda grid klas dɛn we dɛn dɔn pridifayn (inklud di kɔlɔm dɛn wit, di taya dɛn we de ansa, di ɔda tin dɛn we dɛn dɔn ɔda, ɛn ɔda tin dɛn).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Kɔlɔm fɔ rap
If dɛn put pas 12 kɔlɔm dɛn insay wan row, ɛni grup we gɛt ɛkstra kɔlɔm dɛn go, as wan yunit, rap pan nyu layn.
Sins 9 + 4 = 13 > 12, dis 4-kכlכm-wayd div de gεt rap pan nyu layn as wan kכntigyu yunit.
Di kɔlɔm dɛn we de kam afta dat kɔntinyu fɔ de along di nyu layn.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Kɔlɔm dɛn de brok
Fɔ brok kɔlɔm dɛn to nyu layn na fleksbɔks nid fɔ gɛt smɔl hack: ad wan ɛlimɛnt wit width: 100%
ɛnisay we yu want fɔ rap yu kɔlɔm dɛn to nyu layn. Nɔmal wan dis kin akɔmplit wit bɔku .row
s, bɔt nɔto ɔl implimɛnt mɛtɔd kin akɔn fɔ dis.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Yu kin yuz dis brek bak na sɔm patikyula brekpoint dɛn wit wi rispɔnsiv displei yutiliti dɛn .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Fɔ ɔda tin dɛn bak
Ɔda klas dɛn
Yuz .order-
klas fɔ kɔntrol di we aw yu de si di tin dɛn we de insay. Dɛn klas ya de ansa, so yu kin sɛt di order
bay brekpɔynt (ɛgz., .order-1.order-md-2
). Inklud sɔpɔt fɔ 1
tru 12
akɔdin to ɔl di fayv grid taya dɛn.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
I gɛt bak rispɔnsiv .order-first
ɛn .order-last
klas dɛn we de chenj di order
ɔf wan ɛlimɛnt bay we dɛn de aplay order: -1
ɛn order: 13
( order: $columns + 1
), rispɛktvɔli. Dɛn klas ya kin miks bak wit di .order-*
klas dɛn we gɛt nɔmba as nid de.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Fɔ ɔfset kɔlɔm dɛn
Yu kin ɔfset grid kɔlɔm dɛn tu we dɛn: wi .offset-
grid klas dɛn we de ansa ɛn wi margin yutiliti dɛn . Grid klas dɛn gɛt saiz fɔ mek dɛn mach kɔlɔm dɛn we di margin dɛn kin yus mɔ fɔ kwik layout usay di wit fɔ di ɔfset kin chenj.
Ɔfset klas dɛn
Muv kɔlɔm dɛn to di rayt say yuz .offset-md-*
klas dɛn. Dɛn klas ya kin mek di lɛft say na wan kɔlɔm bɔku bay *
kɔlɔm dɛn. Fɔ ɛgzampul, .offset-md-4
i de muv .col-md-4
oba 4 kɔlɔm dɛn.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Apat frɔm di kɔlɔm klia na di rispɔnsiv brekpɔynt dɛn, yu kin nid fɔ riset ɔfset dɛn. Si dis in akshɔn na di grid ɛgzampul .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Margin yutiliti dɛn
Wit di muv to flexbox in v4, yu kin yuz margin utilities laik .mr-auto
fo fos sibling kolm away from wan anoda.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
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-9">
Level 1: .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 miksin dɛn
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: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
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();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@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 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: 30px !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
, ɔ %
).