Search
Search titles only
By:
Search titles only
By:
Log in
Register
Search
Search titles only
By:
Search titles only
By:
Menu
Install the app
Install
Forums
New posts
All threads
Latest threads
New posts
Trending threads
Trending
Search forums
What's new
New posts
New ads
New profile posts
Latest activity
Free Ads
Latest reviews
Search ads
Members
Current visitors
New profile posts
Search profile posts
Contact us
Latest ads
Google Pixel 9 Pro
vgp
Updated:
Thursday at 5:57 PM
Ad icon
Jobreceive.com for sale
Blogerwiki
Updated:
Tuesday at 8:55 PM
Post Your Vehicle for Sale — FREE! - https://libro.lk
Kalu_Puth
Updated:
Tuesday at 7:38 PM
ඔයාගෙ Assignment හෝ Thesis එක හරියට හදාගමු
ErMurazor
Updated:
Sep 26, 2026
Ad icon
BlackWall V2ray servers
hu KANNA
Updated:
Sep 23, 2026
Electronics
Vehicles
Property
Search
Reply to thread
Forums
General
ElaKiri Talk!
Bootstrap ගැන සිංහලෙන්
Get the App
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Message
<blockquote data-quote="SL MULTIMEDIA TUTORIAL" data-source="post: 26759130" data-attributes="member: 575597"><p><span style="font-size: 18px"><em>ආයුබෝවන් කියල පිලිගන්නවා...... අද අපි කතා කරන්න සුදානම් වෙන්නේ Bootstrap පිලිබදව.... web development ගැන උනන්දුවක් තියන හැමදෙනාටම මේක හුගක් වැදගත් වෙයි කියල මම විශ්වාස කරනවා......</em></span></p><p></p><p><em><span style="font-size: 18px"> හොදයි.... අපි මුලිම්ම බලල ඉමු මොකද්ද මේ bootstrap කියන්නේ කියල..... කෙටියෙන්ම කියනවනම් bootstrap කියන්නේ free වගේම open-source front-end framework එකක්..... මේක අද වෙද්දී ලෝකයේ තියන ජනප්රියම front-end framework එක කිව්වොත් නිවැරදියි......MIT license එකත් එක්ක 2011 අගෝස්තු මාසයේදී ලෝකයට එන මේ framework එක නිර්මාණය වෙන්නේ Mark Otto සහ Jacob Thornton අතින්...... අද වෙද්දී මේකේ 3.3.7 version එක release වෙලා තියනවා වගේම 4.0.0 beta version එකත් release වෙලා තියනවා....... </span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LTUFkuK5--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://imgur.com/Mj3H69v.png" alt="" class="fr-fic fr-dii fr-draggable " style="width: 526px" /></span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"> අපි දැන් බලමු කොහොමද මේ bootstrap වලින් වැඩ ගන්නේ කියල..... සරලවම කියනවනම් Bootstrap කියන්නේ නිර්මාණය කරන ලද Cascade style sheet(CSS) සහ JavaScript file වල එකතුවක්...... ඒ කියන්නේ අපිට web designing වලදී අතිශය අවශ්ය වන components ඒ කියන්නේ nav-bars , buttons , cards , forms , jumbotrons , progress-bars , carousel(අර slide show එකක වගේ images මාරු වෙන එක) වගේ දේවල් මෙයාල ප්රතිනිර්මාණය කරලා තියනවා.... මේක කරලා තියෙන්නේ නිකන්ම නෙවෙයි....අපිට තෝරාගැනීම් රැසකුත් දීල තියනවා.... ඒ කියන්නේ අපි හිතමු අපිට button එකක් අවශ්යයි කියල....එතකොට අපිට තෝරාගන්න buttons රැසක්ම තියනවා වගේම අපි තෝරාගන්න button එක පවා css classes භාවිතා කරලා අපිට customize කරගන්න පුළුවන්.....</span></em></p><p><em><span style="font-size: 18px"> ඒ කියන්නේ අවශ්යතාවය අනුව අපි තෝරගත්ත button එක size , color වගේ ආකාර වලට වෙනස්කම් කරගන්න අපිට පුළුවන්......ඒ වගේමයි මේ components ඉතාමත් මනරම් ආකාරයට නිර්මාණය කරන්නට bootstrap නිර්මාණකරුවන් වගබලා තිබෙනවා......ඒ නිසාම තමා bootstrap අදටත්ලෝකයේ ජනප්රියම front-end framework එක වෙලා තියෙන්නේ.....</span></em></p><p><em><span style="font-size: 18px">හරි මෙතන ඉදන් අපි බලමු කොහොමද bootstrap වලින් අපි වැඩ කරන්නේ කියල..... මම කලින් කිව්වා bootstrap කියන්නේ css සහ JavaScript file වල එකතුවක් කියල.... ඉතින් අපි html , css සහ javascript ඉගන ගද්දි දැනගත්ත කොහොමද මේ css , js file අපේ html file එකට link කරන්නේ කියල.... css file එකක්නම් <strong><link></strong> tag එක භාවිත කරනවා.... js file එකක්නම් <strong><script> </strong>tag එක භාවිත කරනවා....</span></em></p><p><em><span style="font-size: 18px">මේ කොහොම link කරන්නත් කලින් අපිට bootstrap download කරගෙන ඉන්න වෙනවා.... අපි දැන් බලමු කොහොමද bootstrap download කරගන්නේ කියල......</span></em></p><p><em><span style="font-size: 18px">ඔයා මුලින්ම මේ <a href="http://getbootstrap.com/" target="_blank">link</a> එකෙන් bootstrap web site එකට යන්න...... (url: <a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a>) </span></em></p><p><em><span style="font-size: 18px"> </span></em></p><p><em><span style="font-size: 18px"><img src="https://i.postimg.cc/sXPQNLyD/Capture.png" alt="" class="fr-fic fr-dii fr-draggable " style="width: 655px" /></span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px">ඔයාට අවශ්ය වන version එක තෝරාගන්න..... ඊට පස්සේ download දෙන්න...... </span></em></p><p><a href="https://getbootstrap.com/docs/5.1/getting-started/download/" target="_blank">https://getbootstrap.com/docs/5.1/getting-started/download/</a></p><p></p><p><em><span style="font-size: 18px"> ඔයා bootstrap download කරගෙන use කරන්න කැමති නැතිනම් ඔයාට පුළුවන් bootstrap CDN එක භාවිතා කරන්න...... CDN කියන්නේ content delivery network කියන එක..... CDN එකට link එක මෙතන තියනවා.... Bootstrap CDN මේකෙන් කරන්නේ මොකද්ද කියල සරලවම කියනවනම් මේකෙන් කෙරෙන්නේ අපි local save කරලා තියාගෙන link කරපු css , js files internet එකේ කොහේ හරි තැනක තියාගෙන link කරන එක.......CDN එකක් භාවිතා කිරීම local file එකක් use කරනවට වඩා වේගයෙන් වැඩියි.... එක නිසා ඔයත් host කරන්න බලාගෙන web site එකක් හදනවනම් මම recommend කරන්නේ CDN එක භාවිත කිරීම...... </span></em></p><p><em><span style="font-size: 18px"> දැන් අපි බලමු කොහොමද මේ CDN එක භාවිත කරන්නේ කියල....... මේක ඉතාම සරල වැඩක්.... කරන්න තියෙන්නේ CDN එක copy කරලා <head> tag ඇතුලේ paste කරන එක විතරයි.....</span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"><img src="https://2.bp.blogspot.com/-IMwpqmufJmQ/WgXbVPcoawI/AAAAAAAACqo/33yfcNiA-bo3iN9Ox-s_VP5azd-SnSRUwCEwYBhgL/s400/bootstrap%2Bcdn.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="width: 421px" /></span></em></p><p></p><p> <em><span style="font-size: 18px">ඔන්න දැන් ඔයාගේ html file එකට bootstrap link කරලා තියෙන්නේ.......අපි මෙතන ඉදන් බලමු කොහොමද මේ bootstrap වලින් අපි වැඩ ගන්නේ කියල..... හරි මම කලින් කිව්වනේ bootstrap වලදී කරලා තියෙන්නේ web page හදද්දී අපිට අවශ්යම වෙන component ප්රතිනිර්මාණය කරලා තියන එක කියල...... මේ url එකට ( <a href="https://getbootstrap.com/docs/3.3/components/" target="_blank">https://getbootstrap.com/docs/3.3/components/</a> ) </span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"><img src="https://getbootstrap.com/docs/5.1/assets/img/bootstrap-themes.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></em></p><p><em><span style="font-size: 18px">ගියාම ඔයාට bootstrap මගින් නිර්මාණය කරලා තියන component සියල්ල බලාගන්න පුළුවන්...... ඔයාට තියෙන්නේ අවශ්ය component එක copy-paste කරන එක විතරයි.....ඔයා ඔයාගෙම template එකක් design කරද්දී ඔයාට අවශ්ය වෙන css මේ page එකේම css tab එකට ගියාම බලාගන්න පුළුවන්..... Bootstrap grid system එක ඉගන ගත්තොත් ඔයාට responsive web page කජු කනවා වගේ ලේසියෙන් හදන්න පුළුවන්..... Responsive web page කියන්නේ මොකද්ද කියල දැන් හැමෝම බලනවා ඇති දැන්..... Responsive web page කියන්නේ ඔයාල දැකල ඇති අපි web page එකක් අපේ laptop එකෙන් බලද්දී අපිට දර්ශනය වෙන ආකාරයට නෙවෙයි අපිට ඒ web page එකම mobile phone එකකින් බලද්දී දර්ශනය වෙන්නේ... අන්න ඒ විදියට අපි use කරන device එක අනුව විකාර වෙන්නේ නැතුව web page එක නියම ආකාරයට දර්ශනය වෙන්න හදපු web page තමා responsive web page කියන්නේ..... bootstrap grid system එක දන්නා කෙනෙක්ට මේ විදිහේ page හදන එක ඉතාම පහසු වැඩක්.....</span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"><img src="http://webthemez.com/wp-content/uploads/2014/05/skytouch-onepage-bootstrap-responsive-template.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="width: 614px" /></span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"></span></em></p><p><em><span style="font-size: 18px"> Bootstrap කොහොම හදල තිබුනත් එකෙන් නිර්මාණාත්මක web page එකක් design කරන එක ඔයාගේ දක්ෂතාවය...... ඉතින් ඔයා මෙතනින් එහාට කරන්න තියෙන්නේ හොද tutorials ටිකක් හොයාගෙන bootstrap classes ගැන ඉගන ගන්න එක තමා... ඔයාට refer කරන්න හොද you tube tutorials කීපයක links මම comment section එකේ comment කරන්නම්...... එහෙනම් web development ගැන කියවෙන තවත් ලිපියකින් ලගදීම හමුවෙමු......එතකන් හැමෝටම ජය වේවා...!</span></em></p><p></p><p><img src="https://elakiri.com/attachments/1626011327606-png.134824/" alt="" class="fr-fic fr-dii fr-draggable " style="width: 180px" /></p><p><em><em>හැමෝටම සුභ දවසක්..<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":-)" title="Smile :-)" loading="lazy" data-shortname=":-)" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite16" alt=":love2:" title="Love :love2:" loading="lazy" data-shortname=":love2:" /></em></em></p></blockquote><p></p>
[QUOTE="SL MULTIMEDIA TUTORIAL, post: 26759130, member: 575597"] [SIZE=5][I]ආයුබෝවන් කියල පිලිගන්නවා...... අද අපි කතා කරන්න සුදානම් වෙන්නේ Bootstrap පිලිබදව.... web development ගැන උනන්දුවක් තියන හැමදෙනාටම මේක හුගක් වැදගත් වෙයි කියල මම විශ්වාස කරනවා......[/I][/SIZE] [I][SIZE=5] හොදයි.... අපි මුලිම්ම බලල ඉමු මොකද්ද මේ bootstrap කියන්නේ කියල..... කෙටියෙන්ම කියනවනම් bootstrap කියන්නේ free වගේම open-source front-end framework එකක්..... මේක අද වෙද්දී ලෝකයේ තියන ජනප්රියම front-end framework එක කිව්වොත් නිවැරදියි......MIT license එකත් එක්ක 2011 අගෝස්තු මාසයේදී ලෝකයට එන මේ framework එක නිර්මාණය වෙන්නේ Mark Otto සහ Jacob Thornton අතින්...... අද වෙද්දී මේකේ 3.3.7 version එක release වෙලා තියනවා වගේම 4.0.0 beta version එකත් release වෙලා තියනවා....... [IMG width="526px"]https://res.cloudinary.com/practicaldev/image/fetch/s--LTUFkuK5--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://imgur.com/Mj3H69v.png[/IMG] අපි දැන් බලමු කොහොමද මේ bootstrap වලින් වැඩ ගන්නේ කියල..... සරලවම කියනවනම් Bootstrap කියන්නේ නිර්මාණය කරන ලද Cascade style sheet(CSS) සහ JavaScript file වල එකතුවක්...... ඒ කියන්නේ අපිට web designing වලදී අතිශය අවශ්ය වන components ඒ කියන්නේ nav-bars , buttons , cards , forms , jumbotrons , progress-bars , carousel(අර slide show එකක වගේ images මාරු වෙන එක) වගේ දේවල් මෙයාල ප්රතිනිර්මාණය කරලා තියනවා.... මේක කරලා තියෙන්නේ නිකන්ම නෙවෙයි....අපිට තෝරාගැනීම් රැසකුත් දීල තියනවා.... ඒ කියන්නේ අපි හිතමු අපිට button එකක් අවශ්යයි කියල....එතකොට අපිට තෝරාගන්න buttons රැසක්ම තියනවා වගේම අපි තෝරාගන්න button එක පවා css classes භාවිතා කරලා අපිට customize කරගන්න පුළුවන්..... ඒ කියන්නේ අවශ්යතාවය අනුව අපි තෝරගත්ත button එක size , color වගේ ආකාර වලට වෙනස්කම් කරගන්න අපිට පුළුවන්......ඒ වගේමයි මේ components ඉතාමත් මනරම් ආකාරයට නිර්මාණය කරන්නට bootstrap නිර්මාණකරුවන් වගබලා තිබෙනවා......ඒ නිසාම තමා bootstrap අදටත්ලෝකයේ ජනප්රියම front-end framework එක වෙලා තියෙන්නේ..... හරි මෙතන ඉදන් අපි බලමු කොහොමද bootstrap වලින් අපි වැඩ කරන්නේ කියල..... මම කලින් කිව්වා bootstrap කියන්නේ css සහ JavaScript file වල එකතුවක් කියල.... ඉතින් අපි html , css සහ javascript ඉගන ගද්දි දැනගත්ත කොහොමද මේ css , js file අපේ html file එකට link කරන්නේ කියල.... css file එකක්නම් [B]<link>[/B] tag එක භාවිත කරනවා.... js file එකක්නම් [B]<script> [/B]tag එක භාවිත කරනවා.... මේ කොහොම link කරන්නත් කලින් අපිට bootstrap download කරගෙන ඉන්න වෙනවා.... අපි දැන් බලමු කොහොමද bootstrap download කරගන්නේ කියල...... ඔයා මුලින්ම මේ [URL='http://getbootstrap.com/']link[/URL] එකෙන් bootstrap web site එකට යන්න...... (url: [URL]http://getbootstrap.com/[/URL]) [IMG width="655px"]https://i.postimg.cc/sXPQNLyD/Capture.png[/IMG] ඔයාට අවශ්ය වන version එක තෝරාගන්න..... ඊට පස්සේ download දෙන්න...... [/SIZE][/I] [URL]https://getbootstrap.com/docs/5.1/getting-started/download/[/URL] [I][SIZE=5] ඔයා bootstrap download කරගෙන use කරන්න කැමති නැතිනම් ඔයාට පුළුවන් bootstrap CDN එක භාවිතා කරන්න...... CDN කියන්නේ content delivery network කියන එක..... CDN එකට link එක මෙතන තියනවා.... Bootstrap CDN මේකෙන් කරන්නේ මොකද්ද කියල සරලවම කියනවනම් මේකෙන් කෙරෙන්නේ අපි local save කරලා තියාගෙන link කරපු css , js files internet එකේ කොහේ හරි තැනක තියාගෙන link කරන එක.......CDN එකක් භාවිතා කිරීම local file එකක් use කරනවට වඩා වේගයෙන් වැඩියි.... එක නිසා ඔයත් host කරන්න බලාගෙන web site එකක් හදනවනම් මම recommend කරන්නේ CDN එක භාවිත කිරීම...... දැන් අපි බලමු කොහොමද මේ CDN එක භාවිත කරන්නේ කියල....... මේක ඉතාම සරල වැඩක්.... කරන්න තියෙන්නේ CDN එක copy කරලා <head> tag ඇතුලේ paste කරන එක විතරයි..... [IMG width="421px"]https://2.bp.blogspot.com/-IMwpqmufJmQ/WgXbVPcoawI/AAAAAAAACqo/33yfcNiA-bo3iN9Ox-s_VP5azd-SnSRUwCEwYBhgL/s400/bootstrap%2Bcdn.jpg[/IMG][/SIZE][/I] [I][SIZE=5]ඔන්න දැන් ඔයාගේ html file එකට bootstrap link කරලා තියෙන්නේ.......අපි මෙතන ඉදන් බලමු කොහොමද මේ bootstrap වලින් අපි වැඩ ගන්නේ කියල..... හරි මම කලින් කිව්වනේ bootstrap වලදී කරලා තියෙන්නේ web page හදද්දී අපිට අවශ්යම වෙන component ප්රතිනිර්මාණය කරලා තියන එක කියල...... මේ url එකට ( [URL]https://getbootstrap.com/docs/3.3/components/[/URL] ) [IMG]https://getbootstrap.com/docs/5.1/assets/img/bootstrap-themes.png[/IMG] ගියාම ඔයාට bootstrap මගින් නිර්මාණය කරලා තියන component සියල්ල බලාගන්න පුළුවන්...... ඔයාට තියෙන්නේ අවශ්ය component එක copy-paste කරන එක විතරයි.....ඔයා ඔයාගෙම template එකක් design කරද්දී ඔයාට අවශ්ය වෙන css මේ page එකේම css tab එකට ගියාම බලාගන්න පුළුවන්..... Bootstrap grid system එක ඉගන ගත්තොත් ඔයාට responsive web page කජු කනවා වගේ ලේසියෙන් හදන්න පුළුවන්..... Responsive web page කියන්නේ මොකද්ද කියල දැන් හැමෝම බලනවා ඇති දැන්..... Responsive web page කියන්නේ ඔයාල දැකල ඇති අපි web page එකක් අපේ laptop එකෙන් බලද්දී අපිට දර්ශනය වෙන ආකාරයට නෙවෙයි අපිට ඒ web page එකම mobile phone එකකින් බලද්දී දර්ශනය වෙන්නේ... අන්න ඒ විදියට අපි use කරන device එක අනුව විකාර වෙන්නේ නැතුව web page එක නියම ආකාරයට දර්ශනය වෙන්න හදපු web page තමා responsive web page කියන්නේ..... bootstrap grid system එක දන්නා කෙනෙක්ට මේ විදිහේ page හදන එක ඉතාම පහසු වැඩක්..... [IMG width="614px"]http://webthemez.com/wp-content/uploads/2014/05/skytouch-onepage-bootstrap-responsive-template.jpg[/IMG] Bootstrap කොහොම හදල තිබුනත් එකෙන් නිර්මාණාත්මක web page එකක් design කරන එක ඔයාගේ දක්ෂතාවය...... ඉතින් ඔයා මෙතනින් එහාට කරන්න තියෙන්නේ හොද tutorials ටිකක් හොයාගෙන bootstrap classes ගැන ඉගන ගන්න එක තමා... ඔයාට refer කරන්න හොද you tube tutorials කීපයක links මම comment section එකේ comment කරන්නම්...... එහෙනම් web development ගැන කියවෙන තවත් ලිපියකින් ලගදීම හමුවෙමු......එතකන් හැමෝටම ජය වේවා...![/SIZE][/I] [IMG width="180px"]https://elakiri.com/attachments/1626011327606-png.134824/[/IMG] [I][I]හැමෝටම සුභ දවසක්..:-) :love2:[/I][/I] [/QUOTE]
Insert quotes…
Verification
Hata thunen beduwama keeyada? (60 bedeema thuna)
Post reply
Top
Bottom