Theory
એક શબ્દભંડોળ, અનેક ઘટકો
FestConnect ને બરાબર દેખાવા ત્રણ વસ્તુ જોઈએ: સમયપત્રક એક સ્વચ્છ પટ્ટાવાળા કોષ્ટક તરીકે, 'બેઠકો ઝડપથી ભરાય છે' ની લાલ ચેતવણીની પેટી, અને બાકીની site સાથે મળતાં form નાં inputs. ત્રણ જુદા ઘટકો.
સારા સમાચાર આ છે: Bootstrap તમારી પાસે ત્રણ અસંબંધિત શણગારની વ્યવસ્થાઓ શીખવડાવતું નથી. એ બધે એક જ ભાત વાપરે છે, પાયાનો class વત્તા સુધારક, અને એ બધામાં વહેંચાયેલું એક જ રંગનું શબ્દભંડોળ. ભાત એક વાર શીખો અને આ ચારેય કુટુંબ એમાંથી નીકળી આવે છે.
Formula
ભાત: પાયો વત્તા સુધારક વત્તા રંગનો શબ્દ
Bootstrap નો લગભગ દરેક ઘટક એક જ રીતે વંચાય છે:
પાયાનો class વત્તા સુધારક વત્તા સંદર્ભનો રંગનો શબ્દ.
alert alert-danger= સંદેશાની પેટી, danger માટે લાલ શણગારેલી.table table-striped= ઝેબ્રા જેવી હરોળોવાળું કોષ્ટક.btn btn-success= બટન, success માટે લીલું શણગારેલું.
રંગના શબ્દો નિશ્ચિત છે: primary (ભૂરો), secondary (ભૂખરો), success (લીલો), danger (લાલ), warning (પીળો), info (આસમાની). એ બધે એક જ અર્થ કરે છે.
At a glance
ચાર કુટુંબ અને એમના classes
| કુટુંબ | પાયો | સામાન્ય સુધારક |
|---|---|---|
| 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 |
| રંગ | text- / bg- | text-danger, bg-primary, bg-success |
Practical
FestConnect, ત્રણ ઘટકો
<!-- 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 વાંચો
ચલાવ્યા વગર, વર્ણવો કે <div class="alert alert-success"> કેવું દેખાય છે, અને <button class="btn btn-danger"> કેવું દેખાય છે. ભાત વાપરો, આ ચોક્કસ classes ની યાદ નહીં.
Show the answer
alert alert-success એ લીલા રંગની (success) સંદેશાની પેટી (alert) છે, એટલે કે 'એ થઈ ગયું' જેવું લીલું પાટિયું, જેમ કે 'તમારી નોંધણી થઈ ગઈ'. btn btn-danger એ લાલ રંગનું (danger) બટન (btn) છે, એટલે કે જાણીતું લાલ 'Cancel' કે 'Delete' નું બટન. તમારે એકેય ગોખવાની જરૂર નહોતી: પાયાનો class ઘટક કહે છે, રંગનો શબ્દ રંગ કહે છે, અને એ શબ્દો આખા framework માં એ જ નિશ્ચિત સમૂહ છે.
Quiz
તમે class="form-control" ક્યાંય લગાડ્યું નથી, અને તમારાં inputs હજી Bootstrap ની શૈલીને બદલે browser નાં સાદાં ભૂખરાં ખાનાં જેવાં દેખાય છે. શા માટે?
- form-control લગાડાયું નહોતું: Bootstrap નો શણગાર મેળવવા inputs ને એ પાયાનો class જોઈએ
- Bootstrap બધાં inputs ને કોઈ class વગર આપોઆપ શણગારે છે
- કોઈ પણ input નો શણગાર જોવા તમારે form-danger વાપરવું જ પડે
- Inputs ને Bootstrap શણગારી શકતું જ નથી, ફક્ત બટન જ
Show the answer
form-control લગાડાયું નહોતું: Bootstrap નો શણગાર મેળવવા inputs ને એ પાયાનો class જોઈએ
Bootstrap inputs ને ત્યારે જ શણગારે છે જ્યારે તમે પાયાનો class form-control ઉમેરો (A); એ કોરાં <input> tags ને આપોઆપ શણગારતું નથી (B). form-danger નામનો કોઈ class છે જ નહીં (C); validation ની અવસ્થાઓ is-invalid જેવા classes વાપરે છે. Inputs ચોક્કસપણે શણગારી શકાય છે (D ખોટું છે). આ પાયાના class નો નિયમ છે: પાયાનો class નહીં, Bootstrap નો દેખાવ નહીં.
Watch out
કુટુંબના ફાંદા
1. પાયા વગરનો સુધારક: એકલું table-striped કશું કરતું નથી; તમને table table-striped જોઈએ. btn-primary ને btn જોઈએ અને alert-danger ને alert જોઈએ, એ પણ એવું જ.
2. રંગના શબ્દો ઉપજાવવા: લાલ માટે danger છે અને પીળા માટે warning, red/error નહીં. alert-error એ Bootstrap નો class છે જ નહીં.
3. selects/textareas પર form-control ભૂલી જવું: <select> એ form-select વાપરે છે, પણ <textarea> એ લખાણના input ની જેમ form-control વાપરે છે.
Theory
આગળ બટન, એ જ નિયમો
તરત પછીનો પાઠ બટન અને બટનનાં જૂથ છે, જે આ જ પાયો વત્તા સુધારક વત્તા રંગની ભાત અનુસરે છે (btn btn-primary, btn btn-outline-danger). FestConnect નું કોષ્ટક, alert અને form શણગારાઈ જાય, પછી Register અને Clear નાં બટન દેખાવ પૂરો કરે છે, અને એ પણ આ પાઠમાંથી તમને પહેલેથી આવડતા શબ્દભંડોળ વાપરીને.
Summary
Key takeaways
- Bootstrap નો શણગાર = પાયાનો class વત્તા સુધારક class વત્તા વહેંચાયેલો સંદર્ભનો રંગનો શબ્દ.
- રંગના શબ્દો નિશ્ચિત છે: primary (ભૂરો), secondary (ભૂખરો), success (લીલો), danger (લાલ), warning (પીળો), info (આસમાની).
- Tables: table વત્તા table-striped/bordered/hover. Alerts: alert વત્તા alert-danger વગેરે.
- Inputs: form-control (લખાણ/textarea), form-select (dropdown), form-label (label).
- સુધારકને એનો પાયાનો class જોઈએ; text- અને bg- એ જ રંગપટ કોઈ પણ વસ્તુ પર લગાડે છે.
- Memory hook: ભાત એક વાર શીખો, દરેક class વાંચો.