Mata duree Bootstrap jedhu
Jijjiiramoota Sass keenya haaraa ijaaraman waliin Bootstrap 4 filannoo akkaataa addunyaa mata duree salphaa fi jijjiirama qaamaaf dhuunfachiisi.
Bootstrap 3 keessatti, mata dureen baay'inaan LESS keessatti jijjiiramaa irra darbuu, CSS amala, fi akkaataa mata duree adda ta'een kan nuti dist
faayiloota keenya keessatti hammatameen oofaa ture. Carraaqqii tokko tokkoon, namni tokko faayiloota ijoo osoo hin tuqin bifa Bootstrap 3 guutummaatti irra deebi'ee dizaayinii gochuu danda'a. Bootstrap 4 mala barame, garuu xiqqoo adda ta'e kenna.
Amma, mataduree jijjiiramoota Sass, kaartaa Sass, fi CSS amalaatiin raawwatama. Kana booda barruu akkaataa mata duree of kenne hin jiru; kanaa mannaa, mata duree ijaarame garagalcha, gaaddidduu fi kkf akka dabalu dandeessisuu dandeessa.
Jijjiiramoota, kaartaa, mixins, fi kkf fayyadamuuf faayiloota Sass madda keenya fayyadami.
Yeroo danda'ametti, faayiloota ijoo Bootstrap fooyyessuu irraa fagaadhu. Sass'f, sun jechuun akkaataa mataa keetii kan Bootstrap galchu uumuu jechuudha akka ati fooyyessuu fi dheeressuu dandeessuuf. Geggeessaa paakeejii akka npm fayyadamaa jirta jennee yoo fudhanne, caasaa faayilii akkas fakkaatu ni qabaatta:
Yoo faayiloota madda keenya buufattee fi geggeessaa paakeejii hin fayyadamne ta'e, faayiloota madda Bootstrap kan kee irraa adda baasuun, waan caasaa sanaa wajjin walfakkaatu harkaan qindeessuu barbaadda.
Keessan keessatti custom.scss
, faayiloota Sass madda Bootstrap galchita. Filannoo lama qabda: Bootstrap hunda hammachiisi, ykn kutaalee si barbaachisan filadhu. Kanneen lammaffaa ni jajjabeessina, qaamolee keenya hunda keessatti ulaagaalee fi hirkattummaa tokko tokko akka jiran beekaa ta'us. Akkasumas JavaScript tokko tokko plugins keenyaaf dabaluu si barbaachisa.
Qindaa'inni sun bakka jirutti, jijjiiramoota Sass fi kaartaa kamiyyuu fooyyessuu jalqabuu dandeessa custom.scss
. // Optional
Akkasumas kutaalee Bootstrap kutaa jalatti akka barbaachisummaa isaatti dabaluu jalqabuu dandeessa . Tuuta galchuu guutuu bootstrap.scss
faayilii keenya irraa akka ka'umsa keetti fayyadamuu yaada kennina.
Jijjiiramaan Sass hundi Bootstrap 4 keessatti !default
alaabaa gatii durtii jijjiiramaa Sass mataa kee keessatti osoo koodii madda Bootstrap hin fooyyessin akka irra darbitu si dandeessisu of keessatti qabata. Jijjiiramoota akka barbaachisummaa isaatti waraabii fi maxxansi, gatiiwwan isaanii fooyyessi, fi !default
alaabaa haqi. Yoo jijjiiramaan duraan ramadame, kana booda gatiiwwan durtii Bootstrap keessatti argamaniin irra deebi'amee hin ramadamu.
Jijjiiramaan irra darbuun faayilii Sass walfakkaataa keessaa jijjiiramoota durtii dura ykn booda dhufuu danda'a. Haa ta'u malee, yeroo faayilii Sass hunda irra darbitu, irra darbiin kee osoo faayilii Sass Bootstrap galchuu kee dura dhufuu qaba.
Fakkeenyi yeroo Bootstrap karaa npm galchuu fi qindeessuu fi background-color
kan color
jijjiiru kunooti:<body>
Jijjiiramaa kamiyyuu Bootstrap keessatti akka barbaachisummaa isaatti irra deebi'i, filannoowwan waliigalaa armaan gadii dabalatee.
Bootstrap 4 kaartaa Sass muraasa, lamaan gatii furtuu maatii CSS walqabatan uumuuf salphaa taasisan of keessatti qabata. Halluuwwan keenyaaf, qabxiiwwan ciccitaa giiridii fi kkf kaartaa Sass fayyadamna. Akkuma jijjiiramoota Sass, kaartoonni Sass hundi !default
alaabaa of keessatti qabatanii irra darbuu fi dheerachuu danda'u.
Kaartoonni Sass keenya tokko tokko durtiidhaan gara duwwaatti walitti makamu. Kunis kaartaa Sass kenname salphaatti babal'isuuf kan raawwatamu yoo ta'u, garuu baasii wantoota kaartaa irraa buqqisuun xiqqoo rakkisaa taasisuun dhufa.
Halluu kaartaa keenya keessatti jiru fooyyessuuf $theme-colors
, faayilii Sass amala kee irratti kanneen armaan gadii dabali:
Halluu haaraa gara tti $theme-colors
dabaluuf, furtuu fi gatii haaraa dabali:
$theme-colors
Halluuwwan , ykn kaartaa biroo kamiyyuu irraa haquuf , fayyadami map-remove
:
Bootstrap akka nuti fayyadamnetti furtuuwwan murtaa'an tokko tokko kaartaa Sass keessa jiraachuu isaanii fudhatee ofuma keenyaan kanneen dheeressina. Yeroo kaartaa hammataman dhuunfattu, bakka furtuun kaartaa Sass murtaa'e fayyadamaa jirutti dogongorri si mudachuu danda'a.
Fakkeenyaaf, primary
, success
, fi danger
furtuuwwan irraa $theme-colors
hidhannoowwan, qareewwanii fi haalata unkaaf fayyadamna. Gatii furtuuwwan kanaa bakka buusuun dhimma tokkollee dhiyeessu hin qabu, garuu isaan haquun dhimmoota qindeessaa Sass fiduu danda'a. Fakkeenyota kana keessatti, koodii Sass kan gatiiwwan sana fayyadamu fooyyessuu si barbaachisa.
Bootstrap faankishiniiwwan Sass hedduu fayyadama, garuu tuuta xiqqaa qofatu mata duree waliigalaa irratti hojiirra oola. Gatii kaartaa halluu irraa argachuuf faankishiniiwwan sadii hammanneerra:
Isaan kun kaartaa Sass irraa halluu tokko akka filattu si dandeessisu akkuma akkaataa jijjiiramaa halluu v3 irraa fayyadamtu.
Akkasumas kaartaa irraa halluu sadarkaa murtaa'e argachuuf faankishinii biraa qabna. $theme-colors
Gatiin sadarkaa negaatiivii halluu ni ibsu, sadarkaan ol'aanaa ammoo ni dukkaneessa.
Qabatamaan, faankishinii waamtee qajoojiiwwan lama keessa darbita: maqaa halluu irraa $theme-colors
(fkn, jalqabaa ykn balaa) fi sadarkaa lakkoofsaa.
Faankishiniiwwan dabalataa gara fuulduraatti dabalamuu danda'u ykn Sass amala mataa keetii faankishiniiwwan sadarkaa kaartaa Sass dabalataa uumuuf, ykn illee yoo caalaatti verbose ta'uu barbaadde kan waliigalaa.
Faankishiniin dabalataa tokko Bootstrap keessatti hammatamnu faankishinii walfaallaa halluu, color-yiq
. Halluu bu'uuraa ifteessame irratti hundaa'uun halluu walfaallaa ifaa ( ) ykn dukkanaa'aa ( ) ofumaan deebisuuf iddoo halluu YIQ fayyadama . Faankishiniin kun keessumaa mixins ykn loops bakka ati gita hedduu uumuuf faayidaa qaba.#fff
#111
Fakkeenyaaf, $theme-colors
kaartaa keenya irraa sajoo halluu uumuuf:
Akkasumas fedhii walfaallaa yeroo tokkootiif fayyadamuu ni danda'a:
Akkasumas faankishiniiwwan kaartaa halluu keenyaatiin halluu bu'uuraa ifteessuu dandeessa:
Bootstrap 4 faayilii jijjiiramoota amala ijaarame keenyaan dhuunfachiisi fi filannoowwan CSS addunyaa $enable-*
jijjiiramoota Sass haaraatiin salphaatti jijjiiri. Gatii jijjiiramaa irra darbiiti npm run test
akka barbaachisummaa isaatti waliin irra deebi'ii qindeessii.
Jijjiiramoota kana filannoowwan waliigalaa furtuu _variables.scss
faayilii keenya keessatti argachuu fi dhuunfachuu dandeessa.
Jijjiiramaa | Duudhaalee | Ibsa |
---|---|---|
$spacer |
1rem (durtii), ykn gatii kamiyyuu > 0 |
Faayidaalee addaan baafannaa keenya sagantaadhaan uumuuf gatii addaan baafannaa durtii ifteessa . |
$enable-rounded |
true (durtii) yknfalse |
border-radius Qaamolee adda addaa irratti akkaataa durtii ibsaman dandeessisa . |
$enable-shadows |
true ykn false (durtii) . |
box-shadow Qaamolee adda addaa irratti akkaataa durtii ibsaman dandeessisa . |
$enable-gradients |
true ykn false (durtii) . |
Garaagariiwwan durtii ibsaman karaa background-image akkaataa qaamolee adda addaa irratti dandeessisa. |
$enable-transitions |
true (durtii) yknfalse |
transition Qaamolee adda addaa irratti s durtii ibsame dandeessisa . |
$enable-hover-media-query |
true ykn false (durtii) . |
Kan hin fayyadamne |
$enable-grid-classes |
true (durtii) yknfalse |
Dhaloota gita CSS sirna tarjaadhaaf dandeessisa (fkn, .container , .row , .col-md-1 , fi kkf). |
$enable-caret |
true (durtii) yknfalse |
Qaama sobaa caret irratti dandeessisa .dropdown-toggle . |
$enable-print-styles |
true (durtii) yknfalse |
Akkaataawwan maxxansaa fooyyessuuf dandeessisa. |
Qaamolee fi faayidaa adda addaa Bootstrap hedduun isaanii halluuwwan walduraa duubaan kaartaa Sass keessatti ibsamaniin ijaaramaniiru. Kaartaan kun Sass keessatti loop gochuun saffisaan tartiiba tuuta seeraa uumuuf ni danda'ama.
Halluuwwan Bootstrap 4 keessatti argaman hundi, akka jijjiiramoota Sass fi kaartaa Sass scss/_variables.scss
faayilii keenya keessatti argamu. Kunis gadhiifama xixiqqoo itti aanan keessatti golgaa dabalataa dabaluudhaaf ni babal'ata, baay'ee akkuma paleetii halluu diimaa duraan daballee.
Sass keessan keessatti akkamitti kanneen itti fayyadamuu dandeessan kunooti:
Gitoota faayidaa halluucolor
saaguufis ni argamu background-color
.
Gara fuulduraatti, akkuma halluuwwan halluu diimaa armaan gadiitiin goone, kaartaa Sass fi jijjiiramoota golgaa halluu tokkoon tokkoo isaaniif dhiyeessuuf kaayyeffanna.
Tuuta xiqqaa halluuwwan hunda fayyadamnee iskiimota halluu uumuuf paleetii halluu xiqqaa uumna, akkasumas akka jijjiiramoota Sass fi kaartaa Sass scss/_variables.scss
faayilii keenya keessatti argama.
Tuuta bal'aa jijjiiramoota halluu diimaa fi kaartaa Sass scss/_variables.scss
keessaa golgaawwan halluu walfakkaataa piroojektii kee irratti.
Keessatti _variables.scss
, jijjiiramoota halluu keenyaa fi kaartaa Sass ni argattu. $colors
Fakkeenyi kaartaa Sass kunooti :
Akkaataa isaan qaamolee biroo hedduu keessatti itti fayyadaman haaromsuuf gatiiwwan kaartaa keessaa dabali, haqi, ykn fooyyessi. Kan nama dhibu yeroo kanatti, qaamni hundi kaartaa Sass kana hin fayyadamu. Fuulduratti wanti haaraan kana irratti fooyyessuuf ni carraaqu. ${color}
Hanga sanatti jijjiiramootaa fi kaartaa Sass kana fayyadamuu irratti karoorfadhu .
Qaamolee fi faayidaa Bootstrap hedduun isaanii @each
loopoota kaartaa Sass irratti irra deddeebi'an waliin ijaaramaniiru. Kun keessumaa garaagarummaa qaama tokkoo keenyaan maddisiisuu $theme-colors
fi tokkoon tokkoo qabxii cabsuuf garaagarummaa deebii kennuu danda'u uumuuf gargaara. Yeroo kaartaa Sass kana dhuunfachiiftuu fi irra deebitee qindeessitu, jijjiiramoonni kee ofumaan loopoota kana keessatti calaqqisan ni argita.
Qaamonni Bootstrap baay'een isaanii mala gita bu'uuraa-fooyyessaatiin ijaaramaniiru. Kana jechuun harki guddaan akkaataa gita bu'uuraatti qabama (fkn, .btn
) yoo ta'u jijjiiramoonni akkaataa gita fooyyessaa (fkn, .btn-danger
) irratti daangeffama. $theme-colors
Gitoota fooyyessaa kun lakkoofsa fi maqaa gita fooyyessaa keenyaa dhuunfachuu gochuuf kaartaa irraa ijaaramaniiru .
Fakkeenyonni lama akkaataa $theme-colors
kaartaa irratti fooyyessitoota qaama fi faayidaa duubbee .alert
keenya hunda maddisiisuudhaaf loop goonu kunooti..bg-*
Looppiiwwan Sass kun kaartaa halluu qofaan hin daangeffaman, akkasumas. Akkasumas garaagarummaa deebii qaamolee ykn faayidaa keetii maddisiisuu dandeessa. Fakkeenyaaf faayilii qindaa'ina barruu deebii kennuu keenyaa bakka nuti @each
loop $grid-breakpoints
kaartaa Sass gaaffii miidiyaa dabalatee walitti maknu fudhadhu.
Yoo kee fooyyessuu barbaadde $grid-breakpoints
, jijjiiramoonni kee loopoota kaartaa sana irratti irra deddeebi'an hunda irratti raawwatiinsa ni qabaata.
Bootstrap 4 naannoo amaloota amala CSS (jijjiiramoota) kudhan lamaa CSS isaa qindaa'e keessatti of keessatti qabata. Isaan kun yeroo Inspeektaraa biraawzari keetii, saanduqa cirrachaa koodii, ykn proototaayipii waliigalaa keessatti hojjettu gatiiwwan yeroo baay'ee fayyadamnu kan akka halluuwwan mata duree keenyaa, qabxiiwwan cabbii, fi tuullaawwan qubee jalqabaa salphaatti argachuuf ni kennu.
Jijjiiramoonni nuti hammachiifnu kunooti (the :root
is required ta'uu isaa hubadhu). Isaanis _root.scss
faayila keenya keessatti argamu.
Jijjiiramoonni CSS jijjiiramoota Sass wajjin wal fakkaatu kan dhiyeessan, garuu osoo gara biraawzariitti hin tajaajilamin dura qindeessuu osoo hin barbaachisin. Fakkeenyaaf, asitti qubee fuula keenyaa fi akkaataa walqabsiisaa jijjiiramoota CSS waliin deebisaa jirra.
Akkasumas jijjiiramoota qabxii ciccituu keenya gaaffiiwwan miidiyaa kee keessatti fayyadamuu dandeessa: