Theory
हर Bootstrap site एक जैसी दिखती है
FestConnect काम करता है और अच्छे से reflow होता है, पर यह बाक़ी हर Bootstrap site जैसा दिखता है: वही blue btn-primary, वही font, वही rounded corners। Organisers fest की warm orange brand चाहते हैं, और शाम के schedule screens के लिए projector पर एक dark mode।
आप कुछ भी rebuild नहीं करते। Theming बदलता है existing components कैसे दिखते हैं जबकि आपकी HTML और classes बिल्कुल वैसे ही रहते हैं।
Theory
घर को दोबारा rebuild करना नहीं, दोबारा paint करना
एक घर की दीवारें, दरवाज़े, और rooms इसकी structure हैं; paint और fixtures इसका look हैं। Vibe बदलने के लिए आप repaint करते हैं, दीवारें नहीं गिराते। एक Bootstrap theme वह repaint है: वही grid, वही buttons, वही cards (structure), पर नए colours, fonts, और corners (look)। आपके button पर btn-primary नहीं बदलता; 'primary' का मतलब क्या है वह बदलता है।
Theory
Theme करने के तरीक़े
सबसे हल्के से सबसे गहरे तक:
- CSS override करना: अपने rules लिखिए जो Bootstrap के बाद load हों colours/fonts बदलने के लिए (Unit 1 का cascade: आख़िरी जीतता है)।
- Variables override करना: Bootstrap
--bs-primaryजैसे CSS variables expose करता है; इन्हें bulk में rebrand करने के लिए set कीजिए। - Colour modes: built-in dark mode switch करने के लिए
data-bs-theme="dark"जोड़िए। - Prebuilt theme: एक ready-made theme stylesheet link कीजिए जो default look replace कर दे।
- Sass recompile करना: source variables बदलिए और rebuild कीजिए, पूरे control के लिए।
Practical
FestConnect को rebrand करना
<head>
<!-- Bootstrap first ... -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- ... THEN your overrides, so they win the cascade -->
<style>
:root { --bs-primary: #e8590c; } /* fest orange */
body { font-family: 'Poppins', sans-serif; }
</style>
</head>
<!-- dark mode for the projector schedule -->
<body data-bs-theme="dark">
<button class="btn btn-primary">Register</button> <!-- now orange -->
</body>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
'Bootstrap के बाद' क्यों?
आपका custom --bs-primary: #e8590c; तभी असर करता है जब आपका <style> Bootstrap <link> के बाद रखा जाए। कौन सा Unit 1 rule यह explain करता है, और अगर आप अपनी style Bootstrap से पहले रखें तो क्या होता है?
Show the answer
Cascade: जब दो rules की specificity बराबर हो, आख़िरी load हुआ जीतता है। आपका override Bootstrap के बाद आना ज़रूरी है ताकि यह Bootstrap की अपनी value को हराए। इसे पहले रखिए, और Bootstrap का बाद का default आपका overwrite कर देता है, तो button blue रहता है। यह वही load-order rule है जो 'adding CSS' lesson से है, अब असली काम कर रहा है।
Quiz
Organisers बिना किसी custom CSS के schedule page का एक जल्दी वाला dark version चाहते हैं। Bootstrap 5 में सबसे simple built-in तरीक़ा क्या है?
- <html> या एक container पर data-bs-theme="dark" जोड़िए
- हर btn-primary को हाथ से btn-dark में rename कीजिए
- Bootstrap link हटा दीजिए ताकि page plain हो जाए
- कोई dark mode नहीं है; आपको Sass recompile करना ज़रूरी है
Show the answer
<html> या एक container पर data-bs-theme="dark" जोड़िए
Bootstrap 5 एक colour-mode switch ship करता है: <html> (पूरा page) या किसी भी element (वह section) पर data-bs-theme="dark" components को instantly dark styling में flip कर देता है, कोई custom CSS नहीं (A)। Classes को हाथ से rename करना (B) थकाऊ है और backgrounds/text miss करता है। Link हटाना (C) सारी styling हटा देता है। Dark mode built in है (D ग़लत है), Sass सिर्फ़ गहरी customisation के लिए है।
Watch out
Theming traps
1. Overrides Bootstrap से पहले load होना: वे cascade हार जाते हैं और 'कुछ नहीं करते' दिखते हैं। अपनी CSS बाद में load कीजिए।
2. bootstrap.min.css को सीधे edit करना: यह कभी मत कीजिए; अगला update आपके changes मिटा देगा। इसके बजाय एक अलग file में override कीजिए।
3. Theme को layout के साथ confuse करना: एक theme colours/fonts बदलता है, grid नहीं। अगर cards ग़लत जगह हैं, वह एक grid problem है, theme नहीं।
Theory
Unit 2 पूरी: एक असली front end
FestConnect अब responsive है, branded है, और componentised है, यह सब बिना हाथ से एक media query लिखे। पर यह अब भी एक static poster है: buttons कुछ नहीं करते, seat counter कभी हिलता नहीं, कुछ validate नहीं होता। Unit 3 JavaScript लाता है, वह language जो page को react कराती है, शुरुआत करते हुए JS कहाँ चलती है और यह BCA303 और BCA105 में मिले server-side code से कैसे अलग है।
Summary
Key takeaways
- एक theme components कैसे दिखते हैं यह बदलता है (colours, fonts, corners), आपकी HTML या classes नहीं।
- Bootstrap के बाद अपनी CSS load करके override कीजिए (cascade: आख़िरी जीतता है); bootstrap.min.css को कभी सीधे edit मत कीजिए।
- --bs-primary जैसे variables set करके bulk में rebrand कीजिए।
- <html> या एक container पर data-bs-theme="dark" से built-in dark mode switch कीजिए।
- Prebuilt theme stylesheets और Sass recompiling गहरा control देते हैं।
- Memory hook: घर को repaint कीजिए, इसे rebuild मत कीजिए।