Module 1: Bootstrap හැඳින්වීම

1. Bootstrap යනු කුමක්ද?

Bootstrap යනු වෙබ් අඩවි සහ වෙබ් යෙදුම් (web applications) වේගවත්ව සහ පහසුවෙන් නිර්මාණය කිරීම සඳහා භාවිතා කරන, ලොව ජනප්‍රියම **CSS Framework** එකයි. සරලවම කිවහොත්, Bootstrap යනු අපට නැවත නැවතත් භාවිතා කළ හැකි, කලින් සකසන ලද CSS සහ JavaScript කේත එකතුවකි.

මෙය මුලින්ම Twitter ආයතනය විසින් ඔවුන්ගේ අභ්‍යන්තර භාවිතය සඳහා නිර්මාණය කරන ලද්දක් වන අතර, පසුව එය open-source ව්‍යාපෘතියක් ලෙස ලොවට නිකුත් කරන ලදී. Bootstrap හි ප්‍රධාන අරමුණ වන්නේ ඕනෑම තිරයකට (mobile, tablet, desktop) මනාව ගැලපෙන **"Responsive Web Design"** ක්‍රියාවලිය පහසු කිරීමයි.

2. ඉතිහාසය සහ Bootstrap 5

Bootstrap 2011 දී නිකුත් වූ දා සිට අද දක්වා අනුවාද කිහිපයක් හරහා පැමිණ ඇත. සෑම අනුවාදයකින්ම නවීන වෙබ් තාක්ෂණයට ගැලපෙන ලෙස නව features සහ වැඩිදියුණු කිරීම් හඳුන්වා දෙන ලදී.

  • Bootstrap 2: Responsive design සංකල්පය ප්‍රචලිත කරන ලදී.
  • Bootstrap 3: "Mobile-first" ප්‍රවේශය හඳුන්වා දෙන ලදී.
  • Bootstrap 4: Flexbox, Sass වැනි නවීන CSS තාක්ෂණයන් යොදාගන්නා ලදී.
  • Bootstrap 5: jQuery මත රඳා පැවැත්ම සම්පූර්ණයෙන්ම ඉවත් කර, Vanilla JavaScript වෙත මාරු විය. තවද, නව components සහ වේගවත් ක්‍රියාකාරීත්වයක් හඳුන්වා දෙන ලදී. මෙම පාඨමාලාවේදී අපි සම්පූර්ණයෙන්ම අවධානය යොමු කරන්නේ නවතම සහ ස්ථාවර අනුවාදය වන Bootstrap 5 වෙතයි.

3. Bootstrap භාවිතා කිරීමේ වාසි

සාමාන්‍ය පරිදි CSS මුල සිට ලියනවට වඩා Bootstrap භාවිතා කිරීමේ වාසි රැසක් ඇත:

  • වේගවත් සංවර්ධනය (Rapid Development): කලින් සකසන ලද components (Buttons, Navbars, Cards) නිසා ඉතා ඉක්මනින් වෙබ් අඩවියක මූලික සැකිල්ල ගොඩනගා ගත හැක.
  • පහසු Responsive Design: Grid පද්ධතිය නිසා ඕනෑම තිරයකට ගැලපෙන layouts නිර්මාණය කිරීම ඉතා පහසුය.
  • Browser Compatibility: සියලුම ප්‍රධාන වෙබ් බ්‍රව්සර් (Chrome, Firefox, Safari, Edge) සමඟ හොඳින් ක්‍රියා කරයි.
  • විශාල ප්‍රජාව සහ ලේඛන (Large Community & Documentation): ගැටළුවක් ඇති වූ විට උපකාර ලබාගැනීමට විශාල ප්‍රජාවක් සහ ඉතා හොඳින් ලියා ඇති නිල ලේඛන (official documentation) ඇත.
  • අභිරුචිකරණය (Customization): Bootstrap හි මූලික style එක අපට අවශ්‍ය පරිදි ඉතා පහසුවෙන් වෙනස් කරගත හැක.

4. Bootstrap ස්ථාපනය (Installation)

අපගේ වෙබ් ව්‍යාපෘතියට Bootstrap එක් කරගැනීමට ප්‍රධාන ක්‍රම දෙකක් ඇත. මෙම පාඨමාලාව පුරාවට අපි භාවිතා කරන්නේ පළමු සහ පහසුම ක්‍රමය වන CDN ක්‍රමයයි.

ක්‍රමය 1: CDN (Content Delivery Network) භාවිතා කිරීම

මෙය ඉතාමත් පහසු සහ නිර්දේශිත ක්‍රමයයි. මෙහිදී අපට කිසිදු ගොනුවක් download කරගැනීමට අවශ්‍ය නැත. අන්තර්ජාල සම්බන්ධතාවයක් පමණක් ප්‍රමාණවත් වේ. Bootstrap සතු CSS සහ JavaScript ගොනු, ඔවුන්ගේ වේගවත් server හරහා අපගේ වෙබ් පිටුවට සෘජුවම සම්බන්ධ කරගැනීම මෙහිදී සිදුවේ.

පහත දැක්වෙන <link> සහ <script> tags ඔබේ HTML ගොනුවේ <head> සහ <body> tags තුලට පිටපත් කර අලවන්න.

<!doctype html>
<html lang="si">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap CDN Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Bootstrap JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

ක්‍රමය 2: Local Setup (ගොනු Download කරගැනීම)

ඔබට අන්තර්ජාල සම්බන්ධතාවයක් නොමැතිව වැඩ කිරීමට අවශ්‍ය නම්, Bootstrap හි සම්පාදනය කරන ලද (compiled) CSS සහ JS ගොනු download කර, ඔබේ project folder එකට එක් කරගත හැක.

  1. getbootstrap.com වෙබ් අඩවියට පිවිසෙන්න.
  2. "Download" බොත්තම click කර "Compiled CSS and JS" කොටස download කරගන්න.
  3. ලැබෙන zip ගොනුව extract කර, එහි ඇති css සහ js folders ඔබේ project folder එකට copy කරගන්න.
  4. පහත ආකාරයට එම ගොනු ඔබේ HTML පිටුවට සම්බන්ධ කරන්න.
<!doctype html>
<html lang="si">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Local Setup</title>
    <!-- Link to local CSS file -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, local world!</h1>

    <!-- Link to local JS file -->
    <script src="js/bootstrap.bundle.min.js"></script>
  </body>
</html>
🏠 මුල් පිටුවට ඊළඟට: Module 2 ➡️