થીમિંગ બુટસ્ટ્રેપ
સરળ થીમિંગ અને ઘટક ફેરફારો માટે વૈશ્વિક શૈલી પસંદગીઓ માટે અમારા નવા બિલ્ટ-ઇન Sass વેરીએબલ્સ સાથે બુટસ્ટ્રેપ 4 ને કસ્ટમાઇઝ કરો.
બુટસ્ટ્રેપ 3 માં, થીમિંગ મોટે ભાગે LESS, કસ્ટમ CSS અને એક અલગ થીમ સ્ટાઈલશીટમાં વેરીએબલ ઓવરરાઈડ્સ દ્વારા સંચાલિત હતું જે અમે અમારી dist
ફાઈલોમાં શામેલ કર્યું છે. કેટલાક પ્રયત્નો સાથે, કોઈ પણ મુખ્ય ફાઇલોને સ્પર્શ કર્યા વિના બુટસ્ટ્રેપ 3 ના દેખાવને સંપૂર્ણપણે ફરીથી ડિઝાઇન કરી શકે છે. બુટસ્ટ્રેપ 4 એક પરિચિત, પરંતુ થોડો અલગ અભિગમ પૂરો પાડે છે.
હવે, થીમિંગ Sass ચલ, Sass નકશા અને કસ્ટમ CSS દ્વારા પરિપૂર્ણ થાય છે. ત્યાં કોઈ વધુ સમર્પિત થીમ સ્ટાઇલશીટ નથી; તેના બદલે, તમે ગ્રેડિએન્ટ્સ, પડછાયાઓ અને વધુ ઉમેરવા માટે બિલ્ટ-ઇન થીમને સક્ષમ કરી શકો છો.
ચલ, નકશા, મિક્સિન્સ અને વધુનો લાભ લેવા માટે અમારી સ્રોત Sass ફાઇલોનો ઉપયોગ કરો.
જ્યારે પણ શક્ય હોય ત્યારે, બુટસ્ટ્રેપની મુખ્ય ફાઇલોમાં ફેરફાર કરવાનું ટાળો. સાસ માટે, તેનો અર્થ એ છે કે તમારી પોતાની સ્ટાઈલશીટ બનાવવી જે બુટસ્ટ્રેપને આયાત કરે છે જેથી કરીને તમે તેને સંશોધિત અને વિસ્તૃત કરી શકો. ધારી રહ્યા છીએ કે તમે npm જેવા પેકેજ મેનેજરનો ઉપયોગ કરી રહ્યાં છો, તમારી પાસે એક ફાઇલ માળખું હશે જે આના જેવું દેખાય છે:
જો તમે અમારી સોર્સ ફાઇલો ડાઉનલોડ કરી છે અને પેકેજ મેનેજરનો ઉપયોગ કરી રહ્યાં નથી, તો તમે બુટસ્ટ્રેપની સ્રોત ફાઇલોને તમારા પોતાનાથી અલગ રાખીને, તે બંધારણ જેવું કંઈક મેન્યુઅલી સેટઅપ કરવા માગો છો.
તમારા custom.scss
, તમે બુટસ્ટ્રેપના સ્ત્રોત Sass ફાઇલોને આયાત કરશો. તમારી પાસે બે વિકલ્પો છે: તમામ બુટસ્ટ્રેપનો સમાવેશ કરો અથવા તમને જોઈતા ભાગો પસંદ કરો. અમે બાદમાંને પ્રોત્સાહિત કરીએ છીએ, જોકે ધ્યાન રાખો કે અમારા ઘટકોમાં કેટલીક જરૂરિયાતો અને નિર્ભરતા છે. તમારે અમારા પ્લગિન્સ માટે કેટલીક JavaScript પણ સામેલ કરવાની જરૂર પડશે.
તે સેટઅપ સાથે, તમે તમારા custom.scss
. // Optional
તમે જરૂર મુજબ વિભાગ હેઠળ બુટસ્ટ્રેપના ભાગો ઉમેરવાનું પણ શરૂ કરી શકો છો . bootstrap.scss
અમે તમારા પ્રારંભિક બિંદુ તરીકે અમારી ફાઇલમાંથી સંપૂર્ણ આયાત સ્ટેકનો ઉપયોગ કરવાનું સૂચન કરીએ છીએ .
બુટસ્ટ્રેપ 4 માં દરેક Sass વેરીએબલમાં !default
ફ્લેગનો સમાવેશ થાય છે જે તમને બુટસ્ટ્રેપના સોર્સ કોડમાં ફેરફાર કર્યા વિના તમારા પોતાના Sass માં વેરીએબલના ડિફોલ્ટ મૂલ્યને ઓવરરાઇડ કરવાની મંજૂરી આપે છે. ચલોને જરૂર મુજબ કોપી અને પેસ્ટ કરો, તેમના મૂલ્યોમાં ફેરફાર કરો અને !default
ધ્વજને દૂર કરો. જો વેરીએબલ પહેલેથી જ અસાઇન કરવામાં આવ્યું હોય, તો તેને બુટસ્ટ્રેપમાં ડિફોલ્ટ મૂલ્યો દ્વારા ફરીથી સોંપવામાં આવશે નહીં.
તમને માં બુટસ્ટ્રેપના ચલોની સંપૂર્ણ યાદી મળશે scss/_variables.scss
.
સમાન Sass ફાઇલમાં વેરીએબલ ઓવરરાઇડ ડિફૉલ્ટ વેરિયેબલ પહેલાં અથવા પછી આવી શકે છે. જો કે, જ્યારે સમગ્ર Sass ફાઇલોને ઓવરરાઇડ કરી રહ્યાં હોય, ત્યારે તમે બુટસ્ટ્રેપની Sass ફાઇલો આયાત કરો તે પહેલાં તમારા ઓવરરાઇડ્સ આવવા જોઈએ.
અહીં એક ઉદાહરણ છે જે npm દ્વારા બુટસ્ટ્રેપને આયાત અને કમ્પાઇલ કરતી વખતે background-color
અને color
માટે બદલાય છે:<body>
નીચેના વૈશ્વિક વિકલ્પો સહિત, બુટસ્ટ્રેપમાં કોઈપણ ચલ માટે જરૂરી તરીકે પુનરાવર્તન કરો.
બુટસ્ટ્રેપ 4 માં મુઠ્ઠીભર Sass નકશા, કી વેલ્યુ પેરનો સમાવેશ થાય છે જે સંબંધિત CSS ના પરિવારો બનાવવાનું સરળ બનાવે છે. અમે અમારા રંગો, ગ્રીડ બ્રેકપોઇન્ટ્સ અને વધુ માટે સાસ નકશાનો ઉપયોગ કરીએ છીએ. Sass વેરીએબલ્સની જેમ જ, બધા Sass નકશામાં !default
ધ્વજનો સમાવેશ થાય છે અને તેને ઓવરરાઇડ અને વિસ્તૃત કરી શકાય છે.
અમારા કેટલાક સાસ નકશા મૂળભૂત રીતે ખાલી નકશામાં મર્જ કરવામાં આવ્યા છે. આ આપેલ સાસ નકશાના સરળ વિસ્તરણને મંજૂરી આપવા માટે કરવામાં આવે છે, પરંતુ નકશામાંથી આઇટમ્સને દૂર કરવાનું થોડું વધુ મુશ્કેલ બનાવવાના ખર્ચે આવે છે .
અમારા નકશામાં હાલના રંગને સંશોધિત કરવા માટે $theme-colors
, તમારી કસ્ટમ Sass ફાઇલમાં નીચેના ઉમેરો:
માં નવો રંગ $theme-colors
ઉમેરવા માટે, નવી કી અને મૂલ્ય ઉમેરો:
$theme-colors
, અથવા અન્ય કોઈપણ નકશામાંથી રંગો દૂર કરવા માટે , ઉપયોગ કરો map-remove
. ધ્યાન રાખો કે તમારે તેને અમારી જરૂરિયાતો અને વિકલ્પો વચ્ચે દાખલ કરવું પડશે:
બુટસ્ટ્રેપ સાસ નકશામાં અમુક ચોક્કસ કીઓની હાજરી ધારે છે કારણ કે આપણે તેનો ઉપયોગ કરીએ છીએ અને તેનો વિસ્તાર કરીએ છીએ. જેમ જેમ તમે સમાવિષ્ટ નકશાને કસ્ટમાઇઝ કરો છો, ત્યારે તમને ચોક્કસ Sass નકશાની કીનો ઉપયોગ કરવામાં આવી રહ્યો હોય ત્યાં ભૂલો આવી શકે છે.
ઉદાહરણ તરીકે, અમે લિંક્સ, બટનો અને ફોર્મ સ્ટેટ્સ માટે primary
, success
, અને danger
કીનો ઉપયોગ કરીએ છીએ. $theme-colors
આ કીઓના મૂલ્યોને બદલવાથી કોઈ સમસ્યા ન હોવી જોઈએ, પરંતુ તેમને દૂર કરવાથી Sass સંકલન સમસ્યાઓ થઈ શકે છે. આ કિસ્સાઓમાં, તમારે સાસ કોડને સંશોધિત કરવાની જરૂર પડશે જે તે મૂલ્યોનો ઉપયોગ કરે છે.
બુટસ્��્રેપ ઘણા સાસ ફંક્શનનો ઉપયોગ કરે છે, પરંતુ સામાન્ય થીમિંગ પર માત્ર સબસેટ લાગુ પડે છે. અમે રંગ નકશામાંથી મૂલ્યો મેળવવા માટે ત્રણ કાર્યોનો સમાવેશ કર્યો છે:
આ તમને Sass નકશામાંથી એક રંગ પસંદ કરવાની મંજૂરી આપે છે જેમ કે તમે v3 માંથી કલર વેરીએબલનો ઉપયોગ કરો છો.
નકશામાંથી ચોક્કસ સ્તરનો રંગ મેળવવા માટે અમારી પાસે બીજું કાર્ય પણ છે . $theme-colors
નકારાત્મક સ્તરના મૂલ્યો રંગને આછો કરશે, જ્યારે ઉચ્ચ સ્તરો ઘાટા થઈ જશે.
વ્યવહારમાં, તમે ફંક્શનને કૉલ કરશો અને બે પરિમાણોમાં પાસ કરશો: રંગનું નામ $theme-colors
(દા.ત., પ્રાથમિક અથવા ભય) અને આંકડાકીય સ્તર.
વધારાના Sass નકશા માટે લેવલ ફંક્શન્સ બનાવવા માટે ભવિષ્યમાં વધારાના ફંક્શન અથવા તમારા પોતાના કસ્ટમ Sass ઉમેરી શકાય છે, અથવા જો તમે વધુ વર્બોઝ બનવા માંગતા હોવ તો એક સામાન્ય પણ.
અમે બુટસ્ટ્રેપમાં એક વધારાનું કાર્ય શામેલ કરીએ છીએ તે રંગ કોન્ટ્રાસ્ટ ફંક્શન છે color-yiq
. તે સ્પષ્ટ બેઝ કલર પર આધારિત પ્રકાશ ( ) અથવા ઘેરો ( ) કોન્ટ્રાસ્ટ રંગ આપમેળે પરત કરવા માટે YIQ કલર સ્પેસનો ઉપયોગ કરે છે. આ ફંક્શન ખાસ કરીને મિક્સિન્સ અથવા લૂપ્સ માટે ઉપયોગી છે જ્યાં તમે બહુવિધ વર્ગો જનરેટ કરી રહ્યાં છો.#fff
#111
ઉદાહરણ તરીકે, અમારા $theme-colors
નકશામાંથી કલર સ્વેચ જનરેટ કરવા માટે:
તેનો ઉપયોગ એક-ઑફ કોન્ટ્રાસ્ટ જરૂરિયાતો માટે પણ થઈ શકે છે:
તમે અમારા રંગ નકશા કાર્યો સાથે આધાર રંગનો પણ ઉલ્લેખ કરી શકો છો:
અમારી બિલ્ટ-ઇન કસ્ટમ વેરીએબલ્સ ફાઇલ સાથે બુટસ્ટ્રેપ 4ને કસ્ટમાઇઝ કરો અને નવા $enable-*
Sass વેરીએબલ્સ સાથે વૈશ્વિક CSS પસંદગીઓને સરળતાથી ટૉગલ કરો. ચલના મૂલ્યને ઓવરરાઇડ કરો અને npm run test
જરૂરિયાત મુજબ ફરીથી કમ્પાઇલ કરો.
તમે બુટસ્ટ્રેપની scss/_variables.scss
ફાઇલમાં કી વૈશ્વિક વિકલ્પો માટે આ ચલોને શોધી અને કસ્ટમાઇઝ કરી શકો છો.
ચલ | મૂલ્યો | વર્ણન |
---|---|---|
$spacer |
1rem (ડિફૉલ્ટ), અથવા કોઈપણ મૂલ્ય > 0 |
અમારી સ્પેસર ઉપયોગિતાઓને પ્રોગ્રામેટિક રીતે જનરેટ કરવા માટે ડિફોલ્ટ સ્પેસર મૂલ્યનો ઉલ્લેખ કરે છે . |
$enable-rounded |
true (મૂળભૂત) અથવાfalse |
border-radius વિવિધ ઘટકો પર પૂર્વવ્યાખ્યાયિત શૈલીઓને સક્ષમ કરે છે. |
$enable-shadows |
true અથવા false (મૂળભૂત) |
box-shadow વિવિધ ઘટકો પર પૂર્વવ્યાખ્યાયિત શૈલીઓને સક્ષમ કરે છે. |
$enable-gradients |
true અથવા false (મૂળભૂત) |
background-image વિવિધ ઘટકો પરની શૈલીઓ દ્વારા પૂર્વવ્યાખ્યાયિત ગ્રેડિયન્ટ્સને સક્ષમ કરે છે. |
$enable-transitions |
true (મૂળભૂત) અથવાfalse |
transition વિવિધ ઘટકો પર પૂર્વવ્યાખ્યાયિત s ને સક્ષમ કરે છે. |
$enable-hover-media-query |
true અથવા false (મૂળભૂત) |
નાપસંદ |
$enable-grid-classes |
true (મૂળભૂત) અથવાfalse |
.container ગ્રીડ સિસ્ટમ (દા.ત., , .row , .col-md-1 , વગેરે) માટે CSS વર્ગોની જનરેશનને સક્ષમ કરે છે . |
$enable-caret |
true (મૂળભૂત) અથવાfalse |
પર સ્યુડો એલિમેન્ટ કેરેટને સક્ષમ કરે છે .dropdown-toggle . |
$enable-print-styles |
true (મૂળભૂત) અથવાfalse |
પ્રિન્ટિંગને ઑપ્ટિમાઇઝ કરવા માટે શૈલીઓને સક્ષમ કરે છે. |
બુટસ્ટ્રેપના ઘણાં વિવિધ ઘટકો અને ઉપયોગિતાઓ સાસ નકશામાં વ્યાખ્યાયિત રંગોની શ્રેણી દ્વારા બનાવવામાં આવી છે. નિયમોની શ્રેણી ઝડપથી જનરેટ કરવા માટે આ નકશાને સાસમાં લૂપ કરી શકાય છે.
બુટસ્ટ્રેપ 4 માં ઉપલબ્ધ તમામ રંગો, Sass વેરીએબલ અને scss/_variables.scss
ફાઇલમાં Sass નકશા તરીકે ઉપલબ્ધ છે. વધારાના શેડ્સ ઉમેરવા માટે અનુગામી નાના પ્રકાશનોમાં આને વિસ્તૃત કરવામાં આવશે, જેમ કે અમે પહેલાથી જ સમાવિષ્ટ ગ્રેસ્કેલ પેલેટની જેમ.
તમે તમારા સાસમાં આનો ઉપયોગ કેવી રીતે કરી શકો તે અહીં છે:
રંગ ઉપયોગિતા વર્ગોcolor
સેટિંગ અને માટે પણ ઉપલબ્ધ છે background-color
.
ભવિષ્યમાં, અમે નીચે ગ્રેસ્કેલ રંગો સાથે કર્યું છે તેમ દરેક રંગના શેડ્સ માટે સાસ નકશા અને ચલ પ્રદાન કરવાનું લક્ષ્ય રાખીશું.
અમે રંગ યોજનાઓ જનરેટ કરવા માટે નાની કલર પેલેટ બનાવવા માટે તમામ રંગોના સબસેટનો ઉપયોગ કરીએ છીએ, જે બૂટસ્ટ્રેપ્સની scss/_variables.scss
ફાઇલમાં સાસ વેરિયેબલ્સ અને સાસ મેપ તરીકે પણ ઉપલબ્ધ છે.
scss/_variables.scss
તમારા સમગ્ર પ્રોજેક્ટમાં ગ્રેના સાતત્યપૂર્ણ શેડ્સ માટે ગ્રે વેરિયેબલ્સનો એક વિશાળ સેટ અને સાસ નકશો .
ની અંદર scss/_variables.scss
, તમને બુટસ્ટ્રેપના કલર વેરિએબલ્સ અને સાસ મેપ મળશે. અહીં $colors
સાસ નકશાનું ઉદાહરણ છે:
અન્ય ઘણા ઘટકોમાં તેનો ઉપયોગ કેવી રીતે થાય છે તે અપડેટ કરવા માટે નકશામાં મૂલ્યો ઉમેરો, દૂર કરો અથવા સંશોધિત કરો. કમનસીબે આ સમયે, દરેક ઘટક આ Sass નકશાનો ઉપયોગ કરતું નથી. ભાવિ અપડેટ્સ આમાં સુધારો કરવાનો પ્રયત્ન કરશે. ${color}
ત્યાં સુધી, ચલો અને આ સાસ મેપનો ઉપયોગ કરવાની યોજના બનાવો.
બુટસ્ટ્રેપના ઘણા ઘટકો અને ઉપયોગિતાઓ @each
લૂપ્સ સાથે બનેલ છે જે સાસ નકશા પર પુનરાવર્તિત થાય છે. આ ખાસ કરીને અમારા દ્વારા ઘટકના વેરિઅન્ટ જનરેટ કરવા $theme-colors
અને દરેક બ્રેકપોઇન્ટ માટે રિસ્પોન્સિવ વેરિઅન્ટ બનાવવા માટે મદદરૂપ છે. જેમ જેમ તમે આ Sass નકશાને કસ્ટમાઇઝ કરો છો અને ફરીથી કમ્પાઇલ કરો છો, તમે આપમેળે તમારા ફેરફારોને આ લૂપ્સમાં પ્રતિબિંબિત જોશો.
બુટસ્ટ્રેપના ઘણા ઘટકો બેઝ-મોડિફાયર વર્ગ અભિગમ સાથે બનેલ છે. આનો અર્થ એ છે કે સ્ટાઇલનો મોટાભાગનો હિસ્સો બેઝ ક્લાસ (દા.ત., ) માં સમાયેલ છે .btn
જ્યારે શૈલીની વિવિધતાઓ મોડિફાયર વર્ગો (દા.ત., .btn-danger
) સુધી મર્યાદિત છે. આ સંશોધક વર્ગો $theme-colors
અમારા મોડિફાયર વર્ગોની સંખ્યા અને નામને કસ્ટમાઇઝ કરવા માટે નકશામાંથી બનાવવામાં આવ્યા છે.
ઘટક અને અમારી બધી પૃષ્ઠભૂમિ ઉપયોગિતાઓમાં $theme-colors
મોડિફાયર જનરેટ કરવા માટે આપણે નકશા પર કેવી રીતે લૂપ કરીએ છીએ તેના બે ઉદાહરણો અહીં છે ..alert
.bg-*
આ સાસ લૂપ્સ રંગ નકશા સુધી મર્યાદિત નથી, ક્યાં તો. તમે તમારા ઘટકો અથવા ઉપયોગિતાઓની પ્રતિભાવશીલ વિવિધતાઓ પણ જનરેટ કરી શકો છો. ઉદાહરણ તરીકે અમારી રિસ્પોન્સિવ ટેક્સ્ટ સંરેખણ યુટિલિટીઝ લો જ્યાં અમે મીડિયા ક્વેરી શામેલ સાથે સાસ મેપ @each
માટે લૂપને મિશ્રિત કરીએ છીએ.$grid-breakpoints
જો તમારે તમારામાં ફેરફાર કરવાની જરૂર હોય $grid-breakpoints
, તો તમારા ફેરફારો તે નકશા પર પુનરાવર્તિત થતા તમામ લૂપ્સ પર લાગુ થશે.
બુટસ્ટ્રેપ 4 તેના સંકલિત CSSમાં લગભગ બે ડઝન CSS કસ્ટમ પ્રોપર્ટીઝ (ચલો) નો સમાવેશ કરે છે. આ તમારા બ્રાઉઝરના ઇન્સ્પેક્ટર, કોડ સેન્ડબોક્સ અથવા સામાન્ય પ્રોટોટાઇપિંગમાં કામ કરતી વખતે અમારા થીમના રંગો, બ્રેકપોઇન્ટ્સ અને પ્રાથમિક ફોન્ટ સ્ટેક્સ જેવા સામાન્ય રીતે ઉપયોગમાં લેવાતા મૂલ્યોની સરળ ઍક્સેસ પ્રદાન કરે છે.
અમે જે ચલોનો સમાવેશ કરીએ છીએ તે અહીં છે (નોંધ કરો કે :root
જરૂરી છે). તેઓ અમારી _root.scss
ફાઇલમાં સ્થિત છે.
CSS ચલો સાસના ચલો માટે સમાન સુગમતા પ્રદાન કરે છે, પરંતુ બ્રાઉઝરને સેવા આપતા પહેલા સંકલનની જરૂર વગર. ઉદાહરણ તરીકે, અહીં અમે અમારા પેજના ફોન્ટ અને લિંક સ્ટાઈલને CSS વેરીએબલ સાથે રીસેટ કરી રહ્યાં છીએ.
જ્યારે અમે મૂળરૂપે અમારા CSS વેરીએબલ્સમાં બ્રેકપોઇન્ટ્સનો સમાવેશ કર્યો છે (દા.ત., --breakpoint-md
), આ મીડિયા ક્વેરીઝમાં સપોર્ટેડ નથી , પરંતુ તેનો ઉપયોગ મીડિયા ક્વેરીઝમાં હજુ પણ નિયમોમાં થઈ શકે છે. આ બ્રેકપોઇન્ટ વેરીએબલ્સ બેકવર્ડ સુસંગતતા માટે કમ્પાઇલ CSSમાં રહે છે કારણ કે તેનો JavaScript દ્વારા ઉપયોગ કરી શકાય છે. સ્પેકમાં વધુ જાણો.
અહીં શું સમર્થિત નથી તેનું ઉદાહરણ છે:
અને અહીં શું સમર્થન છે તેનું ઉદાહરણ છે: