Inkingi
Wige uburyo bwo guhindura inkingi hamwe nintoki zamahitamo yo guhuza, gutumiza, no guhagarika dukesha sisitemu ya flexbox grid sisitemu. Byongeye, reba uburyo wakoresha ibyiciro byinkingi kugirango ucunge ubugari bwibintu bitari grid.
Uburyo bakora
-
Inkingi zubaka kuri gride ya flexbox yububiko. Flexbox isobanura ko dufite amahitamo yo guhindura inkingi kugiti cye no guhindura amatsinda yinkingi kurwego . Hitamo uburyo inkingi zikura, kugabanuka, cyangwa guhinduka.
-
Iyo wubaka imiterere ya gride, ibirimo byose bijya murinkingi. Inzego za gride ya Bootstrap iva mubintu kugeza kumurongo kugeza kumurongo kubintu byawe. Mubihe bidasanzwe, urashobora guhuza ibirimo ninkingi, ariko umenye ko hashobora kubaho ingaruka zitateganijwe.
-
Bootstrap ikubiyemo ibyiciro byateganijwe mbere yo gukora imiterere yihuse. Hamwe nibice bitandatu hamwe ninkingi icumi kuri buri cyiciro cya grid, dufite ibyiciro byinshi byamasomo bimaze kubakwa kugirango ukore imiterere wifuza. Ibi birashobora guhagarikwa ukoresheje Sass niba ubishaka.
Guhuza
Koresha flexbox ihuza ibikorwa kugirango uhagarike kandi utambitse.
Guhuza neza
<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>
Guhuza utambitse
<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 class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Gupfunyika inkingi
Niba inkingi zirenga 12 zishyizwe mumurongo umwe, buri tsinda ryinyongera zinkingi, nkigice kimwe, zizingira kumurongo mushya.
Kuva 9 + 4 = 13> 12, iyi 4-inkingi-ubugari ya div irazenguruka kumurongo mushya nkigice kimwe gihuza.
Inkingi zikurikira zirakomeza kumurongo mushya.
<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>
Ikiruhuko
Kumena inkingi kumurongo mushya muri flexbox bisaba hack ntoya: ongeramo ikintu hamwe width: 100%
aho ushaka hose kuzinga inkingi kumurongo mushya. Mubisanzwe ibi birangizwa na .row
s nyinshi, ariko ntabwo uburyo bwose bwo kubishyira mubikorwa bushobora kubara ibi.
<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>
Urashobora kandi gushira kuruhuka kumwanya wihariye hamwe nibikorwa byacu byerekana neza .
<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>
Kwandika
Tegeka amasomo
Koresha .order-
amasomo yo kugenzura gahunda igaragara yibirimo. Aya masomo arasubiza, urashobora rero gushiraho kumurongo order
(urugero, .order-1.order-md-2
). Harimo inkunga yo 1
kunyura 5
muri gride zose uko ari esheshatu.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Hariho kandi ibisubizo .order-first
byamasomo .order-last
bihindura ihinduka order
ryikintu ukoresheje order: -1
kandi order: 6
, kimwe. Aya masomo arashobora kandi kuvangwa nibyiciro byateganijwe .order-*
nkuko bikenewe.
<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>
Kureka inkingi
Urashobora guhagarika grid inkingi muburyo bubiri: .offset-
ibyiciro bya gride byitabira hamwe nibikorwa byacu bya margin . Urwego rwa gride rufite ubunini bwo guhuza inkingi mugihe marge aringirakamaro cyane muburyo bwihuse aho ubugari bwa offset burahinduka.
Kureka amasomo
Himura inkingi iburyo ukoresheje .offset-md-*
amasomo. Aya masomo yongerera ibumoso bwinkingi *
yinkingi. Kurugero, .offset-md-4
yimuka .col-md-4
hejuru yinkingi enye.
<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>
Usibye gusiba inkingi kumurongo wogusubiza, urashobora gukenera gusubiramo offsets. Reba ibi mubikorwa murugero rwa grid .
<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>
Amafaranga yingirakamaro
Hamwe no kwimuka kuri flexbox muri v4, urashobora gukoresha margin yingirakamaro nko .me-auto
guhatira abavandimwe inkingi kure yundi.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Ibyiciro byinkingi
Amasomo .col-*
arashobora kandi gukoreshwa hanze a .row
kugirango atange ikintu ubugari bwihariye. Igihe cyose amasomo yinkingi akoreshwa nkabana batayobora umurongo, padi zirekuwe.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
Amasomo arashobora gukoreshwa hamwe nibikorwa byogukora amashusho areremba. Witondere kuzinga ibirimo .clearfix
mubipfunyika kugirango usibe ikireremba niba inyandiko ari ngufi.
Igika cyinyandiko yumwanya. Turimo kuyikoresha hano kugirango twerekane ikoreshwa ryurwego rusobanutse. Twongeyeho interuro zitari zifite ubusobanuro hano kugirango twerekane uburyo inkingi zikorana hano hamwe nishusho ireremba.
Nkuko ushobora kubona paragarafu uzenguruke neza ishusho ireremba. Noneho tekereza uburyo ibi byasa nibirimo bifatika hano, aho kuba gusa iyi nyandiko irambiranye umwanya uhoraho ukomeza, ariko mubyukuri nta makuru afatika kuri. Ifata umwanya gusa kandi ntigomba gusomwa rwose.
Kandi ,, hano, uracyafite kwihangana mugusoma iyi nyandiko yumwanya, wizeye kubindi bisobanuro, cyangwa amagi ya pasika yihishe yibirimo. Urwenya, birashoboka. Kubwamahirwe, nta na kimwe muri ibyo hano.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>