Kradsistemo
Uzu nian potencan poŝtelefonan unue flekskeston por konstrui aranĝojn de ĉiuj formoj kaj grandecoj danke al dekdu kolumna sistemo, ses defaŭltaj respondemaj niveloj, Sass-variabloj kaj miksaĵoj kaj dekoj da antaŭdifinitaj klasoj.
Ekzemplo
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 klarigo pri kiel la kradsistemo kuniĝas.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
La supra ekzemplo kreas tri egallarĝajn kolumnojn tra ĉiuj aparatoj kaj vidfenestroj uzante niajn antaŭdifinitajn kradklasojn. Tiuj kolumnoj estas centritaj en la paĝo kun la gepatro .container
.
Kiel ĝi funkcias
Malkonstruante ĝin, jen kiel la kradsistemo kuniĝas:
-
Nia krado subtenas ses respondemajn rompopunktojn . Rompopunktoj estas bazitaj sur
min-width
amaskomunikilaj demandoj, signifante ke ili influas tiun rompopunkton kaj ĉiujn tiujn super ĝi (ekz..col-sm-4
validas porsm
,md
,lg
,xl
, kajxxl
). Ĉi tio signifas, ke vi povas kontroli grandecon kaj konduton de ujo kaj kolumno per ĉiu rompopunkto. -
Ujoj centras kaj horizontale alŝutas vian enhavon. Uzu
.container
por respondema piksela larĝo,.container-fluid
porwidth: 100%
tra ĉiuj vidfenestroj kaj aparatoj, aŭ respondema ujo (ekz,.container-md
) por kombinaĵo de fluidaj kaj pikselaj larĝoj. -
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 por certigi, ke la enhavo en viaj kolumnoj estas vide vicigita maldekstre. Vicoj ankaŭ subtenas modifklasojn por unuforme apliki kolumngrandecon kaj fluklasojn por ŝanĝi la interspacon de via enhavo. -
Kolumnoj estas nekredeble flekseblaj. Estas 12 ŝablonaj kolumnoj disponeblaj per vico, ebligante al vi krei malsamajn kombinaĵojn de elementoj kiuj ampleksas ajnan nombron da kolumnoj. Kolumnaj klasoj indikas la nombron da ŝablonaj kolumnoj por enhavi (ekz.,
col-4
ampleksas kvar).width
s estas fiksitaj en procentoj do vi ĉiam havas la saman relativan grandecon. -
Defluiloj ankaŭ estas respondemaj kaj agordeblaj. Gutter-klasoj estas haveblaj tra ĉiuj rompopunktoj, kun ĉiuj samaj grandecoj kiel nia marĝeno kaj remburaĵinterspaco . Ŝanĝu horizontalajn kanaletojn kun
.gx-*
klasoj, vertikalajn kanaletojn per.gy-*
, aŭ ĉiujn kanaletojn kun.g-*
klasoj..g-0
disponeblas ankaŭ por forigi kanaletojn. -
Sass-variabloj, mapoj kaj miksaĵoj funkciigas la kradon. Se vi ne volas uzi la antaŭdifinitajn kradklasojn en Bootstrap, vi povas uzi la fonton de nia krado Sass por krei vian propran kun pli semantika markado. Ni ankaŭ inkluzivas iujn CSS kutimajn propraĵoj por konsumi ĉi tiujn Sass-variablojn por eĉ pli granda fleksebleco por vi.
Estu konscia pri la limigoj kaj eraroj ĉirkaŭ flexbox , kiel la malkapablo uzi kelkajn HTML-elementojn kiel fleksujojn .
Kradaj opcioj
La kradsistemo de Bootstrap povas adaptiĝi tra ĉiuj ses defaŭltaj rompopunktoj, kaj ajnaj rompopunktoj, kiujn vi agordas. La ses defaŭltaj kradniveloj estas kiel sekvas:
- Ekstremalgranda (xs)
- Malgranda (m)
- Mezo (md)
- Granda (lg)
- Ekstregranda (xl)
- Ekstregranda (xxl)
Kiel notite supre, ĉiu el ĉi tiuj rompopunktoj havas sian propran ujon, unikan klasprefikson kaj modifilojn. Jen kiel la krado ŝanĝiĝas tra ĉi tiuj rompopunktoj:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Ujomax-width |
Neniu (aŭtomata) | 540 px | 720 px | 960 px | 1140px | 1320px |
Klasprefikso | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
nombro da kolumnoj | 12 | |||||
Larĝo de kanaleto | 1.5rem (.75rem maldekstre kaj dekstre) | |||||
Propraj defluiloj | Jes | |||||
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 xxl
. 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>
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 ses 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>
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. Kun .row-cols-auto
vi povas doni al la kolumnoj sian naturan larĝon.
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-auto">
<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);
}
}
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-3">
Level 1: .col-sm-3
</div>
<div class="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
Kiam vi uzas la fontajn dosierojn Sass de Bootstrap, vi havas la eblon uzi variablojn kaj miksaĵojn de Sass 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: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
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();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@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: 1.5rem !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 ordigado. Respondema videblecaj utilecoj ankaŭ estos ĝisdatigitaj por uzi la kutimajn rompopunktojn. Certiĝu agordi kradvalorojn en px
(ne rem
, em
aŭ %
).