Okukola ebikondo

Bootstrap ezimbiddwa ku grid eya 12-column eddamu. Tutaddemu n’ensengeka ez’obugazi obutakyukakyuka n’ez’amazzi nga zeesigamiziddwa ku nkola eyo.

Yeetaaga HTML5 doctype

Bootstrap ekozesa ebintu bya HTML n'ebintu bya CSS ebyetaagisa okukozesa HTML5 doctype. Kakasa nti ogiteeka ku ntandikwa ya buli lupapula lwa Bootstrapped mu pulojekiti yo.

<!EKITUNDU KY'EKIKULU html>
<html lang = "luganda" > 
  ...
</html>

Typography n’enkolagana

Munda mu fayiro ya scaffolding.less , tuteekawo okulaga okw’ensi yonna okusookerwako, okuwandiika, n’emisono gy’okuyunga. Okusingira ddala, ffe:

Ggyawo margin ku mubiri
Teeka background-color: white;ku ...body
Kozesa @baseFontFamily, @baseFontSize, @baseLineHeightn’ebintu ng’omusingi gwaffe ogw’okuwandiika
Teeka langi y'enkolagana ey'ensi yonna ng'oyita mu @linkColorera osiige ennyiriri eziriko ennyiriri zokka ku:hover

Reset nga oyita mu Normalize

Okuva ku Bootstrap 2, okuddamu okuteekawo CSS okw’ennono kweyongedde okukozesa ebintu okuva mu Normalize.css , pulojekiti eya Nicolas Gallagher nayo ekola amaanyi ku HTML5 Boilerplate .

Okuddamu okupya kukyayinza okusangibwa mu reset.less , naye nga waliwo ebintu bingi ebiggiddwawo olw'obumpimpi n'obutuufu.

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, enkula ya tabuleti n’obuuma obutono, ne desktop ennene eza widescreen.

<div class = "olunyiriri" > 
  <div ekibiina = "span4" > ... </div> 
  <div ekibiina = "span8" > ... </div> 
</div> nga bwe kiri

Nga bwe kiragibwa wano, ensengeka enkulu esobola okutondebwawo 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 okukyusakyusa 4

3 okukyusakyusa 3

8 okukyusakyusa 4

<div class = "olunyiriri" > 
  <div ekibiina = "span4" > ... </div> 
  <div kiraasi = "span4 okukyusakyusa4" > ... </div> 
</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

Ennyiriri eziteekeddwa mu kisenge zirina okubeeramu ekibinja ky'ennyiriri ezigatta ku muwendo gw'ennyiriri z'omuzadde gwayo. Okugeza, .span3empagi bbiri eziteekeddwa mu kisenge zirina okuteekebwa munda mu .span6.

Omutendera 1 ogw’ennyiriri

Omutendera 2

<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

Empagi z’amazzi

12. 12

Ebitundu ku kikumi, so si pixels

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.

Ennyiriri z’amazzi

Fuula amazzi g'olunyiriri lwonna ng'okyusakyusa .rown'ofuuka .row-fluid. Empagi zisigala nga ze zimu ddala, ekigifuula super straightforward okukyusa wakati fixed ne fluid layouts.

Okuteeka obubonero

<div class = "olunyiriri-amazzi" > 
  <div ekibiina = "span4" > ... </div> 
  <div ekibiina = "span8" > ... </div> 
</div> nga bwe kiri

Okuzimba ebisu mu mazzi

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.

Amazzi 12

Amazzi 6

<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

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.

Enteekateeka eteredde

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>

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.

<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

Ebyuma ebiddamu

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

Kozesa ebibuuzo by’emikutu gy’amawulire mu ngeri ey’obuvunaanyizibwa era ng’entandikwa yokka eri abalabi bo ku ssimu. Ku pulojekiti ennene, lowooza ku misingi gya koodi egy’okwewaayo so si layers z’okubuuza kw’emikutu.

Ebyuma ebiwagirwa

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
Essimu ez’amaanyi okutuuka ku ttabuleeti	767px ne wansi	Empagi z’amazzi, tewali bugazi bunywevu
Ebipande by’ebifaananyi	768px n’okudda waggulu	42px nga bwe kiri	20px nga bwe kiri
Okukosamu	980px n’okudda waggulu	60px nga bwe kiri	20px nga bwe kiri
Okwolesebwa okunene	1200px n’okudda waggulu	70px nga bwe kiri	30px nga bwe kiri

Yeetaaga meta tag

Okukakasa nti ebyuma biraga bulungi empapula eziddamu, ssaamu viewport meta tag.

<meta name = "viewport" content = "obugazi=obugazi-ekyuma, ekipimo-ekisookerwako=1.0" >

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:

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

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 : 767px ) { ... } .     
 
  // Ekifaananyi kya tablet ku landscape ne desktop
  @media ( obugazi bwa butono : 768px ) ne ( obugazi obusinga obunene : 979px ) { ... }        
 
  // Desktop ennene
  @media ( obugazi bwa butono : 1200px ) { ... } .

Ebisulo by’ebikozesebwa ebiddamu

Ziri ki

Okusobola okukulaakulanya amangu essimu, kozesa ebika bino ebikulu eby’omugaso okulaga n’okukweka ebirimu okusinziira ku kyuma.

Ddi lw’olina okukozesa

Kozesa ku musingi omutono era weewale okukola enkyusa ez’enjawulo ddala ez’omukutu gwe gumu. Mu kifo ky’ekyo, zikozese okujjuliza ennyanjula ya buli kyuma.

Okugeza, oyinza okulaga <select>elementi ya nav ku layouts z’essimu, naye si ku tablets oba desktops.

Okuwagira emisomo

Elagiddwa wano emmeeza ya kiraasi ze tuwagira n’engeri gye zikwata ku nteekateeka y’okubuuza kw’emikutu eweereddwa (ewandiikiddwa ku kyuma). Ziyinza okusangibwa mu responsive.less.

Essomo	Amasimu480px ne wansi	Empeke ezikozesebwa767px ne wansi	Ebikozesebwa ku mmeeza768px n’okudda waggulu
`.visible-phone`	Kirabika	Okukweekebwa	Okukweekebwa
`.visible-tablet`	Okukweekebwa	Kirabika	Okukweekebwa
`.visible-desktop`	Okukweekebwa	Okukweekebwa	Kirabika
`.hidden-phone`	Okukweekebwa	Kirabika	Kirabika
`.hidden-tablet`	Kirabika	Okukweekebwa	Kirabika
`.hidden-desktop`	Kirabika	Kirabika	Okukweekebwa

Omusango gw'okugezesa

Kyuusa sayizi ya browser yo oba load ku byuma eby’enjawulo okugezesa classes ezo waggulu.

Kirabika ku...

Obubonero obwa kiragala bulaga nti kiraasi erabika mu kifo kyo eky'okulabamu kati.

Essimu✔ Essimu
Empeke✔ Empeke
Desktop y’oku mmeeza✔ Ku mmeeza

Ekwekeddwa ku...

Wano, obubonero bwa kiragala bulaga nti kiraasi ekwekeddwa mu viewport yo eriwo kati.

Essimu✔ Essimu
Empeke✔ Empeke
Desktop y’oku mmeeza✔ Ku mmeeza