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.

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.

<!DOKTAA html>
<html lang = "om" > jedhu 
  ...
</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.

1. 1.

6. 6.

12.

Sirni tarjaa durtii Bootstrap keessatti kenname tarjaawwan 12 kanneen bal'ina 724px, 940px (durtii CSS deebii kennuu osoo hin dabalatin), fi 1170px agarsiisan fayyadama. Buufataalee ilaalchaa 767px gadi, tarjaawwan dhangala'oo ta'anii dhaabbataadhaan tuulamu.

<div gita = "tarree" > 
  <div gita = "span4" > ... </div> jedhu 
  <div gita = "span8" > ... </div> jedhu 
</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 ofseeti 4.

3 ofseeti 3.

8 ofseeti 4.

<div gita = "tarree" > 
  <div gita = "span4" > ... </div> jedhu 
  <div gita = "span4 ofseeti4" > ... </div> 
</div> jechuun ni danda’ama

Tarreewwan koonyaa gochuu

Sirna tarjaa istaatiksii (dhangala'aa hin taane) Bootstrap keessatti argamuun, koonyaa gochuun salphaadha. Qabiyyee kee man'ee gochuuf, tarjaawwanii haaraa fi .rowtuuta tarjaa jiru keessaa dabaluu qofa ..span*.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

<div gita = "tarree" > 
  <div gita = "span6" > 
    Sadarkaa 1ffaa tarjaa
    <div gita = "tarree" > 
      <div class = "span3" > Sadarkaa 2ffaa </div> 
      <div class = "span3" > Sadarkaa 2ffaa </div> 
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Tarreewwan dhangala’oo

1. 1.

6. 6.

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

<div class = "tarree-dhangala'aa" > 
  <div gita = "span4" > ... </div> jedhu 
  <div gita = "span8" > ... </div> jedhu 
</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.

<div class = "tarree-dhangala'aa" > 
  <div gita = "span12" > 
    Sadarkaa 1ffaa tarjaa
    <div class = "tarree-dhangala'aa" > 
      <div class = "span6" > Sadarkaa 2ffaa </div> 
      <div class = "span6" > Sadarkaa 2ffaa </div> 
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Jijjiiramaa	Gatii durtii	Ibsa
`@gridColumns`	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 dhaabbataa

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

<qaama>
  <div class = "qabduu" > 
    ...
  </div> jechuun ni danda’ama
</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.

<div class = "dhangala'aa-qabduu" > 
  <div class = "tarree-dhangala'aa" > 
    <div gita = "span2" > 
      <!--Qabiyyee barruu cinaa-->
    </div> jechuun ni danda’ama
    <div gita = "span10" > 
      <!--Qabiyyee qaamaa-->
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

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.

< 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:

Vershinii deebii kennuu qindaa'e, bootstrap-responsive.css fayyadami
@import "responsive.less" itti dabaliiti Bootstrap irra deebi'ii qindeessii
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.

  /* Bilbiloota landscape fi gadi */
  @media ( max - bal'ina : 480px ) { ... } .     
 
  /* Bilbila lafaa gara taableetii suuraa */
  @media ( max - bal'ina : 767px ) { ... } .     
 
  /* Taableetii suuraa gara landscape fi desktop */
  @media ( min - bal'ina : 768px ) fi ( max - bal'ina : 979px ) { ... } .        
 
  /* Deeskitooppii guddaa */
  @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	Dhokataa	Dhokataa
`.visible-tablet`	Dhokataa	Mul'ata	Dhokataa
`.visible-desktop`	Dhokataa	Dhokataa	Mul'ata
`.hidden-phone`	Dhokataa	Mul'ata	Mul'ata
`.hidden-tablet`	Mul'ata	Dhokataa	Mul'ata
`.hidden-desktop`	Mul'ata	Mul'ata	Dhokataa

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

Iskaafooldii

Akkaataawwan addunyaa CSS deebisanii dhaabuu, barreessuu, fi hidhannoowwaniif

HTML5 doctype barbaada

Taayipoogiraafii fi hidhannoowwan

Karaa Normalize tiin deebisaa

Sirna tarjaa durtii tarjaa 12 kan deebii kennuu qabu

Tarreewwan ofseeti gochuu

Tarreewwan koonyaa gochuu

Fakkeenya

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

Tarreewwan dhangala’oo

Dhibbeentaa malee piikselii miti

Tarreewwan dhangala’oo

Markup gochuu

Dhangala’aa koonyaa gochuu

Dhuunfachiisuu giiridii

Jijjiiramoota LESS keessatti

Akkaataa itti customize goonu

Deebii kennuudhaan turuu

Haalata Unkaalee bu'uuraa fuula marsariitii uumuuf

Haalata dhaabbataa

Haala dhangala'aa

Dizaayinii deebii kennu Gaaffii miidiyaa meeshaalee adda addaa fi furmaata

Waan isaan hojjetan

Meeshaalee deeggaraman

Meeta tag barbaada

Gaaffiiwwan miidiyaa fayyadamuu

Kutaalee faayidaa deebii kennan

Maali isaan

Yoom akka itti fayyadamnu

Kutaalee deeggarsa

Dhimma qormaataa

Kan mul'atu...

Irratti dhokatee...