થીમિંગ બુટસ્ટ્રેપ
સરળ થીમિંગ અને ઘટક ફેરફારો માટે વૈશ્વિક શૈલી પસંદગીઓ માટે અમારા નવા બિલ્ટ-ઇન Sass વેરીએબલ્સ સાથે બુટસ્ટ્રેપ 4 ને કસ્ટમાઇઝ કરો.
પરિચય
બુટસ્ટ્રેપ 3 માં, થીમિંગ મોટે ભાગે LESS, કસ્ટમ CSS અને એક અલગ થીમ સ્ટાઈલશીટમાં વેરીએબલ ઓવરરાઈડ્સ દ્વારા સંચાલિત હતું જે અમે અમારી distફાઈલોમાં શામેલ કર્યું છે. કેટલાક પ્રયત્નો સાથે, કોઈ પણ મુખ્ય ફાઇલોને સ્પર્શ કર્યા વિના બુટસ્ટ્રેપ 3 ના દેખાવને સંપૂર્ણપણે ફરીથી ડિઝાઇન કરી શકે છે. બુટસ્ટ્રેપ 4 એક પરિચિત, પરંતુ થોડો અલગ અભિગમ પૂરો પાડે છે.
હવે, થીમિંગ Sass ચલ, Sass નકશા અને કસ્ટમ CSS દ્વારા પરિપૂર્ણ થાય છે. ત્યાં કોઈ વધુ સમર્પિત થીમ સ્ટાઇલશીટ નથી; તેના બદલે, તમે ગ્રેડિએન્ટ્સ, પડછાયાઓ અને વધુ ઉમેરવા માટે બિલ્ટ-ઇન થીમને સક્ષમ કરી શકો છો.
સસ
તમારી પોતાની એસેટ પાઇપલાઇનનો ઉપયોગ કરીને Sass કમ્પાઇલ કરતી વખતે વેરિયેબલ, નકશા, મિક્સિન અને વધુનો લાભ લેવા માટે અમારી સ્રોત Sass ફાઇલોનો ઉપયોગ કરો.
ફાઇલ માળખું
જ્યારે પણ શક્ય હોય ત્યારે, બુટસ્ટ્રેપની મુખ્ય ફાઇલોમાં ફેરફાર કરવાનું ટાળો. સાસ માટે, તેનો અર્થ એ છે કે તમારી પોતાની સ્ટાઈલશીટ બનાવવી જે બુટસ્ટ્રેપને આયાત કરે છે જેથી કરીને તમે તેને સંશોધિત અને વિસ્તૃત કરી શકો. ધારી રહ્યા છીએ કે તમે npm જેવા પેકેજ મેનેજરનો ઉપયોગ કરી રહ્યાં છો, તમારી પાસે એક ફાઇલ માળખું હશે જે આના જેવું દેખાય છે:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
જો તમે અમારી સોર્સ ફાઇલો ડાઉનલોડ કરી છે અને પેકેજ મેનેજરનો ઉપયોગ કરી રહ્યાં નથી, તો તમે બુટસ્ટ્રેપની સ્રોત ફાઇલોને તમારા પોતાનાથી અલગ રાખીને, તે બંધારણ જેવું કંઈક મેન્યુઅલી સેટઅપ કરવા માગો છો.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
આયાત કરી રહ્યું છે
તમારા custom.scss, તમે બુટસ્ટ્રેપના સ્ત્રોત Sass ફાઇલોને આયાત કરશો. તમારી પાસે બે વિકલ્પો છે: તમામ બુટસ્ટ્રેપનો સમાવેશ કરો અથવા તમને જોઈતા ભાગો પસંદ કરો. અમે બાદમાંને પ્રોત્સાહિત કરીએ છીએ, જોકે ધ્યાન રાખો કે અમારા ઘટકોમાં કેટલીક જરૂરિયાતો અને નિર્ભરતા છે. તમારે અમારા પ્લગિન્સ માટે કેટલીક JavaScript પણ સામેલ કરવાની જરૂર પડશે.
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
તે સેટઅપ સાથે, તમે તમારા custom.scss. // Optionalતમે જરૂર મુજબ વિભાગ હેઠળ બુટસ્ટ્રેપના ભાગો ઉમેરવાનું પણ શરૂ કરી શકો છો . bootstrap.scssઅમે તમારા પ્રારંભિક બિંદુ તરીકે અમારી ફાઇલમાંથી સંપૂર્ણ આયાત સ્ટેકનો ઉપયોગ કરવાનું સૂચન કરીએ છીએ .
વેરિયેબલ ડિફોલ્ટ
બુટસ્ટ્રેપમાં દરેક Sass વેરીએબલમાં !defaultફ્લેગનો સમાવેશ થાય છે જે તમને બુટસ્ટ્રેપના સોર્સ કોડમાં ફેરફાર કર્યા વિના તમારા પોતાના Sass માં વેરીએબલની ડિફૉલ્ટ મૂલ્યને ઓવરરાઇડ કરવાની મંજૂરી આપે છે. ચલોને જરૂર મુજબ કોપી અને પેસ્ટ કરો, તેમના મૂલ્યોમાં ફેરફાર કરો અને !defaultધ્વજને દૂર કરો. જો વેરીએબલ પહેલેથી જ અસાઇન કરવામાં આવ્યું હોય, તો તેને બુટસ્ટ્રેપમાં ડિફોલ્ટ મૂલ્યો દ્વારા ફરીથી સોંપવામાં આવશે નહીં.
તમને માં બુટસ્ટ્રેપના ચલોની સંપૂર્ણ યાદી મળશે scss/_variables.scss. કેટલાક વેરિયેબલ્સ પર સેટ કરેલ છે null, આ વેરિયેબલ્સ પ્રોપર્ટીનું આઉટપુટ કરતા નથી સિવાય કે તે તમારી રૂપરેખાંકનમાં ઓવરરાઇડ ન થાય.
વેરિયેબલ ઓવરરાઇડ્સ અમારા ફંક્શન્સ, વેરિયેબલ્સ અને મિક્સિન આયાત કર્યા પછી આવવું જોઈએ, પરંતુ બાકીની આયાત પહેલા.
અહીં એક ઉદાહરણ છે જે npm દ્વારા બુટસ્ટ્રેપને આયાત અને કમ્પાઇલ કરતી વખતે background-colorઅને colorમાટે બદલાય છે:<body>
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
નીચેના વૈશ્વિક વિકલ્પો સહિત, બુટસ્ટ્રેપમાં કોઈપણ ચલ માટે જરૂરી તરીકે પુનરાવર્તન કરો.
નકશા અને લૂપ્સ
બુટસ્ટ્રેપ 4 માં મુઠ્ઠીભર Sass નકશા, કી વેલ્યુ પેરનો સમાવેશ થાય છે જે સંબંધિત CSS ના પરિવારો બનાવવાનું સરળ બનાવે છે. અમે અમારા રંગો, ગ્રીડ બ્રેકપોઇન્ટ્સ અને વધુ માટે સાસ નકશાનો ઉપયોગ કરીએ છીએ. Sass વેરીએબલ્સની જેમ જ, બધા Sass નકશામાં !defaultધ્વજનો સમાવેશ થાય છે અને તેને ઓવરરાઇડ અને વિસ્તૃત કરી શકાય છે.
અમારા કેટલાક સાસ નકશા મૂળભૂત રીતે ખાલી નકશામાં મર્જ કરવામાં આવ્યા છે. આ આપેલ સાસ નકશાના સરળ વિસ્તરણને મંજૂરી આપવા માટે કરવામાં આવે છે, પરંતુ નકશામાંથી આઇટમ્સને દૂર કરવાનું થોડું વધુ મુશ્કેલ બનાવવાના ખર્ચે આવે છે .
નકશામાં ફેરફાર કરો
અમારા નકશામાં હાલના રંગને સંશોધિત કરવા માટે $theme-colors, તમારી કસ્ટમ Sass ફાઇલમાં નીચેના ઉમેરો:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
નકશામાં ઉમેરો
માં નવો રંગ $theme-colorsઉમેરવા માટે, નવી કી અને મૂલ્ય ઉમેરો:
$theme-colors: (
"custom-color": #900
);
નકશામાંથી દૂર કરો
$theme-colors, અથવા અન્ય કોઈપણ નકશામાંથી રંગો દૂર કરવા માટે , ઉપયોગ કરો map-remove. ધ્યાન રાખો કે તમારે તેને અમારી જરૂરિયાતો અને વિકલ્પો વચ્ચે દાખલ કરવું પડશે:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
જરૂરી કીઓ
બુટસ્ટ્રેપ સાસ નકશામાં અમુક ચોક્કસ કીઓની હાજરી ધારે છે કારણ કે આપણે તેનો ઉપયોગ કરીએ છીએ અને તેનો વિસ્તાર કરીએ છીએ. જેમ જેમ તમે સમાવિષ્ટ નકશાને કસ્ટમાઇઝ કરો છો, ત્યારે તમને ચોક્કસ Sass નકશાની કીનો ઉપયોગ કરવામાં આવી રહ્યો હોય ત્યાં ભૂલો આવી શકે છે.
ઉદાહરણ તરીકે, અમે લિંક્સ, બટન્સ અને ફોર્મ સ્ટેટ્સ માટે primary, success, અને dangerકીનો ઉપયોગ કરીએ છીએ. $theme-colorsઆ કીઓના મૂલ્યોને બદલવાથી કોઈ સમસ્યા ન હોવી જોઈએ, પરંતુ તેમને દૂર કરવાથી Sass સંકલન સમસ્યાઓ થઈ શકે છે. આ કિસ્સાઓમાં, તમારે સાસ કોડને સંશોધિત કરવાની જરૂર પડશે જે તે મ���લ્યોનો ઉપયોગ કરે છે.
કાર્યો
બુટસ્ટ્રેપ ઘણા સાસ ફંક્શનનો ઉપયોગ કરે છે, પરંતુ સામાન્ય થીમિંગ પર માત્ર સબસેટ લાગુ પડે છે. અમે રંગ નકશામાંથી મૂલ્યો મેળવવા માટે ત્રણ કાર્યોનો સમાવેશ કર્યો છે:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
આ તમને Sass નકશામાંથી એક રંગ પસંદ કરવાની મંજૂરી આપે છે જેમ કે તમે v3 માંથી કલર વેરીએબલનો ઉપયોગ કરો છો.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
નકશામાંથી ચોક્કસ સ્તરનો રંગ મેળવવા માટે અમારી પાસે બીજું કાર્ય પણ છે . $theme-colorsનકારાત્મક સ્તરના મૂલ્યો રંગને આછો કરશે, જ્યારે ઉચ્ચ સ્તરો ઘાટા થઈ જશે.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
વ્યવહારમાં, તમે ફંક્શનને કૉલ કરશો અને બે પરિમાણોમાં પાસ કરશો: રંગનું નામ $theme-colors(દા.ત., પ્રાથમિક અથવા ભય) અને આંકડાકીય સ્તર.
.custom-element {
color: theme-color-level(primary, -10);
}
વધારાના Sass નકશા માટે લેવલ ફંક્શન્સ બનાવવા માટે ભવિષ્યમાં વધારાના ફંક્શન અથવા તમારા પોતાના કસ્ટમ Sass ઉમેરી શકાય છે, અથવા જો તમે વધુ વર્બોઝ બનવા માંગતા હોવ તો એક સામાન્ય પણ.
રંગ વિરોધાભાસ
અમે બુટસ્ટ્રેપમાં એક વધારાનું કાર્ય શામેલ કરીએ છીએ તે રંગ કોન્ટ્રાસ્ટ ફંક્શન છે color-yiq. તે સ્પષ્ટ બેઝ કલર પર આધારિત પ્રકાશ ( ) અથવા ઘેરો ( ) કોન્ટ્રાસ્ટ રંગ આપમેળે પરત કરવા માટે YIQ કલર સ્પેસનો ઉપયોગ કરે છે. આ ફંક્શન ખાસ કરીને મિક્સિન્સ અથવા લૂપ્સ માટે ઉપયોગી છે જ્યાં તમે બહુવિધ વર્ગો જનરેટ કરી રહ્યાં છો.#fff#111
ઉદાહરણ તરીકે, અમારા $theme-colorsનકશામાંથી કલર સ્વેચ જનરેટ કરવા માટે:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
તેનો ઉપયોગ એક-ઑફ કોન્ટ્રાસ્ટ જરૂરિયાતો માટે પણ થઈ શકે છે:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
તમે અમારા રંગ નકશા કાર્યો સાથે આધાર રંગનો પણ ઉલ્લેખ કરી શકો છો:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Escape SVG
અમે SVG બેકગ્રાઉન્ડ ઈમેજીસ માટે , અને અક્ષરોથી escape-svgબચવા માટે ફંક્શનનો ઉપયોગ કરીએ છીએ. IE માં પૃષ્ઠભૂમિ છબીઓને યોગ્ય રીતે રેન્ડર કરવા માટે આ અક્ષરોને એસ્કેપ કરવાની જરૂર છે. ફંક્શનનો ઉપયોગ કરતી વખતે , ડેટા URI નો અવતરણ થવો આવશ્યક છે.<>#escape-svg
કાર્યો ઉમેરો અને બાદબાકી કરો
અમે CSS ફંક્શનને લપેટવા માટે addઅને ફંક્શનનો ઉપયોગ કરીએ છીએ . આ ફંક્શન્સનો પ્રાથમિક હેતુ એ છે કે જ્યારે "એકમ વિનાનું" મૂલ્ય અભિવ્યક્તિમાં પસાર થાય ત્યારે ભૂલોને ટાળવાનો છે. જેવા અભિવ્યક્તિઓ ગાણિતિક રીતે સાચા હોવા છતાં, બધા બ્રાઉઝર્સમાં ભૂલ આપશે.subtractcalc0calccalc(10px - 0)
ઉદાહરણ જ્યાં કેલ્ક માન્ય છે:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
ઉદાહરણ જ્યાં કેલ્ક અમાન્ય છે:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
Sass વિકલ્પો
અમારી બિલ્ટ-ઇન કસ્ટમ વેરીએબલ્સ ફાઇલ સાથે બુટસ્ટ્રેપ 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વિવિધ ઘટકો પર પૂર્વવ્યાખ્યાયિત સુશોભન શૈલીઓને સક્ષમ કરે છે. box-shadowફોકસ સ્ટેટ્સ માટે ઉપયોગમાં લેવાતા s ને અસર કરતું નથી . |
$enable-gradients |
trueઅથવા false(મૂળભૂત) |
background-imageવિવિધ ઘટકો પરની શૈલીઓ દ્વારા પૂર્વવ્યાખ્યાયિત ગ્રેડિએન્ટ્સને સક્ષમ કરે છે. |
$enable-transitions |
true(મૂળભૂત) અથવાfalse |
transitionવિવિધ ઘટકો પર પૂર્વવ્યાખ્યાયિત s ને સક્ષમ કરે છે. |
$enable-prefers-reduced-motion-media-query |
true(મૂળભૂત) અથવાfalse |
prefers-reduced-motionમીડિયા ક્વેરી સક્ષમ કરે છે , જે વપરાશકર્તાઓની બ્રાઉઝર/ઓપરેટિંગ સિસ્ટમ પસંદગીઓના આધારે ચોક્કસ એનિમેશન/સંક્રમણોને દબાવી દે છે. |
$enable-hover-media-query |
trueઅથવા false(મૂળભૂત) |
નાપસંદ |
$enable-grid-classes |
true(મૂળભૂત) અથવાfalse |
.containerગ્રીડ સિસ્ટમ (દા.ત., , .row, .col-md-1, વગેરે) માટે CSS વર્ગોની જનરેશનને સક્ષમ કરે છે . |
$enable-caret |
true(મૂળભૂત) અથવાfalse |
પર સ્યુડો એલિમેન્ટ કેરેટને સક્ષમ કરે છે .dropdown-toggle. |
$enable-pointer-cursor-for-buttons |
true(મૂળભૂત) અથવાfalse |
બિન-અક્ષમ બટન ઘટકોમાં "હાથ" કર્સર ઉમેરો. |
$enable-print-styles |
true(મૂળભૂત) અથવાfalse |
પ્રિન્ટિંગને ઑપ્ટિમાઇઝ કરવા માટે શૈલીઓને સક્ષમ કરે છે. |
$enable-responsive-font-sizes |
trueઅથવા false(મૂળભૂત) |
પ્રતિભાવશીલ ફોન્ટ માપોને સક્ષમ કરે છે . |
$enable-validation-icons |
true(મૂળભૂત) અથવાfalse |
background-imageટેક્સ્ચ્યુઅલ ઇનપુટ્સ અને માન્યતા સ્થિતિઓ માટે કેટલાક કસ્ટમ સ્વરૂપોમાં ચિહ્નોને સક્ષમ કરે છે. |
$enable-deprecation-messages |
true(મૂળભૂત) અથવાfalse |
કોઈપણ નાપસંદ મિક્સિન્સ અને ફંક્શનનો ઉપયોગ કરતી વખતે ચેતવણીઓ છુપાવવા માટે સેટ કરો falseકે જે માં દૂર કરવાની યોજના છે v5. |
રંગ
બુટસ્ટ્રેપના ઘણાં વિવિધ ઘટકો અને ઉપયોગિતાઓ સાસ નકશામાં વ્યાખ્યાયિત રંગોની શ્રેણી દ્વારા બનાવવામાં આવી છે. નિયમોની શ્રેણી ઝડપથી જનરેટ કરવા માટે આ નકશાને સાસમાં લૂપ કરી શકાય છે.
બધા રંગો
બુટસ્ટ્રેપ 4 માં ઉપલબ્ધ તમામ રંગો, Sass વેરીએબલ અને scss/_variables.scssફાઇલમાં Sass નકશા તરીકે ઉપલબ્ધ છે. વધારાના શેડ્સ ઉમેરવા માટે અનુગામી નાના પ્રકાશનોમાં આને વિસ્તૃત કરવામાં આવશે, જેમ કે અમે પહેલાથી જ સમાવિષ્ટ ગ્રેસ્કેલ પેલેટની જેમ.
તમે તમારા સાસમાં આનો ઉપયોગ કેવી રીતે કરી શકો તે અહીં છે:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
કલર યુટિલિટી ક્લાસcolor સેટિંગ અને માટે પણ ઉપલબ્ધ છે background-color.
થીમ રંગો
અમે રંગ યોજનાઓ જનરેટ કરવા માટે નાની કલર પેલેટ બનાવવા માટે તમામ રંગોના સબસેટનો ઉપયોગ કરીએ છીએ, જે બૂટસ્ટ્રેપની scss/_variables.scssફાઇલમાં સાસ વેરીએબલ્સ અને સાસ મેપ તરીકે પણ ઉપલબ્ધ છે.
ગ્રે
scss/_variables.scssતમારા સમગ્ર પ્રોજેક્ટમાં ગ્રેના સાતત્યપૂર્ણ શેડ્સ માટે ગ્રે વેરિયેબલ્સનો એક વિશાળ સેટ અને સાસ નકશો . નોંધ કરો કે આ "કૂલ ગ્રે" છે, જે તટસ્થ ગ્રેને બદલે સૂક્ષ્મ વાદળી ટોન તરફ વલણ ધરાવે છે.
ની અંદર scss/_variables.scss, તમને બુટસ્ટ્રેપના કલર વેરિએબલ્સ અને સાસ મેપ મળશે. અહીં $colorsસાસ નકશાનું ઉદાહરણ છે:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
અન્ય ઘણા ઘટકોમાં તેનો ઉપયોગ કેવી રીતે થાય છે તે અપડેટ કરવા માટે નકશામાં મૂલ્યો ઉમેરો, દૂર કરો અથવા સંશોધિત કરો. કમનસીબે આ સમયે, દરેક ઘટક આ Sass નકશાનો ઉપયોગ કરતું નથી. ભાવિ અપડેટ્સ આમાં સુધારો કરવાનો પ્રયત્ન કરશે. ${color}ત્યાં સુધી, ચલો અને આ સાસ મેપનો ઉપયોગ કરવાની યોજના બનાવો.
ઘટકો
બુટસ્ટ્રેપના ઘણા ઘટકો અને ઉપયોગિતાઓ @eachલૂપ્સ સાથે બનેલ છે જે સાસ નકશા પર પુનરાવર્તિત થાય છે. આ ખાસ કરીને અમારા દ્વારા ઘટકના વેરિઅન્ટ જનરેટ કરવા $theme-colorsઅને દરેક બ્રેકપોઇન્ટ માટે રિસ્પોન્સિવ વેરિઅન્ટ બનાવવા માટે મદદરૂપ છે. જેમ જેમ તમે આ Sass નકશાને કસ્ટમાઇઝ કરો છો અને ફરીથી કમ્પાઇલ કરો છો, તમે આપમેળે તમારા ફેરફારોને આ લૂપ્સમાં પ્રતિબિંબિત જોશો.
સંશોધકો
બુટસ્ટ્રેપના ઘણા ઘટકો બેઝ-મોડિફાયર વર્ગ અભિગમ સાથે બનેલ છે. આનો અર્થ એ છે કે સ્ટાઇલનો મોટાભાગનો હિસ્સો બેઝ ક્લાસ (દા.ત., ) માં સમાયેલ છે .btnજ્યારે શૈલીની વિવિધતાઓ મોડિફાયર વર્ગો (દા.ત., .btn-danger) સુધી મર્યાદિત છે. આ સંશોધક વર્ગો $theme-colorsઅમારા મોડિફાયર વર્ગોની સંખ્યા અને નામને કસ્ટમાઇઝ કરવા માટે નકશામાંથી બનાવવામાં આવ્યા છે.
ઘટક અને અમારી બધી પૃષ્ઠભૂમિ ઉપયોગિતાઓમાં $theme-colorsમોડિફાયર જનરેટ કરવા માટે આપણે નકશા પર કેવી રીતે લૂપ કરીએ છીએ તેના બે ઉદાહરણો અહીં છે ..alert.bg-*
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}
પ્રતિભાવશીલ
આ સાસ લૂપ્સ રંગ નકશા સુધી મર્યાદિત નથી, ક્યાં તો. તમે તમારા ઘટકો અથવા ઉપયોગિતાઓની પ્રતિભાવશીલ વિવિધતાઓ પણ જનરેટ કરી શકો છો. ઉદાહરણ તરીકે અમારી રિસ્પોન્સિવ ટેક્સ્ટ સંરેખણ યુટિલિટીઝ લો જ્યાં અમે મીડિયા ક્વેરી શામેલ સાથે સાસ મેપ @eachમાટે લૂપને મિશ્રિત કરીએ છીએ.$grid-breakpoints
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}
જો તમારે તમારામાં ફેરફાર કરવાની જરૂર હોય $grid-breakpoints, તો તમારા ફેરફારો તે નકશા પર પુનરાવર્તિત થતા તમામ લૂપ્સ પર લાગુ થશે.
CSS ચલો
બુટસ્ટ્રેપ 4 તેના સંકલિત CSSમાં લગભગ બે ડઝન CSS કસ્ટમ પ્રોપર્ટીઝ (ચલો) નો સમાવેશ કરે છે. આ તમારા બ્રાઉઝરના ઇન્સ્પેક્ટર, કોડ સેન્ડબોક્સ અથવા સામાન્ય પ્રોટોટાઇપિંગમાં કામ કરતી વખતે અમારા થીમના રંગો, બ્રેકપોઇન્ટ્સ અને પ્રાથમિક ફોન્ટ સ્ટેક્સ જેવા સામાન્ય રીતે ઉપયોગમાં લેવાતા મૂલ્યોની સરળ ઍક્સેસ પ્રદાન કરે છે.
ઉપલબ્ધ ચલો
અમે જે ચલોનો સમાવેશ કરીએ છીએ તે અહીં છે (નોંધ કરો કે :rootજરૂરી છે). તેઓ અમારી _root.scssફાઇલમાં સ્થિત છે.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
ઉદાહરણો
CSS ચલો સાસના ચલો માટે સમાન સુગમતા પ્રદાન કરે છે, પરંતુ બ્રાઉઝરને સેવા આપતા પહેલા સંકલનની જરૂર વગર. ઉદાહરણ તરીકે, અહીં અમે અમારા પેજના ફોન્ટ અને લિંક સ્ટાઈલને CSS વેરીએબલ સાથે રીસેટ કરી રહ્યાં છીએ.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
બ્રેકપોઇન્ટ ચલો
જ્યારે અમે મૂળરૂપે અમારા CSS વેરીએબલ્સમાં બ્રેકપોઇન્ટ્સનો સમાવેશ કર્યો છે (દા.ત., --breakpoint-md), આ મીડિયા ક્વેરીઝમાં સપોર્ટેડ નથી , પરંતુ તેઓ હજુ પણ મીડિયા ક્વેરીઝમાં નિયમોમાં વાપરી શકાય છે. આ બ્રેકપોઇન્ટ વેરીએબલ્સ બેકવર્ડ સુસંગતતા માટે કમ્પાઇલ CSSમાં રહે છે કારણ કે તેનો JavaScript દ્વારા ઉપયોગ કરી શકાય છે. સ્પેકમાં વધુ જાણો .
અહીં શું સમર્થિત નથી તેનું ઉદાહરણ છે:
@media (min-width: var(--breakpoint-sm)) {
...
}
અને અહીં શું સમર્થન છે તેનું ઉદાહરણ છે:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}