Columnas
Yachay imayna columnakuna tikrayta huk makilla akllanakunawan chiqanchaypaq, kamachiypaq chaymanta offset kaqpaq flexbox rejilla sistemaykuman gracias nispa. Astawan, qhaway imayna columna clasekuna llamk'achiyta mana rejilla elementokuna anchokunata kamachinapaq.
Imayna llamkanku
-
Columnakuna rejillapa flexbox arquitectura nisqapi ruwanku. Flexbox niyta munan akllanakunayuq kayku sapalla sapaq sapaqchasqakuna tikraypaq chaymanta sapaq huñukuna tikraypaq fila patapi . Akllanki imaynatas columnakuna wiñanku, pisiyanku otaq huk hina cambianku chayta.
-
Rejilla churanakunata ruwaspaqa, llapa contenido columnakunapi rin. Bootstrap kaqpa rejillanpa jerarquía kaqnin huk waqaychanamanta huk filaman huk columnaman contenidoykiman rin . Mana ancha rikusqa kutikunapi, contenidota chaymanta columnata hukllawaq, ichaqa yachay mana munasqa consecuenciakuna kanman.
-
Bootstrap ñawpaqmanta riqsisqa clasekuna usqay, kutichiq churanakuna ruwanapaq kachkan. Suqta pakikunayuq chaymanta chunka iskayniyuq columnakuna sapa rejilla pata kaqpi, chunkakuna clasekuna ruwasqaña kayku munasqayki churanakuna ruwanaykipaq. Kayqa Sass kaqnintakama mana llamk'achiy atikunman sichus munanki.
Alineación
Flexbox chiqanchay yanapakuykunata llamk'achiy sayaqmanta, sayaqmanta columnakunata chiqanchanaykipaq.
Alineación vertical nisqa
<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>
Alineación horizontal nisqa
<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>
Columna envoltura
Sichus huk sapaq sapaqchasqa 12 aswan sapaqchasqakuna churasqa kanqa, sapa huñu yapasqa sapaqchasqakuna, huk unidad hina, musuq chiruman p'istunqa.
9 + 4 = 13 > 12 kaqmanta, kay 4 columna-ancho div musuq chiruman huk unidad contigua hina p’istuykusqa tarikun.
Qhipa kaq columnakuna musuq chiruwan purichkan.
<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>
Columna pakikuna
Flexbox kaqpi musuq chiruman columnakunata pakiyqa huk uchuy hack nisqatam munan: huk elementota yapay width: 100%
maypipas columnakunayki musuq chiruman p'istuykuyta munanki chaywan. Normalmente kayqa achka .row
s kaqwan ruwakun, ichaqa mana sapa implementación métodochu kayta cuentata quyta atin.
<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>
Hinallataq kay samayta wakin p'akiykunapi ruwayta atikunki kutichiq qhaway yanapakuyniykuwan .
<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>
Wakmanta kamachiy
Clases nisqakunata kamachiy
.order-
Clases llamk'achiy contenidoykipa rikuy ordenninta kamachinapaq . Kay clasekuna kutichiq kanku, chayrayku chay by breakpoint churayta atikunki order
(kayhina, .order-1.order-md-2
). Suqtantin rejilla patakunapi a través 1
nisqapaq yanapakuyta churan .5
<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>
También hay responsivos .order-first
y .order-last
clases que cambian el order
de un elemento aplicando order: -1
y order: 6
, respectivamente. .order-*
Kay clasekunatapas necesitasqanman hinam yupasqa clasekunawanpas chaqrusqa kanman .
<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>
Columnas nisqakunata offset nisqa
Iskay ñanpi rejilla columnakunata offsetta atikunki: kutichiq .offset-
rejilla claseyku chaymanta margen yanapakuyniyku . Rejilla clasekuna sayayniyuq kanku columnakunawan tupananpaq chaymanta margenkuna aswan allin kanku usqhayta churanapaq maypichus offset anchun tikraq kachkan.
Clases de desplazamiento
.offset-md-*
Clases nisqawan columnakunata pañaman kuyuchiy . Kay clasekunaqa huk columnapa lluq'i margenninta *
columnakunawan yapan. Ejemplopaq, tawa columnakunapim .offset-md-4
kuyun ..col-md-4
<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>
Kutichiq pakikunapi columna ch'uyanchanamanta aswan, offsetkunata musuqmanta churanayki tiyan. Kayta ruwaypi qhaway rejilla ejemplopi .
<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>
Utilidades de margen nisqa
v4 kaqpi flexbox kaqman kuyuywan, margen yanapakuykunata llamk'achiy atikunki imayna .me-auto
wawqi columnakuna hukninmanta karuman tanqay hina.
<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>
Sapanchasqa columna clasekuna
Chay .col-*
clasekunataqa a hawapipas llamk'achiy atikunmi .row
huk elementoman huk ancho específico nisqa qunapaq. Mayk'aqllapas columna clasekuna huk filamanta mana chiqan wawakuna hina llamk'achisqa, acolchadokuna saqisqa kanku.
<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>
Clasekuna yanapakuykunawan kuska llamk'achiy atikunku kutichiq unupi siq'ikuna ruwanapaq. Aseguray chay contenidota huk .clearfix
p’istupi p’istuy, chay flotadorta ch’uyanchanaykipaq sichus qillqasqa aswan pisi kaqtin.
Huk parrafo de texto de lugares. Kaypi llamk'achkayku clearfix clase llamk'achiyta rikuchinaykupaq. Kaypi allin pisi mana yuyayniyuq rimaykunata yapachkayku imayna columnakuna kaypi yakupi puriq siq'iwan tinkinku chayta rikuchinaykupaq.
Qawasqaykiman hinam parrafokunaqa sumaqllaña chay flotasqa imagenpa muyuriqninpi kachkan. Kunanqa yuyaykuy imaynatachus kay wakin chiqa contenidowan kaypi rikukunman, aswan kay aburrido lugarniyuq qillqallamanta chaymanta purin chaymanta purin, ichaqa chiqamanta mana hap'inapaq willayta kaypi apachin. Chayqa espaciollatam hapin, manam chiqaptachu ñawinchana.
Hinaspapas, kaypi kachkanki, hinallam takyachkanki kay sitiokuna qillqa ñawinchaypi, suyaspa wakin aswan hamutaykunata, utaq wakin pakasqa pascua uhu contenidomanta. Huk asichikuy, ichapas. Llakikuypaqmi, kaypiqa manam chaykunamantaqa kanchu.
<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>