Buttons and Button Groups

📖 Theory

એ બટન જે સાદા લખાણ જેવું દેખાય છે

તમે FestConnect ના Register ના બટનને class="btn-primary" થી શણગારો છો અને એ સપાટ ભૂરા લખાણ તરીકે નીકળે છે, કોઈ આકાર નહીં, કોઈ જગ્યા નહીં. બીજી બાજુ તમને event ના filter (All, Robotics, Dance) એક જોડાયેલા toolbar જેવા જોઈએ છે, ગાળાવાળાં ત્રણ છૂટાં બટન નહીં.

નિયમ ખબર પડે એટલે બંને ઝડપી ઉકેલ છે: Bootstrap ના બટનને સાથે કામ કરતા બે classes જોઈએ, અને જૂથ બનાવવાનું એક જ આવરણ દૂર છે.

✏️ Formula

btn એ આકાર છે, btn-* એ રંગ

Bootstrap નું દરેક બટન બે classes છે:

• `btn` બટનનો આકાર આપે છે: અંદરની જગ્યા, ગોળ ખૂણા, ચીંધનારું cursor.
• `btn-primary` (કે બીજો પ્રકાર) રંગ અને ભરાવ આપે છે.

એકેય એકલું ચાલતું નથી. એકલું btn એ આકારવાળું પણ રંગ વગરનું બટન છે; એકલું btn-primary એ બટનના આકાર વગરનું રંગીન લખાણ છે. તમને લગભગ હંમેશા class="btn btn-primary", બંને સાથે, જ જોઈએ છે.

📖 Theory

પ્રકારો, માપ, અને જૂથ

• ભરેલાં: btn-primary, btn-success, btn-danger, ... સંદર્ભના રંગથી ભરેલાં.
• Outline: btn-outline-primary, ... પારદર્શક, રંગીન કિનારી સાથે, ગૌણ ક્રિયાઓ માટે.
• માપ: btn-lg કે btn-sm ઉમેરો.
• નિષ્ક્રિય: disabled attribute (કે links પર .disabled).
• જૂથ: બટનને <div class="btn-group"> માં વીંટો અને એ કિનારીથી કિનારી જોડાઈને એક ટુકડાવાળું toolbar બને છે, filters માટે આદર્શ.

⌨️ Practical

FestConnect નાં બટન અને filter નું જૂથ

<!-- primary action + secondary (outline) action -->
<button class="btn btn-primary">Register</button>
<button class="btn btn-outline-secondary">Clear</button>

<!-- large call to action -->
<button class="btn btn-success btn-lg">Pay Fee</button>

<!-- a joined filter toolbar -->
<div class="btn-group" role="group">
  <button class="btn btn-outline-primary">All</button>
  <button class="btn btn-outline-primary">Robotics</button>
  <button class="btn btn-outline-primary">Dance</button>
</div>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Primary કે outline?

FestConnect ના card પર બે બટન છે: 'Register' (મુખ્ય વસ્તુ જે તમે લોકો પાસે કરાવવા માંગો છો) અને 'Cancel'. દરેકને કયો પ્રકાર બંધબેસે છે, અને એકને outline કરવાથી રચનામાં શું મદદ થાય છે?

🧩 Quiz

એક student `<button class="btn-danger">Delete</button>` લખે છે અને એ બટનના આકાર કે અંદરની જગ્યા વગર લાલ લખાણ તરીકે દેખાય છે. શું ખૂટે છે?

1. પાયાનો class btn: એ class="btn btn-danger" હોવું જોઈએ
2. disabled attribute
3. <div class="btn-group"> નું આવરણ
4. કશું નહીં: એકલું btn-danger એ પૂરું બટન છે

⚠️ Watch out

બટનના ફાંદા

1. ફક્ત પ્રકારનો class: btn વગરનું btn-primary રંગીન લખાણ આપે છે, બટન નહીં. હંમેશા બંનેને જોડો.

2. રંગનો ખોટો શબ્દ: એ btn-danger છે, btn-red કે btn-error નહીં.

3. જ્યાં toolbar જોઈતું હતું ત્યાં ગાળાવાળાં બટન: તમે .btn-group નું આવરણ ભૂલી ગયા છો. અને નોંધો કે btn-group એમને જોડે છે; એ પોતાની મેળે ફક્ત એક જ પસંદ કરી શકાય એવું બનાવતું નથી (એ વર્તન માટે radios કે JavaScript જોઈએ).

📖 Theory

તમે અગાઉ મળેલું onclick હજી અહીં જ છે

આ Unit 1 ના એ જ <button> ની શણગારેલી આવૃત્તિઓ છે, એટલે તમે શીખેલાં type અને onclick હજી લાગુ પડે છે: <button type="button" class="btn btn-primary" onclick="register()">Register</button>. Unit 5 માં એ onclick તમારા JavaScript ના register() function ને ચલાવશે. Bootstrap ફક્ત બટનને પોશાક પહેરાવે છે; વર્તન જોડવાનું હજી તમારું જ કામ છે.

✅ Summary

Key takeaways

• Bootstrap ના બટનને બે classes જોઈએ: btn (આકાર) વત્તા એક પ્રકાર (રંગ), દા.ત. btn btn-primary.
• ભરેલા પ્રકારો (btn-success) રંગથી ભરાય છે; outline પ્રકારો (btn-outline-secondary) વધુ શાંત છે, ગૌણ ક્રિયાઓ માટે.
• માપ: btn-lg, btn-sm. disabled attribute થી નિષ્ક્રિય કરો.
• બટનને <div class="btn-group"> માં વીંટીને એમને એક toolbar માં જોડો (દા.ત. filter).
• દરેક દૃશ્યમાં એક ઘાટું ભરેલું બટન વાપરો જેથી મુખ્ય ક્રિયા અલગ તરી આવે.
• Memory hook: btn એ આકાર છે, btn-* એ રંગ.