বুটস্ট্র্যাপ বাটন (Bootstrap Buttons)

Button স্টাইল

Bootstrap এ সাতটি স্টাইলের button ব্যবহৃত হয়, যথা:

এই সাতটি স্টাইলের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

  • Default - .btn-default
  • Primary - .btn-primary
  • Success - .btn-success
  • Info - .btn-info
  • Warning - .btn-warning
  • Danger - .btn-danger
  • Link - .btn-link

 

নিম্নোক্ত উদাহরণে ভিন্ন ভিন্ন button এর স্টা্ইলের দেখানো হলো:


<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

 

button এর class গুলো সাধারণত <a>, </a><button><a> কিংবা <input type="text" /> এলিমেন্টে যোগ করা হয়। যেমন:


<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

 

কেন <a> এলিমেন্টের href এট্রিবিউটে # ব্যবহার করা হয়েছে?

যেহেতু যোগ করার মতো আমাদের হাতে এখনো কোন link নেই এবং লিংক না থাকার কারণে যে "404" message দেখানো হয় সেটাও দেখাতে চাই না কাজেই এখানে # ব্যবহার করা হয়েছে। তবে বাস্তব ক্ষেত্রে অবশ্যই # এর পরিবর্তে একটি লিংক যোগ করতে হবে।

 

বাটনের আকার

Bootstrap এ চারটি সাইজের Button ব্যবহৃত হয়, যথা:

Button এর এই চারটি সাইজের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

  • Large - .btn-lg
  • Medium - .btn-md
  • Small- .btn-sm
  • XSmall - .btn-xs

নিম্নোক্ত উদাহরণে Button এর ভিন্ন ভিন্ন চারটি সাইজ দেখানো হলো:


<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

 

Block Level Buttons

parent element এর পুরো width জুড়ে Button তৈরি করাকে Block Level Buttons বলা হয়।

Block Level Buttons তৈরি করতে .btn-block class টি যোগ করা হয়। যেমন:


<button type="button" class="btn btn-primary btn-block">Button 1</button>

 

Active/Disabled Buttons

কোনো Button এর status এমনভাবে set করা যেতে পারে যেন তা active (যা active রয়েছে এমন) বা disabled (যা Click করা যায় না এমন) হতে পারে।

active Button তৈরি করার জন্য .active class এবং disabled Button তৈরি করার জন্য .disabled class যোগ করতে হয়। যেমন:


<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

 

Permanent link to this article: http://bangla.sitestree.com/bootstrap-buttons/