লিখেছেন সুদীপ্ত সাহা
গ্লাইফাইকনস
গ্লাইফাইকনের সেটে বুটস্ট্র্যাপের ২০০ আইকন রয়েছে।
টেক্সট, বাটন, টুলবার, নেভিগেশন, ফর্ম এরকম বিভিন্ন জায়গায় গ্লাইফাইকন ব্যবহার করা হয়।
কিছু গ্লাইফাইকনের উদাহরণ হলঃ
গ্লাইফাইকনের সিনট্যাক্স
গ্লাইফাইকন সেট করার জন্য নিচের সিনট্যাক্স ব্যবহার করতে হয়ঃ
<span class="glyphicon glyphicon-name"></span>
সিনট্যাক্সের নেম এর অংশে অবশ্যই একটি সঠিক গ্লাইফাইকনের নাম দিতে হবে।
গ্লাইফাইকনের উদাহরণঃ
গ্লাইফাইকনকে বিভিন্নভাবে ব্যবহার করার পদ্ধতি নিচের উদাহরণে দেখানো হলঃ
উদাহরণঃ
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>Envelope icon as a link: <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> </p> <p>Search icon: <span class="glyphicon glyphicon-search"></span></p> <p>Search icon on a button: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Search icon on a styled button: <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Print icon: <span class="glyphicon glyphicon-print"></span></p> <p>Print icon on a styled link button: <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a> </p>
ব্যাজ
কোন একটি লিঙ্কে বর্তমানে কতগুলো নতুন আইটেম বিদ্যমান আছে তা বোঝানোর জন্য ব্যাজ ব্যবহার করা হয়। যেমনঃ
এখানে (5, 10 এবং 2) এই নাম্বারগুলো হচ্ছে ব্যাজ।
ব্যাজ তৈরির জন্য <span> ইলিমেন্টের ক্লাস .badge দিতে হয়ঃ
উদাহরণঃ
<a href="#">News <span class="badge">5</span></a><br> <a href="#">Comments <span class="badge">10</span></a><br> <a href="#">Updates <span class="badge">2</span></a>
অন্য কোন ইলিমেন্টের ভেতরেও ব্যাজ ব্যবহার করা যায়, যেমন বাটনের ভেতরে ব্যাজ ব্যবহার করাঃ
কিভাবে একটি বাটনের ভেতরে ব্যাজ তৈরি করতে হয় তা নিচের উদাহরণে দেখানো হলঃ
উদাহরণঃ
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span> </button>
লেবেল
লেবেল কোন কিছু সম্পর্কে অতিরিক্ত তথ্য প্রদান করার জন্য ব্যবহৃত হয় :
.label ক্লাসটি <span> এলিমেন্ট এর ভিতরে ৬ টি প্রাসঙ্গিক ক্লাস .label-default, .label-primary, .label-success, .label-info, .label-warning বা .label-danger এর যেকোনটির সাথে ব্যবহার করা যাবে:
উদাহরণ :
<h1>Example <span class="label label-default">New</span></h1> <h2>Example <span class="label label-default">New</span></h2> <h3>Example <span class="label label-default">New</span></h3> <h4>Example <span class="label label-default">New</span></h4> <h5>Example <span class="label label-default">New</span></h5> <h6>Example <span class="label label-default">New</span></h6>
নিচের উদাহরণটিতে সকল প্রাসঙ্গিক ক্লাস ব্যবহারের ফলাফল দেখাচ্ছে:
এর উদাহরণ :
<span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-info">Info Label</span> <span class="label label-warning">Warning Label</span> <span class="label label-danger">Danger Label</span>
