Source

थीमिंग बूटस्ट्रॅप

सोप्या थीमिंग आनी घटक बदलां खातीर जागतीक शैली प्राधान्यां खातीर आमच्या नव्या बिल्ट-इन Sass चयापचयां वांगडा Bootstrap 4 पसंतीचे करात.

वळख

distबूटस्ट्रॅप 3 त, थीमिंग चड करून LESS, सानुकूल CSS, आनी आमी आमच्या फायलींनी आस्पाव केल्ल्या वेगळ्या थीम स्टायलशीटांत व्हेरिएबल ओव्हररायड्स हांकां लागून चलताली . कांय यत्न करून, कोर फायलींक स्पर्श करिनासतना बूटस्ट्रॅप 3 चो लुक पुरायपणान नवी डिझायन करपाक मेळटालो. बूटस्ट्रॅप 4 एक परिचित, पूण मात्सो वेगळो पद्दत दिता.

आतां, थीमिंग Sass व्हेरिएबल्स, Sass मॅप, आनी कस्टम CSS वरवीं पुराय जाता. हाचे परस चड समर्पीत थीम स्टायलशीट ना; ताचे बदला, तुमी ग्रेडियेंट, सावळी आनी हेर जोडपाक अंतर्निहित थीम सक्षम करूंक शकतात.

सास

चड-उणें, नकाशे, मिक्सिन, आनी हेरांचो फायदो घेवपाक आमच्या स्रोत Sass फायलींचो वापर करचो.

फायल रचणूक

शक्य आसल्यार, Bootstrap च्या कोर फायलींनी बदल करप टाळचें. Sass खातीर, ताचो अर्थ बूटस्ट्रॅप आयात करपी तुमचें स्वताचें स्टायलशीट तयार करप जेणे करून तुमी तातूंत बदल करूंक शकतात आनी विस्तार करूंक शकतात. तुमी npm सारको पॅकेज वेवस्थापक वापरतात अशें मानल्यार, तुमकां अशी दिसपी फायल रचणूक आसतली:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

तुमी आमच्यो स्त्रोत फायली डाउनलोड केल्यात आनी पॅकेज वेवस्थापक वापरनात जाल्यार, तुमकां त्या संरचने सारकें कितें तरी हाताळणीन सेटअप करूंक जाय आसतलें, Bootstrap ची स्त्रोत फायली तुमच्या स्वताच्या फायलीं परस वेगळी दवरून.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

आयात करप

तुमच्या custom.scss, तुमी Bootstrap ची स्रोत Sass फायली आयात करतले. तुमचे कडेन दोन पर्याय आसात: सगळे Bootstrap समाविष्ट करात, वा तुमकां जाय आशिल्ले भाग वेंचात. आमी उपरांतच्याक प्रोत्साहन दितात, जरी आमच्या घटकां मदीं कांय गरजां आनी अवलंबन आसात हाची जाणविकाय दवरात. तशेंच आमच्या प्लगइनां खातीर तुमकां कांय जावास्क्रिप्ट समाविष्ट करची पडटली.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@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तुमचो सुरवातीचो बिंदू म्हणून वापरपाची सुचोवणी करतात.

चडांत चड मुलभूत आसतात

Bootstrap 4 तल्या दर एका Sass चक्रांत !defaultBootstrap च्या स्त्रोत कोडांत बदल करिनासतना तुमच्या स्वताच्या Sass त चक्राचें मुलभूत मोल ओव्हररायड करपाक परवानगी दिवपी ध्वज आसपावीत करता. गरज पडल्यार चड-उणें कॉपी आनी पेस्ट करात, तांचीं मोलां बदलचीं, आनी !defaultध्वज काडून उडोवचें. जर एक चडांत चड पयलींच नेमिल्लो आसत जाल्यार, मागीर तो बूटस्ट्रॅपांतल्या मुलभूत मोलांवरवीं परतून नेमचो ना.

तुमकां Bootstrap च्या व्हेरिएबलांची पुराय वळेरी हातूंत मेळटली scss/_variables.scss.

त्याच Sass फायलीन व्हेरिएबल ओव्हररायड मुलभूत व्हेरिएबलां पयलीं वा उपरांत येवंक शकतात. पूण, Sass फायलीं मदीं ओव्हररायड करतना, तुमी Bootstrap ची Sass फायली आयात करचे पयलीं तुमचीं ओव्हररायड्स येवंक जाय.

हांगा एक उदाहरण आसा जें npm वरवीं Bootstrap आयात आनी संकलित करतना background-colorआनी colorखातीर बदलता:<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

बूटस्ट्रॅपांतल्या खंयच्याय चक्राखातीर गरज पडल्यार परतून करात, सकयल दिल्ल्या जागतीक पर्यायां सयत.

नकाशे आनी वळीं

बूटस्ट्रॅप 4 हातूंत मुठीभर Sass नकाशे, संबंदीत CSS कुटुंबां तयार करप सोंपें करपी कळ मोल जोडी आसपावीत आसात. आमी आमच्या रंगां खातीर, ग्रिड ब्रेकपॉइंट आनी हेर खातीर Sass नकाशे वापरतात. जशें Sass चडांत चड, सगळ्या Sass नकाशांनी !defaultध्वज आसपावीत केला आनी तांकां ओव्हररायड करून विस्तारूंक मेळटा.

आमचे कांय Sass नकाशे डिफॉल्ट रितीन रिकामे विलीन केल्यात. दिल्ल्या सास नकाशाचो सोपो विस्तार करपाक मेळचो म्हूण हें करतात, पूण नकाशांतल्यान वस्तू काडप मात्शें कठीण करपाच्या खर्चाचेर येता .

नकाशांत बदल करचो

आमच्या $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 नकाशां भितर कांय विशिश्ट कळाशींची उपस्थिती गृहीत धरता आनी स्वता हीं विस्तारता. तुमी समाविष्ट केल्ले नकाशे पसंतीचे करतना, तुमकां विशिश्ट Sass नकाशाची कळ वापरतात थंय चुको मेळूं येतात.

देखीक, आमी दुवे, बटण, आनी फॉर्म स्थिती खातीर primary, success, आनी dangerकळाशी वापरतात. $theme-colorsह्या कळांचीं मोलां बदलल्यार कसलेच प्रस्न सादर जावंक फावना, पूण तीं काडून उडयल्यार Sass संकलन समस्या निर��माण जावंक शकतात. ह्या प्रसंगांनी, तुमकां त्या मोलांचो वापर करपी Sass कोड बदलचो पडटलो.

कार्यां करतात

बूटस्ट्रॅप जायत्या 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`
}

सास पर्याय

आमच्या बिल्ट-इन सानुकूल चड-उणें फायलीन बूटस्ट्रॅप 4 पसंतीचे करात आनी नव्या $enable-*Sass चड-उणें कडेन जागतीक CSS प्राधान्यां सहजपणान टॉगल करात. चक्राचें मोल ओव्हररायड करचें आनी npm run testगरज पडल्यार परतून संकलित करचें.

तुमी Bootstrap च्या 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 ग्रिड प्रणालीखातीर CSS वर्गांची निर्मिती सक्षम करता (देखीक, .container, .row, .col-md-1, आदी).
$enable-caret true(मुळावें) वाfalse वर छद्म घटक कॅरेट सक्षम करता .dropdown-toggle.
$enable-print-styles true(मुळावें) वाfalse मुद्रण अनुकूल करपाखातीर शैली सक्षम करता.

रंग

बूटस्ट्रॅपाचे जायते वेगवेगळे घटक आनी उपयुक्तताय Sass नकाशांत व्याख्या केल्ल्या रंगांच्या माळे वरवीं तयार केल्यात. हो नकासो सॅसांत लूप करून नियमसंग्रहांची माळ बेगीन तयार करूं येता.

सगळे रंग

बूटस्ट्रॅप 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.

फुडाराक, आमी सकयल दिल्ल्या ग्रेस्केल रंगां कडेन केल्ल्या प्रमाण दर एका रंगाच्या शेड्स खातीर Sass नकाशे आनी चड-उणें दिवपाचो आमी हेतू दवरतले.

थीम रंग

scss/_variables.scssरंग येवजण्यो तयार करपाखातीर ल्हान रंग पॅलेट तयार करपाखातीर आमी सगळ्या रंगांचो उपसमुह वापरतात, जो Sass चडांत चड आनी Bootstraps च्या फायलीन Sass नकासो म्हणूनय उपलब्ध आसा .

प्राथमिक
दुय्यम
येस
धोको
शिटकावणी
माहिती
उजवाड
काळोख

ग्रेज हें नांव

scss/_variables.scssतुमच्या प्रकल्पभर राशीच्या सुसंगत शेड्स खातीर ग्रे चयापचयांचो विस्तारीत संच आनी Sass नकासो in .

१०० आनी
200 आनी
३०० इतले आसात
४०० आसा
५०० इतले आसात
६०० इतले आसात
७०० इतले आसात
८०० इतले आसात
९०० इतले आसात

भितर scss/_variables.scss, तुमकां Bootstrap च्या रंग चड-उणें आनी Sass नकासो मेळटलो. $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;

हेर जायत्या घटकांनी तीं कशीं वापरतात तें अद्ययावत करपाक नकाशा भितर मोलां जोडचीं, काडून उडोवचीं वा बदलचीं. दुर्दैवान ह्या वेळार, दरेक घटक ह्या सॅस नकाशाचो वापर करिना. फुडले अद्ययावत हाचेर सुदारणा करपाचो यत्न करतले. ते मेरेन, ${color}चड-उणें आनी ह्या सॅस नकाशाचो वापर करपाची येवजण करात.

घटकांचो आस्पाव जाता

Bootstrap च्या जायते घटक आनी उपयुक्तताय @eachSass नकाशाचेर पुनरावृत्ती करपी लूपांनी तयार केल्यात. $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);
}

प्रतिसाद दिवपी

हे सॅस लूप फकत रंगीत नकाशांक मर्यादीत नात, तशेंच. तुमी तुमच्या घटकांचे वा उपयुक्ततायांचे प्रतिसाद दिवपी बदलय तयार करूंक शकतात. देखीक आमचीं प्रतिसाद दिवपी मजकूर संरेखण उपयुक्तताय घेयात जंय आमी Sass नकाशा @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, तुमचे बदल त्या नकाशाचेर पुनरावृत्ती करपी सगळ्या वळींक लागू जातले.

सीएसएस चड-उणें

बूटस्ट्रॅप 4 च्या संकलित CSS मदीं सुमार दोन डझन CSS सानुकूल गुणधर्म (चडांत चड) आसपावीत केला. तुमच्या ब्राउझराच्या निरिक्षकांत, कोड सॅंडबॉक्सांत वा सामान्य प्रोटोटायपिंगांत काम करतना हे आमचे थीम रंग, ब्रेकपॉइंट, आनी प्राथमीक फॉन्ट स्टॅक सारकिल्या सामान्य वापरिल्ल्या मोलांक सोंपें प्रवेश दितात.

उपलब्ध आशिल्ले चड-उणे

हांगा आमी समाविष्ट करतात ते व्हेरिएबल आसात (the :rootis required हें लक्षांत दवरात). ते आमच्या _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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

उदाहरणां

CSS चडांत चड Sass च्या चडांत चड लवचीकता दितात, पूण ब्राउझराक सेवा दिवचे पयलीं संकलनाची गरज नासतना. देखीक, हांगा आमी आमच्या पानाचे फॉन्ट आनी लिंक शैली CSS चडांत चड रिसेट करतात.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ब्रेकपॉइंट चड-उणें

आमी मुळाव्यान आमच्या CSS चडांत चडांत ब्रेकपॉइंट समाविष्ट केल्ले आसतना (देखीक, --breakpoint-md), हे माध्यम क्वेरींत समर्थीत नात , पूण तरी लेगीत माध्यम क्वेरींत नेमसंग्रहांत वापरूं येतात . हे ब्रेकपॉइंट चड-उणें जावास्क्रिप्टान वापरूं येता दिल्ल्यान फाटीं सुसंगती खातीर संकलित केल्ल्या CSS त उरतात. स्पेसिफिकेशनांत चड जाणून घेयात.

कितें समर्थीत ना हाचें एक उदाहरण हांगा दिल्लें आसा :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

आनी कितें तें समर्थीत आसा ताची एक देख हांगा दिल्या:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}