Source

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

सुलभ थीमिंग आणि घटक बदलांसाठी जागतिक शैली प्राधान्यांसाठी आमच्या नवीन अंगभूत Sass व्हेरिएबल्ससह बूटस्ट्रॅप 4 सानुकूलित करा.

परिचय

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

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

सस

व्हेरिएबल्स, नकाशे, मिक्सिन्स आणि अधिकचा लाभ घेण्यासाठी आमच्या स्त्रोत Sass फाइल्सचा वापर करा.

फाइल संरचना

जेव्हा शक्य असेल तेव्हा, बूटस्ट्रॅपच्या मुख्य फाइल्समध्ये बदल करणे टाळा. Sass साठी, याचा अर्थ बूटस्ट्रॅप आयात करणारी तुमची स्वतःची स्टाइलशीट तयार करणे म्हणजे तुम्ही त्यात सुधारणा आणि विस्तार करू शकता. तुम्ही एनपीएम सारखे पॅकेज मॅनेजर वापरत आहात असे गृहीत धरून, तुमच्याकडे अशी फाइल संरचना असेल जी यासारखी दिसते:

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

@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";

त्या सेटअपसह, तुम्ही तुमच्या मधील कोणतेही Sass व्हेरिएबल्स आणि नकाशे सुधारण्यास सुरुवात करू शकता custom.scss. // Optionalआपण आवश्यकतेनुसार विभाग अंतर्गत बूटस्ट्रॅपचे भाग जोडणे देखील सुरू करू शकता . bootstrap.scssतुमचा प्रारंभ बिंदू म्हणून आम्ही आमच्या फाईलमधील संपूर्ण आयात स्टॅक वापरण्याचा सल्ला देतो .

व्हेरिएबल डीफॉल्ट

बूटस्ट्रॅप 4 मधील प्रत्येक Sass व्हेरिएबलमध्ये !defaultतुम्हाला बूटस्ट्रॅपचा सोर्स कोड न बदलता तुमच्या स्वतःच्या Sass मध्ये व्हेरिएबलचे डीफॉल्ट मूल्य ओव्हरराइड करण्याची परवानगी देणारा ध्वज समाविष्ट असतो. आवश्यकतेनुसार व्हेरिएबल्स कॉपी आणि पेस्ट करा, त्यांची मूल्ये सुधारा आणि !defaultध्वज काढा. जर व्हेरिएबल आधीच नियुक्त केले गेले असेल, तर ते बूटस्ट्रॅपमधील डीफॉल्ट मूल्यांद्वारे पुन्हा नियुक्त केले जाणार नाही.

समान Sass फाइलमधील व्हेरिएबल ओव्हरराइड्स डीफॉल्ट व्हेरिएबल्सच्या आधी किंवा नंतर येऊ शकतात. तथापि, Sass फाइल्स ओव्हरराइड करताना, तुम्ही बूटस्ट्रॅपच्या Sass फाइल्स आयात करण्यापूर्वी तुमचे ओव्हरराइड्स येणे आवश्यक आहे.

येथे एक उदाहरण आहे जे npm द्वारे बूटस्ट्रॅप आयात आणि संकलित करताना आणि 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 नकाशे डीफॉल्टनुसार रिक्त मध्ये विलीन केले आहेत. हे दिलेल्या Sass नकाशाच्या सहज विस्तारास अनुमती देण्यासाठी केले जाते, परंतु नकाशावरून आयटम काढणे थोडे अधिक कठीण बनवण्याच्या खर्चावर येते .

नकाशा सुधारित करा

आमच्या $theme-colorsनकाशात विद्यमान रंग सुधारण्यासाठी, तुमच्या सानुकूल Sass फाइलमध्ये खालील गोष्टी जोडा:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

नकाशात जोडा

मध्ये नवीन रंग $theme-colorsजोडण्यासाठी, नवीन की आणि मूल्य जोडा:

$theme-colors: (
  "custom-color": #900
);

नकाशावरून काढा

किंवा इतर कोणत्याही नकाशावरून रंग काढण्यासाठी $theme-colors, वापरा map-remove:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

आवश्यक की

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

हे तुम्हाला सास नकाशावरून एक रंग निवडण्याची परवानगी देतात जसे की तुम्ही 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`
}

Sass पर्याय

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

_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 मध्ये उपलब्ध असलेले सर्व रंग, आमच्या scss/_variables.scssफाइलमध्ये Sass व्हेरिएबल्स आणि Sass नकाशा म्हणून उपलब्ध आहेत. आम्ही आधीच समाविष्ट केलेल्या ग्रेस्केल पॅलेटप्रमाणे अतिरिक्त छटा जोडण्यासाठी पुढील किरकोळ प्रकाशनांमध्ये याचा विस्तार केला जाईल .

निळा

इंडिगो

जांभळा

गुलाबी

लाल

केशरी

पिवळा

हिरवा

टील

निळसर

तुम्ही हे तुमच्या 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 व्हेरिएबल्स आणि Sass नकाशा म्हणून देखील उपलब्ध आहे.

प्राथमिक

दुय्यम

यश

धोका

चेतावणी

माहिती

प्रकाश

गडद

ग्रे

राखाडी व्हेरिएबल्सचा एक विस्तृत संच आणि scss/_variables.scssतुमच्या संपूर्ण प्रोजेक्टमध्ये राखाडी रंगाच्या सातत्यपूर्ण छटांसाठी एक Sass नकाशा.

100

200

300

400

५००

600

७००

800

९००

आत _variables.scss, तुम्हाला आमचे कलर व्हेरिएबल्स आणि Sass नकाशा सापडतील. $colorsयेथे Sass नकाशाचे उदाहरण आहे :

$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}व्हेरिएबल्स आणि हा Sass नकाशा वापरण्याची योजना करा.

घटक

बूटस्ट्रॅपचे अनेक घटक आणि युटिलिटिज @eachलूपसह तयार केले जातात जे Sass नकाशावर पुनरावृत्ती करतात. $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 सानुकूल गुणधर्म (व्हेरिएबल्स) समाविष्ट आहेत. तुमच्या ब्राउझरच्या इन्स्पेक्टरमध्ये, कोड सँडबॉक्समध्ये किंवा सामान्य प्रोटोटाइपिंगमध्ये काम करताना आमच्या थीमचे रंग, ब्रेकपॉइंट्स आणि प्राथमिक फॉन्ट स्टॅक यासारख्या सामान्यतः वापरल्या जाणार्‍या मूल्यांमध्ये हे सहज प्रवेश प्रदान करतात.

उपलब्ध चल

आम्ही समाविष्ट केलेले व्हेरिएबल्स येथे आहेत (लक्षात ठेवा की :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, 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);
}

तुम्ही तुमच्या मीडिया क्वेरींमध्ये आमचे ब्रेकपॉईंट व्हेरिएबल्स देखील वापरू शकता:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}