Empagi
Yiga engeri y’okukyusaamu empagi n’enkola entonotono ez’okulaganya, okulagira, n’okukyusakyusa olw’enkola yaffe eya flexbox grid. Plus, laba engeri y'okukozesaamu column classes okuddukanya obugazi bw'ebintu ebitali bya grid.
Engeri gye zikolamu
-
Ennyiriri zizimba ku nsengeka ya flexbox eya grid. Flexbox kitegeeza nti tulina eby'okulonda okukyusa empagi ssekinnoomu n'okukyusa ebibinja by'ennyiriri ku ddaala ly'ennyiriri . Ggwe olondawo engeri empagi gye zikulamu, gye zikendeeramu oba engeri endala gye zikyukamu.
-
Nga ozimba ensengeka za grid, ebirimu byonna bigenda mu mpagi. Ensengeka ya Bootstrap's grid egenda okuva ku container okudda ku row okudda ku column okutuuka ku content yo. Ku mirundi egitatera kubaawo, oyinza okugatta ebirimu n’ennyiriri, naye kimanye nti wayinza okubaawo ebivaamu ebitali bigenderere.
-
Bootstrap erimu kiraasi ezitegekeddwa edda okukola ensengeka ez’amangu, eziddamu. Nga tulina ebifo mukaaga eby’okumenya n’ennyiriri kkumi ku buli mutendera gwa giridi, tulina amakumi ga kiraasi ezaazimbibwa dda okukola ensengeka z’oyagala. Kino osobola okukilemesa ng'oyita mu Sass bw'oba oyagala.
Okukwatagana
Kozesa ebikozesebwa mu kulaganya kwa flexbox okulaga empagi mu vertikal ne horizontal.
Okulaganya okw’okwesimbye
<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>
Okulaganya okw’okwebungulula
<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>
Okuzinga empagi
Singa empagi ezisukka mu 12 ziteekebwa mu lunyiriri lumu, buli kibinja ky’ennyiriri ez’enjawulo kijja, nga yuniti emu, okuzinga ku layini empya.
Okuva 9 + 4 = 13 > 12, div eno eya 4-column-wide efuna okuzingibwa ku layini empya nga yuniti emu ekwatagana.
Ennyiriri eziddako zigenda mu maaso ku layini empya.
<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>
Empagi emenya
Okumenya empagi ku layini empya mu flexbox kyetaagisa hack entono: yongera ku elementi ne width: 100%
wonna w’oyagala okuzinga empagi zo ku layini empya. Mu budde obwabulijjo kino kituukirira ne .row
s eziwera, naye si buli nkola y’okussa mu nkola nti esobola okubala kino.
<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>
Oyinza n'okukozesa okuwummulamu kuno ku bifo ebitongole eby'okuwummulamu n'ebikozesebwa byaffe eby'okulaga ebiddamu .
<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>
Okuddamu okulagira
Lagira emisomo gy’okusoma
Kozesa .order-
kiraasi okufuga ensengeka y’ebirabika eby’ebirimu byo. Ebika bino biddamu, kale osobola okuteekawo order
by breakpoint (okugeza, .order-1.order-md-2
). Mulimu obuwagizi 1
okuyita 5
mu mitendera gyonna omukaaga egya grid.
<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>
Waliwo ne responsive .order-first
ne .order-last
classes ezikyusa the order
of an element nga zikozesa order: -1
ne order: 6
, respectively. Ebisulo bino nabyo bisobola okutabula ne .order-*
kiraasi eziriko ennamba nga bwe kyetaagisa.
<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>
Okukyusakyusa empagi
Osobola okukyusakyusa empagi za giridi mu ngeri bbiri: kiraasi zaffe eza .offset-
giridi eziddamu n’ebikozesebwa byaffe eby’oku mabbali . Grid classes ziweebwa sayizi okukwatagana ne columns ate margins zisinga kuba za mugaso ku layouts ez’amangu nga obugazi bwa offset bukyukakyuka.
Ebisulo bya Offset
Tambuza ennyiriri ku ddyo ng’okozesa .offset-md-*
kiraasi. Ebika bino byongera ku mabbali ga kkono ag’ennyiriri ku *
mpagi. Okugeza, .offset-md-4
etambula .col-md-4
ku mpagi nnya.
<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>
Ng’oggyeeko okulongoosa empagi ku bifo eby’okumenya ebiddamu, oyinza okwetaaga okuddamu okuteekawo offsets. Kino laba mu bikolwa mu kyokulabirako kya 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>
Ebikozesebwa mu kukola margin
Nga ogenda ku flexbox mu v4, osobola okukozesa margin utilities nga .me-auto
okukaka sibling columns okuva ku ndala.
<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>
Ebisulo by’emiko egy’okwetongola
Ebika .col-*
era bisobola okukozesebwa ebweru wa a .row
okuwa ekintu obugazi obw’enjawulo. Buli kiraasi z’ennyiriri lwe zikozesebwa nga abaana abatali butereevu ab’olunyiriri, paddings zirekebwawo.
<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>
Ebika bisobola okukozesebwa wamu n’ebikozesebwa okukola ebifaananyi ebitengejja ebiddamu. Kakasa nti ozinga ebirimu mu .clearfix
kizinga okulongoosa ekiwujjo singa ekiwandiiko kiba kimpi.
Akatundu k’ebiwandiiko ebiteekebwamu ekifo. Tukikozesa wano okulaga enkozesa ya kiraasi ya clearfix. Tugattako ebigambo ebitonotono ebitaliimu makulu wano okulaga engeri empagi gye zikwataganamu wano n’ekifaananyi ekitengejja.
Nga bw’olaba ennyiriri zizingira mu ngeri ey’ekitiibwa ekifaananyi ekitengejja. Kati teebereza engeri kino gye kyandirabise n’ebimu ebituufu ebirimu wano, okusinga kino kyokka ekiboola ekifo ekiwandiiko ekigenda mu maaso n’okugenda mu maaso, naye mu butuufu tekituusa tewali mawulire gakwata ku. Kimala kutwala kifo era mu butuufu tekisaanye kusoma.
Era naye, wuuno, ng’okyagumiikiriza mu kusoma ekiwandiiko kino eky’ekifo, ng’osuubira okutegeera okulala, oba eggi lya paasika eryakwekebwa ery’ebirimu. Ekisesa, mpozzi. Ebyembi, wano tewali ku ebyo.
<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>