Web Site with Twitter Bootstrap – 3

Share with your friends!

ගොඩක් දවසකට පස්සේ තමයි Bootstrap post එකක් ලියන්නේ. මේ තියෙන්නේ කලින් ලිව්ව පොස්ට් දෙක. Web Site with Twitter Bootstrap – 1, Web Site with Twitter Bootstrap – 2. අන්තිමට විස්තර කරලා තියෙන්නේ buttons ගැන නිසා එතනින් පටන් ගන්නම්. Bootstrap වලින් දීලා තියන තවත් වැදගත් Feature එකක් තමයි Button Group කියන්නේ.මේ ගැන විස්තර කරන්න කලින් කියන්න ඕන වැදගත් දෙයක් තියනවා. ඒක තමයි Glyphicons කියන්නේ. මේ විදියට නම් කරලා තියෙන්නේ Bootstrap වල Icon set එක. මේ ලින්ක් එකෙන් ගිහින් බලන්න පුළුවන් තියන Icons මොනවද කියලා. භාවිතා වෙන හැම වර්ගයේම Icon තියනවා. මේකෙන් සමහර ඒවා වැඩ කරන්නේ Bootstrap අලුත් version එක එක්ක විතරයි. මේ පොස්ට් එක ලියන වෙලාවේ 3.3.2 කියන version එක තියෙන්නේ.

මේ තියෙන්නේ ඒවා වලින් ටිකක්. දැන් බලමු මේවා use කරන්නේ කොහොමද කියලා.

[code language=”html”]
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
[/code]

මේකෙන් ලැබෙන්නේ search icon එක. මේ code එක ඕනෑම තැනක use කරන්න පුළුවන් Bootstrap Design එක ඇතුලේ.ඒ වෙනුවට view වෙන්නේ Icon එක.

මේ තියෙන්නේ button එකට text එකට අමතරව glyphicon එකක් දාන විදිය.

[code language=”html”]
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span> Star
</button>
[/code]

මේ තියෙන්නේ output එක. කලින් පොස්ට් එකේ විස්තර කරලා තියන විදියට button tag එකේ class එකෙන් button එකේ size, color වෙනස් කරගන්න පුළුවන්.

මේ තියෙන්නේ තව උදාහරණයක්.

[code language=”html”]
<button type="button" class="btn btn-danger btn-lg">
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Add Heart
</button>
[/code]

මේ තියෙන්නේ output එක.

Button වලට විතරක් නෙමෙයි,  Bootstrap වල තියන හැම Component ඒකත් එක්කම වගේ use කරන්න පුළුවන් ගැලපෙන විදියට.

[code language=”html”]
<div class="alert alert-success" role="alert">
<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
You Have Logged Successfully.
</div>
[/code]

මේ විදියේ output එකක් ලැබෙන්නේ. මම මෙතැනදී width එකට CSS Style එකක් ලියලා තියනවා.

මීළඟ පොස්ට් එකෙන්  Button Group, Advanced Buttons ගැන විස්තර කරන්නම්. පැහැදිලි නැති දෙයක් තියනවා නම් Comment කරලා අහන්න. ලිපිය ගැන අදහසක් දුන්නොත් තව අලුත් දේවල් එකතු කරගන්න පුළුවන්.

Web Site with Twitter Bootstrap – 4

Share with your friends!