Theory
एक vocabulary, कई components
FestConnect को सही दिखने के लिए तीन चीज़ें चाहिए: schedule एक साफ़ striped table की तरह, एक red 'seats filling fast' warning box, और form inputs जो बाकी site से match करें। तीन अलग components।
यहाँ अच्छी ख़बर है: Bootstrap आपको तीन unrelated styling systems नहीं सिखाता। यह हर जगह एक pattern इस्तेमाल करता है, एक base class plus एक modifier, और सब में shared एक colour vocabulary। Pattern एक बार सीखिए और ये चार families इससे निकल आते हैं।
Formula
Pattern: base + modifier + colour word
लगभग हर Bootstrap component इसी तरह पढ़ता है:
base-class + modifier + एक contextual colour word।
alert alert-danger= एक message box, danger के लिए red style हुआ।table table-striped= zebra rows वाला एक table।btn btn-success= एक button, success के लिए green style हुआ।
Colour words fixed हैं: primary (blue), secondary (grey), success (green), danger (red), warning (yellow), info (cyan)। इनका मतलब हर जगह same है।
At a glance
चार families और इनकी classes
| Family | Base | Common modifiers |
|---|---|---|
| Tables | table | table-striped, table-bordered, table-hover |
| Alerts | alert | alert-success, alert-danger, alert-warning |
| Inputs | form-control | form-select, form-label, form-check |
| Colours | text- / bg- | text-danger, bg-primary, bg-success |
Practical
FestConnect, तीन components
<!-- 1. striped schedule table -->
<table class="table table-striped">
<tr><th>Event</th><th>Time</th></tr>
<tr><td>Robotics</td><td>10:00</td></tr>
</table>
<!-- 2. a warning alert -->
<div class="alert alert-warning">Only 12 seats left!</div>
<!-- 3. a Bootstrap-styled input -->
<label class="form-label">Email</label>
<input type="email" class="form-control">
<!-- same colour words as utilities -->
<p class="text-danger">Registration closes tonight.</p>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
Classes पढ़िए
बिना run किए, describe कीजिए <div class="alert alert-success"> कैसा दिखता है, और <button class="btn btn-danger"> कैसा दिखता है। Pattern इस्तेमाल कीजिए, इन exact classes की memory नहीं।
Show the answer
alert alert-success एक message box है (alert) green color हुआ (success), तो एक green 'यह काम कर गया' banner, जैसे 'आप registered हैं'। btn btn-danger एक button है (btn) red color हुआ (danger), classic red 'Cancel' या 'Delete' button। आपको दोनों में से किसी को memorise करने की ज़रूरत नहीं थी: base class component बताता है, colour word रंग बताता है, और words पूरे framework में same fixed set हैं।
Quiz
आप कुछ भी नहीं पर class="form-control" जोड़ते हैं, और आपके inputs अब भी Bootstrap style के बजाय plain grey browser boxes जैसे दिखते हैं। क्यों?
- form-control apply नहीं हुआ: inputs को Bootstrap styling के लिए वह base class चाहिए
- Bootstrap बिना किसी class के automatically सभी inputs style करता है
- कोई भी input styling देखने के लिए आपको form-danger इस्तेमाल करना ज़रूरी है
- Inputs Bootstrap से style नहीं हो सकते, सिर्फ़ buttons हो सकते हैं
Show the answer
form-control apply नहीं हुआ: inputs को Bootstrap styling के लिए वह base class चाहिए
Bootstrap inputs को सिर्फ़ तब style करता है जब आप base class form-control जोड़ें (A); यह खाली <input> tags को auto-style नहीं करता (B)। कोई form-danger class नहीं है (C); validation states is-invalid जैसी classes इस्तेमाल करती हैं। Inputs पूरी तरह styleable हैं (D ग़लत है)। यही base-class rule है: कोई base class नहीं, कोई Bootstrap look नहीं।
Watch out
Family traps
1. Base के बिना Modifier: table-striped अकेला कुछ नहीं करता; आपको table table-striped चाहिए। Same btn-primary को btn चाहिए, और alert-danger को alert चाहिए।
2. Colour words बनाना: यह red के लिए danger और yellow के लिए warning है, red/error नहीं। alert-error कोई Bootstrap class नहीं है।
3. selects/textareas पर form-control भूलना: एक <select> form-select इस्तेमाल करता है, पर एक <textarea> एक text input जैसा form-control इस्तेमाल करता है।
Theory
Buttons अगले हैं, same rules
अगला ही lesson buttons और button groups है, जो यही identical base + modifier + colour pattern follow करते हैं (btn btn-primary, btn btn-outline-danger)। एक बार FestConnect table, alert, और form style हो जाएँ, Register और Clear buttons look पूरा करते हैं, इसी lesson से पहचानी vocabulary इस्तेमाल करते हुए।
Summary
Key takeaways
- Bootstrap styling = base class + modifier class + एक shared contextual colour word।
- Colour words fixed हैं: primary (blue), secondary (grey), success (green), danger (red), warning (yellow), info (cyan)।
- Tables: table + table-striped/bordered/hover। Alerts: alert + alert-danger आदि।
- Inputs: form-control (text/textarea), form-select (dropdown), form-label (label)।
- एक modifier को अपना base class चाहिए; text- और bg- वही palette किसी भी चीज़ पर apply करते हैं।
- Memory hook: pattern एक बार सीखिए, हर class पढ़िए।