Bootstrap Grid System එක

Share with your friends!

කලින් post කීපයකම bootstrap ගැන කිව්වනේ.. මේ කියන්න හදන්නේ bootstrap වල තියන තවත් වැදගත්ම දෙයක් ගැන. Responsive Design වලදී වටිනම දෙයක් තමයි Grid System එක. මේ Grid System එක කොහොමද use කරන්නේ කියලා තමයි මේ post එකේ විස්තර කරන්නේ.

මේකෙදි page layout එක හදන්නේ Rows, Columns use කරලා.

  1. Rows තියෙන්න ඕන .container හරි .container-fluid හරි ඇතුලෙන්. (fixed-width grid layout එකක්  full-width layout එකක් කරන එක තමයි container-fluid එකෙන් කරන්නේ)

[code language=”html”]

<div class="container">

<div class="row">
/* content here */
</div>

</div>

[/code]

[code language=”html”]

<div class="container-fluid">

<div class="row">
/* content here */
</div>

</div>

[/code]

2. පහල තියනවා වගේ column set එකක් හදාගන්න row class එක use කරනවා.

row

3. Rows ඇතුලේ col class එක තියන div එකක් තියෙන්න ඕන. ඒක ඇතුලේ තමයි use කරන්න ඕන content එක තියෙන්න ඕන. 

[code language=”html”]

<div class="container">

<div class="row">

<div class="col-lg-6">
</div>

<div class="col-lg-6">
</div>

</div>

[/code]

4. Bootstrap වලදී Row එකක් column 12කට වෙන් කරලා තියනවා.

row col

මේ 12 අපිට අවශ්‍ය විදියට කොටස් වලට වෙන් කරගන්න පුළුවන්. ඒ වගේම එක එක screen size වලට වෙන වෙනම css classes තියනවා. 3. example එකේ තියන විදියට row එක 2ට බෙදලා තියෙන්නේ එක පැත්තකට size එක 6ක් වෙන විදියට. මේ තියෙන්නේ bootstrap වල grid system එක වෙනස් වෙන්නේ කොහොමද කියලා.

grid chrt

දැන් මේක පැහැදිලි කරගමු. Responsive Design එක phone, tab, desktop, large device වලට match වෙන්න ඕනනේ. ඒ හැම එකටම ගැලපෙන විදියට grid system එක හදලා තියනවා. එක එක size වලට වෙන් වෙනම class හදලා තියනවා css වලට.

  • mobile – .col-xs-
  • tablet – .col-sm-
  • desktop – .col-md-
  • large – .col-lg-

දැන් බලමු මේවා use කරලා simple html code එකක් ලියන්නේ කොහොමද කියලා.

Webpage එක කොටස් 2කට වෙන් කරන්න col-lg-6 2ක් use කරලා කරගන්න පුළුවන්.

[code language=”html”]

<div class="container">

<div class="row">

<div class="col-lg-6"> col-lg-6
</div>;

<div class="col-lg-6"> col-lg-6
</div>

</div>

[/code]

පැහැදිලි වෙන්න background color එකක් දාලා තියෙන්නේ. ඒක code එකේ නැහැ.im

මේ විදියට කැමති size වලින් හදාගන්න පුළුවන් grid එක.

මේ example එක බලන්න.

මේකේ තියන විදයට කලින් විදියට කොටස් 2කට වෙන් කරලා input field 2ක් add කරලා තියෙන්නේ. නමුත් මේ fields, col-lg-6 ප්‍රමාණයක් වෙනකන් width එකක් ගන්නවා. අපිට ඕන නම් width එක වෙනස් කරන්න ඒක කරන්න වෙන්නේ col-lg-# වෙනස් කරලා. col-lg-6 වෙනුවට col-lg-3  වගේ දුන්නා නම් width එක අඩු වෙනවා. මේ example එක බලන්න. මේකෙදි 2ට බෙදිලා තිබුන කොටස් 2 left-align වෙලා තියනවා. එහෙම වෙන්නේ අපි col-lg-3 use කරන නිසා col-lg-3 2කින් col-lg-6ක් වෙනවා. නමුත් සම්පුර්ණ කොටස් 12 නිසා තව 6ක් ඉතුරුයි. මේ නිසා තමයි input field 2 left-align වෙන්නේ. මේකට දීලා තියන විසඳුම තමයි col-lg-offset-x කියන්නේ.

[code language=”html”]

<div class="container">

<div class="row">

<div class="<strong>col-lg-offset-3</strong> col-lg-3">
<input type="text" class="form-control">
</div>

<div class="col-lg-3">
<input type="text" class="form-control">
</div>

</div>

[/code]

මෙතනින් working example එකක් බලන්න පුළුවන්.

මේ columns ගැලපෙන විදියට use කරලා UI Structure එක හදාගන්න පුළුවන්. ඒ වගේම මේ grid එක responsive නිසා කරදර වෙන්න දෙයකුත් නැහැ. 😀

 

Share with your friends!

1 comment

Leave A Comment

shares