Module 2: Bootstrap Grid පද්ධතිය

1. Grid පද්ධතිය යනු කුමක්ද?

Bootstrap හි Grid පද්ධතිය යනු එහි ඇති වැදගත්ම සහ බලවත්ම අංගයයි. මෙය flexbox තාක්ෂණය මත ගොඩනගා ඇති අතර, ඕනෑම තිර ප්‍රමාණයකට ගැලපෙන පරිදි වෙබ් පිටුවේ අන්තර්ගතය සකස් කිරීමට (responsive layouts) අපට ඉඩ සලසයි. සරලවම, මෙය අපගේ වෙබ් පිටුව තීරු (columns) සහ පේළි (rows) වලට බෙදා කළමනාකරණය කරන පද්ධතියකි.

Grid පද්ධතියේ ප්‍රධාන සංරචක තුනකි:

Container: සම්පූර්ණ grid එක දරා සිටින ප්‍රධාන රාමුව.
Row: තීරු (columns) රඳවා තබාගන්නා තිරස් කණ්ඩායම්.
Column: අපගේ අන්තර්ගතය (content) සැබවින්ම තබන ස්ථානය.

2. Containers: .container සහ .container-fluid

ඕනෑම grid layout එකක් ආරම්භ විය යුත්තේ container එකකිනි. Bootstrap හි container වර්ග දෙකක් ඇත.

.container: මෙය තිරයේ ප්‍රමාණය අනුව වෙනස් වන, නියමිත පළලක් (fixed-width) සහිත container එකකි. එය දෙපසින් ඉඩ තබා අන්තර්ගතය මැදට ගෙන එයි.
.container-fluid: මෙය සෑම විටම තිරයේ සම්පූර්ණ පළල (100% width) පුරා විහිදේ.

3. Rows සහ Columns ක්‍රියා කරන ආකාරය

Bootstrap හි grid පද්ධතිය පේළියක් (row) තුල තීරු (columns) 12 කට බෙදා ඇත. ඔබට මෙම තීරු 12, ඔබට අවශ්‍ය ආකාරයට කණ්ඩායම් කර විවිධ layouts නිර්මාණය කළ හැක. සෑම විටම columns, row එකක් තුලත්, rows, container එකක් තුලත් තිබිය යුතුය.

උදාහරණයක් ලෙස, ඔබට සමාන පළලකින් යුතු තීරු 3ක් අවශ්‍ය නම්, ඔබට 12/3 = 4 බැගින් තීරු 3ක් සෑදිය හැක. (col-4 + col-4 + col-4 = 12)

.col-4

.col-8

.col-4

.col-6

4. Responsive Breakpoints

Bootstrap හි සැබෑම බලය ඇත්තේ මෙතනය. විවිධ තිර ප්‍රමාණ සඳහා (mobile, tablet, desktop) layout එක වෙනස් කරන්නේ කෙසේදැයි තීරණය කරන්නේ breakpoints මගිනි.

Bootstrap හි ප්‍රධාන breakpoints 6ක් ඇත:

xs (Extra small) - <576px (Default)
sm (Small) - ≥576px
md (Medium) - ≥768px
lg (Large) - ≥992px
xl (Extra large) - ≥1200px
xxl (Extra extra large) - ≥1400px

Class එකේ ව්‍යුහය .col-{breakpoint}-{size} ලෙස වේ. උදාහරණයක් ලෙස, .col-md-6 යනු medium (≥768px) තිරයේ සහ ඊට ඉහල තිර වලදී තීරු 6ක පළල ගන්නා ලෙසත්, ඊට අඩු තිර වලදී (sm, xs) සම්පූර්ණ පළල (තීරු 12) ගන්නා ලෙසත් නියම කිරීමකි.

ප්‍රායෝගික උදාහරණය:

පහත කේතය මගින් විශාල තිර (lg) වලදී තීරු 3ක්, මධ්‍යම තිර (md) වලදී තීරු 2ක් සහ කුඩා තිර (sm) වලදී තීරු 1ක් පෙන්වයි.

Column 1

Column 2

Column 3

<div class="row">
  <div class="col-lg-4 col-md-6 col-sm-12">Column 1</div>
  <div class="col-lg-4 col-md-6 col-sm-12">Column 2</div>
  <div class="col-lg-4 col-md-6 col-sm-12">Column 3</div>
</div>

5. Nesting Grids (ග්‍රිඩ් එකක් තුල තවත් ග්‍රිඩ්)

සමහර විට අපට වඩාත් සංකීර්ණ layouts අවශ්‍ය වේ. එවැනි අවස්ථාවක, column එකක් තුල තවත් row එකක් සහ columns නිර්මාණය කිරීමට හැකියාව ඇත. මෙය Nesting ලෙස හැඳින්වේ.

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div>
      <div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div>
    </div>
  </div>
</div>

6. Alignment සහ Ordering

Flexbox utilities භාවිතා කර columns සිරස් (vertical) සහ තිරස් (horizontal) ලෙස align කිරීමටත්, ඒවායේ දෘශ්‍ය අනුපිළිවෙල (visual order) වෙනස් කිරීමටත් හැකිය.

Vertical Alignment: .align-items-start, .align-items-center, .align-items-end
Horizontal Alignment: .justify-content-start, .justify-content-center, .justify-content-end
Ordering: .order-1, .order-2, ... (breakpoint-specific classes like .order-md-1 ද ඇත)

අභ්‍යාසය:

මෙම මොඩියුලයේ ඉගෙනගත් දේ භාවිතා කර, header, content area සහ footer එකක් සහිත සරල responsive layout එකක් නිර්මාණය කිරීමට උත්සහ කරන්න. Content area එක විශාල තිර වලදී තීරු දෙකකටත් (උදා: 70% content, 30% sidebar), කුඩා තිර වලදී තනි තීරුවකටත් පෙන්වන ලෙස සකසන්න.