Dagiti Kolumna
Ammuem no kasano ti mangbalbaliw kadagiti adigi babaen ti sumagmamano a pagpilian para iti panagtunos, panagurnos, ken panag-offset gapu iti sistemami a flexbox grid. Plus, kitaen no kasano ti agusar kadagiti klase ti adigi tapno mangituray kadagiti kalawa dagiti saan a grid nga elemento.
No kasano ti panagtrabahoda
-
Dagiti adigi ket mangbangon iti arkitektura ti flexbox ti grid. Ti Flexbox ket kayatna a sawen nga addaantayo kadagiti pagpilian para iti panagbalbaliw kadagiti indibidual a kolum ken panangbalbaliw kadagiti grupo dagiti kolum iti lebel ti hilera . Piliem no kasano a dumakkel, bumassit, wenno iti sabali a pamay-an agbaliw dagiti adigi.
-
No mangbangon kadagiti layout ti grid, amin a linaon ket mapan kadagiti adigi. Ti hirarkia ti grid ti Bootstrap ket mapan manipud iti pagkargaan aginggana iti hilera aginggana iti kolum aginggana iti linaonmo. Iti manmano nga okasion, mabalinmo a pagtiponen ti linaon ken kolum, ngem ammom a mabalin nga adda dagiti di nairanta a pagbanagan.
-
Ti Bootstrap ket mangiraman kadagiti nasakbay a naikeddeng a klase para iti panagpartuat kadagiti napardas, makasungbat a layout. Iti innem a breakpoint ken maysa a dosena a kolum iti tunggal maysa a grid tier, addaankami kadagiti pinulpullo a klase a naibangon para kenka tapno mangpartuat kadagiti kayatmo a layout. Mabalin a baldado daytoy babaen ti Sass no kayatmo.
Panagtunos
Usaren dagiti flexbox alignment utilities tapno bertikal ken horizontal a mangitunos kadagiti adigi.
Bertikal a panagtunos
<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>
Paisaad a panagtunos
<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>
Panagbalkot iti adigi
No nasurok a 12 nga adigi ti naikabil iti uneg ti maymaysa a linia, tunggal grupo dagiti ekstra nga adigi ket, kas maysa a yunit, agbalkot iti baro a linia.
Gapu ta 9 + 4 = 13 > 12, daytoy nga 4-kolum-a-kalawa a div ket makagun-od ti nabalkot iti baro a linia a kas maysa nga agsasaruno a yunit.
Agtultuloy dagiti sumaganad a kolum iti baro a linia.
<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>
Agburak ti adigi
Ti panangburak kadagiti adigi iti baro a linia iti flexbox ket agkasapulan ti bassit a hack: manginayon ti maysa nga elemento nga addaan width: 100%
sadinoman a kayatmo a baluten dagiti adigim iti baro a linia. Gagangay daytoy ket maibanag babaen ti adu nga .row
s, ngem saan a tunggal maysa a pamay-an ti pannakaipatungpal ket mabalin a mangibaga iti daytoy.
<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>
Mabalinmo pay nga iyaplikar daytoy a break kadagiti espesipiko a breakpoint babaen dagiti responsive display utilities mi .
<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>
Panagurnos manen
Ag-order kadagiti klase
Usaren .order-
dagiti klase para iti panangkontrol iti makita nga urnos ti linaonmo. Dagitoy a klase ket makasungbat, isu a mabalinmo nga ikeddeng ti order
babaen ti breakpoint (kas pagarigan, .order-1.order-md-2
). Iramanna ti suporta para iti 1
babaen 5
iti ballasiw ti amin nga innem a grid tiers.
<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>
Adda pay dagiti responsive .order-first
ken .order-last
dagiti klase a mangbalbaliw ti order
ti maysa nga elemento babaen ti panangipakat order: -1
ken order: 6
, a nagsasaruno. Mabalin met a mailaok dagitoy a klase kadagiti nanumeroan .order-*
a klase no kasapulan.
<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>
Panang-offset kadagiti kolum
Mabalinmo nga i-offset dagiti kolum ti grid iti dua a wagas: dagiti sumungbat .offset-
a klasemi ti grid ken dagiti utilidad ti marginmi . Dagiti klase ti grid ket nadakkel tapno maipada kadagiti adigi bayat a dagiti pingir ket ad-adda a makatulong para kadagiti napardas a layout a sadiay ti kalawa ti offset ket agdumaduma.
Dagiti klase ti offset
Iyakar dagiti kolum iti kannawan babaen ti panagusar kadagiti .offset-md-*
klase. Dagitoy a klase ket paaduenda ti kannigid a pingir ti maysa a kolum babaen dagiti *
adigi. Kas pagarigan, .offset-md-4
aggaraw .col-md-4
iti rabaw ti uppat a kolum.
<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>
Malaksid ti panagikkat ti kolum kadagiti sumungbat a breakpoint, mabalin a kasapulam nga i-reset dagiti offset. Kitaen daytoy nga agtigtignay iti pagarigan ti 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>
Dagiti utilidad ti margin
Iti panagakar iti flexbox iti v4, mabalinmo nga usaren dagiti margin utilities a kas .me-auto
ti panangpilit kadagiti kakabsat a kolum nga umadayo iti maysa ken maysa.
<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>
Agmaymaysa a klase ti kolum
Dagiti .col-*
klase ket mabalin pay a mausar iti ruar ti a .row
tapno mangted ti maysa nga elemento ti espesipiko a kalawa. Tunggal dagiti klase ti adigi ket maus-usar a kas dagiti saan a direkta nga annak ti maysa a hilera, dagiti padding ket mailaksid.
<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>
Dagiti klase ket mabalin a mausar a maikuyog kadagiti utilidad tapno mangpartuat kadagiti makasungbat a naitayab a ladawan. Siguraduen a baluten ti linaonna iti .clearfix
balkot tapno maikkat ti float no ab-ababa ti teksto.
Maysa a parapo ti teksto ti placeholder. Us-usarenmi daytoy ditoy tapno maipakita ti panagusar ti klase ti clearfix. Manginayonkami kadagiti medyo sumagmamano nga awan kaipapanan a ragup ti sasao ditoy tapno maipakita no kasano a makilanglangen dagiti adigi ditoy iti naitayab a ladawan.
Kas makitayo dagiti parapo a siaayat a mangbalkot iti naitayab a ladawan. Ita panunotem no kasano a daytoy ket agparang koma nga addaan iti sumagmamano nga aktual a linaon ditoy, imbes a daytoy laeng a makauma a teksto ti placeholder nga agtultuloy ken agtultuloy, ngem aktual a mangipakaammo iti awan a makita nga impormasion iti. Basta mangala dayta iti espasio ken saan koma a talaga a basaen.
Ket kaskasdi, adtoyka, nga agtultuloy pay laeng a mangbasa iti daytoy a teksto ti placeholder, a mangnamnama iti sumagmamano pay a pannakaawat, wenno sumagmamano a nailemmeng nga itlog ti paskua ti linaon. Maysa nga angaw, nalabit. Daksanggasat ta awan kadagita ditoy.
<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>