Kolumnoj
Lernu kiel modifi kolumnojn per manpleno da ebloj por vicigo, ordigo kaj kompenso danke al nia flexbox kradsistemo. Plie, vidu kiel uzi kolumnklasojn por administri larĝojn de ne-kradaj elementoj.
Kiel ili funkcias
-
Kolumnoj konstruas sur la flexbox-arkitekturo de la krado. Flexbox signifas, ke ni havas eblojn por ŝanĝi individuajn kolumnojn kaj modifi grupojn de kolumnoj ĉe la vica nivelo . Vi elektas kiel kolumnoj kreskas, ŝrumpas aŭ alie ŝanĝiĝas.
-
Dum konstruado de kradaj aranĝoj, la tuta enhavo iras en kolumnoj. La hierarkio de la krado de Bootstrap iras de ujo al vico al kolumno al via enhavo. En maloftaj okazoj, vi povas kombini enhavon kaj kolumnon, sed konsciu, ke povas esti neintencitaj sekvoj.
-
Bootstrap inkluzivas antaŭdifinitajn klasojn por krei rapidajn, respondemajn aranĝojn. Kun ses rompopunktoj kaj dekduo da kolumnoj ĉe ĉiu krada nivelo, ni havas dekojn da klasoj jam konstruitaj por ke vi kreu viajn deziratajn aranĝojn. Ĉi tio povas esti malŝaltita per Sass, se vi volas.
Vicigo
Uzu flekskeston vicigi ilojn por vertikale kaj horizontale vicigi kolumnojn.
Vertikala vicigo
<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>
Horizontala vicigo
<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>
Kolumna envolvado
Se pli ol 12 kolumnoj estas metitaj ene de ununura vico, ĉiu grupo de kromaj kolumnoj, kiel unu unuo, envolvos novan linion.
Ekde 9 + 4 = 13 > 12, ĉi tiu 4-kolumna larĝa div estas envolvita al nova linio kiel unu apuda unuo.
Postaj kolumnoj daŭras laŭ la nova linio.
<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>
Kolumno rompas
Rompi kolumnojn al nova linio en flexbox postulas malgrandan hakon: aldonu elementon kun width: 100%
kie ajn vi volas envolvi viajn kolumnojn al nova linio. Normale tio estas plenumita per multoblaj .row
s, sed ne ĉiu efektivigmetodo povas respondeci pri tio.
<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>
Vi ankaŭ povas apliki ĉi tiun paŭzon ĉe specifaj rompopunktoj per niaj respondemaj montraj iloj .
<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>
Reordigo
Ordigi klasojn
Uzu .order-
klasojn por kontroli la vidan ordon de via enhavo. Ĉi tiuj klasoj estas respondemaj, do vi povas agordi la order
per rompopunkto (ekz, .order-1.order-md-2
). Inkluzivas subtenon por 1
tra 5
ĉiuj ses kradaj niveloj.
<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>
Estas ankaŭ respondemaj .order-first
kaj .order-last
klasoj kiuj ŝanĝas la order
de elemento per aplikado order: -1
kaj order: 6
, respektive. Ĉi tiuj klasoj ankaŭ povas esti intermiksitaj kun la numeritaj .order-*
klasoj laŭbezone.
<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>
Ofsecaj kolumnoj
Vi povas kompensi kradkolumnojn en du manieroj: niaj respondemaj .offset-
kradaj klasoj kaj niaj marĝenaj utilecoj . Kradklasoj estas grandigitaj por kongrui al kolumnoj dum marĝenoj estas pli utilaj por rapidaj aranĝoj kie la larĝo de la ofseto estas varia.
Ofsetaj klasoj
Movu kolumnojn dekstren uzante .offset-md-*
klasojn. Ĉi tiuj klasoj pliigas la maldekstran marĝenon de kolono per *
kolumnoj. Ekzemple, .offset-md-4
moviĝas .col-md-4
super kvar kolumnoj.
<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>
Krom kolumnpurigo ĉe respondemaj rompopunktoj, vi eble bezonos restarigi kompensojn. Vidu ĉi tion en ago en la kradekzemplo .
<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>
Marĝenaj utilecoj
Kun la movo al flexbox en v4, vi povas uzi marĝenajn utilecojn kiel .me-auto
devigi gefratajn kolumnojn unu de la alia.
<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>
Memstaraj kolumnaj klasoj
La .col-*
klasoj ankaŭ povas esti uzataj ekster a .row
por doni al elemento specifan larĝon. Kiam ajn kolumnklasoj estas uzataj kiel ne rektaj filoj de vico, la kompletigoj estas preterlasitaj.
<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>
La klasoj povas esti uzataj kune kun utilecoj por krei respondemajn flosajn bildojn. Nepre envolvi la enhavon en .clearfix
envolvaĵon por forigi la flosilon se la teksto estas pli mallonga.
Alineo de lokokupilo teksto. Ni uzas ĝin ĉi tie por montri la uzon de la clearfix-klaso. Ni aldonas kelkajn sensignifajn frazojn ĉi tie por montri kiel la kolumnoj interagas ĉi tie kun la flosita bildo.
Kiel vi povas vidi, la alineoj gracie ĉirkaŭvolvas la flositan bildon. Nun imagu kiel ĉi tio aspektus kun iu reala enhavo ĉi tie, prefere ol nur ĉi tiu enuiga lokokupilo teksto kiu daŭras kaj plu, sed fakte peras neniun palpeblan informon ĉe. Ĝi simple okupas spacon kaj ne devus esti legita.
Kaj tamen, ĉi tie vi estas, ankoraŭ persistante en legado de ĉi tiu lokokupilo teksto, esperante pri kelkaj pliaj komprenoj, aŭ iun kaŝita paska ovo de enhavo. Ŝerco, eble. Bedaŭrinde, ĉi tie estas nenio el tio.
<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>