Theory
FestConnect को हाथ से phone में फिट कराना
FestConnect आपके laptop पर ठीक दिखता है। एक phone पर event cards screen से बाहर छलकते हैं और buttons बहुत छोटे हैं। इसे हाथ से fix करने के लिए आपको हर screen size के लिए media queries के साथ दर्जनों CSS rules लिखने होंगे, तीन devices पर test करना होगा, और हर page के लिए दोहराना होगा।
हज़ारों sites को वही grid, buttons, और cards चाहिए। तो किसी ने वह सारा CSS एक बार लिखा, हर जगह test किया, और इसे free दे दिया। वह library Bootstrap है।
Theory
पहले से कटे furniture का एक box
एक room बनाते हुए, आप हर plank ख़ुद काट सकते हैं, या flat-pack furniture ख़रीद सकते हैं जो पहले से साथ फिट होता है। Bootstrap flat-pack है: prebuilt buttons, cards, grids, और alerts। आप describe नहीं करते एक button कैसा दिखे, आप बस एक element को btn btn-primary label कर देते हैं और ready-made style लग जाती है। आपका काम CSS लिखने से बदलकर सही pieces चुनने का हो जाता है।
Theory
Bootstrap formally क्या है
Bootstrap एक free, open-source front-end framework है: prewritten styles की एक बड़ी external CSS file (plus कुछ JavaScript) जिसे आप class names के ज़रिए apply करते हैं। दो facts तय करते हैं आप इसे कैसे इस्तेमाल करें:
- यह class-based है: आप plain HTML में
container,row,btn,alertजैसी classes जोड़ते हैं। - यह mobile-first है: styles पहले छोटी screens को target करती हैं और scale up होती हैं, तो pages default रूप से responsive होते हैं।
यह कोई नई language नहीं है; यह CSS है जो किसी और ने लिखा और आप इसे link करते हैं।
Practical
FestConnect में Bootstrap जोड़ना
<head>
<!-- 1. Required for responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 2. Bootstrap's CSS, from a CDN (external CSS, Unit 1 pattern) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 3. Wrap content in a container -->
<div class="container">
<h1>FestConnect</h1>
<button class="btn btn-primary">Register</button>
</div>
<!-- 4. Bootstrap's JS, for interactive bits, before </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
</body>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Styling असल में कहाँ से आती है?
आपने उस Register button के लिए कोई CSS नहीं लिखी, फिर भी यह blue है, padding और rounded corners के साथ। वे styles कहाँ से आईं, और यह कौन सी Unit 1 method है? Tap करने से पहले answer दीजिए।
Show the answer
वे linked bootstrap.min.css file से आती हैं। btn btn-primary class names हैं जो उस file के अंदर पहले से लिखे rules से match करते हैं। यह exactly Unit 1 का external CSS है: एक .css file से एक <link>, बस file Bootstrap team ने लिखी। आप फिर भी इसे अपनी external या internal CSS से override कर सकते हैं जो बाद में load हो।
Quiz
एक student Bootstrap link करता है पर page फिर भी एक phone पर shrink या reflow नहीं होता। सबसे ज़्यादा संभावना किस चीज़ के missing होने की है?
- <meta name="viewport"> tag, जो responsive layouts को चाहिए
- Bootstrap link की एक दूसरी copy
- body पर autocomplete attribute
- कुछ नहीं: Bootstrap एक page को responsive नहीं बना सकता
Show the answer
<meta name="viewport"> tag, जो responsive layouts को चाहिए
viewport meta tag phone को बताता है असली width इस्तेमाल करे, desktop होने का दिखावा करने के बजाय; इसके बिना, mobile-first CSS के पास react करने को कुछ नहीं होता, तो page बस zoom out दिखता है (A)। एक Bootstrap link काफ़ी है (B)। autocomplete (C) एक form attribute है, unrelated। Responsiveness Bootstrap की headline feature है (D ग़लत है), पर सिर्फ़ viewport tag मौजूद होने पर।
Watch out
दो setup mistakes
1. कोई viewport meta tag नहीं: सबसे common कारण है 'Bootstrap responsive नहीं है'। यह <head> में होना ज़रूरी है।
2. कोई container नहीं: content को सीधे <body> में डालना इसे edge से edge तक बिना margins के stretch करा देता है। Bootstrap का grid भी एक .container या .container-fluid के अंदर बैठने की उम्मीद रखता है। पहले wrap कीजिए, फिर बनाइए।
Theory
इसके बाद हर framework इसी तरह काम करता है
Pattern 'एक बड़ी prewritten stylesheet link कीजिए, फिर इसके class names apply कीजिए' लगभग हर CSS framework इसी तरह काम करता है। एक बार आप Bootstrap के docs पढ़कर सही class चुन सकें, आप बाद में Tailwind या एक component library इसी habit से पकड़ सकते हैं। अगले सात lessons में FestConnect इन classes से पूरी तरह rebuild होगा।
Summary
Key takeaways
- Bootstrap एक free front-end framework है: class names के ज़रिए apply की गई prewritten external CSS (plus कुछ JS)।
- इसे head में इसके CDN CSS का <link> देकर जोड़िए, और interactive components के लिए </body> से पहले एक <script>।
- यह mobile-first और responsive है, पर सिर्फ़ तब जब viewport meta tag मौजूद हो।
- Content को .container (centered, responsive) या .container-fluid (full width) में wrap कीजिए।
- यह class-based CSS है, कोई नई language नहीं; आप इसे बाद में load होने वाली अपनी CSS से override कर सकते हैं।
- Memory hook: flat-pack furniture, आप बस pieces चुनते हैं।