Bootstrap jedhamuun beekama

Iskaafooldii

Bootstrap deebii kennuu danda'u tarjaa 12 irratti ijaarame. Akkasumas sirna sana irratti hundaa'uun haalata bal'ina dhaabbataa fi dhangala'aa ta'e daballee jirra.

Akkaataawwan addunyaa CSS deebisanii dhaabuu, barreessuu, fi hidhannoowwaniif

HTML5 doctype barbaada

Bootstrap qaamolee HTML fi amaloota CSS kanneen fayyadama gosa doktii HTML5 barbaadan fayyadama. Jalqaba fuula Bootstrapped hunda pirojektii kee keessatti hammachuu kee mirkaneessi.

  1. <!DOKTAA html>
  2. <html lang = "om" > jedhu 
  3.   ...
  4. </html> jedhu

Taayipoogiraafii fi hidhannoowwan

Faayilii scaffolding.less keessaa , agarsiisa addunyaa bu'uuraa, barreessuu, fi akkaataa walqabsiisaa saagna. Addatti ammoo, nuti:

  • Qaama irratti margina balleessuu
  • background-color: white;Irratti kaa'ibody
  • @baseFontFamilyAmaloota , @baseFontSize, fi @baseLineHeightakka bu'uura barreeffama keenyaatti fayyadami
  • Halluu hidhaa waliigalaa karaa saagi @linkColorfi sarara hidhaa qofa irratti hojii irra oolchi:hover

Karaa Normalize tiin deebisaa

Bootstrap 2 irraa eegalee, irra deebiin CSS aadaa elementoota Normalize.css irraa fayyadamuuf guddateera , pirojektii Nicolas Gallagher kan akkasumas HTML5 Boilerplate humna kennu .

Reset haaraan ammallee reset.less keessatti argamuu danda'a , garuu elementoota hedduu gabaabsuu fi sirrii ta'uuf haqaman.

Sirna tarjaa durtii tarjaa 12 kan deebii kennuu qabu

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

Sirni tarjaa durtii akka qaama Bootstrap kenname tarjaa bal'ina 940px, tarjaa 12 dha .

Akkasumas meeshaalee fi furmaata adda addaatiif garaagarummaa deebii kennuu afur qaba: bilbila, suuraa taableetii, lafa taableetii fi deeskitooppii xixiqqoo, fi deeskitooppii iskiriinii bal'aa guddaa.

  1. <div gita = "tarree" > 
  2.   <div gita = "span4" > ... </div> jedhu 
  3.   <div gita = "span8" > ... </div> jedhu 
  4. </div> jechuun ni danda’ama

Akkuma asitti agarsiifame, qindaa'inni bu'uuraa "tarjaawwan" lama waliin uumamuu danda'a, tokkoon tokkoon isaanii lakkoofsa tarjaawwan bu'uuraa 12 akka qaama sirna tarjaa keenyaatti ibsine keessaa kan hammatanidha.


Tarreewwan ofseeti gochuu

4.
4 ofseeti 4.
3 ofseeti 3.
3 ofseeti 3.
8 ofseeti 4. 
  1. <div gita = "tarree" > 
  2.   <div gita = "span4" > ... </div> jedhu 
  3.   <div gita = "span4 ofseeti4" > ... </div> 
  4. </div> jechuun ni danda’ama

Tarreewwan koonyaa gochuu

Sirna giiridii istaatiksii (dhangala'aa hin taane) Bootstrap keessatti argamuun, koonyaa gochuun salphaadha. Qabiyyee kee man'ee gochuuf, tarjaa haaraa .rowfi tuuta .span*tarjaa jiru keessaa qofa dabaluu qofa .span*.

Fakkeenya

Tarreewwan man'ee tuuta tarjaawwan hanga lakkoofsa tarjaa warra isaatti ida'aman of keessatti qabachuu qabu. Fakkeenyaaf, .span3tarjaawwan lama man'ee keessa kaa'amuu qabu .span6.

Sadarkaa 1ffaa tarjaa
Sadarkaa 2ffaa
Sadarkaa 2ffaa 
  1. <div gita = "tarree" > 
  2.   <div gita = "span12" > 
  3.     Sadarkaa 1ffaa tarjaa
  4.     <div gita = "tarree" > 
  5.       <div class = "span6" > Sadarkaa 2ffaa </div> 
  6.       <div class = "span6" > Sadarkaa 2ffaa </div> 
  7.     </div> jechuun ni danda’ama
  8.   </div> jechuun ni danda’ama
  9. </div> jechuun ni danda’ama

Sirna giiridii dhangala’aa 12 deebii kan kennan, tarjaawwan dhibbeentaa irratti hundaa’an

Tarreewwan dhangala’oo

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

Dhibbeentaa malee piikselii miti

Sirni tarjaa dhangala'aa bal'ina tarjaadhaaf bakka piikselii dhaabbataa dhibbeentaa fayyadama. Akkasumas jijjiirama deebii sirna giiridii dhaabbataa keenyaa wajjin walfakkaatu qaba, furmaata iskiriinii furtuu fi meeshaaleedhaaf pirooppoorshinii sirrii ta’e mirkaneessa.

Tarreewwan dhangala’oo

Tarree kamiyyuu salphaatti .rowgara .row-fluid. Tarreewwan sirriitti wal fakkaatutti turu, kunis haala dhaabbataa fi dhangala'aa gidduutti garagalchuuf super qajeelaa taasisa.

Markup gochuu

  1. <div class = "tarree-dhangala'aa" > 
  2.   <div gita = "span4" > ... </div> jedhu 
  3.   <div gita = "span8" > ... </div> jedhu 
  4. </div> jechuun ni danda’ama

Dhangala’aa koonyaa gochuu

Tarreewwan dhangala'oo waliin man'ee xiqqoo adda: lakkoofsi tarjaawwan man'ee warra waliin walsimsiisuu hin barbaachisu. Inumaayyuu, tarjaawwan kee sadarkaa tokkoon tokkoo irratti deebi'anii saagamu sababni isaas tarreen tokkoon tokkoon tarjaa warraa 100% fudhata.

Dhangala’aa 12.
Dhangala’aa 6.
Dhangala’aa 6. 
  1. <div class = "tarree-dhangala'aa" > 
  2.   <div gita = "span12" > 
  3.     Sadarkaa 1ffaa tarjaa
  4.     <div class = "tarree-dhangala'aa" > 
  5.       <div class = "span6" > Sadarkaa 2ffaa </div> 
  6.       <div class = "span6" > Sadarkaa 2ffaa </div> 
  7.     </div> jechuun ni danda’ama
  8.   </div> jechuun ni danda’ama
  9. </div> jechuun ni danda’ama

Dhuunfachiisuu giiridii

Jijjiiramaa Gatii durtii Ibsa
@gridColumns 12. 12. Lakkoofsa tarjaawwanii
@gridColumnWidth 60px ta'a Bal'ina tarjaa tokkoon tokkoo
@gridGutterWidth 20px ta'a Iddoo negaatiivii tarjaawwan gidduu jiru

Jijjiiramoota LESS keessatti

Bootstrap keessatti ijaaraman jijjiiramoota muraasa sirna tarjaa durtii 940px dhuunfachuuf, armaan olitti galmaa'aniiru. Jijjiiramoonni tarjaadhaaf hundi jijjiiramoota keessatti kuufamaniiru.less.

Akkaataa itti customize goonu

Giriidii fooyyessuu jechuun jijjiiramoota sadan jijjiiruu @grid*fi Bootstrap irra deebi'anii qindeessuu jechuudha. Jijjiiramoota tarjaa jijjiiramoota keessatti jijjiiri.less fi karaalee afran galmaa'an keessaa tokko fayyadamii irra deebi'ii qindeessuu . Yoo tarjaawwan dabalataa dabalaa jirta ta'e, CSS warra grid.less keessa jiraniif dabaluu kee mirkaneessi.

Deebii kennuudhaan turuu

Dhuunfachiisuun tarjaa sadarkaa durtii qofa irratti hojjeta, tarjaa 940px. Roga deebii Bootstrap eeguuf, akkasumas tarjaawwan responsive.less keessatti dhuunfachuu qabda.

Haalata Unkaalee bu'uuraa fuula marsariitii uumuuf

Haalata dhaabbataa

Haala durtii fi salphaa 940px-bal'ina, giddugaleessaa kan ta'e marsariitii ykn fuula kamiyyuu kan tokkoon kennameef <div class="container">.

  1. <qaama>
  2.   <div class = "qabduu" > 
  3.     ...
  4.   </div> jechuun ni danda’ama
  5. </qaama>

Haala dhangala'aa

<div class="container-fluid">caasaa fuula socho'aa, bal'ina xiqqaa fi guddaa, fi barruu cinaa bitaa kenna. Apps fi docs'f baayyee gaarii dha.

  1. <div class = "dhangala'aa-qabduu" > 
  2.   <div class = "tarree-dhangala'aa" > 
  3.     <div gita = "span2" > 
  4.       <!--Qabiyyee barruu cinaa-->
  5.     </div> jechuun ni danda’ama
  6.     <div gita = "span10" > 
  7.       <!--Qabiyyee qaamaa-->
  8.     </div> jechuun ni danda’ama
  9.   </div> jechuun ni danda’ama
  10. </div> jechuun ni danda’ama

Dizaayinii deebii kennu Gaaffii miidiyaa meeshaalee adda addaa fi furmaata

Meeshaalee deebii kennan

Waan isaan hojjetan

Gaaffiiwwan miidiyaa haalawwan baay'ee irratti hundaa'uun CSS amala hayyamu-reeshiyoo, bal'ina, gosa agarsiisaa fi kkf-garuu yeroo baay'ee naannoo min-widthfi max-width.

  • Bal'ina tarjaa tarjaa keenya keessaa fooyyessi
  • Bakka barbaachisaa ta'etti yaa'uu mannaa elementoota tuuluun
  • Meeshaaleedhaaf caalaatti akka mijatutti mata dureewwanii fi barruu safara jijjiiri

Gaaffii miidiyaa itti gaafatamummaadhaan fi dhaggeeffattoota moobaayilaa keessaniif akka jalqabaatti qofa fayyadamaa. Pirojektoota gurguddoof, bu'uuraalee koodii of kennanii ilaalaa malee laayiyeroota gaaffii miidiyaa osoo hin taane.

Meeshaalee deeggaraman

Bootstrap pirojektoota kee meeshaalee adda addaa fi furmaata iskiriinii irratti caalaatti mijatoo akka ta'an gargaaruuf gaaffiiwwan miidiyaa muraasa faayilii tokko keessatti deeggara. Wanti dabalame kunooti:

Mallattoo itti gochuu Bal'ina qindaa'ina Bal'ina tarjaa Bal'ina gutter
Bilbiloota ismaartii 480px fi isaa gadi ta'a Tarreewwan dhangala'oo, bal'ina dhaabbataa hin qaban
Bilbiloota ismaartii gara taableetii 767px fi isaa gadi ta'a Tarreewwan dhangala'oo, bal'ina dhaabbataa hin qaban
Taableetii suuraa 768px fi isaa ol ta'a 42px ta'a 20px ta'a
Durtii dha 980px fi isaa ol ta'a 60px ta'a 20px ta'a
Agarsiisa guddaa 1200px fi isaa ol ta’a 70px ta'a 30px ta'a

Meeta tag barbaada

Meeshaaleen fuula deebii kennanii sirnaan agarsiisan mirkaneessuuf, mallattoo meetaa buufata ilaalchaa dabali.

  1. < maqaa meetaa = "buufata ilaalchaa" qabiyyee = "bal'ina=bal'ina-meeshaa, iskeelii-jalqabaa=1.0" >

Gaaffiiwwan miidiyaa fayyadamuu

Bootstrap gaaffiiwwan miidiyaa kana ofumaan hin hammatu, garuu hubachuu fi dabaluunis baayyee salphaa fi qindeessuu xiqqaa barbaada. Amaloota deebii kennuu Bootstrap hammachuudhaaf filannoowwan muraasa qabda:

  1. Vershinii deebii kennuu qindaa'e, bootstrap-responsive.css fayyadami
  2. @import "responsive.less" itti dabaliiti Bootstrap irra deebi'ii qindeessii
  3. responsive.less akka faayilii addaatti fooyyessuu fi irra deebi'ii qindeessuu

Maaliif qofa hin dabalamne? Dhugaa dubbachuuf wanti hundi deebii kennuu hin barbaachisu. Developers amala kana akka haqan jajjabeessuu mannaa, dandeessisuun gaarii ta'a jennee tilmaamna.

  1.   // Bilbiloota landscape fi gadi
  2.   @media ( max - bal'ina : 480px ) { ... } .     
  3.  
  4.   // Bilbila lafaa gara taableetii suuraa kaasuutti
  5.   @media ( max - bal'ina : 767px ) { ... } .     
  6.  
  7.   // Taableetii suuraa gara landscape fi desktop tti kaasuun
  8.   @media ( min - bal'ina : 768px ) fi ( max - bal'ina : 979px ) { ... } .        
  9.  
  10.   // Deeskitooppii guddaa
  11.   @media ( min - bal'ina : 1200px ) { ... } .

Kutaalee faayidaa deebii kennan

Maali isaan

Misooma saffisaa moobaayilaaf mijaawaa ta’eef, qabiyyee meeshaadhaan agarsiisuu fi dhoksuuf gita faayidaa bu’uuraa kana fayyadami.

Yoom akka itti fayyadamnu

Bu'uura daangeffame irratti fayyadami fi guutummaatti gosoota adda addaa marsariitii tokkoo uumuu irraa fagaadhu. Kanaa mannaa, meeshaan tokkoon tokkoon isaanii dhiheessan dabaluudhaaf isaanitti fayyadami.

Fakkeenyaaf, <select>elementii nav'f haalata mobaayilaa irratti agarsiisuu dandeessa, garuu taableetota ykn deeskitooppii irratti hin agarsiisu.

Kutaalee deeggarsa

Asitti kan agarsiifame gabatee gitaalee nuti deeggarru fi bu'aa isaanii haalata gaaffii miidiyaa kenname irratti (meeshaan mallatteeffame). Isaanis responsive.less.

Kutaa Bilbiloota480px fi isaa gadi ta'a Taableetii767px fi isaa gadi ta'a Deeskitooppiiwwan768px fi isaa ol ta'a
.visible-phone Mul'ata
.visible-tablet Mul'ata
.visible-desktop Mul'ata
.hidden-phone Mul'ata Mul'ata
.hidden-tablet Mul'ata Mul'ata
.hidden-desktop Mul'ata Mul'ata

Dhimma qormaataa

Gitoota armaan olii qorachuuf browser kee guddina jijjiiri ykn meeshaalee adda addaa irratti fe'i.

Kan mul'atu...

Mallattoolee magariisaa gitaan mul'ata ammaa kee keessatti akka mul'atu agarsiisu.

  • Bilbila✔ Bilbila
  • Taableetii✔ Taableetii
  • Deeskitooppii✔ Deeskitooppii

Irratti dhokatee...

Asitti, mallattoowwan sakatta'iinsaa magariisaa gitaan balbala ilaalchaa ammaa kee keessatti dhokatee akka jiru agarsiisu.

  • Bilbila✔ Bilbila
  • Taableetii✔ Taableetii
  • Deeskitooppii✔ Deeskitooppii