1. Typography (අක්ෂර වින්‍යාසය)

වෙබ් අඩවියක ඇති තොරතුරු පරිශීලකයාට පැහැදිලිව සහ පහසුවෙන් කියවීමට හැකි වීම ඉතා වැදගත්. Bootstrap මගින් අපට මේ සඳහා ඉතා ප්‍රයෝජනවත් classes රැසක් සපයයි.

Headings

HTML හි ඇති <h1> සිට <h6> දක්වා tags සඳහා Bootstrap මගින් අලංකාර style එකක් ලබා දේ. ඊට අමතරව, ඔබට ඕනෑම text එකකට heading style එකක් ලබා දීමට .h1 සිට .h6 දක්වා classes භාවිතා කළ හැක.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

Display Headings

සාමාන්‍ය headings වලට වඩා විශාල, කැපී පෙනෙන මාතෘකා සඳහා .display-1 සිට .display-6 දක්වා classes භාවිතා කළ හැක.

Display 1

Display 4

Lead Paragraph

සාමාන්‍ය paragraph එකකට වඩා එය කැපී පෙනෙන ලෙස පෙන්වීමට .lead class එක භාවිතා කරන්න.

This is a lead paragraph. It stands out from regular paragraphs.

This is a regular paragraph for comparison.

2. Text Utilities

Text alignment, transformation, weight, සහ style වෙනස් කිරීම සඳහා Bootstrap හි utility classes භාවිතා කළ හැක.

Alignment: .text-start, .text-center, .text-end
Transformation: .text-lowercase, .text-uppercase, .text-capitalize
Weight and Style: .fw-bold, .fw-bolder, .fw-light, .fst-italic
Decoration: .text-decoration-underline, .text-decoration-line-through

This text is centered and bold.

THIS TEXT IS RIGHT-ALIGNED AND UPPERCASE.

This link has no underline.

3. Bootstrap වර්ණ පද්ධතිය (Color System)

Bootstrap හි අර්ථවත් වර්ණ (semantic colors) කිහිපයක් ඇත. මෙම වර්ණ භාවිතා කරමින් text සහ background වලට වර්ණ ලබා දිය හැක. මෙය වෙබ් අඩවිය පුරාම එකම වර්ණ පටිපාටියක් (color scheme) පවත්වා ගැනීමට උපකාරී වේ.

Text Colors

.text-{color-name} class එක භාවිතා කර text වලට වර්ණ ලබා දෙන්න.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning (on a dark background)

.text-info (on a dark background)

.text-light (on a dark background)

.text-dark

.text-muted

.text-white (on a dark background)

Background Colors

.bg-{color-name} class එක භාවිතා කර background වලට වර්ණ ලබා දෙන්න. බොහෝ විට background color එකක් සමඟ text color එකක්ද යෙදීමට සිදුවේ.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-transparent

4. Display Utilities

HTML element එකක display property එක වෙනස් කිරීමට display utilities ඉතා ප්‍රයෝජනවත් වේ. Responsive design වලදී යම් යම් කොටස් විවිධ තිර ප්‍රමාණ වලදී පෙන්වීමට හෝ සැඟවීමට මෙය බහුලව භාවිතා වේ.

ප්‍රධාන display classes කිහිපයක්:

.d-none - Element එක සඟවයි.
.d-inline - display: inline;
.d-inline-block - display: inline-block;
.d-block - display: block;
.d-flex - display: flex; (Flexbox සඳහා)

Responsive Display Utilities

Breakpoints සමඟ display classes භාවිතා කර යම් element එකක් යම් තිර ප්‍රමාණයකදී පමණක් පෙන්වීමට හෝ සැඟවීමට හැක. උදාහරණයක් ලෙස .d-lg-none යනු large තිරයේ සහ ඊට ඉහල තිර වලදී element එක සඟවයි.

.d-none .d-md-block යනු medium තිරයේ සිට ඉහලට element එක පෙන්වයි, නමුත් ඊට අඩු තිර වලදී සඟවයි.

I am visible only on medium (md) screens and up. (You can't see this on md, lg, xl, xxl) (You CAN see this on md, lg, xl, xxl)

<div class="bg-warning p-2">
  I am visible only on medium (md) screens and up.
  <span class="d-md-none"> (Hidden on md and up) </span>
  <span class="d-none d-md-inline"> (Visible on md and up) </span>
</div>

අභ්‍යාසය:

මෙම මොඩියුලයේ ඉගෙනගත් typography, color, සහ display classes භාවිතා කර, විවිධ headings, text styles, සහ වර්ණවත් background සහිත සරල "About Me" පිටුවක් නිර්මාණය කරන්න.

Module 3: Typography සහ Colors