Bootstrap jedhamuun beekama

Iskaafooldii

Bootstrap deebii kan kennan tarjaa 12, qindaa'ina, fi qaamolee irratti ijaarame.

Haala addunyaa

HTML5 doctype barbaada

Bootstrap qaamolee HTML murtaa'oo fi amaloota CSS kanneen fayyadama gosa doktii HTML5 barbaadan fayyadama. Jalqaba pirojektoota kee hunda irratti dabali.

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

Taayipoogiraafii fi hidhannoowwan

Bootstrap agarsiisa addunyaa bu'uuraa, barreessuu, fi akkaataa walqabsiisaa saaga. Addatti ammoo, nuti:

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

Akkaataawwan kun scaffolding.less keessaa argamuu danda'u .

Karaa Normalize tiin deebisaa

Bootstrap 2 waliin, ugguraan deebisanii dhaabuu durii Normalize.css fayyadu gadi bu'eera , pirojektii Nicolas Gallagher fi Jonathan Neal kan akkasumas HTML5 Boilerplate humna kennu . Yeroo baay'ee Normalize reset.less keenya keessaa fayyadamnu , elementoota tokko tokko addatti Bootstrap'f haqneerra.

Sirna giiridii durtii

Fakkeenya giiridii kallattiin

Sirni tarjaa Bootstrap durtii tarjaawwan 12 fayyadama , kunis qabduu bal'ina 940px kan amaloota deebii kennuu hin dandeessifne taasisa. Faayilii CSS deebii kennu dabalamee, tarjaan akka 724px fi 1170px bal'ina ta'uuf madaqsa, akkaataa ilaalcha kee irratti. Buufataalee ilaalchaa 767px gadi, tarjaawwan dhangala'oo ta'anii dhaabbataadhaan tuulamu.

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

HTML tarjaa bu'uuraa

Haalata tarjaa lamaa salphaadhaaf, a uumi .rowfi lakkoofsa .span*tarjaa sirrii ta'e itti dabali. Kun tarjaa 12-tarree waan ta'eef, tokkoon tokkoon .span*lakkoofsa tarjaawwan 12 sanaa ni dabarsu, fi yeroo hunda tarree tokkoon tokkoo (ykn lakkoofsa tarjaa warra keessaa) hanga 12 ida'uu qaba.

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

Fakkeenya kana yoo kennine, .span4fi .span8, tarjaawwan waliigalaa 12 fi tarree guutuu taasisuu qabna.

Tarreewwan ofseeti gochuu

.offset*Gitoota fayyadamuun tarjaawwan gara mirgaatti sochoosi . Tokkoon tokkoon gitaa qarqara bitaa tarjaa tokkoo tarjaa guutuun guddisa. Fakkeenyaaf, tarjaa afur irra .offset4sochoosa ..span4

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

Tarreewwan koonyaa gochuu

Qabiyyee kee tarjaa durtii waliin man'ee gochuuf, tarjaa haaraa .rowfi tuuta .span*tarjaa jiru keessaa dabali .span*. Tarreewwan man'ee tuuta tarjaawwan hanga lakkoofsa tarjaa warra isaatti ida'aman of keessatti qabachuu qabu.

Sadarkaa 1ffaa tarjaa
Sadarkaa 2ffaa
Sadarkaa 2ffaa 
  1. <div gita = "tarree" > 
  2.   <div gita = "span9" > 
  3.     Sadarkaa 1ffaa tarjaa
  4.     <div gita = "tarree" > 
  5.       <div class = "span6" > Sadarkaa 2ffaa </div> 
  6.       <div class = "span3" > 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

Fakkeenya giiridii dhangala’aa jiraataa

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

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.

HTML giiridii dhangala'aa bu'uuraa

Tarree kamiyyuu "dhangala'aa" .rowgara tti jijjiiruun godhi .row-fluid. Gitoota tarjaa sirriitti akkuma jirutti hafu, kunis tarjaa dhaabbataa fi dhangala'aa gidduutti garagalchuu salphaa taasisa.

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

Ofseetiingii dhangala’aa

Akkuma ofseeti sirna tarjaa dhaabbataa hojjeta: .offset*tarjaa kamiyyuu irratti dabali tarjaa baay'ee sanaan ofseeti.

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

Dhangala’aa koonyaa gochuu

Giriiwwan dhangala'oo man'ee adda addaa fayyadamu: tokkoon tokkoon sadarkaa tarjaa man'ee hanga tarjaa 12tti dabaluu qaba. Sababni isaas, tarreen dhangala'aa bal'ina saaguuf piikselii osoo hin taane dhibbeentaa fayyadama.

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

Haalata

Haalata dhaabbataa

Haalata bal'ina dhaabbataa waliigalaa (fi filannoodhaan deebii kennuu) kan <div class="container">barbaachisu qofa waliin kenna.

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

Haala dhangala'aa

Fuula dhangala'aa, tarjaa lamaa kan <div class="container-fluid">—aplikeeshiniiwwanii fi galmeewwaniif baay'ee gaarii dha waliin uumi.

  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

Amaloota deebii kennan dandeessisuun

CSS deebii qabu piroojektii kee keessatti ibsi, mallattoo meetaa sirrii fi waraqaa akkaataa dabalataa galmee <head>kee keessaa hammachuudhaan. Yoo Bootstrap fuula Dhuunfachiisi irraa qindeessite, mallattoo meetaa qofa hammachuu qabda.

  1. < maqaa meetaa = "buufata ilaalchaa" qabiyyee = "bal'ina=bal'ina-meeshaa, iskeelii-jalqabaa=1.0" >  
  2. <link href = "qabeenya/css/bootstrap-deebii.css" rel = "waraqaa akkaataa" >

Mataa ol qaba!Bootstrap yeroo kanatti wanti hundi deebii kennuu waan hin qabneef akka durtiitti amaloota deebii kennuu hin dabalatu. Developers amala kana akka haqan jajjabeessuu mannaa, akka barbaachisummaa isaatti dandeessisuun gaarii ta'a jennee tilmaamna.

Waa'ee Bootstrap deebii kennu

Meeshaalee deebii kennan

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
Agarsiisa guddaa 1200px fi isaa ol ta’a 70px ta'a 30px ta'a
Durtii dha 980px fi isaa ol ta'a 60px ta'a 20px ta'a
Taableetii suuraa 768px fi isaa ol ta'a 42px ta'a 20px ta'a
Bilbiloota gara taableetotaatti 767px fi isaa gadi ta'a Tarreewwan dhangala'oo, bal'ina dhaabbataa hin qaban
Bilbiloota 480px fi isaa gadi ta'a Tarreewwan dhangala'oo, bal'ina dhaabbataa hin qaban 
  1. /* Deeskitooppii guddaa */
  2. @media ( min - bal'ina : 1200px ) { ... } .     
  3.  
  4. /* Taableetii suuraa gara landscape fi desktop */
  5. @media ( min - bal'ina : 768px ) fi ( max - bal'ina : 979px ) { ... } .        
  6.  
  7. /* Bilbila lafaa gara taableetii suuraa */
  8. @media ( max - bal'ina : 767px ) { ... } .     
  9.  
  10. /* Bilbiloota landscape fi gadi */
  11. @media ( max - bal'ina : 480px ) { ... } .

Kutaalee faayidaa deebii kennan

Misooma saffisaa mobaayilaaf mijaawaa ta'eef, qabiyyee meeshaadhaan agarsiisuu fi dhoksuuf gita faayidaa kana fayyadami. Armaan gaditti gabatee gitawwan jiran fi dhiibbaa isaanii haalata gaaffii miidiyaa kenname irratti (meeshaan mallatteeffame) jira. Isaanis responsive.less.

Kutaa Bilbiloota767px fi isaa gadi ta'a Taableetii979px hanga 768px tti ta'a DeeskitooppiiwwanDurtii dha
.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

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. Faayidaaleen deebii kennan gabatee waliin fayyadamuu hin qaban, akkasumas akka kanaatti hin deeggaraman.

Dhimma qorannoo faayidaa deebii kennuu danda'u

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