Iskaafooldii

HTML5 doctype barbaada

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

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

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, tarreen bal'ina 724px fi 1170px akka ta'uuf madaqsa, akkaataa ilaalcha kee irratti. Buufataalee ilaalchaa 767px gadi, tarjaawwan dhangala'oo ta'anii dhaabbataadhaan tuulamu.

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 isaaniif (ykn lakkoofsa tarjaawwan warra keessaa) hanga 12 ida'uu qaba.

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

3 ofseeti 2.

3 ofseeti 1.

3 ofseeti 2.

6 ofseeti 3.

<div gita = "tarree" > 
  <div gita = "span4" > ... </div> jedhu 
  <div gita = "span3 ofseeti2" > ... </div> 
</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

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

Fakkeenya giiridii dhangala’aa jiraataa

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

1. 1.

4. 4.

6. 6.

12.

HTML giiridii dhangala'aa bu'uuraa

Tarree kamiyyuu "dhangala'aa" .rowgara tti jijjiiruun godhi .row-fluid. Gitoonni tarjaa sirriitti walfakkaataa ta'anii turu, kunis tarjaa dhaabbataa fi dhangala'aa gidduutti garagalchuu salphaa taasisa.

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

4 ofseeti 4.

3 ofseeti 3.

6 ofseeti 6.

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

<div class = "tarree-dhangala'aa" > 
  <div gita = "span12" > 
    Dhangala’aa 12.
    <div class = "tarree-dhangala'aa" > 
      <div gita = "span6" > 
        Dhangala’aa 6.
        <div class = "tarree-dhangala'aa" > 
          <div class = "span6" > Dhangala'aa 6 </div> 
          <div class = "span6" > Dhangala'aa 6 </div> 
        </div> jechuun ni danda’ama
      </div> jechuun ni danda’ama
      <div class = "span6" > Dhangala'aa 6 </div> 
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</div> jechuun ni danda’ama

Haalata dhaabbataa

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

<qaama>
  <div class = "qabduu" > 
    ...
  </div> jechuun ni danda’ama
</qaama>

Haala dhangala'aa

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

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

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.

< maqaa meetaa = "buufata ilaalchaa" qabiyyee = "bal'ina=bal'ina-meeshaa, iskeelii-jalqabaa=1.0" >  
<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

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

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

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

Haala addunyaa

HTML5 doctype barbaada

Taayipoogiraafii fi hidhannoowwan

Karaa Normalize tiin deebisaa

Sirna giiridii durtii

Fakkeenya giiridii kallattiin

HTML tarjaa bu'uuraa

Tarreewwan ofseeti gochuu

Tarreewwan koonyaa gochuu

Sirna giiridii dhangala’aa

Fakkeenya giiridii dhangala’aa jiraataa

HTML giiridii dhangala'aa bu'uuraa

Ofseetiingii dhangala’aa

Dhangala’aa koonyaa gochuu

Haalata

Haalata dhaabbataa

Haala dhangala'aa

Dizaayinii deebii kennu

Amaloota deebii kennan dandeessisuun

Waa'ee Bootstrap deebii kennu

Meeshaalee deeggaraman

Kutaalee faayidaa deebii kennan

Yoom akka itti fayyadamnu

Dhimma qorannoo faayidaa deebii kennuu danda'u

Kan mul'atu...

Irratti dhokatee...