Rafitra Grid
Ampiasao ny gridbox flexbox voalohany amin'ny finday mahery vaika mba hananganana lamina amin'ny endrika sy habe rehetra noho ny rafitra tsanganana roa ambin'ny folo, ambaratonga enina mamaly ny default, fari-pitsipika Sass sy mixins, ary kilasy am-polony efa voafaritra mialoha.
OHATRA
Ny rafitry ny grid Bootstrap dia mampiasa andiana kaontenera, andalana ary tsanganana mba hamolavolana sy hampifanaraka ny atiny. Namboarina tamin'ny flexbox izy io ary mamaly tanteraka. Ity ambany ity ny ohatra iray sy ny fanazavana lalina momba ny fomba fiarahan'ny rafitra grid.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Ity ohatra etsy ambony ity dia mamorona tsanganana telo mitovy sakany manerana ny fitaovana rehetra sy ny seranan-tsambo amin'ny fampiasana ny kilasin'ny grid efa voafaritra mialoha. Ireo tsanganana ireo dia eo afovoan'ny pejy misy ny ray aman-dreny .container
.
Ahoana ny fiasan'izany
Amin'ny fandravana azy dia izao no fomba ivondronan'ny rafitra grid:
-
Manohana teboka fiatoana enina mandray andraikitra ny grid-nay . Mifototra amin'ny
min-width
fangatahan'ny haino aman-jery ny teboka fiatoana, midika izany fa misy fiantraikany amin'io teboka tapaka io sy ireo rehetra eo amboniny (oh:.col-sm-4
mihatra amin'nysm
,md
,lg
,xl
, aryxxl
). Midika izany fa azonao atao ny mifehy ny haben'ny kaontenera sy ny tsanganana ary ny fitondran-tena isaky ny tapaka. -
Afovoany ny kaontenera ary asio marindrano ny atiny. Ampiasao
.container
ho an'ny sakan'ny piksela mamaly,.container-fluid
ho an'nywidth: 100%
faritra rehetra mijery sy fitaovana, na fitoeran-javatra mandray andraikitra (oh,.container-md
) ho an'ny fitambaran'ny sakan'ny rano sy ny piksel. -
Ny andalana dia fonosina ho an'ny tsanganana. Ny tsanganana tsirairay dia manana marindrano
padding
(antsoina hoe tatatra) mba hifehezana ny habaka eo anelanelan'izy ireo. Avypadding
eo dia toherina amin'ny andalana misy sisiny ratsy izany mba hiantohana fa ny atiny ao amin'ny tsangananao dia mirindra tsara amin'ny ilany havia. Ny row koa dia manohana ny kilasy modifier mba hampiharana mitovy ny haben'ny tsanganana sy ny tatatra mba hanovana ny elanelan'ny atiny. -
Ny tsanganana dia tena miovaova. Misy tsanganana môdely 12 azo alaina isaky ny andalana, ahafahanao mamorona fitambarana singa samihafa izay mirefy tsanganana maromaro. Ny kilasin'ny tsanganana dia manondro ny isan'ny tsanganana môdely ho avela (oh:
col-4
efatra).width
s dia napetraka amin'ny isan-jato ka mitovy habe foana ianao. -
Ny tatatra ihany koa dia mandray andraikitra sy azo zahana. Ny kilasin'ny tatatra dia misy amin'ny toerana tapaka rehetra, mitovy habe amin'ny sisiny sy ny elanelan'ny padding . Ovay ny tatatra marindrano misy
.gx-*
kilasy, tatatra mitsangana misy.gy-*
, na ny tatatra rehetra misy.g-*
kilasy..g-0
misy ihany koa ny manala tatatra. -
Ny fari-piainana Sass, ny sarintany ary ny mixins dia manome hery ny grid. Raha tsy te hampiasa ny kilasin'ny grid efa voafaritra mialoha ao amin'ny Bootstrap ianao dia azonao atao ny mampiasa ny loharanon'ny grid Sass mba hamoronana anao manokana miaraka amin'ny marika semantika kokoa. Ampidirinay ihany koa ny toetra amam-panao CSS sasany hampiasaina ireo fari-pahalalana Sass ireo mba ho mora kokoa ho anao.
Tandremo ny famerana sy ny bibikely manodidina ny flexbox , toy ny tsy fahafahana mampiasa singa HTML sasany ho toy ny container flex .
Grid safidy
Ny rafitry ny grids Bootstrap dia afaka mampifanaraka amin'ireo teboka enina tapaka rehetra, sy ireo teboka tapaka rehetra namboarinao. Toy izao manaraka izao ny tiers grid enina:
- Kely fanampiny (xs)
- Kely (sm)
- antonony (md)
- Lehibe (lg)
- Lehibe fanampiny (xl)
- Extra extra large (xxl)
Araka ny nomarihina etsy ambony, samy manana ny fitoerany manokana, ny prefix kilasy tokana, ary ny modifiers ny tsirairay amin'ireo teboka tapaka ireo. Toy izao ny fiovan'ny grid amin'ireo teboka tapaka ireo:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
fitoeran-javatramax-width |
Tsy misy (auto) | 540px | 720px | 960px | 1140px | 1320px |
Prefix kilasy | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# tsanganana | 12 | |||||
Sakan'ny tatatra | 1.5rem (.75rem eo ankavia sy havanana) | |||||
Talantalana manokana | ENY | |||||
Nestable | ENY | |||||
Filaharana tsanganana | ENY |
Tsanganana fandrindrana mandeha ho azy
Mampiasà kilasy tsanganana manokana ho an'ny fametahana tsanganana mora tsy misy kilasy misy laharana mazava toy ny .col-sm-6
.
Mitovy sakany
Ohatra, ireto misy rindrankajy roa mihatra amin'ny fitaovana tsirairay sy ny seranan-tsambo, manomboka xs
amin'ny xxl
. Ampio kilasy latsaky ny isa isaky ny teboka ilainao ary hitovy ny sakany ny tsanganana tsirairay.
<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>
Fametrahana sakan'ny tsanganana iray
Ny fandrindrana mandeha ho azy ho an'ny tsanganana flexbox grid dia midika ihany koa fa azonao atao ny mametraka ny sakan'ny tsanganana iray ary manana ny tsanganana mpiray tam-po aminy hanova azy ho azy. Azonao atao ny mampiasa ny kilasin'ny grid efa voafaritra mialoha (araka ny aseho eto ambany), ny fifangaroan'ny grid, na ny sakany an-tsipika. Mariho fa ny tsanganana hafa dia hanova ny habeny na inona na inona sakan'ny tsanganana afovoany.
<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>
Votoaty sakany miovaova
Mampiasà col-{breakpoint}-auto
kilasy hamehezana tsanganana mifototra amin'ny sakany voajanahary amin'ny atiny.
<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>
Kilasy mandray andraikitra
Ny grid's Bootstrap dia ahitana ambaratonga enina amin'ny kilasy efa voafaritra mialoha ho an'ny fananganana lamina mamaly sarotra. Amboary ny haben'ny tsangananao amin'ny fitaovana kely, kely, antonony, lehibe, na lehibe kokoa araka izay hitanao fa mety.
Tapatapaka rehetra
Ho an'ny grids mitovy amin'ny fitaovana kely indrindra ka hatramin'ny lehibe indrindra, ampiasao ny .col
and .col-*
classes. Manondro kilasy misy laharana rehefa mila tsanganana manokana ianao; raha tsy izany, aza misalasala mifikitra amin'ny .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>
Mivondrona mankany amin'ny horizontaly
Amin'ny fampiasana .col-sm-*
kilasy tokana iray dia azonao atao ny mamorona rafitra grid fototra izay manomboka mivondrona ary lasa mitsivalana eo amin'ny teboka tapaka kely ( 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>
Afangaro ary ampifanaraho
Tsy tianao ve ny tsanganana mba hiangona fotsiny amin'ny ambaratonga sasany? Mampiasà fitambarana kilasy samihafa ho an'ny ambaratonga tsirairay araka izay ilaina. Jereo ny ohatra etsy ambany raha te hahalala tsara kokoa ny fomba fiasan'izy rehetra.
<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>
Andry andalana
Ampiasao ireo .row-cols-*
kilasy mamaly mba hametrahana haingana ny isan'ny tsanganana izay manome tsara indrindra ny atiny sy ny drafitrao. Raha .col-*
mihatra amin'ny tsanganana tsirairay ny kilasy mahazatra (oh, .col-md-4
), ny kilasin'ny tsanganana andalana dia napetraka amin'ny ray aman-dreny .row
ho toy ny hitsin-dàlana. Azonao .row-cols-auto
atao ny manome ny andry ny sakany voajanahary.
Ampiasao ireto kilasin'ny tsanganana andalana ireto mba hamoronana lamina fototra fototra na hifehezana ny fandrafetana karatrao.
<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>
Azonao atao koa ny mampiasa ny mixin Sass miaraka aminy 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);
}
}
akany
Mba hanakanana ny atiny amin'ny rindran-damina mahazatra, ampio tsanganana vaovao .row
sy andiana .col-sm-*
tsanganana iray ao anatin'ny .col-sm-*
tsanganana efa misy. Ny andalana voatokana dia tokony ahitana andiana tsanganana miampy 12 na latsaka (tsy voatery hampiasa ny tsanganana 12 rehetra misy ianao).
<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
Rehefa mampiasa fisie Sass loharanon'ny Bootstrap ianao dia manana safidy amin'ny fampiasana ny fari-pahaizan'ny Sass sy ny mixins mba hamoronana fandrafetana pejy mahazatra, semantika ary mandray andraikitra. Ny kilasin'ny grid efa nofaritanay dia mampiasa ireo fari-pahalalana sy mixins ireo ihany mba hanomezana andiana kilasy vonona hampiasaina ho an'ny fandrindrana mandray andraikitra haingana.
hiovaova
Ny fiovaovana sy ny sarintany no mamaritra ny isan'ny tsanganana, ny sakan'ny tatatra, ary ny toerana fangataham-baovao hanombohana tsanganana mitsingevana. Ampiasainay ireo mba hamoronana ny kilasin'ny grid efa voafaritra mialoha voarakitra etsy ambony, ary koa ho an'ny mixins mahazatra voatanisa etsy ambany.
$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
);
Mixins
Ny mixins dia ampiasaina miaraka amin'ny fari-piainan'ny grid mba hamoronana CSS semantika ho an'ny tsanganana tsirairay.
// 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);
Fampiasana ohatra
Azonao atao ny manova ny fari-piainana amin'ny soatoavinao manokana, na mampiasa fotsiny ny mixins miaraka amin'ny sanda mahazatra azy. Ity misy ohatra iray amin'ny fampiasana ny firafitry ny default mba hamoronana lamina misy tsanganana roa misy elanelana eo anelanelany.
.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>
Fanamboarana ny grid
Amin'ny fampiasana ny fari-piadidiana sy ny sari-tany Sass ao anatiny, dia azo atao ny mampifanaraka tanteraka ny kilasin'ny grid efa voafaritra mialoha. Ovay ny isan'ny ambaratonga, ny refin'ny fangatahana media ary ny sakan'ny fitoeran-javatra—dia avereno amboarina.
Tsanganana sy tatatra
Ny isan'ny tsanganana grid dia azo ovaina amin'ny alàlan'ny fari-piadidiana Sass. $grid-columns
dia ampiasaina hamokarana ny sakany (amin'ny isan-jato) isaky ny tsanganana tsirairay ary $grid-gutter-width
mametraka ny sakany ho an'ny tatatra andry.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Tiers Grid
Mifindra any ivelan'ny tsanganana, azonao atao koa ny mampifanaraka ny isan'ny tsanganana. Raha mila tiers grid efatra fotsiny ianao dia havaozina ny $grid-breakpoints
sy $container-max-widths
amin'ny zavatra toy izao:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Rehefa manao fanovana amin'ny fari-piadidiana na sari-tany Sass dia mila mitahiry ny fanovanao ianao ary manangona indray. Ny fanaovana izany dia hamoaka andiana kilasin'ny grid efa voafaritra mialoha ho an'ny sakan'ny tsanganana, ny offset ary ny filaharana. Havaozina ihany koa ny fampitaovana fahitana mamaly mba hampiasana ireo teboka fiatoana mahazatra. Ataovy azo antoka ny mametraka ny soatoavin'ny grid px
(tsy rem
, em
, na %
).