Omusipi gwa Bootstrap

Okukola ebikondo

Bootstrap ezimbiddwa ku responsive 12-column grids, layouts, n'ebitundu.

Enteekateeka z’ensi yonna

Yeetaaga HTML5 doctype

Bootstrap ekozesa ebintu ebimu ebya HTML n'ebintu bya CSS ebyetaagisa okukozesa HTML5 doctype. Kiteekemu ku ntandikwa ya pulojekiti zo zonna.

  1. <!EKITUNDU KY'EKIKULU html>
  2. <html lang = "luganda" > 
  3.   ...
  4. </html>

Typography n’enkolagana

Bootstrap eteekawo okulaga okw'ensi yonna okusookerwako, okuwandiika, n'emisono gy'okuyunga. Okusingira ddala, ffe:

  • Ggyako marginku mubiri
  • Teeka background-color: white;ku ...body
  • Kozesa @baseFontFamily, @baseFontSize, ne @baseLineHeightattributes nga omusingi gwaffe ogw’okuwandiika
  • Teeka langi y'enkolagana ey'ensi yonna ng'oyita mu @linkColorera osiige ennyiriri eziriko ennyiriri zokka ku:hover

Emisono gino osobola okugisanga munda mu scaffolding.less .

Reset nga oyita mu Normalize

Nga olina Bootstrap 2, ekiziyiza ekikadde eky’okuzzaawo kisuuliddwa nga kiwagira Normalize.css , pulojekiti eyakolebwa Nicolas Gallagher ne Jonathan Neal nayo ekola amaanyi ku HTML5 Boilerplate . Wadde nga tukozesa bingi ebya Normalize munda mu reset.less yaffe , tuggyewo ebintu ebimu naddala ku Bootstrap.

Enkola ya grid eya bulijjo

Ekyokulabirako kya live grid

Enkola ya Bootstrap grid eya bulijjo ekozesa empagi 12 , ekifuula ekintu ekigazi 940px awatali bikozesebwa biddamu ebisobozeseddwa. Nga fayiro ya CSS eddamu eyongezeddwaako, grid ekyusa okubeera 724px ne 1170px obugazi okusinziira ku viewport yo. Wansi w’ebifo eby’okulaba ebya 767px, empagi zifuuka amazzi era ne zituula mu vertikal.

1.
1.
1.
1.
1.
1.
1.
1.
1.
2.
3.
4.
4.
5.
9.

HTML ya grid enkulu

Ku nteekateeka ennyangu ey’ennyiriri bbiri, kola a .rowera osseeko omuwendo .span*gw’ennyiriri ogusaanira. Engeri eno gyeri giridi ya mpagi 12, buli emu .span*ebuna omuwendo gw’ennyiriri ezo 12, era bulijjo erina okugattako okutuuka ku 12 ku buli lunyiriri (oba omuwendo gw’ennyiriri mu muzadde).

  1. <div class = "olunyiriri" > 
  2.   <div ekibiina = "span4" > ... </div> 
  3.   <div ekibiina = "span8" > ... </div> 
  4. </div> nga bwe kiri

Kubanga ekyokulabirako kino, tulina .span4ne .span8, okukola ku mpagi 12 zonna awamu n’olunyiriri olujjuvu.

Okukyusakyusa empagi

Tambuza ennyiriri ku ddyo ng’okozesa .offset*kiraasi. Buli kiraasi eyongera ku mabbali ga kkono ag’ennyiriri n’ennyiriri yonna. Okugeza, .offset4etambula .span4ku mpagi nnya.

4.
3 okukyusakyusa 2
3 okukyusakyusa 1
3 okukyusakyusa 2
6 okukyusakyusa 3 
  1. <div class = "olunyiriri" > 
  2.   <div ekibiina = "span4" > ... </div> 
  3.   <div ekibiina = "span3 offset2" > ... </div> 
  4. </div> nga bwe kiri

Empagi z’okuzimba ebisu

Okuteeka ebirimu byo n'ekisenge ekisookerwako, yongerako empya .rown'ekibinja ky'ennyiriri munda mu nnyiriri .span*eziriwo . .span*Ennyiriri eziteekeddwa mu kisenge zirina okubeeramu ekibinja ky’ennyiriri ezigatta ku muwendo gw’ennyiriri z’omuzadde waayo.

Omutendera 1 omuko
Omutendera 2
Omutendera 2 
  1. <div class = "olunyiriri" > 
  2.   <div ekibiina = "span9" > 
  3.     Omutendera 1 omuko
  4.     <div class = "olunyiriri" > 
  5.       <div class = "span6" > Omutendera 2 </div> 
  6.       <div class = "span3" > Omutendera 2 </div> 
  7.     </div> nga bwe kiri
  8.   </div> nga bwe kiri
  9. </div> nga bwe kiri

Enkola ya grid y’amazzi

Live fluid grid ekyokulabirako

Enkola ya fluid grid ekozesa ebitundu ku kikumi mu kifo kya pixels ku bugazi bw’empagi. Kirina obusobozi bwe bumu obw’okuddamu nga enkola yaffe eya fixed grid, okukakasa ebipimo ebituufu eby’okusalawo kwa screen ebisumuluzo n’ebyuma.

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

Ekisenge ky’amazzi ekikulu HTML

Fuula olunyiriri lwonna "amazzi" ng'okyusa .rowokudda ku .row-fluid. Ebika by’empagi bisigala nga bye bimu ddala, ekifuula eky’angu okukyusakyusa wakati wa giridi ezitakyukakyuka n’ez’amazzi.

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

Okukyusakyusa amazzi

Ekola mu ngeri y’emu nga enkola ya fixed grid system offsetting: yongera .offset*ku column yonna oku offset n’ennyiriri nnyingi bwe zityo.

4.
4 okukyusakyusa 4
3 okukyusakyusa 3
3 okukyusakyusa 3
6 okukyusakyusa 6 
  1. <div class = "olunyiriri-amazzi" > 
  2.   <div ekibiina = "span4" > ... </div> 
  3.   <div kiraasi = "span4 okukyusakyusa2" > ... </div> 
  4. </div> nga bwe kiri

Okuzimba ebisu mu mazzi

Fluid grids zikozesa nesting mu ngeri ya njawulo: buli nested level ya columns erina okugattako okutuuka ku 12 columns. Kino kiri bwe kityo kubanga ekisenge ky’amazzi kikozesa ebitundu ku kikumi, so si pixels, okuteeka obugazi.

Amazzi 12
Amazzi 6
Amazzi 6
Amazzi 6
Amazzi 6 
  1. <div class = "olunyiriri-amazzi" > 
  2.   <div ekibiina = "span12" > 
  3.     Amazzi 12
  4.     <div class = "olunyiriri-amazzi" > 
  5.       <div ekibiina = "span6" > 
  6.         Amazzi 6
  7.         <div class = "olunyiriri-amazzi" > 
  8.           <div kiraasi = "span6" > Amazzi 6 </div> 
  9.           <div kiraasi = "span6" > Amazzi 6 </div> 
  10.         </div> nga bwe kiri
  11.       </div> nga bwe kiri
  12.       <div kiraasi = "span6" > Amazzi 6 </div> 
  13.     </div> nga bwe kiri
  14.   </div> nga bwe kiri
  15. </div> nga bwe kiri

Ensengeka z’ebintu

Enteekateeka eteredde

Ewa ensengeka eya bulijjo ey'obugazi-obutakyukakyuka (era nga eddaamu mu ngeri ey'okwesalirawo) nga <div class="container">yeetaagibwa yokka.

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

Ensengeka y’amazzi

Tonda omuko ogw’amazzi, ogw’ennyiriri bbiri nga guliko <div class="container-fluid">—kirungi nnyo ku nkola n’ebiwandiiko.

  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

Okusobozesa ebikozesebwa ebiddamu

Ggulawo CSS eddamu mu pulojekiti yo ng'ossaamu meta tag entuufu n'olupapula lw'emisono olw'enjawulo munda mu <head>y'ekiwandiiko kyo. Bw’oba ​​okuŋŋaanyizza Bootstrap okuva ku lupapula lwa Customize, olina okussaamu meta tag yokka.

  1. <meta name = "viewport" content = "obugazi=obugazi-ekyuma, ekipimo-ekisookerwako=1.0" >  
  2. <link href = "eby'obugagga/css/bootstrap-responsive.css" rel = "olupapula lw'omusono" >

Emitwe waggulu!Bootstrap terimu bikozesebwa biddamu by default mu kiseera kino nga si buli kimu nti kyetaaga kuba responsive. Mu kifo ky’okukubiriza abakola okuggyawo ekintu kino, tukifuba okukisobozesa nga bwe kyetaagisa.

Ebikwata ku Bootstrap eddamu

Ebyuma ebiddamu

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
Okwolesebwa okunene 1200px n’okudda waggulu 70px nga bwe kiri 30px nga bwe kiri
Okukosamu 980px n’okudda waggulu 60px nga bwe kiri 20px nga bwe kiri
Ebipande by’ebifaananyi 768px n’okudda waggulu 42px nga bwe kiri 20px nga bwe kiri
Amasimu okutuuka ku tabuleti 767px ne wansi Empagi z’amazzi, tewali bugazi bunywevu
Amasimu 480px ne wansi Empagi z’amazzi, tewali bugazi bunywevu 
  1. /* Desktop ennene */ .
  2. @media ( obugazi bwa butono : 1200px ) { ... } .     
  3.  
  4. /* Ekifaananyi kya tablet ku landscape ne desktop */
  5. @media ( obugazi obusinga obunene : 768px ) ne ( obugazi obusinga obunene : 979px ) { ... }        
  6.  
  7. /* Essimu ya Landscape okutuuka ku tabuleti y'ebifaananyi */
  8. @media ( obugazi obusinga obunene : 767px ) { ... } .     
  9.  
  10. /* Amasimu aga landscape ne wansi */
  11. @media ( obugazi obusinga obunene : 480px ) { ... } .

Ebisulo by’ebikozesebwa ebiddamu

Okusobola okukulaakulanya amangu essimu, kozesa ebika bino eby’omugaso okulaga n’okukweka ebirimu okusinziira ku kyuma. Wansi waliwo emmeeza ya kiraasi eziriwo n’engeri gye zikwata ku nteekateeka y’okubuuza kw’emikutu eweereddwa (ewandiikiddwako ekyuma). Ziyinza okusangibwa mu responsive.less.

Essomo Amasimu767px ne wansi Empeke ezikozesebwa979px okutuuka ku 768px Ebikozesebwa ku mmeezaOkukosamu
.visible-phone Kirabika
.visible-tablet Kirabika
.visible-desktop Kirabika
.hidden-phone Kirabika Kirabika
.hidden-tablet Kirabika Kirabika
.hidden-desktop Kirabika Kirabika

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. Ebikozesebwa ebiddamu tebirina kukozesebwa na mmeeza, era nga bwekiri tebiwagirwa.

Responsive utilities okugezesa omusango

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