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 omvera osakhazikika, zosinthika za Sass ndi zosakaniza, ndi makalasi ambiri omwe adafotokozedwatu.
Momwe zimagwirira ntchito
Dongosolo la grid ya Bootstrap limagwiritsa ntchito zotengera zingapo, mizere, ndi mizere kuti isanjidwe ndikugwirizanitsa zomwe zili. Imapangidwa ndi flexbox ndipo imayankha kwathunthu. Pansipa pali chitsanzo ndi kuyang'ana mozama momwe gululi limakhalira pamodzi.
Zatsopano kapena simukuzidziwa ndi flexbox? Werengani izi CSS Tricks flexbox guide for background, terminology, guidelines, ndi code snippets.
<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>
Chitsanzo chapamwambachi chimapanga mizati itatu yofanana m'lifupi pazida zazing'ono, zapakati, zazikulu, ndi zazikulu zowonjezera pogwiritsa ntchito makalasi athu omwe tawafotokozeratu. Mizati imeneyo ili pakati pa tsamba ndi kholo .container
.
Kuyiphwanya, nayi momwe imagwirira ntchito:
- Zotengera zimakupatsirani njira yokhazikitsira pakati ndikuwongolera mopingasa zomwe zili patsamba lanu. Gwiritsani ntchito kukula kwa
.container
pixel komvera kapena pamawonekedwe onse ndi makulidwe a chipangizo..container-fluid
width: 100%
- Mizere ndi zokutira pamizere. Chigawo chilichonse chili ndi chopingasa
padding
(chotchedwa gutter) chowongolera danga pakati pawo. Izipadding
ndiye zimatsutsidwa pamizere yokhala ndi malire olakwika. Mwanjira iyi, zonse zomwe zili m'mipingo yanu zimayang'aniridwa kumanzere. - Pamasanjidwe a gridi, zomwe zili mumizere ziyenera kuyikidwa m'mizere ndipo magawo okhawo omwe angakhale ana amizere.
- Chifukwa cha flexbox, mizati ya gridi popanda kutchulidwa
width
imangokhazikitsidwa ngati mizere yofanana m'lifupi. Mwachitsanzo, magawo anayi amtundu.col-sm
uliwonse adzakhala 25% m'lifupi kuchokera pagawo laling'ono kupita mmwamba. Onani gawo lazopanga zokha kuti mupeze zitsanzo zambiri. - Makalasi amizere amawonetsa kuchuluka kwa magawo omwe mukufuna kugwiritsa ntchito pa 12 pa mzere uliwonse. Chifukwa chake, ngati mukufuna mizati itatu yopingasa yofanana, mutha kugwiritsa ntchito
.col-4
. - Mizati
width
s imayikidwa muzochulukira, kotero nthawi zonse imakhala yamadzimadzi komanso yokulirapo poyerekeza ndi gawo la makolo awo. - Mizati imakhala yopingasa
padding
kuti ipange ngalande pakati pa mizati payokha, komabe, mutha kuchotsamargin
mizere ndi mizerepadding
yokhala.no-gutters
ndi.row
. - Kuti gululi liziyankha, pali zodulitsa ma gridi asanu, imodzi pagawo lililonse loyankhidwa : ma breakpoints onse (owonjezera ang'onoang'ono), ang'onoang'ono, apakatikati, akulu, ndi akulu owonjezera.
- Kudumpha kwa ma gridi kumatengera mafunso ochepera a m'lifupi mwake, kutanthauza kuti amagwira ntchito pagawo limodzi ndi onse omwe ali pamwamba pake (mwachitsanzo,
.col-sm-4
zimagwira ntchito pazida zazing'ono, zapakati, zazikulu, ndi zazikulu, koma osati poyambiraxs
). - Mutha kugwiritsa ntchito makalasi a gridi omwe afotokozedwatu (monga
.col-4
) kapena zosakaniza za Sass kuti musinthe mawonekedwe.
Dziwani zoperewera ndi nsikidzi kuzungulira flexbox , monga kulephera kugwiritsa ntchito zinthu zina za HTML ngati zotengera zosinthika .
Zosankha zamagulu
Pomwe Bootstrap imagwiritsa ntchito em
s kapena rem
s kutanthauzira makulidwe ambiri, px
s amagwiritsidwa ntchito podulira ma gridi ndi m'lifupi mwake. Izi zili choncho chifukwa m'lifupi mwake malo owonera ndi ma pixel ndipo sasintha ndi kukula kwa mawonekedwe .
Onani momwe ma gridi a Bootstrap amagwirira ntchito pazida zingapo zokhala ndi tebulo lothandizira.
Zocheperako < 576px |
Yaing'ono ≥576px |
Wapakatikati ≥768px |
Chachikulu ≥992px |
Chachikulu kwambiri ≥1200px |
|
---|---|---|---|---|---|
M'lifupi mwake | Palibe (yokha) | 540px | 720px | 960px | 1140px |
Chiyambi cha kalasi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# ya mizati | 12 | ||||
Kuchuluka kwa ngalande | 30px (15px mbali iliyonse ya ndime) | ||||
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 xl
. 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>
Equal-width mizere yambiri
Pangani mizati yofanana m'lifupi mwake yomwe imayenda mizere ingapo poyikapo .w-100
pomwe mukufuna kuti mizere iduke pamzere watsopano. Pangani nthawi yopuma kuti igwirizane ndi kusakanikirana .w-100
ndi zida zina zowonetsera .
Panali cholakwika cha Safari flexbox chomwe chidalepheretsa izi kugwira ntchito popanda kumveka flex-basis
kapena border
. Pali ma workaround amitundu akale asakatuli, koma siziyenera kukhala zofunikira ngati asakatuli omwe mukufuna sakugwera m'mitundu ya ngolo.
<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>
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 a makalasi omwe adafotokozedwatu kuti amange 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 mizati yanu ingowunjika 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>
Mitsinje
Ma gutter amatha kusinthidwa bwino ndi ma breakpoint-Specific padding ndi makalasi osagwiritsa ntchito malire. Kuti musinthe ma gutters pamzere woperekedwa, phatikizani chogwiritsira ntchito pamphepete .row
ndi zofananira pa .col
s. Kholo .container
kapena .container-fluid
kholo lingafunike kusinthidwanso kuti lipewe kusefukira kosafunikira, kugwiritsanso ntchito zofananira zofananira.
Nachi chitsanzo chakusintha grid ya Bootstrap pamalo akulu ( lg
) breakpoint ndi pamwambapa. Tawonjezera .col
zotchingira ndi .px-lg-5
, kutsutsa ndi .mx-lg-n5
pa kholo .row
kenako ndikusintha .container
chokulunga ndi .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>
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.
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-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);
}
}
Kuyanjanitsa
Gwiritsani ntchito zida zoyankhulirana za flexbox kuti mulumikizane molunjika komanso mopingasa. Internet Explorer 10-11 sichirikiza kuyanjanitsa koyima kwa zinthu zosinthika pomwe chidebe chosinthira chili ndi zomwe zili min-height
pansipa. Onani Flexbugs #3 kuti mumve zambiri.
Kuyanjanitsa koyima
<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>
Kuyanjanitsa kopingasa
<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>
Palibe ngalande
Miyendo pakati pa mizati m'magulu athu omwe tafotokozeratu amatha kuchotsedwa ndi .no-gutters
. Izi zimachotsa zoipa margin
s kuchokera .row
ndi yopingasa padding
kuchokera mzati zonse za ana.
Nayi code yoyambira yopangira masitayelo awa. Zindikirani kuti zotuluka m'mipingo zimangoyang'aniridwa ndi ana oyamba okha ndipo amangosankhidwa posankha zilembo . Ngakhale kuti izi zimapanga chosankha chodziwika bwino, padding pazidutswa imatha kusinthidwanso ndi zida zapakati .
Mukufuna mapangidwe am'mphepete mpaka m'mphepete? Kugwetsa kholo .container
kapena .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Mwakuchita, umu ndi momwe zimawonekera. Zindikirani kuti mutha kupitiliza kugwiritsa ntchito izi ndi makalasi ena onse omwe afotokozedweratu (kuphatikiza makulidwe amzere, magawo omvera, kuyitanitsa, ndi zina zambiri).
<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>
Kuzimata ndime
Ngati mizati yopitilira 12 yayikidwa pamzere umodzi, gulu lililonse la zigawo zowonjezera, ngati gawo limodzi, likulungidwa pamzere watsopano.
Popeza 9 + 4 = 13 > 12, div-column-wide iyi 4 imakutidwa pamzere watsopano ngati gawo limodzi lolumikizana.
Mizati yotsatira ikupitilira pamzere watsopano.
<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>
Kuthyoka kwa magawo
Kuthyola zipilala ku mzere watsopano mu flexbox kumafuna kuthyolako pang'ono: onjezani chinthu ndi width: 100%
paliponse pomwe mukufuna kukulunga mizati yanu ku mzere watsopano. Kawirikawiri izi zimachitika ndi ma multiples .row
, koma si njira zonse zogwiritsira ntchito zomwe zingathe kuwerengera izi.
<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>
Mutha kugwiritsanso ntchito nthawi yopumirayi pakanthawi kochepa ndi zida zathu zowonetsera .
<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>
Kuyitanitsanso
Onjezani makalasi
Gwiritsani ntchito .order-
makalasi kuwongolera mawonekedwe azinthu zanu. Maphunzirowa ndi omvera, kotero mutha kukhazikitsa order
ndi breakpoint (mwachitsanzo, .order-1.order-md-2
). Zimaphatikizapo chithandizo chamagulu onse asanu 1
a 12
gridi.
<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>
Palinso makalasi omvera .order-first
komanso .order-last
omwe amasintha order
chinthucho pogwiritsa ntchito order: -1
ndi order: 13
( order: $columns + 1
), motsatana. Maphunzirowa amathanso kusakanikirana ndi .order-*
makalasi owerengeka ngati pakufunika.
<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>
Kuchepetsa mizati
Mutha kusintha magawo a gridi m'njira ziwiri: .offset-
makalasi athu omvera a gridi ndi zida zathu zam'mphepete . Magulu a gridi amakula kuti agwirizane ndi mipingo pomwe m'mphepete mwake ndi othandiza kwambiri pamasanjidwe ofulumira pomwe m'lifupi mwake ndikusintha.
Maphunziro a Offset
Sunthani mizati kumanja pogwiritsa ntchito .offset-md-*
makalasi. Makalasi awa amawonjezera malire akumanzere kwa gawo ndi magawo *
. Mwachitsanzo, .offset-md-4
amasuntha .col-md-4
mizati inayi.
<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>
Kuphatikiza pa kukonza magawo pazigawo zongoyankha, mungafunike kukonzanso zosintha. Onani izi muzochitika mu grid chitsanzo .
<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>
Zida zam'mphepete
Ndi kusunthira ku flexbox mu v4, mutha kugwiritsa ntchito zida zam'mphepete monga .mr-auto
kukakamiza mizere ya abale kutali.
<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>
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-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>
Zosakaniza za 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: 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
);
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();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@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 ma tiers, miyeso yamafunso a media, ndi makulidwe a chidebe - kenaka phatikizaninso.
Mizere ndi ngalande
Chiwerengero cha mizere ya gridi 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 mwazitsulo zazitsulo.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !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 pamitundu kapena mamapu a Sass, muyenera kusunga zosintha zanu ndikubwezeretsanso. Kuchita izi kudzatulutsa gulu latsopano lamagulu ofotokozedweratu amtundu wa magawo, ma offsets, ndi kuyitanitsa. Zida zowonekera zidzasinthidwanso kuti zigwiritse ntchito ma breakpoints. Onetsetsani kuti mwakhazikitsa ma grid mu px
(osati rem
, em
, kapena %
).