Kradsistemo
Uzu nian potencan poŝtelefonan unue flekskeston por konstrui aranĝojn de ĉiuj formoj kaj grandecoj danke al dekdu kolumna sistemo, kvin defaŭltaj respondemaj niveloj, Sass-variabloj kaj miksaĵoj kaj dekoj da antaŭdifinitaj klasoj.
Kiel ĝi funkcias
La kradsistemo de Bootstrap uzas serion da ujoj, vicoj kaj kolumnoj por aranĝi kaj vicigi enhavon. Ĝi estas konstruita kun flexbox kaj estas plene respondema. Malsupre estas ekzemplo kaj profunda rigardo pri kiel la krado kuniĝas.
Novaĵo aŭ ne konas flexbox? Legu ĉi tiun gvidilon pri flekskesto de CSS Tricks por fono, terminologio, gvidlinioj kaj kodaj fragmentoj.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
La supra ekzemplo kreas tri egallarĝajn kolumnojn sur malgrandaj, mezaj, grandaj kaj ekstra grandaj aparatoj uzante niajn antaŭdifinitajn kradklasojn. Tiuj kolumnoj estas centritaj en la paĝo kun la gepatro .container
.
Malkonstruante ĝin, jen kiel ĝi funkcias:
- Ujoj provizas rimedon por centri kaj horizontale paŝi la enhavon de via retejo. Uzu
.container
por respondema piksela larĝo aŭ.container-fluid
porwidth: 100%
ĉiuj grandecoj de vidpunkto kaj aparato. - Vicoj estas envolvaĵoj por kolonoj. Ĉiu kolono havas horizontalan
padding
(nomitan kanalon) por kontroli la spacon inter ili. Ĉipadding
tio tiam estas kontraŭagata sur la vicoj kun negativaj randoj. Tiel, la tuta enhavo en viaj kolumnoj estas vide vicigita maldekstre. - En krada aranĝo, enhavo devas esti metita ene de kolumnoj kaj nur kolumnoj povas esti tujaj filoj de vicoj.
- Danke al flexbox, kradaj kolumnoj sen specifita
width
aŭtomate aranĝos kiel egallarĝaj kolumnoj. Ekzemple, kvar okazoj de.col-sm
ĉiu aŭtomate estos 25% larĝa de la malgranda rompopunkto kaj supren. Vidu la sekcion pri aŭtomata aranĝo de kolumnoj por pliaj ekzemploj. - Kolumnaj klasoj indikas la nombron da kolumnoj, kiujn vi ŝatus uzi el la eblaj 12 por vico. Do, se vi volas tri egallarĝajn kolumnojn laŭlonge, vi povas uzi
.col-4
. - Kolumnoj
width
estas fiksitaj en procentoj, do ili ĉiam estas fluidaj kaj grandecoj rilate al sia gepatra elemento. - Kolumnoj havas horizontalajn
padding
por krei la kanalojn inter unuopaj kolumnoj, tamen vi povas forigi lamargin
el vicoj kajpadding
el kolumnoj per.no-gutters
sur la.row
. - Por ke la krado responda, estas kvin kradromppunktoj, unu por ĉiu respondema rompopunkto : ĉiuj rompopunktoj (ekstre malgrandaj), malgrandaj, mezaj, grandaj kaj tro grandaj.
- Kradaj rompopunktoj baziĝas sur minimumaj larĝaj amaskomunikiloj, tio signifas, ke ili validas por tiu unu rompopunkto kaj ĉiuj tiuj super ĝi (ekz.
.col-sm-4
validas por malgrandaj, mezaj, grandaj kaj ekstraj aparatoj, sed ne la unuaxs
rompopunkto). - Vi povas uzi antaŭdifinitajn kradklasojn (kiel
.col-4
) aŭ Sass-miksaĵojn por pli semantika markado.
Estu konscia pri la limigoj kaj eraroj ĉirkaŭ flexbox , kiel la malkapablo uzi kelkajn HTML-elementojn kiel fleksujojn .
Kradaj opcioj
Dum Bootstrap uzas em
s aŭ rem
s por difini plej multajn grandecojn, px
s estas uzataj por kradaj rompopunktoj kaj ujo-larĝoj. Ĉi tio estas ĉar la larĝo de vidujo estas en pikseloj kaj ne ŝanĝiĝas laŭ la tiparo .
Vidu kiel aspektoj de la Bootstrap kradsistemo funkcias tra pluraj aparatoj kun oportuna tablo.
Ekstrema malgranda <576px |
Malgranda ≥576px |
Meza ≥768px |
Granda ≥992px |
Ekstre granda ≥1200px |
|
---|---|---|---|---|---|
Maksimuma ujo-larĝo | Neniu (aŭtomata) | 540 px | 720 px | 960 px | 1140px |
Klasprefikso | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
nombro da kolumnoj | 12 | ||||
Larĝo de kanaleto | 30 px (15 px sur ĉiu flanko de kolono) | ||||
Nestebla | Jes | ||||
Kolumna ordigo | Jes |
Aŭtomata aranĝo kolumnoj
Uzu romppunkto-specifajn kolumnklasojn por facila kolumna grandeco sen eksplicita numerita klaso kiel .col-sm-6
.
Egale-larĝo
Ekzemple, jen du kradaj aranĝoj, kiuj validas por ĉiu aparato kaj vidfenestro, de xs
ĝis xl
. Aldonu ajnan nombron da unuo-malpli klasoj por ĉiu rompo kiun vi bezonas kaj ĉiu kolumno estos la sama larĝo.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Egal-larĝa plurlinio
Kreu egallarĝajn kolumnojn, kiuj ampleksas plurajn liniojn, enmetante .w-100
kolumnojn kie vi volas, ke la kolumnoj rompas al nova linio. Faru la paŭzojn respondajn miksante .w-100
kun iuj respondemaj ekranaj iloj .
Estis Safara flekskesto-cimo kiu malhelpis ĉi tion funkcii sen eksplicita flex-basis
aŭ border
. Estas solvoj por pli malnovaj foliumilaj versioj, sed ili ne devus esti necesaj se viaj celaj retumiloj ne falas en la bugraj versioj.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Agordi unu kolumnan larĝon
Aŭtomata aranĝo por flexbox kradaj kolumnoj ankaŭ signifas, ke vi povas agordi la larĝon de unu kolumno kaj havi la gefratajn kolumnojn aŭtomate regrandigi ĉirkaŭ ĝi. Vi povas uzi antaŭdifinitajn kradklasojn (kiel montrite sube), kradmiksaĵojn aŭ enliniajn larĝojn. Notu, ke la aliaj kolumnoj regrandigos sendepende de la larĝo de la centra kolumno.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Varia larĝa enhavo
Uzu col-{breakpoint}-auto
klasojn por grandeco kolumnoj surbaze de la natura larĝo de ilia enhavo.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Respondema klasoj
La krado de Bootstrap inkluzivas kvin nivelojn de antaŭdifinitaj klasoj por konstrui kompleksajn respondemajn aranĝojn. Agordu la grandecon de viaj kolumnoj sur ekstraj, malgrandaj, mezaj, grandaj aŭ tro grandaj aparatoj kiel vi konvenas.
Ĉiuj rompopunktoj
Por kradoj, kiuj estas la samaj de la plej malgranda el aparatoj ĝis la plej granda, uzu la .col
kaj .col-*
klasojn. Specifu numeritan klason kiam vi bezonas aparte grandan kolumnon; alie, bonvolu resti al .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Stakitaj al horizontalo
Uzante ununuran aron de .col-sm-*
klasoj, vi povas krei bazan kradsistemon, kiu komenciĝas stakigita kaj iĝas horizontala ĉe la malgranda rompopunkto ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Miksi kaj kongrui
Ĉu vi ne volas, ke viaj kolumnoj simple stakiĝas en iuj kradaj niveloj? Uzu kombinaĵon de malsamaj klasoj por ĉiu nivelo laŭbezone. Vidu la ekzemplon sube por pli bona ideo pri kiel ĉio funkcias.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Defluiloj
Defluiloj povas esti respondeme alĝustigitaj per romppunkto-specifa remburaĵo kaj negativaj marĝenaj utilaj klasoj. Por ŝanĝi la kanaletojn en donita vico, parigu negativan marĝenservaĵon sur la .row
kaj kongruaj remburaĵservaĵoj sur la .col
s. Ankaŭ la .container
aŭ .container-fluid
patro eble devos esti alĝustigita por eviti nedeziratan superfluon, uzante denove kongruan kompletigan ilon.
Jen ekzemplo de personigo de la krado Bootstrap ĉe la granda ( lg
) rompopunkto kaj supre. Ni pliigis la .col
remburaĵon per .px-lg-5
, kontraŭagis tion per .mx-lg-n5
sur la gepatro .row
kaj poste ĝustigis la .container
envolvaĵon per .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Vicaj kolumnoj
Uzu la respondemajn .row-cols-*
klasojn por rapide agordi la nombron da kolumnoj, kiuj plej bone prezentas vian enhavon kaj aranĝon. Dum normalaj .col-*
klasoj validas por la unuopaj kolumnoj (ekz., .col-md-4
), la vicaj kolumnoj klasoj estas fiksitaj sur la gepatro .row
kiel ŝparvojo.
Uzu ĉi tiujn vickolumnajn klasojn por rapide krei bazajn kradajn aranĝojn aŭ por kontroli viajn kartajn aranĝojn.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Vi ankaŭ povas uzi la akompanan Sass-miksaĵon, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Vicigo
Uzu flekskeston vicigi ilojn por vertikale kaj horizontale vicigi kolumnojn. Internet Explorer 10-11 ne subtenas vertikalan vicigon de flekseblaj eroj kiam la fleksebla ujo havas min-height
kiel montrite sube. Vidu Flexbugs #3 por pliaj detaloj.
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>
Neniuj defluiloj
La defluiloj inter kolumnoj en niaj antaŭdifinitaj kradaj klasoj povas esti forigitaj per .no-gutters
. Ĉi tio forigas la negativajn margin
s de .row
kaj la horizontalon padding
de ĉiuj tujaj filaj kolumnoj.
Jen la fontkodo por krei ĉi tiujn stilojn. Notu, ke kolumnoj anstataŭas nur la unuaj filaj kolumnoj kaj estas celitaj per atributo-elektilo . Dum tio generas pli specifan elektilon, kolumnplenigaĵo ankoraŭ povas esti plue personecigita kun interspacaj utilecoj .
Ĉu vi bezonas rando-al-randan dezajnon? Forigu la gepatron .container
aŭ .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
En la praktiko, jen kiel ĝi aspektas. Notu, ke vi povas daŭre uzi ĉi tion kun ĉiuj aliaj antaŭdifinitaj kradaj klasoj (inkluzive de kolumnlarĝoj, respondemaj niveloj, reordigoj kaj pli).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</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 12
ĉiuj kvin kradaj niveloj.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
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: 13
( order: $columns + 1
), 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-
kradklasoj 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 .mr-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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Nesto
Por nesti vian enhavon kun la defaŭlta krado, aldonu novan .row
kaj aron da .col-sm-*
kolumnoj en ekzistanta .col-sm-*
kolumno. Nestitaj vicoj devus inkluzivi aron da kolumnoj kiuj sumiĝas ĝis 12 aŭ malpli (ne necesas, ke vi uzu ĉiujn 12 disponeblajn kolumnojn).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass miksaĵoj
Kiam vi uzas la fontajn Sass-dosierojn de Bootstrap, vi havas la eblon uzi Sass-variablojn kaj miksaĵojn por krei kutimajn, semantikajn kaj respondemajn paĝajn aranĝojn. Niaj antaŭdifinitaj kradaj klasoj uzas ĉi tiujn samajn variablojn kaj miksaĵojn por provizi tutan serion da uzeblaj klasoj por rapidaj respondemaj aranĝoj.
Variabloj
Variabloj kaj mapoj determinas la nombron da kolumnoj, la defluillarĝon, kaj la amaskomunikilaron demandpunkton ĉe kiu komenci flosajn kolonojn. Ni uzas ĉi tiujn por generi la antaŭdifinitajn kradklasojn dokumentitajn supre, same kiel por la kutimaj miksaĵoj listigitaj sube.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Miksinoj
Miksinoj estas uzitaj lige kun la kradvariabloj por generi semantikan CSS por individuaj kradkolumnoj.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Ekzempla uzado
Vi povas modifi la variablojn al viaj propraj kutimaj valoroj, aŭ simple uzi la miksaĵojn kun iliaj defaŭltaj valoroj. Jen ekzemplo de uzado de la defaŭltaj agordoj por krei du-kolumnan aranĝon kun interspaco.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Agordo de la krado
Uzante niajn enkonstruitajn krad-variablojn kaj mapojn Sass, eblas tute personecigi la antaŭdifinitajn kradklasojn. Ŝanĝu la nombron da niveloj, la amaskomunikilaraj demandaj dimensioj kaj la ujlarĝoj—tiam rekompilu.
Kolumnoj kaj defluiloj
La nombro da kradaj kolumnoj povas esti modifita per Sass-variabloj. $grid-columns
estas uzata por generi la larĝojn (en procentoj) de ĉiu individua kolumno dum $grid-gutter-width
fiksas la larĝon por la kolumnoj defluiloj.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Kradaj niveloj
Movante preter la kolumnoj mem, vi ankaŭ povas agordi la nombron da kradaj niveloj. Se vi volus nur kvar kradnivelojn, vi ĝisdatigus la $grid-breakpoints
kaj $container-max-widths
al io tia:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Kiam vi faras ajnajn ŝanĝojn al la Sass-variabloj aŭ mapoj, vi devos konservi viajn ŝanĝojn kaj rekompili. Farante tion eligos tute novan aron de antaŭdifinitaj kradaj klasoj por kolumnlarĝoj, ofsetoj kaj mendo. Respondema videblecaj utilecoj ankaŭ estos ĝisdatigitaj por uzi la kutimajn rompopunktojn. Certiĝu agordi kradvalorojn en px
(ne rem
, em
aŭ %
).