Web Site with Twitter Bootstrap – 2

Share with your friends!

කලින් කිව්ව විදියට මේ තියෙන්නේ Twitter Bootstrap ගැන ලියන දෙවැනි පොස්ට් එක.කලින් පොස්ට් එක බැලුවේ නැත්තන් මෙතනින් බලන්න.අද ඉදන් කියන්නේ twitter Bootstrap වලින් වැඩ කරන විදිය.පැහැදිලි මදි කියලා කීපදෙනෙක් කිව්වා, මේකෙදි එයාලටත් පැහැදිලි වෙයි.කලිනුත් කිව්වා වගේ සාමාන්‍යයෙන් හදන web page එකකට වැඩිය ගොඩක් වාසි තියන නිසා කරදරයක් නැතිව designing කරන්න පුළුවන්.ඒ වගේම දැන් තියන site එකක් upgrade කරන්න උනත් පුළුවන්.කියන්න දේවල් ගොඩක් තියන නිසා එකින් එක කිව්වොත් හොදයි කියලා හිතෙනවා.

buttons වලින් පටන් ගමු.

සාමාන්‍යයෙන් button එකක් add කරන්නේ මේ විදියට.

<button class = "btn btn-default" type="button">Click Me</button>

<input type = "submit" value = "Click Me"/>

<a href = "#" class = "btn btn-danger btn-lg btn-block disabled">Click Me</a>

නමුත් bootstrap එක්ක වැඩ කරද්දී කරන්නේ button එකට style එකක් add කරගන්න එක.body tag එක ඇතුලේ පහල code දාලා බලන්න.කලින් පොස්ට් එකේ විදියට boostrap.min.js, bootstrap.css, jquery.js කියන file add කරලා තියෙන්න ඕන.

<button class = "btn btn-default" type="button">Click Me</button>

<button class = "btn btn-success" type="button">Click Me</button>

<button class = "btn btn-primary" type="button">Click Me</button>

<button class = "btn btn-warning "type="button">Click Me</button>

<button class = "btn btn-info" type="button">Click Me</button>

<button class = "btn btn-danger" type="button">Click Me</button>

මෙතනින් බලන්න පුළුවන් button කොහොමද තියෙන්නේ කියලා.මෙතනින් source file එක ගන්න පුළුවන්.

මේකෙදි වෙන්නේ .btn / .btn-default  වගේ bootstrap වල pre-build classes use කරන එක.ඒවා use කරලා තමයි මේ අලුත් පෙනුම දෙන styles add කරන්නේ.ඒ වගේම button size තියනවා.large, small, extra small, default කියන්නේ ඒ button types.තව block button කියලා එකකුත් තියනවා.

<button class = "btn btn-primary btn-lg" type="button">Click Me</button>

<button class = "btn btn-primary btn-small" type="button">Click Me</button>

<button class = "btn btn-primary btn-ms" type="button">Click Me</button>

<button class = "btn btn-primary btn-lg btn-block" type="button">Click Me</button>

මෙතනින් බලන්න පුළුවන් මේවා කොහොමද visible වෙන්නේ කියලා.මෙතන source එක තියනවා.කලින් විස්තර කරලා තියන විදියට මේ දේවල් එකට combine කරලා use කරන්න පුළුවන්.

button එකක් disable කරන්න ඕන නම් class attribute එකට disabled කියන එක add කරන්න ඕන. .disabled කියන class එකෙන් තමයි මේ වැඩේ කරන්නේ.

<button class = "btn btn-danger btn-lg btn-block disabled" type="button">Click Me</button>

buttons ගැන basic කියන්න තියෙන්නේ නම් මේ දේවල්.මීලගට button එකක advanced uses බලමු.

Web Site with Twitter Bootstrap – 3

Share with your friends!