චින්තක ඇත්තටම මොකක්ද මේ Bootstrap කියල කියන්නේ?
වෙබ් අඩවියකට ඇතුලත් කල හැකි සෑම සංරචකයක්ම කල්තියාම coding කරල සාදාගත් codes එකතුවක්. අපිට වෙබ් පිටුවක UI එක ගහන්න ඔන වුනාම අර codes වලින් අවශයතාවයට අනුව අදාල කොටස් වෙන වෙනම අරගෙන පිලිවෙලට පෙලගැස්සුවහම සුපිරි නිමාවක් තියෙන වෙබ් පිටුවක් අපිට හදාගන්න පුලුවන්.
ඒ කියන්නේ වෙනස්ම Language එකක්ද?
අපෝ නෑ.. මේ Library එක හදල තියෙන්නේ අපි සාමානයෙන් වෙබ් සයිට් හදන්න යොදාගන්න html,css,JavaScript කියන Script languages පාවිච්චි කරලම තමා.
Bootstrap යොදාගත්තම තියෙන වාසි මොනාද ?
ලොකුම වාසිය ඉතින් කාලය ගොඩාක් ඉතුරු කරගන්න පුලුවන් කම. අනික ගොඩාක් Codes මතක තියාගන්න ඕන වෙන්නේ නෑ. අනිත් කරුන තමා Bootstrap වලින් හදන Pages වල නිමාව ඉස්තරම්. java Script පාවිච්චි කරල අපිට කරගන්න ඕනා කරන සමහර පොඩි පොඩි වැඩ, ඉතා පහසුවෙන් කරගන්නත්, Web Animation කරන්නත් අපිට ඉතා පහසුවෙන් පුලුවන් වීම. පහසුවෙන් responsive web site නිර්මානය කරන්න පුලුවන් වීම. ඔවා තමා ඉතින්.
මොකක්ද එතකොට Responsive web site එකක් කියන්නේ ?
සරලව කිව්වොත් වෙබ් සයිට් එකේ Layout එක Site එකට visit කරන device එකේ Screen Size එකට අනුව වෙනස් වෙනව. එතකොට ඉතින් සයිට් එක Zoom කර කර බලන්න ඕන වෙන්නේ නෑ.
හොදම උදාහරනය මගේ Schoollk Blog එක. පොඩ්ඩක් Try කරල බලන්න මගේ සයිට් එකට Log වෙලා ඉන්නකොට Browser එකේ Width එක ටික ටික අඩුකරගෙන යන්න. ඔයාලට දකින්න පුලුවන් වෙයි site එක එයා විසින්ම තමාගේ හැඩය වෙනස් කරනව.
වාව්!... ඒකොහොමද එහෙම වෙන්නේ.
වැඩියේ හිතන්න යන්න එපා. css වලින් තමා ඒක වෙන්නේ.
හොදයි, මමත් ආසයි Bootstrap ඉගෙනගන්න, මොනාද මම දැනන් ඉන්න ඕන?
Bootstrap ඉගෙන ගන්න ආවට ගියාට බෑ. අඩු තරමේ ඔයාට html සහ css ගැන අවම දැනුමක් වත් තියෙන්න ඕන.
අර කිව්වත් වගේ මම මේ පාර ඔයාලට කියල දෙන්න යන්නේ Bootstrap වලින් වැඩකරන හැටි. ගොඩාක් වෙබ් ඩිසයින් කරන්න ඉගෙන ගන්න අපේ නංගිල මල්ලිලට මේ කියල දෙන පාඩම සෑහෙන්න වටිනව. ඒ නිසා මේ ලිපිය මගහැරගන්න එපා.
ආරම්භයක් විදිහට මම ඔයාලට කියනව Bootstrap වෙබ් පිටුවට යන්න කියල. ඒ ගියාට පස්සේ ඔයාලට ඕනේ නම් Bootstrap Download කරගන්න පුලුවන්. වැරදියට වටහා ගන්න එපා මේක Web Designing කරන තවත් එක Tool එකක් කියල. මෙතනදි අපි Download කරගන්නේ Files වගයක්.
එහෙම නැත්තන් ඔයාලට පුලුවන් මෙයාලගේ CDN (Content Delivery Network) එක භාවිතා කරන්නත්. එහෙම කරනව නම් ඔයාට කරන්න තියෙන්නේ එයාල ඔයාට ලබදෙන codes set එක ගෙඩි පිටින්ම copy කරගෙන Text Editor එකකට දාගෙන codeing පටාන් ගන්න. මේ CDN එක භාවිතා කරන එකේ එක්තරා වාසියක් තියෙනව. ඒ තමා ගොඩාක් Developers ල මේ වෙනකොට CDN එක පාවිච්චි කරනව. ඒ නිසා bootstrap CDN එකක් භාවිතා කරන Web Page එකකට දැනටමත් ඔයා Browser එකෙන් Open කරගෙනම ඉන්න වෙලාවක ඒ CDN එක පාවිච්චි කරන තවත් සයිට් එකක් Open කලොත් එකම CDN එක දෙපාරකට Browser එක ලෝඩ් කරගන්නේ නෑ. මොකද කලින් එකක් දැනටමත් අරගෙන ඉවරනේ. ඒ නිසා මොකද වෙන්නේ ඔයාගේ සයිට් එක ඉක්මනටම Load වේවි.
අවාසියකුත් තියෙනව. මේ වැඩේට Internet ඕන. විශේෂයෙන්ම Develope කරන අවදියක නම් ඔයා ඉන්නේ නිතර අන්තර්ජාලයට ලොග් වෙන්න බැරුව යන්න පුලුවන්. එතකොට ඉතින් ඔක්කොම ඉවරයි. ඒත් Host කලාට පස්සේ නම් අව්ලක් නෑ.
ඒ විදිහට ඔන්න මම මගේ Text Editer එකේ මේ විදිහට ලියා ගන්නව.
Starting Code -->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <!--Start--> </body> </html> |
Grid System
අපි වෙබ්සයිට් එකක් හදන කොට මුලු පේජ් එකම එක එක කලාප වලට බෙදාගන්නව අපේ පහසුව සදහා. මේ වැඩේට අපි "div" Eliment Tag එක පාවිච්චි කරනව. ඔයා දැනටමත් css ගැන දන්නව නම් මේ tag එක නුහුරු දෙයක් නෙමේ. ඉතින් මේ Tag එක පාවිච්චි කරල තමා අපි මුලු පිටුවම පලාත් වලට බෙදා වෙන්කරගන්නේ. මෙහෙම බෙදන කොට එක එක සයිස් වලට බෙදන්න එපැයි. ඒ නිසා සම්මත මිනුමක් පාවිච්චි කරනව. ඒ මිනුමට අනුව මුලු පිටුවම ඉස්සෙල්ල තිරස්ව (වමේ ඉදන් දකුනට) සමාන කලාප 12 කට බෙදනව. ඒ එක කොටසක් තමා අපේ මිනුම් දන්ඩ වෙන්නේ එතැන් සිට. ඉතින් අපි මේකට "span1" කියල කියමු. span එකක් කියන්නේ පරතරයක් ,අපිම හදාගන්න මිනුම් දන්ඩක්. ඔය පොඩිකාලේ අපි වියත් මැන්නේ. ආන්න ඒ වගේ තමා.
ඒ අනුව span1, span4, span6, span8 සහ span12 විදිහට bootstrap තුලදී අපි සම්මතව Grid System එකක් හදාගන්නව. ඔයාට ඔයාගේ වෙබ් පිටුව සමාන කොටස් දෙකකට බෙදාගන්න ඕනනම් මොකක්ද පාවිච්ච කරන span එක. ඔව් span6 කෑලි දෙකක්. එකතකොට තනි කොටසකට බෙදාගන්න ඕනනම් මොකද කරන්නේ. ඔව්, span12 තමා ඒකට සුදුසුම.
කොහොම හරි එක තිරස් අක්ශයකට එන span ගානේ එකතුව අවසානයේ 12 විය යුතුයි. එහෙම නොවුනොත් පිට පනින්න පුලුවන්.
ඉතින් මේ Grid System එක සහිත එක පේලියක් ගත්තම එය Responsive වෙන්න තමා හදල තියෙන්නේ. පිටුව කුඩාකරගෙන කුඩා කරගෙන යනකොට අවස්තා කීපයකදී span කොටස් කැඩි ඉබේම සුදුසු තැන් වලට අනුගත වෙනව. මේ කැඩෙන තැනට අපි කියනව "brakepoint" කියල.
Grid Classes
දැනට අපි පාවිච්චි කරන Screen Sizes ප්‍රධාන වචයෙන් Classes (පංති) හතරකට බෙදනව. මේ වර්ගීකරනය වැදගත් වෙන්නේ අර මම කලින් සදහන් කල brakepoint එකටයි. ඔයා හදන site එක ඉලක්ක වෙන්නේ මොන උපාංගයටද යන්න තීරනය කලාට පස්සේ ඔයාට පුලුවන් කැමති Grid Class එකක් තෝරාගන්න.
Div tag පිලිවෙල
Web Page එක නිර්මානය කරන වෙලාවට අපි Body Tag තුල div tags ඇතුලත් කරල කලාප වලට වෙන් කරන්න පටන් ගන්න ඕන. මේක හිතුමනාපෙට කරන්න බෑ. අපිට මේ සදහා යම්කිසි පිලිවෙලක් තියෙනව. පහත පින්තූරය බලන්න
ඉතින් ඔන්න මම මූලික සිද්ධාන්ත ටික බොහෝදුරට කියල අවසන්. අපි බලමු සරල ආකෘතියක් මේ ඉගෙන ගත්ත දැනුමෙන් නිර්මානය කරන්න සහ එහි Preview එකක් බලමු.
අපි වෙබ්සයිට් එකක් හදන කොට මුලු පේජ් එකම එක එක කලාප වලට බෙදාගන්නව අපේ පහසුව සදහා. මේ වැඩේට අපි "div" Eliment Tag එක පාවිච්චි කරනව. ඔයා දැනටමත් css ගැන දන්නව නම් මේ tag එක නුහුරු දෙයක් නෙමේ. ඉතින් මේ Tag එක පාවිච්චි කරල තමා අපි මුලු පිටුවම පලාත් වලට බෙදා වෙන්කරගන්නේ. මෙහෙම බෙදන කොට එක එක සයිස් වලට බෙදන්න එපැයි. ඒ නිසා සම්මත මිනුමක් පාවිච්චි කරනව. ඒ මිනුමට අනුව මුලු පිටුවම ඉස්සෙල්ල තිරස්ව (වමේ ඉදන් දකුනට) සමාන කලාප 12 කට බෙදනව. ඒ එක කොටසක් තමා අපේ මිනුම් දන්ඩ වෙන්නේ එතැන් සිට. ඉතින් අපි මේකට "span1" කියල කියමු. span එකක් කියන්නේ පරතරයක් ,අපිම හදාගන්න මිනුම් දන්ඩක්. ඔය පොඩිකාලේ අපි වියත් මැන්නේ. ආන්න ඒ වගේ තමා.
ඒ අනුව span1, span4, span6, span8 සහ span12 විදිහට bootstrap තුලදී අපි සම්මතව Grid System එකක් හදාගන්නව. ඔයාට ඔයාගේ වෙබ් පිටුව සමාන කොටස් දෙකකට බෙදාගන්න ඕනනම් මොකක්ද පාවිච්ච කරන span එක. ඔව් span6 කෑලි දෙකක්. එකතකොට තනි කොටසකට බෙදාගන්න ඕනනම් මොකද කරන්නේ. ඔව්, span12 තමා ඒකට සුදුසුම.
කොහොම හරි එක තිරස් අක්ශයකට එන span ගානේ එකතුව අවසානයේ 12 විය යුතුයි. එහෙම නොවුනොත් පිට පනින්න පුලුවන්.
ඉතින් මේ Grid System එක සහිත එක පේලියක් ගත්තම එය Responsive වෙන්න තමා හදල තියෙන්නේ. පිටුව කුඩාකරගෙන කුඩා කරගෙන යනකොට අවස්තා කීපයකදී span කොටස් කැඩි ඉබේම සුදුසු තැන් වලට අනුගත වෙනව. මේ කැඩෙන තැනට අපි කියනව "brakepoint" කියල.
Grid Classes
දැනට අපි පාවිච්චි කරන Screen Sizes ප්‍රධාන වචයෙන් Classes (පංති) හතරකට බෙදනව. මේ වර්ගීකරනය වැදගත් වෙන්නේ අර මම කලින් සදහන් කල brakepoint එකටයි. ඔයා හදන site එක ඉලක්ක වෙන්නේ මොන උපාංගයටද යන්න තීරනය කලාට පස්සේ ඔයාට පුලුවන් කැමති Grid Class එකක් තෝරාගන්න.
Div tag පිලිවෙල
Web Page එක නිර්මානය කරන වෙලාවට අපි Body Tag තුල div tags ඇතුලත් කරල කලාප වලට වෙන් කරන්න පටන් ගන්න ඕන. මේක හිතුමනාපෙට කරන්න බෑ. අපිට මේ සදහා යම්කිසි පිලිවෙලක් තියෙනව. පහත පින්තූරය බලන්න
ඉතින් ඔන්න මම මූලික සිද්ධාන්ත ටික බොහෝදුරට කියල අවසන්. අපි බලමු සරල ආකෘතියක් මේ ඉගෙන ගත්ත දැනුමෙන් නිර්මානය කරන්න සහ එහි Preview එකක් බලමු.
මට උවමනා කරල තියෙනව ප්‍රධාන සමාන කලාප 3කට පලමු තීරුව බෙදාගන්න. ඒ කියන්නේ span4 න් තමා ගහන්න වෙන්නේ. ඒ වෙනුවම මම ලියාපු කේතය තමා මේ පහලින් තියෙන්නේ. ලිපිය මුල ඉදන් මේ වෙනකම් බොහොම උවමනාවෙන් කියෙව්වානම් මේක තේරුම්ගන්න ඔයාට අමාරුවෙන එකක් නෑ. මෙතනදි මම body tag එක ඇතුලේ තියෙන එක විතරක් දාල තියෙන්නේ ඔයාලට තේරුම් ගන්න පහසු වෙන්න
ඒ අනුව ඉස්සෙල්ලම අපි container කියන class එක නිර්මානය කරගන්න ඕන වෙනව. මේ container එක ඇතුල ඉදගෙන තමා අපේ සියලුම නිර්මාන කරගන්නේ. ඔයාලට උඩම තියෙන පින්තූරයෙන් දකින්න පුලුවන්. ඇත්තටම ඒක හරියට Container පෙට්ටියක් වගේ තමා.
ඊලගට අපි "row" කියන class එක හදනව. මේකෙන් අපි බලාපොරොත්තු වෙන්නේ Grupe එකක් හදාගන්න. මේ අවස්තාව හරියට container පෙට්ටියක් ඇතුලේ තියෙන කාඩ් බෝඩ් පෙට්ටියක් වගේ.
ඔන්න row එකක් ඇතුලේ අපිට ඇති තරම් span හදාගන්න පුලුවන්. ඒක හරියට අර පෙට්ටියක් ඇතුලේ තියෙන භාන්ඩයක් වගේ. නිකන් උදාහරනයක් කිව්වේ.
මෙතනදි ඔයාල දකින්න ඇති "col-sm-4" කියන class එකක් තියෙනව. sm කියන්නේ අර මම කලින් සදහන් කල Grid Class එකක්. ඕනේ නම් md හෝ lg යොදාගත්තට වරදක් නෑ. ඊට පස්සේ තියෙන්නේ Grid System එක. මෙතනදි මම 4 යොදාගෙන තියෙන්නේ. ඒ කියන්නේ Span4 තමා මම තෝරාගෙන තියෙන්නේ. හොදා එක row එකකට span 4 යි දාන්න පුලුවන්. ඊට වඩා උනත් පුලුවන්. එතකොට ඒ වැඩිටික ඊලග පේලියට පනිනව.
ඊලගට මම පොඩි style එකක් ලිව්ව මොකද මේ හැදෙන box ඔක්කොම සුදුපාට නිසා අපිට පේන්නේ නෑනේ. අර #737373 වගේ අංකයක් තියෙන්නේ ඒ යොදාගන්න වර්නයට අදාල අංකය. මෙතනදි මම හෙක්සා අගයක් දීල තියෙන්නේ. මම හිතනව ඔයාලට දැන් හොදටම මේ වැඩේ තේරෙනව ඇති කියල.
ඉතින් මේ පාඩමේ අවසානයේ මම ඔයාලට පොඩි ක්‍රියාකාරකමක් දෙනව තනියෙම විසදන්න.
ඉහත Grid System එකට සමාන UI එකක් නිර්මානය කරන්න. කැමති වර්නයක් භාවිතා කල හැක.
මම හිතනව Bootstrap ගැන ලියපු හොදම ලිපියක් වෙන්න ඇති. සෑහෙන්න වෙලා ගියා මේ ලිපිය හදන්න. කමක් නෑ ඒ ඔයාල වෙනුවෙන් නේ. ඔයාලගේ ප්‍රතිචාර මට ගොඩක් වටිනව. ඔයාලට පුලුවන් comment කරන්න fb එකෙන් මාත් එක්ක සෙට් වෙන්න එහෙනම් තවත් පාඩමකින් සෙට් වෙමු.
මම චින්තක
Comments