gararraa
bitaa
sirrii
gadi

Bootstrap, Twitter irraa

Bootstrap meeshaa Twitter irraa dhufe yoo ta'u, webapps fi sites guddisuuf qophaa'edha.
Innis bu'uuraa CSS fi HTML barreessuu, unkaalee, qaree, gabatee, tarjaa, qajeelcha fi kkf of keessatti qabata.

Nerd alert: Bootstrap Less tiin kan ijaarame yoo ta'u, browser ammayyaa yaada keessa galchuun karra keessaa ba'ee akka hojjetu kan qophaa'edha.

Hotlink kan jedhu CSS

Jalqaba saffisaa fi salphaa ta'eef, kutaa kana gara fuula marsariitii keessaniitti waraabuu qofa.

Xiqqaa wajjin itti fayyadamaa

Deeggaraa Less fayyadamuu? Rakkoo hin qabu, repo clone gochuu qofaafi sararoota kana itti dabali:

GitHub irratti furguggisaa

Buufadhu, fork, harkisuu, dhimmoota faayila, fi kanneen biroo repo Bootstrap ofiisaa Github irratti.

GitHub irratti bootstrap gochuu »

Yeroo ammaa v1.3.0

Seenaa

Injiinarroonni Twitter seenaa keessatti mana kitaabaa beekan kamiyyuu jechuun ni danda'ama ulaagaalee fuulduraa guutuuf fayyadamaniiru. Bootstrap qormaata dhufuuf deebii ta'ee jalqabe. Gargaarsa namoota ajaa'ibaa hedduutiin Bootstrap guddina guddaa agarsiiseera.

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.

Chrome, Safari, Internet Explorer, fi Firefox keessatti qoratamee deeggaramee jira
  • Safarii Haaraa
  • Google Chrome isa haaraa
  • Firefox 4+ jedhamuun beekama
  • Intarneetii Eksploorarii 7+
  • Opera 11. Afaan Oromoo

Waan dabalame

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

Fakkeenyota saffisaan jalqaban

Unkaalee saffisaa tokko tokko barbaadduu? Fakkeenyota bu'uuraa walitti qabne kana ilaalaa:

  • Haala salphaa tarjaa sadii kan yuunitii goota qabu
  • Haalata dhangala'aa barruu cinaa istaatiksii qabu
  • Qabduu salphaa fannifamee apps

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.

  1. <div gita = "tarree" >
  2. <div gita = "span6" >
  3. ...
  4. </div> jechuun ni danda’ama
  5. <div gita = "span10" >
  6. ...
  7. </div> jechuun ni danda’ama
  8. </div> jechuun ni danda’ama
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
1. 1.
2. 2.
2. 2.
2. 2.
2. 2.
2. 2.
2. 2.
2. 2.
2. 2.
3. 3.
3. 3.
3. 3.
3. 3.
3. 3.
1. 1.
4.
4.
4.
4.
1/3 ta’a
1/3 ta’a
1/3 ta’a
1/3 ta’a
2/3 ta’a
4.
6. 6.
6. 6.
8.
8.
5. 5.
11.
16.

Tarreewwan ofseeti gochuu

4.
8 ofseeti 4.
1/3 ofseeti 2/3s
4 ofseeti 4.
4 ofseeti 4.
5 ofseeti 3.
5 ofseeti 3.
10 ofseeti 6.

Tarreewwan koonyaa gochuu

Qabiyyee kee yoo dirqama ta'e .rowtarjaa jiru keessaa uumuudhaan man'ee.

Fakkeenya tarjaawwan man'ee

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 gita = "span6" >
  6. Sadarkaa 2ffaa
  7. </div> jechuun ni danda’ama
  8. <div gita = "span6" >
  9. Sadarkaa 2ffaa
  10. </div> jechuun ni danda’ama
  11. </div> jechuun ni danda’ama
  12. </div> jechuun ni danda’ama
  13. </div> jechuun ni danda’ama

Giriidii mataa keetii garagalchi

Bootstrap keessatti ijaaraman jijjiiramoota muraasa sirna tarjaa durtii 940px dhuunfachiisuuf. Xiqqoo dhuunfachiisuun, guddina tarjaawwanii, gutters isaanii, fi qabduu isaan keessa jiraatan fooyyessuu dandeessa.

Keessa giiridii

Jijjiiramoonni sirna tarjaa fooyyessuuf barbaachisan yeroo ammaa hundi isaanii keessa jiraatu variables.less.

Jijjiiramaa Gatii durtii Ibsa
@gridColumns 16. Lakkoofsa tarjaawwan tarjaa keessaa
@gridColumnWidth 40px ta'a Bal'ina tarjaa tokkoon tokkoo tarjaa keessaa
@gridGutterWidth 20px ta'a Iddoo negaatiivii tarjaa tokkoon tokkoo gidduu jiru
@siteWidth Walitti qabama tarjaa fi gutter hunda shallagame Lakkoofsa tarjaa fi gutters lakkaa'uu fi bal'ina .fixed-container()mixin saaguuf walsimsiisa bu'uuraa tokko tokko fayyadamna.

Amma customize gochuuf

Tarjaa fooyyessuu jechuun jijjiiramoota sadan jijjiiruu @grid-*fi faayilii Xiqqaa irra deebi'anii qindeessuu jechuudha.

Bootstrap sirna giiridii hanga tarjaa 24 qabu qabachuuf meeshaa qabatee dhufa; durtii 16 qofa.Kunoo akkaataa jijjiiramoonni tarjaa kee gara tarjaa 24tti dhuunfatanii mul'atan.

  1. @Tarreewwan tarree : 24 ;
  2. @GiridBal'inaTarree : 20px ;
  3. @GiridGutterBal'ina : 20px ;

Erga irra deebi'amee qindaa'ee booda, ni qophaa'a!

Haalata dhaabbataa

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

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

Haala dhangala'aa

Caasaa fuula dhangala'aa filannoo, socho'aa bal'ina xiqqaa fi guddaa fi barruu cinaa harka bitaa qabu. Apps fi docs'f baayyee gaarii dha.

  1. <qaama>
  2. <div class = "dhangala'aa-qabduu" >
  3. <div class = "barruu cinaa" >
  4. ...
  5. </div> jechuun ni danda’ama
  6. <div class = "qabiyyee" >
  7. ...
  8. </div> jechuun ni danda’ama
  9. </div> jechuun ni danda’ama
  10. </qaama>

Mata dureewwan & waraabbii

Sadarkaa maxxansaa istaandaardii fuula marsariitii kee caaseffachuuf.

Guutummaan tarjaa barreeffamaa jijjiiramoota Xiqqaa lama irratti hundaa'a faayilii keenya keessatti jijjiiramoota.less: @basefontfi @baseline. Inni jalqabaa hammangaa qubee bu'uuraa guutummaatti fayyadamu yoo ta'u inni lammaffaan olka'iinsa sarara bu'uuraati.

Jijjiiramoota sana fayyadamna, fi herrega tokko tokko, margaa, paadiingii, fi sarara-olka'iinsa akaakuu keenya hundaafi kkf uumuuf.

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 ta’an

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 sirrii miti akkasumas isaanis akkaataa wal duraa duubaan jajjaboo fi jajjaboo ta'uu hin qaban (yoo elementiin hiika caalu jiraate ta'us, itti fayyadami). <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 fayyadamuu akka danda’amu fakkeenyota lama kunooti:

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

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
  1. <caqasa ugguraa>
  2. <p> Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante venenatis dapibus posuere velit alikeetii. </p> jechuun ni danda’ama
  3. <xiqqaa> Dr. Juuliyaas Hibart </xiqqaa>
  4. </blockquote> jedhu

Tarreewwan

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.

Koodii

<code> <pre>

Koodii kee akkaataa itti mallattoo salphaa lamaatiin pimp gochuu. Karaa javascript daran sodaachisaa ta'uuf, koodii Google prettify library keessa galchiiti qophii taate.

Koodii dhiyeessuu

Koodiin, uggura ykn sarara keessaa cuquliisa qofa, mallattoo sirrii keessatti marsuu qofaan akkaataa waliin agarsiisuu danda'a. Blookii koodii sararoota hedduu dabarsaniif, <pre>elementii fayyadami. Koodii sarara keessaatiif, <code>elementii fayyadami.

Qabiyyee Bu'aa
<code> Sarara barruu akka kanaa keessatti, koodii kee kan marfame <html>elementii kana fakkaata.
<pre>
<div> jedhu
  <h1>Mata duree</h1> jedhu
  <p>Waan tokko sirriitti asitti...</p>
</div> jechuun ni danda’ama

Hubachiisa:<pre> Koodii mallattoolee keessaa hamma danda'ametti bitaatti dhihoo kaa'uu kee mirkaneessi ; caancala hunda ni agarsiisa.

<pre class="prettyprint">

Mana kitaabaa google-code-prettify fayyadamuun, uggurri koodii kee akkaataa mul'ataa xiqqoo adda ta'ee fi calaqqisiisa calaqqisiisaa ofumaan argatu.

<div> <h1> Mata duree </h1> <p> Waan tokko sirriitti asitti... </p> </div>
  
  

google-code-prettify buufadhaatii akkaataa itti itti fayyadamtan readme ilaalaa.

Asxaalee sarara keessaa

<span class="label">

Barreeffama qaama kee keessatti gaalee kamiyyuu xiyyeeffannoo waami ykn alaabaa kaa'i.

Waan fedhe maqaa itti moggaasi

Yoomiyyuu warra faashinii Haaraa keessaa tokko barbaachise! ykn Alaabaa barbaachisoo yeroo koodii barreessinu? Tole amma isaan qabda. Wanti durtiidhaan hammatame kunooti:

Mallattoo itti gochuu Bu'aa
<span class="label">Default</span> Durtii dha
<span class="label success">New</span> Haaraa
<span class="label warning">Warning</span> Akeekkachiisa
<span class="label important">Important</span> Barbaachisaa
<span class="label notice">Notice</span> Hubachiisa

Giriidii miidiyaa

Fuulota miila HTML gadi aanaa fi akkaataa xiqqaa qaban irratti fakkiiwwan xiqqaa hammangaa adda addaa agarsiisi.

Fakkeenya suuraawwan xiqqaa

Suuraaleen xiqqaan keessaa .media-gridhammangaa kamiyyuu ta'uu danda'u, garuu isaan yeroo kallattiin gara sirna tarjaa Bootstrap ijaarametti kaartaan hojjetaman hunda caalaa hojjetu. Bal'inni fakkii akka 90, 210, fi 330 piikselii muraasa paadiingii wajjin walitti makamuun hammangaa .span2, .span4, fi .span6tarjaa walqixa.

Bal'aa

Giddugaleessa

Xiqqoo

Koodii isaaniif kennuu

Giriidonni miidiyaa fayyadamuuf salphaa fi gama mallattootiin baayyee salphaadha. Dimensions isaanii qulqulluu guddina fakkiiwwan hammataman irratti hundaa’a.

  1. <ul class = "miidiyaa-giiridii" >
  2. <li> jedhu
  3. <a href = "#" > jedhu
  4. <img class = "fakkii xiqqaa" src = "https://bakka.it/330x230" alt = "" >
  5. </a> jechuun ni danda’ama
  6. </li> jechuun ni danda’ama
  7. <li> jedhu
  8. <a href = "#" > jedhu
  9. <img class = "fakkii xiqqaa" src = "https://bakka.it/330x230" alt = "" >
  10. </a> jechuun ni danda’ama
  11. </li> jechuun ni danda’ama
  12. </ul> jechuun ni danda’ama

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
  1. <gabatee> jedhu
  2. ...
  3. </table> jedhu

Fakkeenya: Gabatee gabaabfame

Gabateewwan bakka dhiphoo keessatti deetaa dabalataa barbaadaniif, mi'aa gabaabfame kan paadiingii walakkaatti muru fayyadami. Akkasumas daangaawwanii fi zeebraa-sararoota waliin walqabsiisuun fayyadamuu ni danda'ama, akkuma akkaataawwan gabatee durtii.

# 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

Fakkeenya: Gabatee daangaa qabu

Minjaalota keessan golee isaanii naannessuu fi gama hundaan daangaa dabaluudhaan xiqqoo xiqqoo qofa akka sirriitti mul'atu taasisaa.

# 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
  1. < gita gabatee = "gabatee-daangaa" >
  2. ...
  3. </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
span 4 tarree
span 2 tarjaa span 2 tarjaa

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

  1. < gita gabatee = "sarara zeebraa" >
  2. ...
  3. </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
2. 2. Joo Sixpack jedhamu Afaan Ingilizii
3. 3. Stu Dent jedhamuun beekama Koodii
1. 1. Kan kee Tokko Afaan Ingilizii
  1. <iskiriiptii src = "js/jgaaffii/jgaaffii.gabateesassaa.min.js" ></script>
  2. <iskiriiptii >
  3. $ ( faankishinii () { .
  4. $ ( "gabatee#Fakkeenya Gabatee sassaabuu" ). sassaabduu gabatee ({ Tarree saaguu : [[ 1 , 0 ]] });
  5. });
  6. </script> jedhu
  7. < gita gabatee = "sarara zeebraa" >
  8. ...
  9. </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 sanduuqa filannoo, fi qareedhaaf kennama.

Fakkeenya unka sheekkoo
Tokko tokko asitti gatii guddaa kennu
Barreeffama gargaarsaa xiqqaa
Milkaa'ina!
Ruh roh!
Fakkeenya unka sheekkoo
@
Barreeffama gargaarsaa tokko tokko kunooti
Fakkeenya unka sheekkoo
Hubachiisa: Asxaaleen filannoowwan hunda naannoowwan cuqaasuu baay'ee guddaa fi unkaa caalaatti fayyadamuu danda'uuf marsu.
gara Yeroon hundi akka Sa'aatii Istaandardii Paasifikii (GMT -08:00)tti agarsiifama.
Yoo barbaachise dirree armaan olii ibsuuf barruu gargaarsaa ugguruu.
 

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
Fakkeenya unka sheekkoo
Barreeffama gargaarsaa xiqqaa
Hubachiisa: Asxaaleen filannoowwan hunda naannoowwan cuqaasuu baay'ee guddaa fi unkaa caalaatti fayyadamuu danda'uuf marsu.
 

Hammangaawwan dirree unkaa

Unka input, select, ykn textareabal'ina kamiyyuu mallattoo kee irratti gita muraasa qofa dabaluudhaan dhuunfachiisi.

v1.3.0 irraa eegalee, kutaalee safara tarjaa irratti hundaa'an qaamolee unkaaf daballeerra. Mee kanneen kana gita , , fi kkf jiran irratti fayyadamaa ..mini.small

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 halluu ifaa, garuu lakkoofsi gitaalee dalagaa akkaataa halluu adda addaatiif hojii irra oolchuun ni danda'ama. Kutaawwan kun gita halluu diimaa .primary, gita halluu diimaa salphaa .info, gita magariisaa .successfi gita diimaa of keessatti qabatu .danger.

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

 

Akeekkachiisa bu'uuraa

.alert-message

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

Javascript argadhaa »

×

Qulqulluu guacamole! Best check yo self, ati baay'ee gaarii hin fakkaattu .

×

Yaa snap! Kanaa fi sana jijjiirii irra deebi'ii yaali .

×

Gaarii goote! Ergaa akeekkachiisaa kana milkaa'inaan dubbisteetta .

×

Mataa ol qaba! Kun akeekkachiisa xiyyeeffannoo keessan barbaadudha, garuu ammatti dursa guddaa miti.

Fakkeenya koodii

  1. <div class = "akeekkachiisa ergaa-akeekkachiisaa" >
  2. <a gita = "cufi" href = "#" > × </a>
  3. <p><strong> Qulqulluu guacamole! </strong> Best check yo self, ati baayyee gaarii hin fakkaattu. </p> jechuun ni danda’ama
  4. </div> jechuun ni danda’ama

Ergaawwan ugguruu

.alert-message.block-message

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.

Javascript argadhaa »

×

Qulqulluu guacamole! Kun akeekkachiisa! Best check yo self, ati baayyee gaarii hin fakkaattu. Nulla vitae elit libero, afaan oromoo kan afaan oromoo fi hiika isaa pdf. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka.

×

Yaa snap! Dogoggora argatte! Kanaa fi sana jijjiirii irra deebi'ii yaali .

  • Duis mollis est kan ta'e kan hin taane
  • Nisi erat porttitor ligula
  • Eget lacinia odio sem nec elit
×

Gaarii goote! Ergaa akeekkachiisaa kana milkaa'inaan dubbisteetta. Cum sociis natoque penaatibus fi guddina moontees da'umsaa, nascetur ridiculus mus. Maecenas faucibus mollis interdum jedhamuun beekama.

×

Mataa ol qaba! Kun akeekkachiisa xiyyeeffannoo keessan barbaadudha, garuu ammatti dursa guddaa miti.

Fakkeenya koodii

  1. <div class = "akeekkachiisa ergaa-akeekkachiisa uggura-ergaa" >
  2. <a gita = "cufi" href = "#" > × </a>
  3. <p><strong> Qulqulluu guacamole! Kun akeekkachiisa! </strong> Best check yo self, ati baayyee gaarii hin fakkaattu. Nulla vitae elit libero, afaan oromoo kan afaan oromoo fi hiika isaa pdf. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. </p> jechuun ni danda’ama
  4. <div class = "gochoota-akeekkachiisaa" >
  5. <a class = "btn xiqqaa" href = "#" > Tarkaanfii kana fudhadhu </a> <a class = "btn xiqqaa" href = "#" > Yookiin kana raawwadhu </a>
  6. </div> jechuun ni danda’ama
  7. </div> jechuun ni danda’ama

Moodaalee

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

Javascript argadhaa »

Gorsa Meeshaalee

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

Javascript argadhaa »

Lorem ipsum dolar sit amet illo dogongora ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuuntur consequuuntur, aut natus illo voluptatem odit perspiciatis laudantium kan doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo taa'uu akka baqatutti, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.

Popovers jedhaman

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

Javascript argadhaa »

Mata duree Popover

Etiam porta sem malesuada guddaa mollis euismod jedhamuun beekama. Maecenas faucibus mollis interdum jedhamuun beekama. Morbi leo risus, porta ac consectetur ac, vestibulum eros irratti argamu.

Jalqabuu

Javascript mana kitaabaa Bootstrap waliin walitti makuun super salphaadha. Armaan gaditti bu'uuraalee irra deemnee akka jalqabdaniif plugins ajaa'ibaa tokko tokko isiniif dhiyeessina!

Docs javascript ilaali »

Waan dabalame

Qaamolee jalqabaa Bootstrap tokko tokko ifteessitoota amala haaraa jQuery fi Ender wajjin hojjetaniin jireenyatti fidi . Fedhii misoomaa addaa keessaniif akka walsimutti akka babal’istanii fi akka fooyyessitan isin jajjabeessina.

Dosee Ibsa
bootstrap-moodaalii.js jedhamuun beekama Modal plugin keenya super slim kan ta'e kan aadaa modal js plugin irratti fudhachuudha! Bare functionality kan twitter irratti barbaannu qofa hammachuudhaaf of eeggannoo addaa gooneerra.
bootstrap-akeekkachiisa.js Ijaarsi akeekkachiisaa gita super tiny kan akeekkachiisa irratti dalagaa dhiyoo dabaluudhaaf.
bootstrap-gadi bu'aa.js Ijaarsi kun walqunnamtii gadi bu'aa gara barruu gubbaa bootstrap ykn qajeelchawwan caancalaatti dabaluudhaaf.
bootstrap-scrollspy.js jedhu irratti kan argamudha Ijaarsi ScrollSpy bakka tarree irratti hundaa'uun nav ofumaan fooyyessuu gara barruu gubbaa bootstrap tti dabaluudhaaf.
bootstrap-buttooni.js Ijaarsi ScrollSpy bakka tarree irratti hundaa'uun nav ofumaan fooyyessuu gara barruu gubbaa bootstrap tti dabaluudhaaf.
bootstrap-tabs.js jedhamuun beekama Ijaarsi kun qabiyyee naannoo keessa naanna'uuf dalagaa caancala fi kiniinii saffisaa, daayinamikii dabalata.
bootstrap-twipsy.js jedhamuun beekama Plugin jQuery.tipsy isa gaarii Jason Frame barreesse irratti hundaa'uun; twipsy version fooyya'eedha, kan fakkiiwwan irratti hin hirkanne, sochiiwwaniif css3 fayyadama, fi kuusaa mata duree naannoodhaaf data-attributes fayyadama!
bootstrap-popover.js jedhamuun beekama Popover plugin popovers application keessan irratti dabaluudhaaf interface salphaa ta'e kenna. Inni boostrap-twipsy.js plugin dheeressa, kanaaf yeroo popovers pirojektii kee keessatti hammattu faayilii sanas qabachuu kee mirkaneessi!

Javascript barbaachisaadhaa?

Lakkii! Bootstrap jalqabaa fi hunda dura mana kitaabaa CSS akka ta'uuf kan qophaa'edha. Jaavascript kun akkaataa hammataman gubbaatti laayibara walqunnamtii bu'uuraa kenna.

Haa ta'u malee, warra javascript barbaadaniif, akkaataa Bootstrap javascript waliin walitti makuu hubattanii fi hojii bu'uuraa battalumatti filannoo saffisaa fi salphaa ta'e isiniif kennuuf plugins armaan olii isiniif dhiheessineerra.

Odeeffannoo dabalataaf fi demoowwan kallattiin tokko tokko ilaaluuf, maaloo fuula galmee plugin keenyaa ilaali .

Bootstrap Preboot irraa ijaarame , paakkii madda banaa mixins fi jijjiiramoota Less waliin walqabatee fayyadamuuf , 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.

  1. <link rel = "waraqaa akkaataa/xiqqaa" href = "xiqqaa/bootstrap.xiqqaa" miidiyaa = "hundumaa" />
  2. <iskiriiptii src = "js/xiqqaa-1.1.3.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

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.

  1. // Hidhamtoota
  2. @Halluu hidhaa : #8b59c2;
  3. @Halluu hidhaaHover : dukkaneessuu ( @Halluu hidhaa , 10 );
  4.  
  5. // Gurraacha
  6. @gurraacha : #000;
  7. @grayDark : ibsuu ( @gurraacha , 25 %);
  8. @halluu diimaa : salphisuu ( @gurraacha , 50 %);
  9. @Ifa halluu diimaa : salphisuu ( @gurraacha , 70 %);
  10. @grayIfaa : salphisuu ( @gurraacha , 90 %);
  11. @adii : #fff;
  12.  
  13. // Halluuwwan Aksentaa
  14. @buluu : #08b5fb;
  15. @magariisaa : #46a546;
  16. @diimaa : #9d261d;
  17. @keelloo : #ffc40d;
  18. @burtukaana : #f89406;
  19. @piinkii : #c3325f;
  20. @diimaa : #7a43b6;
  21.  
  22. // Giriidii sarara bu'uuraa
  23. @ bu'uura qubee : 13px ;
  24. @ bu'uuraa : 18px ;

Yaada kennuu

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

  1. // Kun yaada kennuudha
  2. /* 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

  1. #font { .
  2. . gabaabduu ( @ulfaatina : idilee , @guddina : 14px , @Ol'ina sararaa : 20px ) {
  3. guddina qubee : @size ; _
  4. font - ulfaatina : @ulfaatina ;
  5. sarara - olka'iinsa : @lineHeight ;
  6. } .
  7. . sans - serif ( @ulfaatina : idilee , @guddina : 14px , @Ol'ina sararaa : 20px ) {
  8. maatii qubee : "Helvetica Neue " , ​​Helvetica , Arial , sans - serif ;
  9. guddina qubee : @size ; _
  10. font - ulfaatina : @ulfaatina ;
  11. sarara - olka'iinsa : @lineHeight ;
  12. } .
  13. ...
  14. } .

Giraadiyaantii

  1. #gradient { .
  2. ...
  3. . vertical ( @Halluu jalqabaa : #555, @Halluu xumuraa: #333) {
  4. halluu - duubbee : @endColor ;
  5. duubbee - irra deddeebi'uu : irra deebi'uu - x ;
  6. duubbee - fakkii : - khtml - garaagarummaa ( sarara , bitaa gubbaa , bitaa jala , irraa ( @startColor ), gara ( @endColor )); // Konqueror jedhamuun beekama
  7. duubbee - fakkii : - moz - sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // FF 3.6+ jedhamuun beekama
  8. duubbee - fakkii : - ms - sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // IE10 jedhamuun beekama
  9. duubbee - fakkii : - webkit - garaagarummaa ( sarara , bitaa gubbaa , bitaa jala , halluu - dhaabuu ( 0 %, @startColor ), halluu - dhaabuu ( 100 %, @endColor )); // Safarii 4+, Kiroomii 2+
  10. duubbee - fakkii : - webkit - sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // Safarii 5.1+, Kiroomii 10+ jedhamuun beekama
  11. duubbee - fakkii : - o - sarara - gradient ( @Halluu jalqabaa , @Halluu xumuraa ); // Opereetaa 11.10
  12. duubbee - fakkii : sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // Istaandardii
  13. } .
  14. ...
  15. } .

Hojiiwwan

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

  1. // Giriidituudii
  2. @Tarreewwan tarree : 16 ;
  3. @GiridBal'inaTarree : 40px ;
  4. @GiridGutterBal'ina : 20px ;
  5. @Bal'ina Saayitii : ( @Tarreewwan Giriidii * @Bal'ina Tarjaa Giriidii ) + ( @Bal'ina Guutaa Giriidii * ( @Tarreewwan Giriidi - 1 ));
  6.  
  7. // Tarreewwan tokko tokko hojjedhu
  8. . tarjaawwan ( @columnSpan : 1 ) { .
  9. bal'ina : ( @Bal'ina Tarjaa Giriidi * @Bal'ina Tarjaa ) + ( @Bal'ina GutterGiriid * ( @TarreeTarree - 1 ) );
  10. } .

Xiqqaa Qindeessuu

Faayilota /lib/ keessa jiran erga fooyyessitee booda, .lessfaayilii bootstrap-*.*.*.css fi bootstrap-*.*.*.min.css deebitee uumuuf irra deebitee qindeessuu si barbaachisa. Yoo gaaffii harkisaa GitHub tti galchite, yeroo hunda irra deebitee qindeessuu qabda.

Karaalee itti qindeessan

Mala Tarkaanfiiwwan
Noodiin makefile qabu

Ajaja armaan gadii hojjechuudhaan qindeessaa sarara ajaja xiqqaa npm waliin fe'i:

$ npm lessc fe'i

Erga fe'amee booda makehundee galmee bootstrap kee irraa qofa hojjedhu hundi kee qophaa'aa jirta.

Dabalataan, yoo watchr fe'atte, make watchyeroo faayilii bootstrap lib keessatti gulaaltu hunda bootstrap ofumaan akka deebi'ee ijaaramu gochuuf fiiguu dandeessa (kun hin barbaachisu, mala mijataa qofa).

Jaavascript jedhamuun beekama

Less.js isa haaraa buufadhuutii daandii gara isaatti geessu (fi Bootstrap) head.

  1. <link rel = "waraqaa akkaataa/xiqqaa" href = "/karaa/gara/bootstrap.xiqqaa" >
  2. <script src = "/karaa/gara/xiqqaa.js" </script>

Faayilota .less irra deebi'anii qindeessuuf, save gochuu qofaafi fuula kee irra deebi'ii fe'i. Less.js isaan qindeessee kuusaa naannoo keessatti kuufata.

Sarara ajajaa

Yoo duraan meeshaa sarara ajaja xiqqaa fe'ame qabaatte, salphaatti ajaja armaan gadii hojjedhu:

$ lessc ./lib/bootstrap.less > jalqabbii.css

--compressYoo baayitii tokko tokko qusachuuf yaaltu ajaja sana keessatti hammachuu kee mirkaneessi !

Appii Mac xiqqaa

Appiin Mac hin ofiisaa ta'e galmeewwan faayiloota .less ilaalaa fi koodii gara faayiloota naannootti qindeessa erga faayila .less ilaalame qusachuu hunda booda.

Yoo jaallatte, filannoowwan appii keessa jiran jijjiiruun ofumaan xiqqeessuu fi faayiloota qindaa'an galmee kam keessatti akka xumuraman gochuu dandeessa.