CSS-Krado
Lernu kiel ebligi, uzi kaj personecigi nian alternan aranĝan sistemon konstruitan sur CSS-Krado kun ekzemploj kaj kodaj fragmentoj.
La defaŭlta kradsistemo de Bootstrap reprezentas la kulminon de pli ol jardeko da CSS-aranĝteknikoj, provitaj kaj provitaj de milionoj da homoj. Sed, ĝi ankaŭ estis kreita sen multaj el la modernaj CSS-ecoj kaj teknikoj, kiujn ni vidas en retumiloj kiel la nova CSS-Krado.
Kiel ĝi funkcias
Kun Bootstrap 5, ni aldonis la eblon ebligi apartan kradsistemon, kiu estas konstruita sur CSS Grid, sed kun Bootstrap-tordado. Vi ankoraŭ ricevas klasojn, kiujn vi povas apliki laŭkaprice por konstrui respondemajn aranĝojn, sed kun malsama aliro sub la kapuĉo.
-
CSS-Krado estas elektebla. Malebligu la defaŭltan kradsistemon per agordo
$enable-grid-classes: false
kaj ebligu la CSS-Kradon per agordo$enable-cssgrid: true
. Poste, rekompilu vian Sass. -
Anstataŭigi okazojn de
.row
per.grid
. La.grid
klaso starigasdisplay: grid
kaj kreas pergrid-template
kiu vi konstruas per via HTML. -
Anstataŭigi
.col-*
klasojn per.g-col-*
klasoj. Ĉi tio estas ĉar niaj CSS-Krado-kolumnoj uzas lagrid-column
posedaĵon anstataŭe dewidth
. -
Kolumnoj kaj defluilgrandoj estas fiksitaj per CSS-variabloj. Agordu ĉi tiujn sur la gepatro
.grid
kaj agordu kiel vi volas, enlinie aŭ en stilfolio, per--bs-columns
kaj--bs-gap
.
En la estonteco, Bootstrap verŝajne ŝanĝos al hibrida solvo ĉar la gap
posedaĵo atingis preskaŭ plenan retumilon subtenon por flexbox.
Ŝlosilaj diferencoj
Kompare kun la defaŭlta kradsistemo:
-
Fleksaj utilecoj ne influas la kolumnojn de CSS Grid en la sama maniero.
-
Interspacoj anstataŭigas kanaletojn. La
gap
posedaĵo anstataŭigas la horizontalonpadding
de nia defaŭlta kradsistemo kaj funkcias pli kielmargin
. -
Kiel tia, male al
.row
s,.grid
s havas neniujn negativajn marĝenojn kaj marĝenservaĵoj ne povas esti uzitaj por ŝanĝi la kradkanaletojn. Kradinterspacoj estas aplikataj horizontale kaj vertikale defaŭlte. Vidu la agordan sekcion por pliaj detaloj. -
Enliniaj kaj kutimaj stiloj devus esti rigardataj kiel anstataŭaĵoj por modifklasoj (ekz.,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nestado funkcias simile, sed eble postulas, ke vi rekomencu viajn kolumnkalkulojn sur ĉiu okazo de nestita
.grid
. Vidu la nestan sekcion por detaloj.
Ekzemploj
Tri kolumnoj
Tri samlarĝaj kolumnoj tra ĉiuj vidfenestroj kaj aparatoj povas esti kreitaj uzante la .g-col-4
klasojn. Aldonu respondemajn klasojn por ŝanĝi la aranĝon laŭ grando de vidujo.
<div class="grid">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
Respondema
Uzu respondemajn klasojn por ĝustigi vian aranĝon trans vidfenestroj. Ĉi tie ni komenciĝas per du kolumnoj sur la plej mallarĝaj vidpunktoj, kaj poste kreskas al tri kolumnoj sur mezaj vidportoj kaj supre.
<div class="grid">
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>
Komparu tion kun ĉi tiu dukolumna aranĝo ĉe ĉiuj vidfenestroj.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Envolvado
Kradaj eroj aŭtomate envolviĝas al la sekva linio kiam ne plu estas loko horizontale. Notu, ke la gap
validas por horizontalaj kaj vertikalaj interspacoj inter kradaj eroj.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Komencas
Komencaj klasoj celas anstataŭigi la ofsetajn klasojn de nia defaŭlta krado, sed ili ne estas tute samaj. CSS-Krado kreas kradŝablonon per stiloj, kiuj diras al retumiloj "komenci ĉe ĉi tiu kolumno" kaj "finiĝi ĉe ĉi tiu kolumno". Tiuj ecoj estas grid-column-start
kaj grid-column-end
. Komencaj klasoj estas stenografio por la unuaj. Parigu ilin kun la kolumnaj klasoj por grandeco kaj vicigi viajn kolumnojn kiel vi bezonas. Komencklasoj komenciĝas je 1
kiel 0
estas nevalida valoro por ĉi tiuj trajtoj.
<div class="grid">
<div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
<div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
Aŭtomataj kolumnoj
Kiam ne estas klasoj sur la kradaj eroj (la tujaj filoj de .grid
), ĉiu kradaĵo aŭtomate estos grandigita al unu kolumno.
<div class="grid">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Ĉi tiu konduto povas esti miksita kun kradaj kolumnaj klasoj.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Nesto
Simile al nia defaŭlta kradsistemo, nia CSS-Krado ebligas facilan nestadon de .grid
s. Tamen, male al la defaŭlta, ĉi tiu krado heredas ŝanĝojn en la vicoj, kolumnoj kaj interspacoj. Konsideru la ekzemplon sube:
- Ni anstataŭas la defaŭltan nombron da kolumnoj per loka CSS-variablo:
--bs-columns: 3
. - En la unua aŭtomata kolumno, la kolumnombrado estas heredita kaj ĉiu kolumno estas triono de la disponebla larĝo.
- En la dua aŭtomata kolumno, ni restarigis la kolumnkalkulon de la nestita
.grid
al 12 (nia defaŭlta). - La tria aŭtomata kolumno havas neniun nestan enhavon.
En praktiko tio permesas pli kompleksajn kaj kutimajn aranĝojn kompare kun nia defaŭlta kradsistemo.
<div class="grid" style="--bs-columns: 3;">
<div>
First auto-column
<div class="grid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="grid" style="--bs-columns: 12;">
<div class="g-col-6">6 of 12</div>
<div class="g-col-4">4 of 12</div>
<div class="g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
Agordado
Agordu la nombron da kolumnoj, la nombron da vicoj kaj la larĝon de la interspacoj kun lokaj CSS-variabloj.
Variablo | Resursa valoro | Priskribo |
---|---|---|
--bs-rows |
1 |
La nombro da vicoj en via kradŝablono |
--bs-columns |
12 |
La nombro da kolumnoj en via kradŝablono |
--bs-gap |
1.5rem |
La grandeco de la interspaco inter kolonoj (vertikala kaj horizontala) |
Ĉi tiuj CSS-variabloj havas neniun defaŭltan valoron; anstataŭe, ili aplikas rezervajn valorojn, kiuj estas uzataj ĝis loka okazo estas provizita. Ekzemple, ni uzas var(--bs-rows, 1)
por niaj CSS-Krado vicoj, kiuj ignoras --bs-rows
ĉar tio ankoraŭ ne estis agordita ie ajn. Post kiam ĝi estas, la .grid
petskribo uzos tiun valoron anstataŭ la rezerva valoro de 1
.
Neniuj kradaj klasoj
Tujaj infanoj elementoj de .grid
estas kradaj eroj, do ili estos grandigitaj sen eksplicite aldoni .g-col
klason.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Kolumnoj kaj interspacoj
Alĝustigu la nombron da kolumnoj kaj la interspacon.
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
<div class="g-col-2">.g-col-2</div>
<div class="g-col-2">.g-col-2</div>
</div>
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-4">.g-col-4</div>
</div>
Aldonante vicojn
Aldonante pliajn vicojn kaj ŝanĝante la lokigon de kolumnoj:
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
<div>Auto-column</div>
<div class="g-start-2" style="grid-row: 2">Auto-column</div>
<div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>
Interspacoj
Ŝanĝu la vertikalajn interspacojn nur modifante la row-gap
. Notu, ke ni uzas gap
sur .grid
s, sed row-gap
kaj column-gap
povas esti modifita laŭbezone.
<div class="grid" style="row-gap: 0;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Pro tio, vi povas havi malsamajn vertikalajn kaj horizontalajn gap
s, kiuj povas preni ununuran valoron (ĉiuj flankoj) aŭ paron da valoroj (vertikala kaj horizontala). Ĉi tio povas esti aplikata per enlinia stilo por gap
, aŭ kun nia --bs-gap
CSS-variablo.
<div class="grid" style="--bs-gap: .25rem 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Sass
Unu limigo de la CSS-Krado estas, ke niaj defaŭltaj klasoj ankoraŭ estas generitaj de du Sass-variabloj, $grid-columns
kaj $grid-gutter-width
. Ĉi tio efike antaŭdeterminas la nombron da klasoj generitaj en nia kompilita CSS. Vi havas du eblojn ĉi tie:
- Modifi tiujn defaŭltajn Sass-variablojn kaj rekompilu vian CSS.
- Uzu enliniajn aŭ kutimajn stilojn por pliigi la provizitajn klasojn.
Ekzemple, vi povas pliigi la kolumnkalkulon kaj ŝanĝi la breĉon grandecon, kaj tiam grandeco viajn "kolumnojn" kun miksaĵo de enliniaj stiloj kaj antaŭdifinita CSS Grid kolumno klasoj (ekz, .g-col-4
).
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
<div style="grid-column: span 14;">14 columns</div>
<div class="g-col-4">.g-col-4</div>
</div>