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.
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.
Jalqaba saffisaa fi salphaa ta'eef, kutaa kana gara fuula marsariitii keessaniitti waraabuu qofa.
Deeggaraa Less fayyadamuu? Rakkoo hin qabu, repo clone gochuu qofaafi sararoota kana itti dabali:
Buufadhu, fork, harkisuu, dhimmoota faayila, fi kanneen biroo repo Bootstrap ofiisaa Github irratti.
GitHub irratti bootstrap gochuu »
Yeroo ammaa v1.3.0
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 ›
Bootstrap browser ammayyaa gurguddoo kanneen akka Chrome, Safari, Internet Explorer, fi Firefox keessatti qoratamee deeggaramee jira.
Bootstrap CSS qindaa'e, hin qindaa'in, fi unkaalee fakkeenyaa wajjin guutuu dhufa.
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.
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 = "span6" >
- ...
- </div> jechuun ni danda’ama
- <div gita = "span10" >
- ...
- </div> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Qabiyyee kee yoo dirqama ta'e .row
tarjaa jiru keessaa uumuudhaan man'ee.
- <div gita = "tarree" >
- <div gita = "span12" >
- Sadarkaa 1ffaa tarjaa
- <div gita = "tarree" >
- <div gita = "span6" >
- Sadarkaa 2ffaa
- </div> jechuun ni danda’ama
- <div gita = "span6" >
- Sadarkaa 2ffaa
- </div> jechuun ni danda’ama
- </div> jechuun ni danda’ama
- </div> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Bootstrap keessatti ijaaraman jijjiiramoota muraasa sirna tarjaa durtii 940px dhuunfachiisuuf. Xiqqoo dhuunfachiisuun, guddina tarjaawwanii, gutters isaanii, fi qabduu isaan keessa jiraatan fooyyessuu dandeessa.
Jijjiiramoonni sirna tarjaa fooyyessuuf barbaachisan yeroo ammaa hundi isaanii keessa jiraatu preboot.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. |
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.
- @Tarreewwan tarree : 24 ;
- @GiridBal'inaTarree : 20px ;
- @GiridGutterBal'ina : 20px ;
Erga irra deebi'amee qindaa'ee booda, ni qophaa'a!
Haala durtii fi salphaa 940px-bal'ina, giddugaleessaa kan ta'e marsariitii ykn fuula kamiyyuu kan tokkoon kennameef <div.container>
.
- <qaama>
- <div class = "qabduu" >
- ...
- </div> jechuun ni danda’ama
- </qaama>
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.
- <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>
Sadarkaa maxxansaa istaandaardii fuula marsariitii kee caaseffachuuf.
Guutummaan tarjaa barreeffamaa jijjiiramoota Less lama irratti hundaa'a faayilii keenya preboot.less keessatti: @basefont
fi @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.
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.
Xiyyeeffannoo, teessoo, & gabaabduu fayyadamuu
<strong>
<em>
<address>
<abbr>
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 .
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.
Elementiin <address>
odeeffannoo quunnamtii akaakayyuu isaa isa dhiyoo, ykn qaama hojii guutuuf fayyadama. Akkaataa itti fayyadamuu akka danda’amu fakkeenyota lama kunooti:
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>
Gabaabduu fi gabaabduudhaaf, <abbr>
mallattoo fayyadami ( HTML5<acronym>
keessatti hin barbaachifnedha ). Unka gabaabduu mallattoo keessa kaa'iitii maqaa guutuuf mata duree saagi.
<blockquote>
<p>
<small>
Caqasa ugguraa hammachuudhaaf, marsi fi mallattoo kaa'i <blockquote>
. Madda kee caqasuuf elementii fayyadamii isa duras daashiin em ni argatta .<p>
<small>
<small>
—
Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante venenatis dapibus posuere velit alikeetii.
Dr. Juuliyaas Hiibart
- <caqasa ugguraa>
- <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
- <xiqqaa> Dr. Juuliyaas Hibart </xiqqaa>
- </blockquote> jedhu
<ul>
<ul.unstyled>
<ol>
dl
<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.
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 class="prettyprint"> |
Mana kitaabaa google-code-prettify fayyadamuun, ati uggura koodii akkaataa mul'ataa xiqqoo adda ta'ee fi calaqqisiisa calaqqisiisaa ofumaan argattu. <div> <h1> Mata duree </h1> <p> Waan tokko sirriitti asitti... </p> </div> google-code-prettify buufadhaatii akkaataa itti itti fayyadamtan readme ilaalaa. |
<span class="label">
Barreeffama qaama kee keessatti gaalee kamiyyuu xiyyeeffannoo waami ykn alaabaa kaa'i.
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 |
Fuulota miila HTML gadi aanaa fi akkaataa xiqqaa qaban irratti fakkiiwwan xiqqaa hammangaa adda addaa agarsiisi.
Suuraaleen xiqqaan keessaa .media-grid
hammangaa 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 .span6
tarjaa walqixa.
Giriidonni miidiyaa fayyadamuuf salphaa fi gama mallattootiin baay'ee salphaadha. Dimensions isaanii qulqulluu guddina fakkiiwwan hammataman irratti hundaa’a.
- <ul class = "miidiyaa-giiridii" >
- <li> jedhu
- <a href = "#" > jedhu
- <img class = "fakkii xiqqaa" src = "https://bakka.it/330x230" alt = "" >
- </a> jechuun ni danda’ama
- </li> jechuun ni danda’ama
- <li> jedhu
- <a href = "#" > jedhu
- <img class = "fakkii xiqqaa" src = "https://bakka.it/330x230" alt = "" >
- </a> jechuun ni danda’ama
- </li> jechuun ni danda’ama
- </ul> jechuun ni danda’ama
<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>
.
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 |
- <gabatee> jedhu
- ...
- </table> jedhu
Zebra-striping dabaluudhaan gabateewwan kee wajjin xiqqoo faashinii argadhu- .zebra-striped
kutaa 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.
- < gita gabatee = "sarara zeebraa" >
- ...
- </table> jedhu
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 |
- <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 = "sarara zeebraa" >
- ...
- </table> jedhu
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.
HTML unka keetii irratti dabali .form-stacked
fi 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.
Unka input
, select
, ykn textarea
bal'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
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 .success
fi gita diimaa of keessatti qabatu .danger
.
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:
Buttons gurguddoo moo xixiqqoo ta'an barbaadduu? Itti qabaadhu!
Qabduulee hin sochoone ykn sababa tokkoon ykn kan biraatiin appiin hanqifameef, haala hanqifame fayyadami. Sunis .disabled
hidhaa fi :disabled
elementootaaf <button>
.
.alert-message
Ergaawwan sarara tokkoo kufaatii, kufaatii ta'uu danda'u, ykn milkaa'ina gocha tokkoo calaqqisiisuuf. Keessattuu unkaaf faayidaa qaba.
- <div class = "akeekkachiisa ergaa-akeekkachiisaa" >
- <a gita = "cufi" href = "#" > × </a>
- <p><strong> Qulqulluu guacamole! </strong> Best check yo self, ati baayyee gaarii hin fakkaattu. </p> jechuun ni danda’ama
- </div> jechuun ni danda’ama
.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.
- <div class = "akeekkachiisa ergaa-akeekkachiisa uggura-ergaa" >
- <a gita = "cufi" href = "#" > × </a>
- <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
- <div class = "gochoota-akeekkachiisaa" >
- <a class = "btn xiqqaa" href = "#" > Tarkaanfii kana fudhadhu </a> <a class = "btn xiqqaa" href = "#" > Yookiin kana raawwadhu </a>
- </div> jechuun ni danda’ama
- </div> jechuun ni danda’ama
Moodaalonni—qaaqawwan ykn saanduqawwan ifaa—gochoota haalataaf haalawwan yaadannoo duubbee kunuunfamuun barbaachisaa ta'e keessatti baay'ee gaarii dha.
Qaama gaarii tokko...
Twipsies fayyadamaa burjaaja'e gargaaruu fi kallattii sirrii irratti agarsiisuuf super faayidaa qabu.
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.
Odeeffannoo barruu xiqqaa fuula tokkoof osoo qindaa'ina irratti dhiibbaa hin geessisin kennuudhaaf popovers fayyadami.
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.
Javascript mana kitaabaa Bootstrap waliin walitti makuun super salphaadha. Armaan gaditti bu'uuraalee irra deemnee akka jalqabdaniif plugins ajaa'ibaa tokko tokko isiniif dhiyeessina!
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 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-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! |
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 , 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.
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" />
- <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 .
Wantoota Twitter Bootstrap keessatti akka qaama Bootstraptti hammataman keessaa muraasni kunooti. Buufachuuf fi caalaatti baruuf gara marsariitii Bootstrap ykn fuula pirojektii Githubtti qajeela.
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;
- // Giriidii sarara bu'uuraa
- @ bu'uura qubee : 13px ;
- @ bu'uuraa : 18px ;
Less akkasumas akkaataa yaada kennuu biraa kan CSS's normal /* ... */
syntax irratti dabalataan kenna.
- // Kun yaada kennuudha
- /* Kunis yaada */
Mixins bu'uuraan CSS'f hammata ykn gartokkeedha, kunis koodii uggura tokko gara tokkotti walitti makuuf si dandeessisa. Isaan qabeentota durtii gurguraa akkabox-shadow
, qaxxaamuraa-browser gradients, tuullaa qubee, fi kkf baay'ee gaarii dha. Armaan gaditti saamuda mixins Bootstrap waliin hammataman ni dhiheessina.
- #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 ;
- } .
- ...
- } .
- #gradient { .
- ...
- . 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
- duubbee - fakkii : sarara - gradient ( @Halluu jalqabaa , @Halluu dhuma ); // Istaandardii
- } .
- ...
- } .
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 ;
- @Bal'ina Saayitii : ( @Tarreewwan Giriidii * @Bal'ina Tarjaa Giriidii ) + ( @Bal'ina Guutaa Giriidii * ( @Tarreewwan Giriidi - 1 ));
- // Tarreewwan tokko tokko hojjedhu
- . tarjaawwan ( @columnSpan : 1 ) { .
- bal'ina : ( @Bal'ina Tarjaa Giriidi * @Bal'ina Tarjaa ) + ( @Bal'ina GutterGiriid * ( @TarreeTarree - 1 ) );
- } .
Faayilota /lib/ keessa jiran erga fooyyessitee booda, .less
faayilii 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.
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 Dabalataan, yoo watchr fe'atte, |
Jaavascript jedhamuun beekama | Less.js isa haaraa buufadhuutii daandii gara isaatti geessu (fi Bootstrap)
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
|
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. |