Omusipi gwa Bootstrap

Okukola ebikondo

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 empagi 12 nga zirina twist eddamu

Ekisenge kya 940px ekisookerwako

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
4.
4.
4.
4.
8.
6.
6.
12. 12

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.

  1. <div class = "olunyiriri" > 
  2.   <div ekibiina = "span4" > ... </div> 
  3.   <div ekibiina = "span8" > ... </div> 
  4. </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.


Okukyusakyusa empagi

4.
4 okukyusakyusa 4
3 okukyusakyusa 3
3 okukyusakyusa 3
8 okukyusakyusa 4 
  1. <div class = "olunyiriri" > 
  2.   <div ekibiina = "span4" > ... </div> 
  3.   <div kiraasi = "span4 okukyusakyusa4" > ... </div> 
  4. </div> nga bwe kiri

Empagi z’okuzimba ebisu

Nga olina enkola ya grid eya static (etali ya mazzi) mu Bootstrap, okuteeka ebisu kyangu. Okuteeka ebirimu byo, yongerako empya .rown’ekibinja .span*ky’ennyiriri munda mu mpagi eriwo .span*.

Eky'okulabirako

Omutendera 1 ogw’ennyiriri
Omutendera 2
Omutendera 2 
  1. <div class = "olunyiriri" > 
  2.   <div ekibiina = "span12" > 
  3.     Omutendera 1 ogw’ennyiriri
  4.     <div class = "olunyiriri" > 
  5.       <div class = "span6" > Omutendera 2 </div> 
  6.       <div class = "span6" > Omutendera 2 </div> 
  7.     </div> nga bwe kiri
  8.   </div> nga bwe kiri
  9. </div> nga bwe kiri

Okulongoosa giridi

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

Enkyukakyuka mu LESS

Ebizimbibwa mu Bootstrap waliwo enkyukakyuka ntono ez’okulongoosa enkola ya 940px grid eya bulijjo, ewandiikiddwa waggulu. Enkyukakyuka zonna eza grid ziterekebwa mu variables.less.

Engeri y’okulongoosaamu

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.

Okusigala ng’oddamu

Okulongoosa giridi kikola ku ddaala erisookerwako lyokka, giridi ya 940px. Okukuuma ensonga eziddamu eza Bootstrap, era ojja kuba olina okulongoosa grids mu responsive.less.

Ensengeka Ebikozesebwa ebikulu okukola empapula z’omukutu

Enteekateeka eteredde

Enteekateeka esookerwako era ennyangu eya 940px-wide, centered layout kumpi ku mukutu gwonna oba omuko oguwereddwa omu <div class="container">.

  1. <omubiri>
  2.   <div class = "ekintu ekitereka" > 
  3.     ...
  4.   </div> nga bwe kiri
  5. </omubiri>

Ensengeka y’amazzi

<div class="container-fluid">egaba ensengeka y'olupapula ekyukakyuka, min- ne max-widths, n'oludda olwa kkono. Kirungi nnyo ku apps ne docs.

  1. <div class = "ekibya-amazzi" > 
  2.   <div class = "olunyiriri-amazzi" > 
  3.     <div ekibiina = "span2" > 
  4.       <!--Ebiri mu bbali-->
  5.     </div> nga bwe kiri
  6.     <div ekibiina = "span10" > 
  7.       <!--Ebiri mu mubiri-->
  8.     </div> nga bwe kiri
  9.   </div> nga bwe kiri
  10. </div> nga bwe kiri

Dizayini eddamu Okubuuza kw’emikutu gy’amawulire ku byuma eby’enjawulo n’okusalawo

Ebyuma ebiddamu

Ebyuma ebiwagirwa

Bootstrap ewagira okubuuza kw’emikutu gy’amawulire okutonotono okuyamba okufuula pulojekiti zo okutuukira ddala ku byuma eby’enjawulo n’okusalawo ku 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 940px 44px nga bwe kiri 20px nga bwe kiri
Okukosamu 940px 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

Bye bakola

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-widthne max-width.

  • Kyuusa obugazi bw’ennyiriri mu giridi yaffe
  • Stack elements mu kifo ky’okulengejja wonna we kyetaagisa
  • Kyuusa obunene bw’emitwe n’ebiwandiiko okusobola okutuukira ddala ku byuma

Okukozesa ebibuuzo by’emikutu gy’amawulire

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:

  1. Kozesa enkyusa y'okuddamu ekung'aanyiziddwa, bootstrap-responsive.css
  2. Okwongerako @import "responsive.less" era oddemu okukuŋŋaanya Bootstrap
  3. Kyuusa era oddemu okukuŋŋaanya responsive.less nga eky'enjawulo

Lwaki tomala kugissaamu? Amazima gagamba nti buli kimu kye kyetaaga okuba eky’okuddamu. Mu kifo ky’okukubiriza abakola okuggyawo ekintu kino, tukifuba okukisobozesa.

  1.   // Amasimu aga landscape ne wansi
  2.   @media ( obugazi obusinga obunene : 480px ) { ... } .     
  3.  
  4.   // Landscape essimu okutuuka ku kifaananyi tablet
  5.   @media ( obugazi obusinga obunene : 768px ) { ... } .     
  6.  
  7.   // Ekifaananyi kya tablet ku landscape ne desktop
  8.   @media ( obugazi obusinga obunene : 768px ) ne ( obugazi obusinga obunene : 940px ) { ... }        
  9.  
  10.   // Desktop ennene
  11.   @media ( obugazi bwa butono : 1200px ) { . } .