Bootstrap introduction

📖 Theory

FestConnect ને phone માં હાથે બેસાડવું

FestConnect તમારા laptop પર સરસ લાગે છે. Phone પર event નાં cards પડદાની બહાર ઢોળાય છે અને બટન નાનકડાં છે. હાથે સુધારવા તમારે દરેક પડદાના માપ માટે media queries સાથે ડઝનબંધ CSS ના નિયમો લખવા પડે, ત્રણ ઉપકરણો પર ચકાસવું પડે, અને દરેક પાના માટે એ જ દોહરાવવું પડે.

હજારો sites ને એ જ grid, બટન અને cards જોઈએ છે. એટલે કોઈએ એ બધું CSS એક વાર લખ્યું, બધે ચકાસ્યું, અને મફતમાં આપી દીધું. એ library એટલે Bootstrap.

📖 Theory

તૈયાર કપાયેલા ફર્નિચરની પેટી

ઓરડો બનાવતાં, તમે દરેક પાટિયું જાતે વહેરી શકો, કે પછી પહેલેથી બંધબેસતું આવે એવું flat-pack ફર્નિચર ખરીદી શકો. Bootstrap એ flat-pack છે: પહેલેથી બનેલાં બટન, cards, grids અને alerts. તમે બટન કેવું દેખાય એ વર્ણવતા નથી, તમે ફક્ત element ને btn btn-primary નું લેબલ લગાડો છો અને તૈયાર શૈલી ચોંટી જાય છે. તમારું કામ CSS લખવાથી ખસીને સાચા ટુકડા પસંદ કરવા પર આવે છે.

📖 Theory

Bootstrap શું છે, ઔપચારિક રીતે

Bootstrap એ મફત, open-source front-end નું framework છે: પહેલેથી લખાયેલી શૈલીઓની મોટી external CSS file (વત્તા થોડું JavaScript) જેને તમે class નાં નામ દ્વારા લગાડો છો. બે હકીકતો નક્કી કરે છે કે તમે એને કેવી રીતે વાપરો:

• એ class આધારિત છે: તમે સાદા HTML પર container, row, btn, alert જેવા classes ઉમેરો છો.
• એ mobile-first છે: શૈલીઓ પહેલાં નાના પડદાને નિશાન બનાવે છે અને ઉપર તરફ વધે છે, એટલે પાનાં મૂળભૂત રીતે જ responsive હોય છે.

એ કોઈ નવી ભાષા નથી; એ કોઈ બીજાએ લખેલું CSS છે જેને તમે જોડો છો.

⌨️ 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

શણગાર ખરેખર ક્યાંથી આવે છે?

તમે એ Register ના બટન માટે કોઈ CSS લખ્યું નથી, છતાં એ ભૂરું, જગ્યાવાળું અને ગોળ ખૂણાવાળું છે. એ શૈલીઓ ક્યાંથી આવી, અને આ Unit 1 ની કઈ રીત છે? Tap કરતાં પહેલાં જવાબ આપો.

🧩 Quiz

એક student Bootstrap જોડે છે પણ પાનું હજી phone પર સંકોચાતું કે ફરી ગોઠવાતું નથી. સૌથી સંભવિત ખૂટતો ટુકડો કયો છે?

1. <meta name="viewport"> tag, જે responsive ગોઠવણોને જોઈએ જ છે
2. Bootstrap ની link ની બીજી નકલ
3. body પરનું autocomplete attribute
4. કશું નહીં: Bootstrap પાનાને responsive બનાવી શકતું જ નથી

⚠️ Watch out

ગોઠવણની બે ભૂલો

1. Viewport નું meta tag નહીં: 'Bootstrap responsive નથી' નું આ સૌથી સામાન્ય કારણ છે. એ <head> માં હોવું જ જોઈએ.

2. Container નહીં: સામગ્રીને સીધી <body> માં ઠાલવવાથી એ કિનારીથી કિનારી સુધી કોઈ હાંસિયા વગર ખેંચાય છે. Bootstrap ની grid પણ .container કે .container-fluid ની અંદર બેસવાની અપેક્ષા રાખે છે. પહેલાં વીંટો, પછી બાંધો.

📖 Theory

આ પછીનું દરેક framework આ જ રીતે કામ કરે છે

'મોટી પહેલેથી લખાયેલી stylesheet જોડો, પછી એનાં class નાં નામ લગાડો' એ ભાત લગભગ દરેક CSS ના framework ની કામ કરવાની રીત છે. એક વાર તમે Bootstrap ના દસ્તાવેજ વાંચીને સાચો class પસંદ કરી શકો, પછી એ જ ટેવથી તમે Tailwind કે component ની library પણ પછી ઉપાડી શકશો. હવે પછીના સાત પાઠમાં FestConnect આ classes થી પૂરેપૂરું ફરી બંધાશે.

✅ Summary

Key takeaways

• Bootstrap એ મફત front-end નું framework છે: પહેલેથી લખાયેલું external CSS (વત્તા થોડું JS) જે class નાં નામ દ્વારા લગાડાય છે.
• એને head માં એની CDN ની CSS ના <link> થી ઉમેરો, અને interactive ઘટકો માટે </body> પહેલાં <script> થી.
• એ mobile-first અને responsive છે, પણ ફક્ત ત્યારે જ જ્યારે viewport નું meta tag હાજર હોય.
• સામગ્રીને .container (વચ્ચે, responsive) કે .container-fluid (પૂરી પહોળાઈ) માં વીંટો.
• એ class આધારિત CSS છે, નવી ભાષા નહીં; તમે એને પછી load થતા તમારા પોતાના CSS થી બદલી શકો છો.
• Memory hook: flat-pack ફર્નિચર, તમે ફક્ત ટુકડા પસંદ કરો છો.