Bootstrap
අදත් හැමදෙනාවම The Rise වෙත ආයුබෝවන් කියල පිලිගන්නවා...... අද අපි කතා කරන්න සුදානම් වෙන්නේ Bootstrap පිලිබදව.... web development ගැන උනන්දුවක් තියන හැමදෙනාටම මේක හුගක් වැදගත් වෙයි කියල මම විශ්වාස කරනවා......
හොදයි.... අපි මුලිම්ම බලල ඉමු මොකද්ද මේ 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 වෙලා තියනවා.......
අපි දැන් බලමු කොහොමද මේ 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 එකක්නම් <link> tag එක භාවිත කරනවා.... js file එකක්නම් <script> tag එක භාවිත කරනවා....
මේ කොහොම link කරන්නත් කලින් අපිට bootstrap download කරගෙන ඉන්න වෙනවා.... අපි දැන් බලමු කොහොමද bootstrap download කරගන්නේ කියල......
ඔයා මුලින්ම මේ link එකෙන් bootstrap web site එකට යන්න...... (url: http://getbootstrap.com/)
ඊට පස්සේ ඔය ඊතලයෙන් පෙන්නලා තියන තැනෙන් ඔයාට අවශ්‍ය වන version එක තෝරාගන්න..... ඊට පස්සේ download දෙන්න...... මේ ලින්ක් එකෙන් ඔයාට කෙලින්ම version 3.3.7 download කරගන්න පුළුවන්.....
bootstrap-3.3.7
ඔයා 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 කරන එක විතරයි.....
ඔන්න දැන් ඔයාගේ html file එකට bootstrap link කරලා තියෙන්නේ.......අපි මෙතන ඉදන් බලමු කොහොමද මේ bootstrap වලින් අපි වැඩ ගන්නේ කියල..... හරි මම කලින් කිව්වනේ bootstrap වලදී කරලා තියෙන්නේ web page හදද්දී අපිට අවශ්‍යම වෙන component ප්‍රතිනිර්මාණය කරලා තියන එක කියල...... මේ url එකට ( https://getbootstrap.com/docs/3.3/components/ )
ගියාම ඔයාට 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 හදන එක ඉතාම පහසු වැඩක්.....
Bootstrap කොහොම හදල තිබුනත් එකෙන් නිර්මාණාත්මක web page එකක් design කරන එක ඔයාගේ දක්ෂතාවය...... ඉතින් ඔයා මෙතනින් එහාට කරන්න තියෙන්නේ හොද tutorials ටිකක් හොයාගෙන bootstrap classes ගැන ඉගන ගන්න එක තමා..... එක ලිපියකින් කරන්න ටිකක් අමාරු වැඩක්... ඔයාට refer කරන්න හොද you tube tutorials කීපයක links මම comment section එකේ comment කරන්නම්...... එහෙනම් web development ගැන කියවෙන තවත් ලිපියකින් ලගදීම හමුවෙමු......එතකන් හැමෝටම ජය වේවා...!
-නසියර්-
ඒ කියන්නේ අවශ්‍යතාවය අනුව අපි තෝරගත්ත 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 එකක්නම් <link> tag එක භාවිත කරනවා.... js file එකක්නම් <script> tag එක භාවිත කරනවා....
මේ කොහොම link කරන්නත් කලින් අපිට bootstrap download කරගෙන ඉන්න වෙනවා.... අපි දැන් බලමු කොහොමද bootstrap download කරගන්නේ කියල......
ඔයා මුලින්ම මේ link එකෙන් bootstrap web site එකට යන්න...... (url: http://getbootstrap.com/)
ඊට පස්සේ ඔය ඊතලයෙන් පෙන්නලා තියන තැනෙන් ඔයාට අවශ්‍ය වන version එක තෝරාගන්න..... ඊට පස්සේ download දෙන්න...... මේ ලින්ක් එකෙන් ඔයාට කෙලින්ම version 3.3.7 download කරගන්න පුළුවන්.....
bootstrap-3.3.7
ඔයා 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 කරන එක විතරයි.....
ගියාම ඔයාට 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 හදන එක ඉතාම පහසු වැඩක්.....
Bootstrap කොහොම හදල තිබුනත් එකෙන් නිර්මාණාත්මක web page එකක් design කරන එක ඔයාගේ දක්ෂතාවය...... ඉතින් ඔයා මෙතනින් එහාට කරන්න තියෙන්නේ හොද tutorials ටිකක් හොයාගෙන bootstrap classes ගැන ඉගන ගන්න එක තමා..... එක ලිපියකින් කරන්න ටිකක් අමාරු වැඩක්... ඔයාට refer කරන්න හොද you tube tutorials කීපයක links මම comment section එකේ comment කරන්නම්...... එහෙනම් web development ගැන කියවෙන තවත් ලිපියකින් ලගදීම හමුවෙමු......එතකන් හැමෝටම ජය වේවා...!
-නසියර්-
Bootstrap Tutorials
ReplyDeletehttps://www.youtube.com/watch?v=gqOEoUR5RHg&t=8s
https://www.youtube.com/watch?v=314m7YBRFvQ&list=PL6n9fhu94yhXd4xnk-j5FGhHjUv1LsF0V
thumbs up machan...
ReplyDeleteGood job..
ReplyDelete