Grid system
Gwiritsani ntchito gridi yathu yamphamvu yoyambira flexbox kuti mupange masanjidwe amitundu yonse ndi makulidwe ake chifukwa cha magawo khumi ndi awiri, magawo asanu ndi limodzi omvera okhazikika, zosinthika za Sass ndi zosakaniza, ndi makalasi ambiri omwe adafotokozedwatu.
Chitsanzo
Dongosolo la grid ya Bootstrap limagwiritsa ntchito zotengera zingapo, mizere, ndi mizati kuti isanjidwe ndikugwirizanitsa zomwe zili. Imapangidwa ndi flexbox ndipo imayankha kwathunthu. Pansipa pali chitsanzo komanso kufotokozera mozama momwe gululi limayendera limodzi.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Chitsanzo chapamwambachi chimapanga mizati itatu yofanana m'lifupi pazida zonse ndi malo owonera pogwiritsa ntchito makalasi athu omwe tawafotokozeratu. Mizati imeneyo ili pakati pa tsamba ndi kholo .container
.
Momwe zimagwirira ntchito
Kuthetsa, nayi momwe dongosolo la gridi limagwirira ntchito:
-
Gridi yathu imathandizira magawo asanu ndi limodzi omvera . Ma breakpoints amatengera
min-width
mafunso azama TV, kutanthauza kuti amakhudza kusweka kwawo ndi onse omwe ali pamwamba pake (mwachitsanzo,.col-sm-4
akukhudzasm
,md
,lg
,xl
, ndixxl
). Izi zikutanthauza kuti mutha kuwongolera chidebe ndi kukula kwa magawo ndi machitidwe podutsa gawo lililonse. -
Containers pakati ndikuwongolera zomwe zili mkati mwanu. Gwiritsani
.container
ntchito makulidwe a pixel omvera, pamawonekedwe ndi.container-fluid
zidawidth: 100%
zonse, kapena chidebe chomvera (mwachitsanzo,.container-md
) kuphatikiza kuchuluka kwa madzi ndi pixel. -
Mizere ndi zokutira pamizere. Chigawo chilichonse chili ndi chopingasa
padding
(chotchedwa gutter) chowongolera danga pakati pawo. Izipadding
zimatsukidwa m'mizere yokhala ndi m'mphepete molakwika kuwonetsetsa kuti zomwe zili m'magawo anu zikugwirizana kumanzere. Mizere imathandizanso makalasi osinthira kuti agwiritse ntchito mofananamo masanjidwe a magawo ndi makalasi a gutter kuti musinthe masinthidwe azomwe muli. -
Mizati ndi yosinthika modabwitsa. Pali mizati 12 ya ma template yomwe ilipo pamzere uliwonse, kukulolani kuti mupange mitundu yosiyanasiyana ya zinthu zomwe zimakhala ndi mizere ingapo iliyonse. Makalasi amizere amawonetsa kuchuluka kwa magawo azithunzi kuti atalike (mwachitsanzo,
col-4
magawo anayi).width
s amayikidwa mu magawo kotero kuti nthawi zonse mumakhala ndi kukula kofanana. -
Ma gutters nawonso amayankha komanso makonda. Makalasi a Gutter amapezeka podutsa malo onse opumira, ndi makulidwe onse ofanana ndi maginito athu ndi masitayilo a padding . Sinthani mitsuko yopingasa ndi
.gx-*
makalasi, mitsuko yoyima yokhala ndi.gy-*
, kapena magutter onse okhala ndi.g-*
makalasi..g-0
liliponso kuti muchotse ngalande. -
Zosintha za Sass, mamapu, ndi zosakaniza zimalimbitsa gululi. Ngati simukufuna kugwiritsa ntchito makalasi omwe afotokozedwa kale mu Bootstrap, mutha kugwiritsa ntchito gwero la gridi yathu Sass kuti mupange zanu zokhala ndi mawu ochulukirapo. Timaphatikizanso zinthu zina za CSS kuti tigwiritse ntchito mitundu ya Sass iyi kuti muzitha kusinthasintha kwambiri.
Dziwani zoperewera ndi nsikidzi kuzungulira flexbox , monga kulephera kugwiritsa ntchito zinthu zina za HTML ngati zotengera zosinthika .
Zosankha zamagulu
Makina a gridi ya Bootstrap amatha kusintha magawo onse asanu ndi limodzi osakhazikika, ndi zopumira zilizonse zomwe mumakonda. Magawo asanu ndi limodzi osakhazikika a gridi ndi awa:
- Zochepa kwambiri (xs)
- Wamng'ono (sm)
- Wapakati (md)
- Chachikulu (lg)
- Chachikulu kwambiri (xl)
- Zowonjezera zazikulu (xxl)
Monga tafotokozera pamwambapa, chilichonse mwamagawowa chimakhala ndi chidebe chake, choyambirira chamagulu apadera, ndi zosintha. Umu ndi momwe ma gridi amasinthira pama breakpoint awa:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Chidebemax-width |
Palibe (yokha) | 540px | 720px | 960px | 1140px | 1320px |
Chiyambi cha kalasi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# ya mizati | 12 | |||||
Kuchuluka kwa ngalande | 1.5rem (.75rem kumanzere ndi kumanja) | |||||
Custom ngalande | Inde | |||||
Nestable | Inde | |||||
Kuyitanitsa ndindalama | Inde |
Zopanga zokha mizati
Gwiritsani ntchito makalasi a magawo enieni a magawo kuti musinthe magawo mosavuta popanda kalasi yodziwika bwino ngati .col-sm-6
.
Kufanana m'lifupi
Mwachitsanzo, apa pali mitundu iwiri ya gridi yomwe imagwira ntchito pa chipangizo chilichonse ndi malo owonera, kuyambira xs
mpaka xxl
. Onjezani kuchuluka kwa makalasi opanda ma unit pagawo lililonse lomwe mungafune ndipo gawo lililonse likhala lofanana m'lifupi.
<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>
Kukhazikitsa m'lifupi ndime imodzi
Kukonzekera kwa Auto kwa mizati ya grid flexbox kumatanthauzanso kuti mutha kuyika m'lifupi mwagawo limodzi ndikukhala ndi magawo am'bale mozungulira mozungulira. Mutha kugwiritsa ntchito makalasi ofotokozedweratu (monga momwe tawonetsera pansipa), zosakaniza za gridi, kapena makulidwe amzere. Dziwani kuti mizati ina idzakula mosasamala kanthu za kukula kwa ndime yapakati.
<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>
Zosintha m'lifupi mwake
Gwiritsani ntchito col-{breakpoint}-auto
makalasi kuti agwirizane ndi kukula kwake kwazomwe zili.
<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>
Makalasi omvera
Gululi la Bootstrap limaphatikizapo magawo asanu ndi limodzi a makalasi ofotokozedweratu kuti apange masanjidwe ovuta kuyankha. Sinthani kukula kwa mizati yanu pazida zing'onozing'ono, zazing'ono, zapakatikati, zazikulu, kapena zazikulu monga momwe mungafunire.
Ma breakpoints onse
Kwa ma gridi omwe ali ofanana kuyambira pazida zazing'ono kwambiri mpaka zazikulu, gwiritsani ntchito .col
ndi .col-*
makalasi. Tchulani kalasi yowerengeka pamene mukufuna gawo lalikulu; apo ayi, khalani omasuka kumamatira .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>
Zaunikidwa mpaka yopingasa
Pogwiritsa ntchito gulu limodzi la .col-sm-*
makalasi, mutha kupanga makina oyambira a gridi omwe amayambira atakusanjidwa ndikukhala opingasa pagawo laling'ono ( 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>
Sakanizani ndikugwirizanitsa
Kodi simukufuna kuti zipilala zanu zizingounjika m'magulu ena a gridi? Gwiritsani ntchito makalasi osiyanasiyana pagawo lililonse ngati pakufunika. Onani chitsanzo pansipa kuti mudziwe bwino momwe zonsezi zimagwirira ntchito.
<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>
Mizere mizere
Gwiritsani ntchito .row-cols-*
makalasi omvera kuti mukhazikitse mwachangu kuchuluka kwa magawo omwe amakupangitsani bwino zomwe zili ndi masanjidwe anu. Pamene .col-*
makalasi anthawi zonse amagwira ntchito pamigawo iliyonse (mwachitsanzo, .col-md-4
), makalasi amizere amayikidwa pa kholo .row
ngati njira yachidule. Ndi .row-cols-auto
inu mukhoza kupereka mizati m'lifupi mwachibadwa.
Gwiritsani ntchito makalasi amizeremizerewa kuti mupange mwachangu masanjidwe a gridi kapena kuwongolera masanjidwe a makadi anu.
<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>
Mukhozanso kugwiritsa ntchito Sass mixin, 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);
}
}
Nesting
Kuti mutsegule zomwe zili ndi gridi yokhazikika, onjezani magawo atsopano .row
ndi magulu omwe ali .col-sm-*
mgulu lomwe lilipo .col-sm-*
. Mizere yokhazikitsidwa iyenera kukhala ndi magawo 12 kapena kucheperapo (sikufunika kuti mugwiritse ntchito magawo 12 onse omwe alipo).
<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
Mukamagwiritsa ntchito mafayilo a Sass a Bootstrap, muli ndi mwayi wogwiritsa ntchito zosinthika za Sass ndi zosakaniza kuti mupange masanjidwe amasamba, a semantic, ndi omvera. Makalasi athu omwe tawafotokozeratu amagwiritsa ntchito zosinthika zomwezi ndi zosakaniza kuti apereke gulu lonse la makalasi okonzeka kugwiritsa ntchito masanjidwe omvera mwachangu.
Zosintha
Zosintha ndi mamapu zimatsimikizira kuchuluka kwa mizati, m'lifupi mwa ngalande, ndi malo ochezera a pawailesi pomwe amayambira mizati yoyandama. Timagwiritsa ntchito izi kupanga makalasi a gridi omwe afotokozedwa pamwambapa, komanso zosakaniza zomwe zalembedwa pansipa.
$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
);
Zosakaniza
Ma Mixin amagwiritsidwa ntchito molumikizana ndi ma gridi osiyanasiyana kuti apange CSS ya semantic pamizere ya gridi iliyonse.
// 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);
Kugwiritsa ntchito chitsanzo
Mutha kusintha zosinthika kukhala zomwe mumakonda, kapena ingogwiritsani ntchito zosakaniza zomwe zili ndi zikhalidwe zawo. Nachi chitsanzo chogwiritsa ntchito zosintha zosasinthika kuti mupange masanjidwe a magawo awiri okhala ndi kusiyana pakati.
.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>
Kusintha gridi mwamakonda anu
Pogwiritsa ntchito zosinthika zathu za grid Sass ndi mamapu, ndizotheka kusinthiratu magulu omwe tawafotokozeratu. Sinthani kuchuluka kwa magawo, miyeso yafunso la media, ndi makulidwe a chidebe - kenaka phatikizaninso.
Mizere ndi ngalande
Chiwerengero cha ma grid columns chikhoza kusinthidwa kudzera mumitundu ya Sass. $grid-columns
amagwiritsidwa ntchito kupanga m'lifupi (mu peresenti) ya ndime iliyonse payekha $grid-gutter-width
ndikuyika m'lifupi mwa magutters amzati.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Mitundu ya gridi
Kupitilira mizati yokha, mutha kusinthanso kuchuluka kwa ma grid tiers. Ngati mumangofuna magawo anayi a gridi, mutha kusintha $grid-breakpoints
ndi $container-max-widths
zina monga izi:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Mukapanga zosintha zilizonse pamapu a Sass kapena mamapu, muyenera kusunga zosintha zanu ndikubwezeretsanso. Kuchita izi kutulutsa gulu latsopano lamagulu ofotokozedweratu amtundu wa magawo, ma offset, ndi kuyitanitsa. Zida zowonekera zidzasinthidwanso kuti zigwiritse ntchito ma breakpoints. Onetsetsani kuti mwakhazikitsa ma grid mu px
(osati rem
, em
, kapena %
).