Seenaa

Guyyoota jalqabaa tiwiitaraa keessa, injinaroonni mana kitaabaa beekan kamiyyuu jechuun ni danda'ama, ulaagaalee fuulduraa guutuuf fayyadamaniiru. Bootstrap qormaata dhiyaateef deebii ta'ee kan jalqabe yoo ta'u, guddinni saffisaan saffisaan saffisaan yeroo Hackweek Twitter jalqabaa irratti hirmaate.

Gargaarsa fi yaada injinaroota hedduu Twitter irratti argamaniin, Bootstrap haalaan guddachuun akkaataa bu'uuraa qofa osoo hin taane, garuu fakkiiwwan dizaayinii fuulduraa caalaatti bareedaa fi yeroo dheeraa turuu danda'an hammateera.

Bal'inaan dev.twitter.com irratti dubbisaa ›

Deeggarsa biraawzari

Bootstrap browser ammayyaa gurguddoo kanneen akka Chrome, Safari, Internet Explorer, fi Firefox keessatti qoratamee deeggaramee jira.

• Safarii Haaraa
• Google Chrome isa haaraa
• Firefox 4+ jedhamuun beekama
• Intarneetii Eksploorarii 7+

Waan dabalame

Bootstrap CSS qindaa'e, hin qindaa'in, fi unkaalee fakkeenyaa wajjin guutuu dhufa.

• Faayilota .less jalqabaa hunda
• CSS guutummaatti qindaa'ee fi xiqqaate
• Galmee qajeelfama akkaataa guutuu
• Fakkeenya unkaa fuula (kanneen biroo yeroo dhiyootti dhufa)

Tarjaa durtii

Sirni tarjaa durtii akka qaama Bootstrap kenname tarjaa bal'ina 940px tarjaa 16 dha. Innis mi'aa sirna giiridii beekamaa 960 ti, garuu margin/padding dabalataa gama bitaa fi mirgaa malee.

Fakkeenya mallattoo tarjaa

Akkuma asitti agarsiifame, qindaa'inni bu'uuraa "tarjaawwan" lama waliin uumamuu danda'a, tokkoon tokkoon isaanii lakkoofsa tarjaawwan bu'uuraa 16 akka qaama sirna tarjaa keenyaatti ibsine keessaa kan hammatanidha. Jijjiirama dabalataaf fakkeenyota armaan gadii ilaali.

<div gita="tarree">
  <div gita = "tarjaawwan span6" > 
    ...
  </div> jechuun ni danda'ama jechuudha
  <div gita = "tarjaawwan span10" > 
    ...
  </div> jechuun ni danda'ama jechuudha
</div> jechuun ni danda'ama jechuudha

Haalata dhaabbataa

Haalata qabduu bal'ina bu'uuraa 940px, giddugaleessa qabu saayitii ykn fuula kamiifuu jechuun ni danda'ama.

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

Haala dhangala'aa

Caasaa fuula dhangala'aa ykn dhangala'aa socho'aa bal'ina min- fi max fi barruu cinaa harka bitaa qabu. Apps'f baayyee gaarii dha.

<qaama>
  <div class = "dhangala'aa-qabduu" > 
    <div class = "barruu cinaa" > 
      ...
    </div> jechuun ni danda’ama
    <div class = "qabiyyee" > 
      ...
    </div> jechuun ni danda’ama
  </div> jechuun ni danda’ama
</qaama>

Mata dureewwanii fi waraabbii

Sadarkaa maxxansaa istaandaardii fuula marsariitii kee caaseffachuuf.

h1. Mata duree 1.

h2. Mata duree 2.

h3. Mata duree 3.

h4. Mata duree 4.

h5. Mata duree 5.

h6. Mata duree 6.

Fakkeenyaaf keewwata

Nullam quis risus eget urna mollis faaya vel eu leo. Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus. Nullam id dolor id nibh ultricies konkolaataa ut id elit.

Fakkeenya mata duree Mata duree xiqqaa qaba...

Misc. elementoota

Xiyyeeffannoo, teessoo, & gabaabduu fayyadamuu

<strong> <em> <address> <abbr>

Yoom akka itti fayyadamnu

Mallattoolee cimsuu ( <strong>fi <em>) jecha ykn gaalee tokkoo waraabbii naannoo isaa jiruun walqabatee barbaachisummaa dabalataa ykn cimsuu agarsiisuuf fayyadamuu qabu. <strong>Barbaachisummaa fi cimsa dhiphinaaf<em> itti fayyadami .

Keeyyata tokko keessatti cimsa

Fusce dapibus , tellus ac cursus commodo , tortor mauris kondimentum nibh , ut fermentum massa qofa taa'uu amet risus. Maecenas faucibus mollis interdum jedhamuun beekama. Nulla vitae elit libero, afaan oromoo kan afaan oromoo fi hiika isaa pdf.

Hubachiisa: Ammallee HTML5 keessatti fayyadamuun <b>fi <i>mallattoolee homaa miti, garuu kana booda akkaataa uumamaan hin dhufan. <b>jechoota ykn gaaleewwan barbaachisummaa dabalataa osoo hin dabarsin calaqqisiisuuf kan yaadame yoo ta’u, <i>irra caalaa sagalee, jechoota teeknikaa fi kkf kan ta’udha.

Teessoowwan

Elementiin <address>odeeffannoo quunnamtii akaakayyuu isaa isa dhiyoo, ykn qaama hojii guutuuf fayyadama. Akkaataa itti mul'atu kunooti:

Twitter, Inc.
795 Folsom Ave, Suite 600
Saan Firaansiiskoo, CA 94107
P: (123) 456-7890. Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo

Hubachiisa: Tokkoon tokkoon sarara tokko keessatti <address>sarara-cabsuu ( ) tiin xumuramuu qaba ykn qabiyyee sirnaan caaseffachuuf <br />mallattoo sadarkaa ugguraa (fkn, ) keessatti marfamuu qaba .<p>

Gabateewwan

Gabaabduu fi gabaabduudhaaf, <abbr>mallattoo fayyadami ( HTML5<acronym> keessatti hin barbaachifnedha ). Unka gabaabduu mallattoo keessa kaa'iitii maqaa guutuuf mata duree saagi.

Jechoota ugguraa

<blockquote> <p> <small>

Akkaataa itti caqasan

Caqasa ugguraa hammachuudhaaf, marsi fi mallattoo kaa'i <blockquote>. Madda kee caqasuuf elementii fayyadamii isa duras daashiin em ni argatta .<p><small><small>&mdash;

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante venenatis dapibus posuere velit alikeetii.

Dr. Juuliyaas Hiibart

Ajaja hin qabne<ul>

• Lorem ipsum dolor taa'aa amet
• Consectetur adipiscing elit jedhamuun beekama
• Lakkoofsa guutuu molestie lorem at mass
• Faasilisis kan pretium nisl aliquet keessatti argamu
• Nulla volutpat alikiyaam velit jedhamuun beekama
  • Phasellus iaculis neque jedhamuun beekama
  • Purus sodales ultricies jedhamuun beekama
  • Vestibulum laoreet porttiitor sem
  • Ak tristique libero volutpat irratti
• Faucibus porta lacus fringilla vel jedhamuun beekama
• Aenean taa'u amet erat nunc
• Eget porttitor lorem jedhamtu

Unstyled ta'e<ul.unstyled>

• Lorem ipsum dolor taa'aa amet
• Consectetur adipiscing elit jedhamuun beekama
• Lakkoofsa guutuu molestie lorem at mass
• Faasilisis kan pretium nisl aliquet keessatti argamu
• Nulla volutpat alikiyaam velit jedhamuun beekama
  • Phasellus iaculis neque jedhamuun beekama
  • Purus sodales ultricies jedhamuun beekama
  • Vestibulum laoreet porttiitor sem
  • Ak tristique libero volutpat irratti
• Faucibus porta lacus fringilla vel jedhamuun beekama
• Aenean taa'u amet erat nunc
• Eget porttitor lorem jedhamtu

Ajajame<ol>

1. Lorem ipsum dolor taa'aa amet
2. Consectetur adipiscing elit jedhamuun beekama
3. Lakkoofsa guutuu molestie lorem at mass
4. Faasilisis kan pretium nisl aliquet keessatti argamu
5. Nulla volutpat alikiyaam velit jedhamuun beekama
6. Faucibus porta lacus fringilla vel jedhamuun beekama
7. Aenean taa'u amet erat nunc
8. Eget porttitor lorem jedhamtu

Ibsadl

Tarreewwan ibsa

Tarreen ibsa jechoota hiikuuf mijataa dha.

Euismod jedhama

Vestibulum id ligula porta felis euismod sanyiin eget laasiiniyaa odio sem nec elit.

Donec id elit non mi porta gravida yeroo eget metus jedhamutti.

Malesuada portaa jedhama

Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama.

Minjaala ijaaruu

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Gabateewwan guddaa dha-waan baay’eedhaaf. Gabateewwan gurguddoon garuu, faayidaa, guddinaa, fi dubbifamuu danda'u (sadarkaa koodii irratti) ta'uuf xiqqoo jaalala mallattoo barbaadu. Gorsa gargaaraa muraasni kunooti.

Yeroo hunda mataduree tarjaa kee <thead>akka sadarkaan <thead>> > <tr>ta'etti marsi <th>.

Mataduree tarjaa wajjin wal fakkaatu, qabiyyeen qaama gabatee kee hundi a keessatti marfamuu qaba <tbody>kanaaf sadarkaan kee <tbody>> <tr>> ta'a <td>.

Fakkeenya: Akkaataawwan gabatee durtii

Gabateewwan hundi dubbifamuu mirkaneessuu fi caasaa eeguuf daangaawwan barbaachisoo qofaan ofumaan akkaataa ni taasifamu. Gitoota dabalataa ykn amaloota dabaluu hin barbaachisu.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Afaan
1. 1.	Muraasa	Tokko	Afaan Ingilizii
2. 2.	Joo	Sixpack jedhamu	Afaan Ingilizii
3. 3.	Stu	Dent jedhamuun beekama	Koodii

<gita gabatee="gabatee-walii-walii"> gita = "gabatee-walii-walii" >
  ...
</table> jedhu

Fakkeenya: Zebra-striped kan qabu

Zebra-striping dabaluudhaan gabateewwan kee wajjin xiqqoo faashinii argadhu- .zebra-stripedkutaa qofa dabali.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Afaan
1. 1.	Muraasa	Tokko	Afaan Ingilizii
2. 2.	Joo	Sixpack jedhamu	Afaan Ingilizii
3. 3.	Stu	Dent jedhamuun beekama	Koodii

Hubachiisa: Zebra-striping fooyya'iinsa tarkaanfataa ta'eedha kan biraawzaroota durii akka IE8 fi isaa gadiitiif hin argamu.

<table class="gabatee-walii-walii-sarara zeebraa"> class = "gabatee-walii-walii zeebraa-sarara" >
...
</table> jedhu

Fakkeenya: Zebra-sarara w/ TableSorter.js

Fakkeenya duraa fudhachuun, karaa jQuery fi Tablesorter plugin dalagaa saaguu kennuudhaan faayidaa gabatee keenyaa fooyyessina . Saagi jijjiiruuf mataduree tarjaa kamiyyuu cuqaasi.

#	Maqaa jalqabaa	Maqaa akaakayyuu	Afaan
1. 1.	Kan kee	Tokko	Afaan Ingilizii
2. 2.	Joo	Sixpack jedhamu	Afaan Ingilizii
3. 3.	Stu	Dent jedhamuun beekama	Koodii

<iskiriiptii src="js/jgaaffii/jgaaffii.gabateesaaraa.min.js"></iskiriiptii> src = "js/jgaaffii/jgaaffii.gabateesassaa.min.js" ></script>
<iskiriiptii > 
  $ ( faankishinii () { . 
    $ ( "gabatee#Fakkeenya Gabatee sassaabuu" ). sassaabduu gabatee ({ Tarree saaguu : [[ 1 , 0 ]] });  
  });
</script> jedhu
< gita gabatee = "gabatee-walii-walii-sarara zeebraa" > 
  ...
</table> jedhu

Akkaataawwan durtii

Unkaaleen hundi haala dubbifamuu fi safaramuu danda'uun akka dhiyeessan akkaataa durtii kennamaaf. Akkaatiiwwan galtee barruu, tarreewwan filannoo, naannoo barruu, qaree raadiyoo fi sanduuqawwan filannoo, fi qareedhaaf kennama.

Fakkeenya unka sheekkoo

X-Galtee Guddaa

Filuu

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

Filuu

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

Galtee Hin Gulaalamne

Gatii Tokko Tokko Asitti

Galtee hanqifame

X-Galtee Guddaa

Barreeffama gargaarsaa xiqqaa

Fakkeenya unka sheekkoo

Barreeffama Dursee Fudhatame

@

Sanduuqa Filannoo Dursee Eegame

Sanduuqa Filannoo Dabalame

Galtee Faayilii

Fakkeenya unka sheekkoo

Tarree Filannoowwanii

• Filannoon tokko kanaa fi sana-maaliif akka guddaa ta’e dabaluu kee mirkaneessi
• Filannoon lamas sakatta’amee bu’aa unkaa keessatti hammatamuu danda’a
• Filannoon sadii—eeyyee, tilmaamteetta—akkasumas sakatta’amuu fi bu’aa unkaa keessatti hammatamuu danda’a
• Filannoon afur waan hanqifameef sakatta'amuu hin danda'u.

Hubachiisa: Asxaaleen filannoowwan hunda naannoowwan cuqaasuu baay'ee guddaa fi unkaa caalaatti fayyadamuu danda'uuf marsu.

Daangaa Guyyaa

gara Yeroon hundi akka Sa'aatii Istaandardii Paasifikii (GMT -08:00)tti agarsiifama.

Naannoo barreeffamaa

Yoo barbaachise dirree armaan olii ibsuuf barruu gargaarsaa ugguruu.

Tarree Filannoowwanii

• Filannoon tokko kanaa fi sana-maaliif akka guddaa ta’e dabaluu kee mirkaneessi
• Filannoon lamas sakatta’amee bu’aa unkaa keessatti hammatamuu danda’a

Jijjiiramoota Qusadhu  Haquu

Unkaalee walitti tuulaman

HTML unka keetii irratti dabali .form-stackedfi asxaawwan gara bitaa isaanii osoo hin taane gubbaa man'ee isaanii irratti ni qabaatta. Kun yoo unkaaleen kee gabaabaa ta'an ykn unkaalee ulfaatoo ta'aniif tarjaa galtee lama qabaatte baay'ee hojjeta.

Fakkeenya unka sheekkoo

X-Galtee Guddaa

Filuu

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

Fakkeenya unka sheekkoo

X-Galtee Guddaa

Barreeffama gargaarsaa xiqqaa

Tarree Filannoowwanii

• Filannoon tokko kanaa fi sana-maaliif akka guddaa ta’e dabaluu kee mirkaneessi
• Filannoon lamas sakatta’amee bu’aa unkaa keessatti hammatamuu danda’a

Hubachiisa: Asxaaleen filannoowwan hunda naannoowwan cuqaasuu baay'ee guddaa fi unkaa caalaatti fayyadamuu danda'uuf marsu.

Jijjiiramoota Qusadhu  Haquu

Qabduulee

Akka waliigalteetti, qareewwan gochootaaf kan fayyadaman yoo ta'u, hidhannoowwan wantaaf fayyadamu. Fakkeenyaaf, "Download" button ta'uu danda'a "sochii dhiheenyaa" immoo link ta'uu danda'a.

Qabduu hunduu durtii akkaataa halluu ifaa, garuu .primarygita halluu diimaatu jira. Dabalataan, styles mataa keetii rolling salphaa peasy dha.

Fakkeenya buttooni

Akkaataawwan qaree hojii irra oole waliin waan kamiyyuu irratti hojii irra oolchuun ni danda'ama .btn. <a>Akkaataa idileetti kanneen , , qofa irratti hojii irra oolchuu barbaadda , fi elementoota <button>filadhu . <input>Akkaataa itti mul'atu kunooti:

Safara wal jijjiirraa

Buttons gurguddoo moo xixiqqoo ta'an barbaadduu? Itti qabaadhu!

Haala hanqifame

Qabduulee hin sochoone ykn sababa tokkoon ykn kan biraatiin appiin hanqifameef, haala hanqifame fayyadami. Sunis .disabledhidhaa fi :disabledelementootaaf <button>.

Hidhamtoota

Qabduulee

Maalidha

Topbar keenya barruu dhaabbataa kan asxaa ykn maqaa marsariitii, navigeeshinii jalqabaa, fi unka barbaacha of keessaa qabudha.

Kan ofii barbaade

Qaamonni keessa jiran hundi, fi guutummaan barruu gubbaa akkasumas, filannoodha. Asxaa/maqaa, nav, barbaacha, fi nav lammaffaa-ykn walnyaatinsa sanaa kamiyyuu hammachuu filachuu dandeessa.

Dropdowns dabalatee

Akka qaama navigeeshinii ijootti, dandeettii nav kee irratti gadi bu'iinsa dabaluu siif ta'u daballee jirra. Akkaataa itti hojjetamu ilaaluuf nav lammaffaa armaan olii (mirgaan qindaa'e) ilaali.

Taaboota fi kiniinii

Navigeeshinii lammaffaa salphaa a waliin uumi <ul>. Gitaa barbaachisaa ta'e dabaluudhaan caancalaa ykn kiniinii gidduutti jijjiiri.

Kutaalee xiqqaa qabiyyee akka fuula qindaa'ina herrega keenyaa fi sarara yeroo fayyadamaa fuula qabiyyee walfakkaataa gidduutti jijjiiruuf gaarii dha. Akkaataa tabbed ykn kiniiniitiin ni argama.

• Mana
• Ibsama
• Ergaawwan
• Sajoolee
• Quunnamuu

<ul gita="caancalawwan"> gita = "caancalawwan" >
  <li class = "socho'aa" ><a href = "#" > Mana </a></li>  
  <li><a href = "#" > Profaayilii </a></li> 
  <li><a href = "#" > Ergaawwan </a></li> 
  <li><a href = "#" > Sajoo </a></li> 
  <li><a href = "#" > Quunnamtii </a></li> 
</ul> jechuun ni danda’ama

• Mana
• Ibsama
• Ergaawwan
• Sajoolee
• Quunnamuu

<ul class="kiniinii"> class = "kiniinii" >
  <li class = "socho'aa" ><a href = "#" > Mana </a></li>  
  <li><a href = "#" > Profaayilii </a></li> 
  <li><a href = "#" > Ergaawwan </a></li> 
  <li><a href = "#" > Sajoo </a></li> 
  <li><a href = "#" > Quunnamtii </a></li> 
</ul> jechuun ni danda’ama

Fuulaa (Pagination) jedhu

Ultra salphaa fi xiqqaa styled pagination Rdio irraa kaka'umsa argate. Blookiin guddaan darbuun rakkisaadha, salphaatti kan guddatu, fi naannoo cuqaasuu gurguddoo kenna.

<div gita="fuula"> gita = "fuula" >
  <ul> jedhamuun beekama
    <li class = "duraan hanqifame" ><a href = "#" > ← Duraa </a></li>  
    <li gita = "socho'aa" ><a href = "#" > 1 </a></li>  
    < li ><a href = "#" > 2 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
    < li ><a href = "#" > 3 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
    < li ><a href = "#" > 4 ​​Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
    < li ><a href = "#" > 5 Afaan Oromoo fi Jechoota Dinqisiiso Afaan Oromoo 
    <li class = "itti aanu" ><a href = "#" > Itti aanu → </a></li> jedhamuun beekama  
  </ul> jechuun ni danda’ama
</div> jechuun ni danda’ama

Akeekkachiisa bu'uuraa

Ergaawwan sarara tokkoo kufaatii, kufaatii ta'uu danda'u, ykn milkaa'ina gocha tokkoo calaqqisiisuuf. Keessattuu unkaaf faayidaa qaba.

Ergaawwan ugguruu

Ergaawwan xiqqoo ibsa barbaadaniif, akeekkachiisa akkaataa keewwataa qabna. Isaan kun ergaawwan dogongoraa dheeraa bubbling up gochuuf, fayyadamaa tarkaanfii eegamaa jiru akeekkachiisuuf, ykn fuula irratti xiyyeeffannoo dabalataaf odeeffannoo dhiyeessuu qofaaf mijataa dha.

Moodaalee

Moodaalonni—qaaqawwan ykn saanduqawwan ifaa—gochoota haalataaf haalawwan yaadannoo duubbee kunuunfamuun barbaachisaa ta'e keessatti baay'ee gaarii dha.

Gorsa Meeshaalee

Twipsies fayyadamaa burjaaja'e gargaaruu fi kallattii sirrii irratti agarsiisuuf super faayidaa qabu.

Popovers jedhaman

Odeeffannoo barruu xiqqaa fuula tokkoof osoo qindaa'ina irratti dhiibbaa hin geessisin kennuudhaaf popovers fayyadami.

Bootstrap Preboot , paakkii madda banaa mixins fi jijjiiramoota Less wajjin walqabatee fayyadamuuf ijaarame, CSS preprocessor guddina weebii saffisaa fi salphaa ta'eef.

Bootstrap keessatti akkamitti Preboot fayyadamnee fi yoo pirojektii itti aanu irratti Less hojjechuu filatte akkamitti akka itti fayyadamuu dandeessan ilaalaa.

Akkaataa itti fayyadamnu

Jijjiiramoota Bootstrap's Less, mixins, fi CSS keessatti karaa javascript biraawzari kee keessatti guutummaatti fayyadamuuf filannoo kana fayyadami.

<link rel="waraqaa akkaataa/xiqqaa" href="xiqqaa/bootstrap.xiqqaa" miidiyaa="hundumaa" /> rel = "waraqaa akkaataa/xiqqaa" href = "xiqqaa/bootstrap.xiqqaa" miidiyaa = "hundumaa" />   
<iskiriiptii src = "js/xiqqaa-1.0.41.min.js" ></iskiriiptii> 

Furmaanni .js miira hin qabduu? Appii Less Mac yaali ykn yeroo koodii kee bobbaastu qindeessuuf Node.js fayyadami .

Waan dabalame

Wantoota Twitter Bootstrap keessatti akka qaama Bootstraptti hammataman keessaa muraasni kunooti. Buufachuuf fi caalaatti baruuf gara marsariitii Bootstrap ykn fuula pirojektii Githubtti qajeela.

Jijjiiramoota halluu

Jijjiiramoonni Xiqqaa keessa jiran CSS mataa dhukkubbii irraa bilisa ta'e kunuunsuu fi fooyyessuuf mijataa dha. Yeroo gatii halluu ykn gatii yeroo baay'ee fayyadamtu jijjiiruu barbaaddu, bakka tokkotti fooyyessitii saagamteetta.

// Hidhamtoota
@Halluu hidhaa : #8b59c2;         
@Halluu hidhaaHover :     dukkaneessuu ( @Halluu hidhaa , 10 ); 
// Gurraacha
@gurraacha : #000;             
@grayDark :           ibsuu ( @gurraacha , 25 %); 
@halluu diimaa :               salphisuu ( @gurraacha , 50 %); 
@Ifa halluu diimaa :          salphisuu ( @gurraacha , 70 %); 
@grayIfaa :        salphisuu ( @gurraacha , 90 %); 
@adii : #fff;             
// Halluuwwan Aksentaa
@buluu : #08b5fb;              
@magariisaa : #46a546;             
@diimaa : #9d261d;               
@keelloo : #ffc40d;            
@burtukaana : #f89406;            
@piinkii : #c3325f;              
@diimaa : #7a43b6;            
// Bu'uura
@ bu'uuraa : 20px ;          

Yaada kennuu

Less akkasumas akkaataa yaada kennuu biraa kan CSS's normal /* ... */syntax irratti dabalataan kenna.

// Kun yaada kennuudha
/* Kunis yaada */

Mixins ol wazoo

Mixins bu'uuraan CSS'f hammata ykn gartokkeedha, kunis koodii uggura tokko gara tokkotti walitti makuuf si dandeessisa. Isaan qabeentota durtii gurguraa kan akka box-shadow, qaxxaamuraa-browser gradients, tuullaa qubee, fi kkf baay'ee gaarii dha. Armaan gaditti saamuda mixins Bootstrap waliin hammataman ni dhiheessina.

Tuullaa qubee

#font { .
  . gabaabduu ( @ulfaatina : idilee , @guddina : 14px , @Ol'ina sararaa : 20px ) {     
guddina     qubee : @size ; _ 
    font - ulfaatina : @ulfaatina ; 
    sarara - olka'iinsa : @lineHeight ; 
  } .
  . sans - serif ( @ulfaatina : idilee , @guddina : 14px , @Ol'ina sararaa : 20px ) {     
maatii     qubee : "Helvetica Neue " , ​​Helvetica , Arial , sans - serif ;   
guddina     qubee : @size ; _ 
    font - ulfaatina : @ulfaatina ; 
    sarara - olka'iinsa : @lineHeight ; 
  } .
  . serif ( @ulfaatina : idilee , @guddina : 14px , @Ol'ina sararaa : 20px ) {     
    font - family : "Joorjiyaa" , Taayims Haaraa Roomaa , Taayims , sans - serif ;     
guddina     qubee : @size ; _ 
    font - ulfaatina : @ulfaatina ; 
    sarara - olka'iinsa : @lineHeight ; 
  } .
  . monospace ( @ulfaatina : idilee , @guddina : 12px , @Ol'ina sararaa : 20px ) {     
    font - family : "Monaakoo" , Ergaa Haaraa , monospace ;   
guddina     qubee : @size ; _ 
    font - ulfaatina : @ulfaatina ; 
    sarara - olka'iinsa : @lineHeight ; 
  } .
} .

Giraadiyaantii

#gradient { .
  . horizontal ( @Halluu jalqabaa : #555, @Halluu xumuraa: #333) { 
halluu -     duubbee : @endColor ; 
    duubbee - irra deddeebi'uu : irra deebi'uu - x ;
    duubbee - fakkii : - khtml - garaagarummaa ( sarara , bitaa gubbaa , mirga gubbaa , ( @startColor ) irraa , gara ( @endColor )); // Konqueror jedhamuun beekama   
    duubbee - fakkii : -moz - sarara - gradient ( bitaa , @Halluu jalqabaa , @Halluu dhuma ); // FF 3.6+ jedhamuun beekama    
    duubbee - fakkii : - ms - sarara - gradient ( bitaa , @Halluu jalqabaa , @Halluu dhuma ); // IE10 jedhamuun beekama    
    duubbee - fakkii : - webkit - garaagarummaa ( sarara , bitaa gubbaa , mirga gubbaa , halluu - dhaabuu ( 0 %, @startColor ), halluu - dhaabuu ( 100 %, @endColor )); // Safarii 4+, Kiroomii 2+    
    duubbee - fakkii : - webkit - linear - gradient ( bitaa , @Halluu jalqabaa , @Halluu dhuma ); // Safarii 5.1+, Kiroomii 10+ jedhamuun beekama    
    duubbee - fakkii : - o - sarara - gradient ( bitaa , @Halluu jalqabaa , @Halluu dhuma ); // Opereetaa 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(Halluu jalqabaa='%d', Halluu xumuraa='%d', Gosa Sadarkaa=1)" , @Halluu jalqabaa , @Halluu xumuraa ); // IE8+ jedhamuun beekama  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(Halluu jalqabaa='%d', Halluu xumuraa='%d', Gosa Sadarkaa=1)" , @Halluu jalqabaa , @Halluu xumuraa )); // IE6 & IE7 jedhamuun beekama 
    duubbee - fakkii : sarara - gradient ( bitaa , @Halluu jalqabaa , @Halluu dhuma ); // Le istaandaardii   
  } .
  . vertical ( @Halluu jalqabaa : #555, @Halluu xumuraa: #333) { 
halluu -     duubbee : @endColor ; 
    duubbee - irra deddeebi'uu : irra deebi'uu - x ;
    duubbee - fakkii : - khtml - garaagarummaa ( sarara , bitaa gubbaa , bitaa jala , irraa ( @startColor ), gara ( @endColor )); // Konqueror jedhamuun beekama   
    duubbee - fakkii : - moz - sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // FF 3.6+ jedhamuun beekama   
    duubbee - fakkii : - ms - sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // IE10 jedhamuun beekama   
    duubbee - fakkii : - webkit - garaagarummaa ( sarara , bitaa gubbaa , bitaa jala , halluu - dhaabuu ( 0 %, @startColor ), halluu - dhaabuu ( 100 %, @endColor )); // Safarii 4+, Kiroomii 2+    
    duubbee - fakkii : - webkit - sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // Safarii 5.1+, Kiroomii 10+ jedhamuun beekama   
    duubbee - fakkii : - o - sarara - gradient ( @Halluu jalqabaa , @Halluu xumuraa ); // Opereetaa 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(Halluu jalqabaa='%d', Halluu xumuraa='%d', Gosa Sadarkaa=0)" , @Halluu jalqabaa , @Halluu xumuraa ); // IE8+ jedhamuun beekama  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(halluu jalqabaa='%d', halluu xumuraa='%d', Gosa garaagarummaa=0)" , @Halluu jalqabaa , @Halluu xumuraa )); // IE6 & IE7 jedhamuun beekama 
    duubbee - fakkii : sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // Istaandardii  
  } .
  . kallattii ( @Halluu jalqabaa : #555, @Halluu dhuma: #333, @deg: 45deg) { 
    ...
  } .
  . dhaabbataa - sadii - halluuwwan ( @Halluu jalqabaa : #00b3ee, @Halluu gidduu: #7a43b6, @HalluuDhaabbii: 0.5, @Halluu dhuma: #c3325f) { 
    ...
  } .
} .

Sirna hojii fi giiridii

Faansii argadhu herrega tokko tokko raawwadhuun akka isa armaan gadii mixins flexible fi humna guddaa qabu maddisiisuu.

// Giriidituudii
@Tarreewwan tarree : 16 ;       
@GiridBal'inaTarree : 40px ;   
@GiridGutterBal'ina : 20px ;   
// Sirna Giriidii
. qabduu { .
  bal'ina : @Bal'ina saayitii ; 
  margin : 0 ofumaan ;  
  . qulqulleessuu ();
} .
. tarjaawwan ( @columnSpan : 1 ) { .  
  agarsiisa : sarara keessaa ; 
  float : bitaa ;
  bal'ina : ( @Bal'ina Tarjaa Giriidi * @Bal'ina Tarjaa ) + ( @Bal'ina GutterGiriid * ( @TarreeTarree - 1 ) );         
  margin - bitaa : @GariidGutterWidth ; 
  &: jalqabaa - mucaa { .
    margin - bitaa : 0 ; 
  } .
} .
. ofseeti ( @tarreeOfseeti : 1 ) {  
  margin - bitaa : ( @Bal'inaTarreeTarree * @Ofseeti tarjaa ) + ( @Bal'inaGutterGirid * ( @Ofseeti tarree - 1 )) ! barbaachisaa ;          
} .