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

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Article By: Protap Chandra

বুটস্ট্র্যাপের সাহায্যে বাটনের একটি সিরিজকে একটি লাইনে একত্রে গ্রুপিং করে সাজানো যায়। একে বাটন গ্রুপ বলা হয়। বাটন গ্রুপ তৈরী করতে <div> element এর সাথে .btn-group ক্লাস (class) ব্যবহার করতে হবে। নিচের উদাহরণ থেকে বিষয়টি পরিষ্কার ধারণা পাওয়া যাবে।

<div class="btn-group">
<button type="button" class="btn btn-primary">অ্যাপল</button>
<button type="button" class="btn btn-primary">স্যামসাং</button>
<button type="button" class="btn btn-primary">সনি</button>
</div>

প্রতিটি বাটনের আলাদা আলাদা সাইজ নির্ধারণ করে দেয়ার পরিবর্তে সবগুলো বাটনের সাইজ একসাথে নির্ধারণ করতে .btn-group-* ক্লাস ব্যবহার করা ভালো। যেমন:

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">অ্যাপল</button>
<button type="button" class="btn btn-primary">স্যামসাং</button>
<button type="button" class="btn btn-primary">সনি</button>
</div>

এখানে btn-group-lg ক্লাস ব্যবহার করার কারণে বাটনগুলোর সাইজ আকারে বড় হবে। ছোট বাটন ব্যবহার করতে চাইলে btn-group-xs ব্যবহার করুন।

Vertical Button Groups (ভার্টিকল বা উল্লম্ব বাটন গ্রুপ)

বুটস্ট্র্যাপ ভার্টিকল বাটন গ্রুপও সমর্থন করে। ভার্টিকল বাটন গ্রুপ তৈরী করতে .btn-group-vertical ক্লাস ব্যবহার করতে হবে। যেমন:

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">অ্যাপল</button>
<button type="button" class="btn btn-primary">স্যামসাং</button>
<button type="button" class="btn btn-primary">সনি</button>
</div>

Nesting (নেস্টিং) Button Groups এবং Drop Down (ড্রপডাউন) Menus
বুটস্ট্যাপে নেস্টিং বাটন গ্রুপ ও ড্রপডাউন মেনু তৈরী করতে নিচের উদাহরণটি লক্ষ্য করুন।

<div class="btn-group">
<button type="button" class="btn btn-primary">অ্যাপল</button>
<button type="button" class="btn btn-primary">স্যামসাং</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
সনি <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">ট্যাবলেট</a></li>
<li><a href="#">স্মার্টফোন</a></li>
</ul>
</div>
</div>

উপরের উদাহরণে অ্যাপল, স্যামসাং ও সনির বাটনগ্রুপে সনির সঙ্গে একটি ড্রপডাউন মেনু তৈরী হবে। সেই মেনুর আইটেম হবে ট্যাবলেট ও স্মার্টফোন।
----------------
Original URL:
http://www.w3schools.com/bootstrap/bootstrap_button_groups.asp