Inkqubo yegridi
Sebenzisa igridi yethu enamandla ye-mobile-first flexbox ukwakha uyilo lwazo zonke iimilo kunye nobukhulu ngenxa yenkqubo yekholamu ezilishumi elinambini, amanqanaba amahlanu aphendulayo angagqibekanga, izinto eziguquguqukayo ze-Sass kunye nemixube, kunye neeklasi ezininzi ezichazwe kwangaphambili.
Ingaba isebenza kanjani
Inkqubo yegridi yeBootstrap isebenzisa uthotho lwezikhongozeli, iirowu, kunye neekholamu kuyilo kunye nokulungelelanisa umxholo. Yakhiwe nge- flexbox kwaye iyaphendula ngokupheleleyo. Ngezantsi umzekelo kunye nokujongwa ngokunzulu kwindlela igridi edibana ngayo.
Umtsha okanye awuqhelananga neflexbox? Funda le CSS Tricks flexbox guide for imvelaphi, isigama, izikhokelo, kunye neziqwengana zekhowudi.
<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>
Lo mzekelo ungasentla udala iikholamu ezintathu zobubanzi obulinganayo kwizinto ezincinci, eziphakathi, ezinkulu, kunye nezikhulu ezongezelelweyo zisebenzisa iiklasi zegridi ezichazwe kwangaphambili. Ezo kholamu zibekwe embindini wephepha elinomzali .container
.
Ukuyichitha, nantsi indlela esebenza ngayo:
- Izikhongozeli zibonelela ngendlela yokubeka embindini kunye nokuphehla ngokuthe tye imixholo yesayithi yakho. Sebenzisa
.container
kububanzi bepikseli ephendulayo okanye.container-fluid
kuzowidth: 100%
zonke iindawo zokujonga kunye nobukhulu besixhobo. - Imiqolo ziziqwenga zemiqolo. Ikholamu nganye ine-horizontal
padding
(ebizwa ngokuba yigutter) yokulawula isithuba phakathi kwayo. Okupadding
ke kuchaswa kwimiqolo enemida ethabathayo. Ngale ndlela, wonke umxholo kwikholamu yakho ulungelelaniswe ngokubonakalayo ezantsi kwicala lasekhohlo. - Kuyilo lwegridi, umxholo kufuneka ubekwe ngaphakathi kwikholamu kwaye kuphela iikholamu ezinokuba ngabantwana bangoko kwimiqolo.
- Enkosi kwi-flexbox, iikholamu zegridi ngaphandle kokuchaziweyo
width
ziya kuyila ngokuzenzekelayo njengeekholamu zobubanzi obulinganayo. Umzekelo, iimeko ezine.col-sm
ziya kuba ngokuzenzekelayo ngama-25% ububanzi ukusuka kwindawo encinci yokuphumla ukuya phezulu. Bona icandelo lemiqolo yoyilo oluzenzekelayo ngemizekelo emininzi. - Iiklasi zekholamu zibonisa inani leekholamu ongathanda ukuyisebenzisa ngaphandle kwe-12 enokwenzeka kumqolo ngamnye. Ke, ukuba ufuna iikholamu ezintathu zobubanzi obulinganayo, ungasebenzisa
.col-4
. - Ikholamu
width
s zisetiwe ngokweepesenti, ngoko ke zihlala zimanzi kwaye zinobungakanani obunxulumene nomzali wazo. - Iikholamu zithe tye
padding
ukwenza igatha phakathi kweekholamu zomntu ngamnye, nangona kunjalo, ungasusamargin
kwimiqolo kunye nakwizintlupadding
ezinoluhlu.no-gutters
lwe.row
. - Ukwenza igridi iphendule, kukho iindawo zokuqhawula igridi ezintlanu, enye kwindawo nganye esabelayo yokusabela : zonke iindawo zokuqhawula (ezincinci kakhulu), ezincinci, eziphakathi, ezinkulu, kunye nezikhulu ezingaphezulu.
- Izahlulo zegrid zisekwe kubuncinci bemibuzo yemithombo yeendaba, oku kuthetha ukuba zisebenza kuloo ndawo yoqhawulo kunye nabo bonke abo bangaphezulu kwayo (umz.,
.col-sm-4
isebenza kwizixhobo ezincinci, eziphakathi, ezikhulu, kunye nezikhulu ezongezelelweyo, kodwa hayi indawo yokuqalaxs
). - Ungasebenzisa iiklasi zegridi ezichazwe kwangaphambili (ezifana
.col-4
) okanye imixube yeSass kuphawulo lwesemantic .
Yamkela imida kunye neebugs ezijikeleze iflexbox , njengokungakwazi ukusebenzisa ezinye izinto zeHTML njengezikhongozeli eziguqukayo .
Iinketho zegridi
Ngelixa iBootstrap isebenzisa em
s okanye rem
s ukuchaza uninzi lweesayizi, px
s zisetyenziselwa iindawo zokuqhawula igridi kunye nobubanzi besikhongozeli. Oku kungenxa yokuba ububanzi bendawo yokujonga bukwipixels kwaye abutshintshi kunye nobungakanani befonti .
Jonga indlela imiba yendlela yegridi yeBootstrap esebenza ngayo kuzo zonke izixhobo ezininzi ezinetafile ephathwayo.
Incinci kakhulu <576px |
Incinci ≥576px |
Phakathi ≥768px |
Enkulu ≥992px |
Inkulu kakhulu ≥1200px |
|
---|---|---|---|---|---|
Ubukhulu bobukhulu besikhongozeli | Akukho (auto) | 540px | 720px | 960px | 1140px |
Isimaphambili seklasi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# yeentsika | 12 | ||||
Ububanzi bomsele | 30px (15px kwicala ngalinye lekholamu) | ||||
Nestable | Ewe | ||||
Ukuodola ikholamu | Ewe |
Imiqolo yoyilo oluzenzekelayo
Sebenzisa iiklasi zekholamu ezikhethekileyo zokulinganisa iikholamu ngokulula ngaphandle kodidi oluneenombolo olucacileyo njenge .col-sm-6
.
Ububanzi obulinganayo
Umzekelo, nantsi indlela yoyilo lwegridi emibini esebenza kwisixhobo ngasinye kunye nendawo yokujonga, ukusuka xs
ukuya kwi xl
. Yongeza naliphi na inani leeklasi ezingaphantsi kweyunithi kwi-breakpoint nganye oyifunayo kwaye yonke ikholamu iya kuba nobubanzi obufanayo.
<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 multi-line
Yenza imiqolo yobubanzi obulinganayo eyenza imigca emininzi ngokufaka .w-100
apho ufuna ukuba imiqolo yaphuke kumgca omtsha. Yenza iikhefu ziphendule ngokuxuba .w-100
nezinye izinto ezibonisayo eziphendulayo .
Kwakukho iSafari flexbox bug ethintele oku ekusebenzeni ngaphandle kokucacileyo flex-basis
okanye border
. Kukho iindlela zokusebenza kwiinguqulelo zebrawuza endala, kodwa akufuneki ukuba iyimfuneko ukuba izikhangeli zakho ekujoliswe kuzo aziweli kwiinguqulelo zebuggy.
<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>
Ukucwangcisa ububanzi bekholamu enye
Uyilo oluzenzekelayo lwekholamu yegridi ye-flexbox ikwathetha ukuba unokuseta ububanzi bekholamu enye kwaye ube neekholamu zabazalwana noodade ngokuzenzekelayo ukujikeleza kuyo. Ungasebenzisa iiklasi zegridi ezichazwe kwangaphambili (njengoko kubonisiwe ngezantsi), imixube yegridi, okanye ububanzi bomgca. Qaphela ukuba ezinye iikholamu ziya kwenza ubungakanani kwakhona kungakhathaliseki ububanzi boluhlu oluphakathi.
<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>
Umxholo wobubanzi obuguquguqukayo
Sebenzisa col-{breakpoint}-auto
iiklasi ukuya kwiikholomu zobungakanani ngokusekelwe kububanzi bendalo bomxholo wabo.
<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>
Iiklasi eziphendulayo
Igridi yeBootstrap ibandakanya amanqanaba amahlanu eeklasi ezichazwe kwangaphambili zokwakhiwa koyilo olunzima oluphendulayo. Yenza ngokwezifiso ubungakanani bekholamu yakho kwizinto ezincinci, ezincinci, eziphakathi, ezinkulu, okanye ezikhulu ezongezelelweyo nangona ubona kufanelekile.
Zonke iindawo zokuqhawula
Kwiigridi ezifanayo ukusuka kwezona zixhobo zincinci ukuya kwezikhulu, sebenzisa i .col
kunye .col-*
neeklasi. Cacisa udidi olunamanani xa ufuna ikholamu enobungakanani obukhulu; kungenjalo, zive ukhululekile ukunamathela .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>
Ibekwe ngokuthe tye
Usebenzisa iseti enye .col-sm-*
yeeklasi, ungenza isixokelelwano segridi esisiseko eqala ngokupakishwa kwaye ibe ithe tye kwindawo encinci yokwaphuka ( 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>
Hlanganisa kwaye udibanise
Awufuni ukuba iikholamu zakho zibekwe ngokulula kwezinye imigangatho yegridi? Sebenzisa indibaniselwano yeeklasi ezahlukeneyo kwinqanaba ngalinye njengoko kufuneka. Jonga lo mzekelo ungezantsi ukuze ufumane ingcamango engcono yendlela esebenza ngayo yonke into.
<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>
Imijelo
Iigutters zinokuhlenga-hlengiswa ngokuphendulayo nge-padding echanekileyo kunye neeklasi eziluncedo zomda. Ukutshintsha iigatha kumqolo onikiweyo, dibanisa usetyenziso olungakhiyo lomda kwi- .row
padding ehambelanayo nezinto eziluncedo kwi- .col
s. Umzali .container
okanye .container-fluid
umzali unokufuna ukulungiswa kwakhona ukunqanda ukuphuphuma okungafunekiyo, usebenzisa kwakhona ukuthelekisa izinto eziluncedo.
Nanku umzekelo wokwenza ngokusesikweni igridi yeBootstrap kwindawo enkulu ( lg
) yebreakpoint nangaphezulu. Siye sanyusa i- .col
padding nge .px-lg-5
, sachasa oko .mx-lg-n5
kumzali .row
kwaye emva koko silungelelanise .container
isisongelo nge .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>
Imiqolo emqolo
Sebenzisa .row-cols-*
iiklasi eziphendulayo ukuseta ngokukhawuleza inani leekholomu ezinikezela kakuhle umxholo wakho kunye noyilo. Ngelixa iiklasi eziqhelekileyo .col-*
zisebenza kwikholamu nganye (umzekelo, .col-md-4
), iiklasi zemiqolo yemigca zisetelwe kumzali .row
njengendlela emfutshane.
Sebenzisa ezi klasi zeekholamu zomqolo ukwenza ngokukhawuleza uyilo lwegridi esisiseko okanye ukulawula uyilo lwekhadi lakho.
<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>
Ungasebenzisa kwakhona i-Sass mixin ehamba nayo 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);
}
}
Ulungelelwaniso
Sebenzisa izinto eziluncedo zolungelelwaniso lwebhokisi eguquguqukayo ukulungelelanisa imiqolo ethe nkqo nangokuthe tye. I-Internet Explorer 10-11 ayixhasi ukulungelelaniswa ngokuthe nkqo kwezinto eziguquguqukayo xa isikhongozeli se-flex sinomfanekiso min-height
ongezantsi. Jonga iFlexbugs #3 ngeenkcukacha ezithe vetshe.
Ulungelelwaniso oluthe nkqo
<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>
Ulungelelwaniso oluthe tye
<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>
Akukho zigatha
Imijelo phakathi kweentsika kwiiklasi zethu zegridi ezichazwe kwangaphambili zinokususwa nge .no-gutters
. Oku kususa i-negative margin
s ukusuka .row
kunye ne-horizontal padding
kuzo zonke iikholamu zabantwana zangoku.
Nantsi ikhowudi yemvelaphi yokudala ezi zimbo. Qaphela ukuba ukubhala ngaphezulu kwekholamu kuthungelwa kuphela kwikholamu zabantwana bokuqala kwaye kujoliswe kumkhethi wophawu loyelelwano . Ngelixa oku kuvelisa umkhethi othe ngqo, ukukhuselwa kwekholamu kusenokwenziwa ngokwezifiso kunye nezixhobo zokubeka izithuba .
Ngaba ufuna uyilo olusuka kumphetho ukuya kumphetho? Lahla umzali .container
okanye .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Ngokwenza, nantsi indlela ekhangeleka ngayo. Qaphela ungaqhubeka nokusebenzisa oku kunye nazo zonke ezinye iiklasi zegridi ezichazwe kwangaphambili (kubandakanya ububanzi bekholamu, imigangatho ephendulayo, uodolo ngokutsha, kunye nokunye).
<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>
Ukusonga ikholamu
Ukuba ngaphezu kweekholamu ezili-12 zibekwe ngaphakathi kumqolo omnye, iqela ngalinye leekholamu ezongezelelweyo liya kuthi, njengeyunithi enye, isonge kumgca omtsha.
Ukusukela ku-9 + 4 = 13 > 12, le div-ububanzi bekholamu-4 ibotshelelwa kumgca omtsha njengeyunithi enye edibanayo.
Imiqolo elandelayo iqhubeleka nomgca omtsha.
<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>
Uqhawulo lwekholamu
Ukwaphula iikholamu kumgca omtsha kwi-flexbox kufuna i-hack encinci: yongeza i-element kunye width: 100%
naphi na apho ufuna ukusonga iikholomu zakho kumgca omtsha. Ngokuqhelekileyo oku kufezekiswa ngee-multiple .row
s, kodwa ayizizo zonke iindlela zokuphunyezwa ezinokuphendula oku.
<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>
Unokusebenzisa eli khefu kwiindawo ezithile zokuqhawula kunye nezixhobo zethu zokubonisa eziphendulayo .
<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>
Ukucwangcisa ngokutsha
Iiklasi zokuodola
Sebenzisa .order-
iiklasi zokulawula ukulandelelana okubonakalayo komxholo wakho. Ezi klasi ziyaphendula, ngoko unokuseta i- order
breakpoint (umz., .order-1.order-md-2
). Ibandakanya inkxaso 1
kuwo 12
onke amanqanaba amahlanu egridi.
<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>
Kukwakho neeklasi eziphendulayo .order-first
kunye .order-last
neeklasi ezitshintsha order
i element ngokufaka isicelo order: -1
kunye order: 13
( order: $columns + 1
), ngokulandelelanayo. Ezi klasi zinokudityaniswa .order-*
neeklasi ezinamanani njengoko zifuneka.
<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>
Imihlathi yokumisela
Ungalungisa iikholamu zegridi ngeendlela ezimbini: .offset-
iiklasi zethu zegridi eziphendulayo kunye nezixhobo zethu zomda . Iiklasi zegridi zilingana ukuze zitshatise iikholamu ngelixa imida iluncedo kakhulu kuyilo olukhawulezayo apho ububanzi be-offset buyaguquguquka.
Iiklasi ze-Offset
Hambisa iikholamu ekunene usebenzisa .offset-md-*
iiklasi. Ezi klasi zonyusa umda wasekhohlo wekholam *
ngokweekholamu. Umzekelo, .offset-md-4
uhamba .col-md-4
ngaphaya kweekholamu ezine.
<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>
Ukongeza kokucocwa kweekholamu kwiindawo eziphendulayo, unokufuna ukuseta ngokutsha ii-offsets. Bona oku kwisenzo kumzekelo wegridi .
<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>
Izixhobo zomda
Ngokuya kwi-flexbox kwi-v4, ungasebenzisa izinto eziluncedo zomda njengokunyanzela .mr-auto
iikholamu zabantakwabo kude kwenye.
<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>
Ukuzalela
Ukuxhoma umxholo wakho ngegridi engagqibekanga, yongeza entsha .row
kunye neseti .col-sm-*
yeekholamu ngaphakathi koluhlu olukhoyo .col-sm-*
. Imiqolo ebekwe kwizindlu kufuneka ibandakanye uluhlu lwezintlu ezidibanisa ukuya kutsho kwi-12 okanye ngaphantsi (akufuneki ukuba usebenzise zonke iikholamu ezili-12 ezikhoyo).
<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 imixube
Xa usebenzisa iifayile ze-Sass zomthombo we-Bootstrap, unokhetho lokusebenzisa ii-variables ze-Sass kunye nemixube ukwenza isiko, i-semantic, kunye noyilo lwephepha eliphendulayo. Iiklasi zethu zegridi ezichazwe kwangaphambili zisebenzisa ezi ziguquguqukayo ezifanayo kunye nemixube ukubonelela ngesuti epheleleyo yeeklasi ezilungele ukusetyenziswa kwiindlela zoyilo eziphendula ngokukhawuleza.
Izinto eziguquguqukayo
Izinto eziguquguqukayo kunye neemephu zimisela inani leekholamu, ububanzi begutter, kunye nendawo yombuzo wemidiya apho kuza kuqalwa khona iikholamu ezidadayo. Sisebenzisa ezi ukuvelisa iiklasi zegridi ezichazwe kwangaphambili ezibhalwe ngasentla, kunye nemixube yesiko edweliswe ngezantsi.
$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
);
Imixube
Imixube isetyenziswa ngokudityaniswa noguquguquko lwegridi ukuvelisa i-CSS ye-semantic yeekholamu zegridi nganye.
// 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);
Umzekelo wokusetyenziswa
Uyakwazi ukuguqula izinto eziguquguqukayo kumaxabiso akho esiko, okanye usebenzise nje imixube ngexabiso labo elingagqibekanga. Nanku umzekelo wokusebenzisa useto olungagqibekanga ukwenza ubeko lwekholamu ezimbini kunye nomsantsa phakathi.
.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>
Ukulungelelanisa igridi
Ukusebenzisa igridi yethu eyakhelwe-ngaphakathi iSass eguquguqukayo kunye neemephu, kuyenzeka ukuba wenze ngokwezifiso iiklasi zegridi ezichazwe kwangaphambili. Guqula inani lamanqanaba, imilinganiselo yombuzo wemidiya, kunye nobubanzi besikhongozeli-emva koko uhlanganise.
Iikholamu kunye neegutters
Inani leekholamu zegridi zinokulungiswa kusetyenziswa iiguquguquko zeSass. $grid-columns
isetyenziselwa ukuvelisa ububanzi (ngepesenti) yekholamu nganye nganye ngelixa $grid-gutter-width
ibeka ububanzi bemijelo yomhlathi.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Imigangatho yegridi
Ukuhamba ngaphaya kweekholamu ngokwazo, unokwenza ngokwezifiso inani legridi yemigangatho. Ukuba ubufuna amanqanaba egridi amane kuphela, unokuhlaziya $grid-breakpoints
kunye $container-max-widths
nento enje:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Xa usenza naluphi na utshintsho kwizinto eziguquguqukayo ze-Sass okanye iimephu, kuya kufuneka ugcine utshintsho lwakho kwaye uqokelele kwakhona. Ukwenza njalo kuya kukhupha iseti entsha yeeklasi zegridi ezichazwe kwangaphambili kububanzi bekholomu, i-offsets, kunye nokuodola. Izixhobo ezibonakalayo eziphendulayo nazo ziya kuhlaziywa ukuze kusetyenziswe iindawo zokuqhawula ngokwesiko. Qinisekisa ukuseta amaxabiso egridi kwi px
(hayi rem
, em
, okanye %
).