Boostrap එන්න කලින් ගොඩක් අය වෙබ් එක එලයින් කරේ ටේබල් ගහලා ඒකේ div හදලා සැහෙන CSS වැඩ ගොඩක් කරලා. නමුත් දැන් මේකත් එක්ක සියල්ල පහසු වෙලා තියෙනවා. Bootstrap වල තියෙනවා Layout නැතිනම් grid කියලා සංකල්පයක්. මේ සංකල්පය අනුව තමා වෙබ් පිටුවක ඒ ඒ අයිතම අපි දාන්නේ.  ඒකට අපිට උපයෝගි කරගන්න වෙනවා CSS සහා JQuery  වලින් එන classes. 

Bootstrap මගින් දෙන media queries ( ඒ කියන්නේ mobile device වල දී වෙබ් එක පෙන්වීමට දෙන සැකසුම්) වෙනුවට අපිට අවශ්‍ය නම් අපේ ඕන කරන සැකසුම් ඇතුලත් කරගන්න පුළුවන්.

දැන් මේ Layout වල  සැකසිලා තියෙන්නේ containers, rows, columns ආදියෙන් ඉතින් මේ එක row එකක් කොටස් සමාන ප්‍රමාණයේ columns 12කට බෙදලා තියෙන්නේ. මේ  columns බෙදීම් කරන්නේ div එකේ class එක අනුව. පහත උදාහරණය බලන්න  කෝ

<div  class="row">
	<div  class="class=col">One of three columns</div>
	<div  class="class=col">One of three columns</div>
	<div  class="class=col">One of three columns</div>
</div>
Grid System example 01 Bootstrap
Grid System example 01

දැන් අපි බලමු මේ layout එක විවිධ ප්‍රමාණයේ වින්ඩෝ වල දී වැඩ කරන විදිය


Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behavior
Horizontal at all timesCollapsed to start, horizontal above breakpoints
Max container widthNone (auto)540px720px960px1140px
Class prefix
.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns
12
Gutter width30px (15px on each side of a column)
Nestable
Yes
Offsets
Yes
Column orderingYes

අදහස් දක්වන්න

අදහස්

Share your vote!


  • Fascinated
  • Happy
  • Sad
  • Angry
  • Bored
  • Afraid
‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,

ඔබත් දැන්ම ගීක් කෙනෙක් වෙන්න!

You have successfully subscribed to the Geek

There was an error while trying to send your request. Please try again.

SL Geek LK will use the information you provide on this form to be in touch with you and to provide updates and marketing.

ස්මාර්ට් ගීක් කෙනෙක් වෙන්න! ගීක් මොබයිල් ඇප් එක දාගන්න.

Download Geek App now - 4Mb Only