Bootstrap ezimbiddwa ku grid eya 12-column eddamu. Tutaddemu n’ensengeka ez’obugazi obutakyukakyuka n’ez’amazzi nga zeesigamiziddwa ku nkola eyo.
Enkola ya grid esookerwako ewereddwa nga ekitundu kya Bootstrap ye 940px-wide, 12-column grid .
Era erina enjawulo nnya eziddamu ku byuma eby’enjawulo n’okusalawo: essimu, ekifaananyi kya tabuleti, emmeeza landscape ne desktops entono, ne desktops ennene widescreen.
- <div class = "olunyiriri" >
- <div ekibiina = "span4" > ... </div>
- <div ekibiina = "span8" > ... </div>
- </div> nga bwe kiri
Nga bwe kiragibwa wano, ensengeka enkulu esobola okutondebwa nga erina "ennyiriri" bbiri, buli emu ekwata ku muwendo gw'ennyiriri 12 ez'omusingi ze twannyonnyola ng'ekitundu ky'enkola yaffe eya giridi.
- <div class = "olunyiriri" >
- <div ekibiina = "span4" > ... </div>
- <div kiraasi = "span4 okukyusakyusa4" > ... </div>
- </div> nga bwe kiri
Nga olina enkola ya grid eya static (etali ya mazzi) mu Bootstrap, okuteeka ebisu kyangu. Okuteeka ebirimu byo, yongerako empya .row
n’ekibinja .span*
ky’ennyiriri munda mu mpagi eriwo .span*
.
Ennyiriri eziteekeddwa mu kisenge zirina okubeeramu ekibinja ky'ennyiriri ezigatta ku muwendo gw'ennyiriri z'omuzadde gwayo. Okugeza, .span3
empagi bbiri eziteekeddwa mu kisenge zirina okuteekebwa munda mu .span6
.
- <div class = "olunyiriri" >
- <div ekibiina = "span12" >
- Omutendera 1 ogw’ennyiriri
- <div class = "olunyiriri" >
- <div class = "span6" > Omutendera 2 </div>
- <div class = "span6" > Omutendera 2 </div>
- </div> nga bwe kiri
- </div> nga bwe kiri
- </div> nga bwe kiri
Enkola ya fluid grid ekozesa ebitundu ku kikumi ku bugazi bw’empagi mu kifo kya pixels ezitakyukakyuka. Era erina enjawulo eziddamu ze zimu nga enkola yaffe eya fixed grid, okukakasa ebipimo ebituufu ku key screen resolutions n’ebyuma.
Fuula amazzi g'olunyiriri lwonna ng'okyusakyusa .row
n'ofuuka .row-fluid
. Empagi zisigala nga ze zimu ddala, ekigifuula super straightforward okukyusa wakati fixed ne fluid layouts.
- <div class = "olunyiriri-amazzi" >
- <div ekibiina = "span4" > ... </div>
- <div ekibiina = "span8" > ... </div>
- </div> nga bwe kiri
Okuzimba ebisu n’ebisenge by’amazzi kya njawulo katono: omuwendo gw’ennyiriri eziteekeddwa mu kisu tegwetaaga kukwatagana na muzadde. Wabula, ennyiriri zo ziddamu okuteekebwa ku buli mutendera kubanga buli lunyiriri lutwala ebitundu 100% ku mpagi y’omuzadde.
- <div class = "olunyiriri-amazzi" >
- <div ekibiina = "span12" >
- Omutendera 1 ogw’ennyiriri
- <div class = "olunyiriri-amazzi" >
- <div class = "span6" > Omutendera 2 </div>
- <div class = "span6" > Omutendera 2 </div>
- </div> nga bwe kiri
- </div> nga bwe kiri
- </div> nga bwe kiri
Enkyukakyuka | Omuwendo ogusookerwako | Okunnyonnyola |
---|---|---|
@gridColumns |
12. 12 | Omuwendo gw’ennyiriri |
@gridColumnWidth |
60px nga bwe kiri | Obugazi bwa buli mpagi |
@gridGutterWidth |
20px nga bwe kiri | Ekifo ekitali kirungi wakati w’empagi |
@siteWidth |
Omugatte ogubaliriddwa ogw’empagi zonna n’emidumu | Abala omuwendo gwa empagi ne gutters okuteeka obugazi bwa .container-fixed() mixin |
Ebizimbibwa mu Bootstrap waliwo enkyukakyuka ntono ez’okulongoosa enkola ya 940px grid eya bulijjo, ewandiikiddwa waggulu. Enkyukakyuka zonna eza grid ziterekebwa mu variables.less.
Okukyusa grid kitegeeza okukyusa enkyukakyuka essatu @grid*
n’okuddamu okukung’aanya Bootstrap. Kyusa enkyukakyuka za grid mu variables.less era okozese emu ku ngeri ennya eziwandiikiddwa okuddamu okukung'aanya . Bw'oba oyongerako ennyiriri endala, kakasa nti ossaako CSS y'abo abali mu grid.less.
Okulongoosa giridi kikola ku ddaala erisookerwako lyokka, giridi ya 940px. Okukuuma ensonga eziddamu eza Bootstrap, era ojja kuba olina okulongoosa grids mu responsive.less.
Enteekateeka esookerwako era ennyangu eya 940px-wide, centered layout kumpi ku mukutu gwonna oba omuko oguwereddwa omu <div class="container">
.
- <omubiri>
- <div class = "ekintu ekitereka" >
- ...
- </div> nga bwe kiri
- </omubiri>
<div class="container-fluid">
egaba ensengeka y'olupapula ekyukakyuka, min- ne max-widths, n'oludda olwa kkono. Kirungi nnyo ku apps ne docs.
- <div class = "ekibya-amazzi" >
- <div class = "olunyiriri-amazzi" >
- <div ekibiina = "span2" >
- <!--Ebiri mu bbali-->
- </div> nga bwe kiri
- <div ekibiina = "span10" >
- <!--Ebiri mu mubiri-->
- </div> nga bwe kiri
- </div> nga bwe kiri
- </div> nga bwe kiri
Bootstrap ewagira okubuuza kw’emikutu okutonotono mu fayiro emu okuyamba okufuula pulojekiti zo okutuukira ddala ku byuma eby’enjawulo n’okusalawo kwa screen. Bino bye birimu:
Erinnya | Obugazi bw’ensengeka | Obugazi bw’empagi | Obugazi bwa gutter |
---|---|---|---|
Essimu ez’amaanyi | 480px ne wansi | Empagi z’amazzi, tewali bugazi bunywevu | |
Ebipande by’ebifaananyi | 480px okutuuka ku 768px | Empagi z’amazzi, tewali bugazi bunywevu | |
Ebipande ebirabika obulungi | 768px okutuuka ku 979px | 42px nga bwe kiri | 20px nga bwe kiri |
Okukosamu | 980px n’okudda waggulu | 60px nga bwe kiri | 20px nga bwe kiri |
Okwolesebwa okunene | 1210px n’okudda waggulu | 70px nga bwe kiri | 30px nga bwe kiri |
Okukakasa nti ebyuma biraga bulungi empapula eziddamu, ssaamu viewport meta tag.
- <meta name = "viewport" content = "obugazi=obugazi-ekyuma, ekipimo-ekisookerwako=1.0" >
Ebibuuzo by’emikutu bikkiriza CSS eya bulijjo okusinziira ku mbeera eziwerako—emigerageranyo, obugazi, ekika ky’okwolesebwa, n’ebirala—naye ebiseera ebisinga essira liteekeddwa okwetooloola min-width
ne max-width
.
Bootstrap terimu bibuuzo bino eby’emikutu mu ngeri ey’otoma, naye okubitegeera n’okubigattako kyangu nnyo era kyetaagisa okuteekawo okutono. Olina engeri ntono gy’oyinza okussaamu ebikozesebwa ebiddamu ebya Bootstrap:
Lwaki tomala kugissaamu? Amazima gagamba nti buli kimu kye kyetaaga okuba eky’okuddamu. Mu kifo ky’okukubiriza abakola okuggyawo ekintu kino, tukifuba okukisobozesa.
- // Amasimu aga landscape ne wansi
- @media ( obugazi obusinga obunene : 480px ) { ... } .
- // Landscape essimu okutuuka ku kifaananyi tablet
- @media ( obugazi obusinga obunene : 768px ) { ... } .
- // Ekifaananyi kya tablet ku landscape ne desktop
- @media ( obugazi obusinga obunene : 768px ) ne ( obugazi obusinga obunene : 980px ) { ... }
- // Desktop ennene
- @media ( obugazi bwa butono : 1200px ) { . } .