پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
در آموزش قبل مبحث دکمه ها در بوت استرپ را آموختیم در این بخش میخواهیم دکمه های گروهی را به شما آموزش دهیم.
دکمه های گروهی با کلاس btn-group ایجاد میکنیم.
و دکمه های گروهی عمودی و گروهی افقی و همچنین دکمه های dropdown را ایجاد کنیم.
با عرض سلام خدمت شما علاقه مندان به مبحث برنامه نویسی و طراحی وب سایت
در این آموزش با مبحث دکمه های گروهی در بوت استرپ همراه سایت آموزشی پرنیان طرح باشید.
دکمه های گروهی (Button Groups) :
در بوت استرپ این ویژگی وجود دارد که میتوانید چند دکمه را باهم در یک خط را به صورت یک گروه از دکمه ها ایجاد کنید.
برای ایجاد دکمه های گروهی در یک عنصر <div> باید از کلاس btn-group استفاده کنید.
برای توضیح بیشتر مثال زیر را ببینید:
[php]
<div class=”container”>
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<button type=”button” class=”btn btn-primary”>Sony</button>
</div>
</div>
[/php]
تصویر زیر خروجی کدهای بالا است :
سایز دکمه ها (Button Group Sizes) :
به جای اینکه اندازه ی دکمه ها را به صورت مقدار وارد کنیم میتوانیم از کلاس های که دکمه های با اندازه btn-group-lg برای گروه دکمه های بزرگ و از کلاس btn-button-sm برای گروه دکمه های کوچیک استفاده کنیم.
این مثال را ببینید:
[php]
<div class=”container”>
<h2>Button Groups Sizes</h2>
<p>Add class .btn-group-* to size all buttons in a button group.</p>
<h3>Large Buttons:</h3>
<div class=”btn-group btn-group-lg”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<button type=”button” class=”btn btn-primary”>Sony</button>
</div>
<h3>Default Buttons:</h3>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<button type=”button” class=”btn btn-primary”>Sony</button>
</div>
<h3>Small Buttons:</h3>
<div class=”btn-group btn-group-sm”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<button type=”button” class=”btn btn-primary”>Sony</button>
</div>
</div>
[/php]
خروجی کلاس های سایز دکمه ها :
دکمه های گروهی عمودی (Vertical Button Groups):
شما همچنین میتوانید دکمه های گروهی عمودی نیز ایجاد کنید.
کافیست از کلاس btn-vertical-group در آن المان استفاده کنید.
مثال :
[php]
<div class=”container”>
<h2>Vertical Button Group</h2>
<p>Use the .btn-group-vertical class to create a vertical button group:</p>
<div class=”btn-group-vertical”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<button type=”button” class=”btn btn-primary”>Sony</button>
</div>
</div>
[/php]
دکمه های گروهی عمودی:
دکمه های گروهی تو در تو و منو های کشویی (Nesting & Dropdown menus):
میتوان دکمه های گروهی کشویی را با به کار بردن کلاس droupdown-menu ایجاد کرد برای اینکار به قطعه کد زیر توجه کنید.
مثال:
[php]
<div class=”container”>
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create dropdown menus:</p>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Sony
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Tablet</a>
<a class=”dropdown-item” href=”#”>Smartphone</a>
</div>
</div>
</div>
</div>
[/php]
و دکمه های مثل تصویر زیر را به وجود آورید:
دکمه های کشویی مجزا (Split Button Dropdowns):
برای ایجاد دکمه های کشویی به صورت مجزا میتوانید مثل قطعه کد زیر عمل کنید.
مثال:
[php]
<div class=”container”>
<h2>Split Buttons</h2>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>Sony</button>
<button type=”button” class=”btn btn-primary dropdown-toggle dropdown-toggle-split” data-toggle=”dropdown”>
<span class=”caret”></span>
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Tablet</a>
<a class=”dropdown-item” href=”#”>Smartphone</a>
</div>
</div>
</div>
[/php]
تصویر را ببینید:
دکمه های گروهی عمودی (Vertical Dropdown Button):
همچنین میتوانید دکمه های گروهی را به صورت کشویی ایجاد کنید.
[php]
<div class=”container”>
<h2>Vertical Button Group with Dropdown</h2>
<div class=”btn-group-vertical”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Sony
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Tablet</a>
<a class=”dropdown-item” href=”#”>Smartphone</a>
</div>
</div>
</div>
</div>
[/php]
مثل تصویر زیر:
گروه های دکمه در کنار هم (Button Groups Slide By Slide):
گروه های دکمه به صورت پیش فرض در یک خط قرار میگیرند هنگامی که شما یک گروه دیگر نیز ایجاد میکنید در کنار گروه دکمه ی قبل قرار در همان خط قرار میگیرد.
این مثال را ببینید:
[php]
<div class=”container”>
<h2>Button Group</h2>
<p>Button groups are “inline” by default, which makes them appear side by side when you have multiple groups:</p>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<button type=”button” class=”btn btn-primary”>Sony</button>
</div>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>BMW</button>
<button type=”button” class=”btn btn-primary”>Mercedes</button>
<button type=”button” class=”btn btn-primary”>Volvo</button>
</div>
</div>
[/php]
گروه های دکمه همانند تصویر زیر در یک خط قرار میگیرند:
