EgoTechWorld - Bootstrap 5 සිංහල පාඨමාලාව

Bootstrap 5 සමඟින් නවීන වෙබ් අඩවි නිර්මාණය

Bootstrap යනු ලොව ජනප්‍රියම CSS framework එකයි. මෙය භාවිතා කර ඉතාමත් අඩු කාලයකින්, අඩු කේත ප්‍රමාණයකින්, ඕනෑම තිරයකට ගැලපෙන (fully responsive) වෙබ් අඩවි නිර්මාණය කළ හැකියි. ඔබ වෙබ් නිර්මාණ ක්ෂේත්‍රයට අලුත් කෙනෙක් වුවත්, දැනටමත් CSS ගැන දන්නා කෙනෙක් වුවත්, Bootstrap ඔබගේ කාර්යයන් ඉතාමත් පහසු කරනු ඇත.

EgoTechWorld වෙතින් පිරිනමන මෙම සම්පූර්ණ පාඨමාලාව හරහා, Bootstrap 5 හි මූලික සිද්ධාන්තවල සිට, සංකීර්ණ components සහ advanced features දක්වා සියල්ල සරල සිංහලෙන්, ප්‍රායෝගික උදාහරණ සමඟින් ඉගෙන ගැනීමට ඔබට අවස්ථාව ලැබේ.

පාඨමාලා අන්තර්ගතය (Modules)

මෙම පාඨමාලාව ප්‍රධාන මොඩියුල 10 කින් සමන්විත වේ. එක් එක් මොඩියුලය අවසානයේ ප්‍රායෝගික අභ්‍යාසයක් (Hands-on project) ඇතුළත් කර ඇත.

මොඩියුල 1: Bootstrap හැඳින්වීම

මෙම මූලික මොඩියුලයෙන් Bootstrap යනු කුමක්ද, එහි ඉතිහාසය සහ Bootstrap 5 හි ඇති වැදගත්කම ගැන ඉගෙන ගනිමු. සාමාන්‍ය CSS වලට වඩා Bootstrap භාවිතා කිරීමේ වාසි සහ එය අපගේ project එකකට සම්බන්ධ කරගන්නා (CDN හා Local Setup) ආකාරය ප්‍රායෝගිකව ඉගෙන ගනිමු.

  • Bootstrap යනු කුමක්ද?
  • Bootstrap 5 වෙත අවධානය යොමු කරමින් එහි ඉතිහාසය සහ අනුවාදයන්
  • Bootstrap භාවිතා කිරීමේ වාසි
  • Bootstrap ස්ථාපනය (CDN සහ Local Setup)
  • HTML project එකක් සඳහා Bootstrap සකසා ගැනීම
Module 1 වෙත පිවිසෙන්න

මොඩියුල 2: Bootstrap Grid පද්ධතිය

වෙබ් අඩවියකโครงสร้าง (layout) එක සැකසීමේදී නැතුවම බැරි කොටස තමයි Grid පද්ධතිය. ඕනෑම තිරයකට ගැලපෙන ලෙස columns සහ rows සකසන ආකාරය, breakpoints (xs, sm, md, lg, xl, xxl) භාවිතා කරන ආකාරය සහ columns alignment කරන ආකාරය මෙහිදී ඉගෙන ගනිමු.

  • Container, Row, සහ Column සංකල්ප
  • Responsive Breakpoints ගැන අවබෝධය
  • Grid එකක් තුල තවත් Grid එකක් (Nesting)
  • Columns Alignment සහ Ordering
  • ප්‍රායෝගික අභ්‍යාසය: සරල responsive layout එකක් නිර්මාණය කිරීම
Module 2 වෙත පිවිසෙන්න
                   

මොඩියුල 3: අක්ෂර වින්‍යාසය සහ වර්ණ (Typography and Colors)

                   

වෙබ් අඩවියක අලංකාරය සඳහා අක්ෂර සහ වර්ණ නිවැරදිව භාවිතා කිරීම ඉතා වැදගත්. Bootstrap මගින් සපයන heading, paragraph classes, text alignment, වර්ණ පද්ධතිය (text & background colors) සහ display utilities භාවිතා කරන ආකාරය මෙහිදී ඉගෙන ගනිමු.

                   
                           
  • Headings, Paragraphs, Blockquotes
    •                        
  • Text Alignment, Transformation, Decoration
    •                        
  • Bootstrap වර්ණ පද්ධතිය භාවිතා කිරීම
    •                        
  • Display Utilities
    •                        
  • ප්‍රායෝගාත්මක අභ්‍යාසය: අලංකාරව සැකසූ text page එකක් නිර්මාණය කිරීම
    •                    
                    Module 3 වෙත පිවිසෙන්න                
               
                   

මොඩියුල 4: Bootstrap Components (1 කොටස)

                   

Bootstrap හි සැබෑ බලය රැඳී ඇත්තේ එහි ඇති Components වලයි. Buttons, Alerts, Badges, Progress Bars සහ Cards වැනි නිතර භාවිතා වන Components නිර්මාණය කරන ආකාරය ප්‍රායෝගිකව ඉගෙන ගනිමු.

                   
                           
  • Buttons සහ Button Groups
    •                        
  • Alerts සහ Badges
    •                        
  • Progress Bars
    •                        
  • Cards (Content Containers)
    •                        
  • ප්‍රායෝගික අභ්‍යාසය: සරල Profile Card එකක් නිර්මාණය කිරීම
    •                    
                    Module 4 වෙත පිවිසෙන්න                
                                
                   

මොඩියුල 5: Bootstrap Components (2 කොටස)

                   

පළමු කොටසට tiếp nối කරමින්, වෙබ් අඩවියක සංචාලනය (navigation) සඳහා අත්‍යවශ්‍ය වන Navbar, Dropdowns, Pagination වැනි සංකීර්ණ components නිර්මාණය කරන ආකාරය මෙහිදී ඉගෙන ගනිමු.

                   
                           
  • Navbar සහ Navigation
    •                        
  • Dropdowns
    •                        
  • Pagination සහ Breadcrumbs
    •                        
  • List Groups
    •                        
  • ප්‍රායෝගික අභ්‍යාසය: Dropdown මෙනු සහිත Navigation Bar එකක් නිර්මාණය කිරීම
    •                    
                    Module 5 වෙත පිවිසෙන්න                
               
                   

මොඩියුල 6: Bootstrap Forms

                   

ඕනෑම වෙබ් අඩවියකට පරිශීලක දත්ත ලබාගැනීම සඳහා Forms අත්‍යවශ්‍ය වේ. Bootstrap භාවිතයෙන් ඉතා අලංකාර සහ ක්‍රියාකාරී Login, Registration forms නිර්මාණය කරන ආකාරය, form validation කරන ආකාරය මෙහිදී ඉගෙන ගනිමු.

                   
                           
  • Form Controls (input, textarea, select)
    •                        
  • Checkboxes, Radio buttons, Switches
    •                        
  • Input Groups සහ Floating Labels
    •                        
  • Bootstrap Styles සමග Form Validation
    •                        
  • ප්‍රායෝගික අභ්‍යාසය: Login සහ Registration Form එකක් නිර්මාණය කිරීම
    •                    
                    Module 6 වෙත පිවිසෙන්න                
               
                   

මොඩියුල 7: Bootstrap Utilities

                   

CSS විශාල ප්‍රමාණයක් නොලියා, HTML එක තුලම class යොදාගෙන style කිරීමට Utilities උපකාරී වේ. Spacing (margin, padding), Flexbox, Borders, Shadows වැනි ඉතා ප්‍රයෝජනවත් utilities ගැන මෙහිදී ගැඹුරින් සාකච්ඡා කෙරේ.

                   
                           
  • Spacing (Margin, Padding)
    •                        
  • Flex Utilities
    •                        
  • Borders, Shadows, සහ Sizing
    •                        
  • Position Utilities (fixed, sticky, relative)
    •                        
  • ප්‍රායෝගික අභ්‍යාසය: Utilities භාවිතා කර Custom Card Layout එකක් නිර්මාණය කිරීම
    •                    
                    Module 7 වෙත පිවිසෙන්න                
               
                   

මොඩියුල 8: Layouts සහ Media

                   

වෙබ් අඩවියක ඇති ಚಿತ್ರ (images), videos, tables වැනි මාධ්‍ය අංග responsive ලෙස සකසන ආකාරය සහ Modals, Tooltips වැනි අන්තර්ක්‍රියාකාරී (interactive) අංග එකතු කරන ආකාරය මෙහිදී ඉගෙන ගනිමු.

                   
                           
  • Responsive Images සහ Figures
    •                        
  • Style කරන ලද Tables
    •                        
  • Responsive Embeds (Videos, Iframes)
    •                        
  • Modals, Tooltips, සහ Popovers
    •                        
  • ප්‍රායෝගික අභ්‍යාසය: Modal preview සහිත Gallery එකක් නිර්මාණය කිරීම
    •                    
                    Module 8 වෙත පිවිසෙන්න                
               
                   

මොඩියුල 9: උසස් Bootstrap (Advanced)

                   

Bootstrap හි මූලික භාවිතයෙන් ඔබ්බට ගොස්, එය අපට අවශ්‍ය පරිදි වෙනස් කරගන්නා (customizing) ආකාරය ඉගෙන ගනිමු. SASS භාවිතයෙන් Bootstrap හි default styles වෙනස් කිරීම සහ Carousel, Accordion වැනි JavaScript components භාවිතා කරන ආකාරය මෙහිදී ආවරණය කෙරේ.

                   
                           
  • SASS සමඟ Bootstrap Customize කිරීම
    •                        
  • Default Styles Overriding කිරීම
    •                        
  • JavaScript Components (Carousel, Collapse, Accordion)
    •                        
  • ප්‍රායෝගික අභ්‍යාසය: Accordion භාවිතා කර Interactive FAQ පිටුවක් නිර්මාණය කිරීම
    •                    
                    Module 9 වෙත පිවිසෙන්න                
               
                   

මොඩියුල 10: අවසන් ව්‍යාපෘතිය (Final Project)

                   

මෙම පාඨමාලාව පුරාවට ඉගෙනගත් සියලු දේ භාවිතා කර, සම්පූර්ණ, අංගසම්පූර්ණ responsive වෙබ් අඩවියක් මුල සිට නිර්මාණය කරමු. මෙය ඔබගේ portfolio එකට එකතු කරගත හැකි වටිනා ව්‍යාපෘතියක් වනු ඇත.

                   
                           
  • Header සහ Navbar
    •                        
  • Hero Section (Image/Video සමග)
    •                        
  • සේවා/නිෂ්පාදන සඳහා Cards
    •                        
  • Validation සහිත Contact Form
    •                        
  • සමාජ මාධ්‍ය අයිකන සහිත Footer එක
    •                        
  • Project එක GitHub Pages හෝ Netlify වෙත Deploy කිරීම
    •                    
                    Module 10 වෙත පිවිසෙන්න