Button Groups در بوت استرپ

[saeed410]

[h=1]آموزش بوت استرپ و طراحی واکنش گرا Button Group :[/h] با استفاده از Button Group در بوت استرپ میتوانید چندین دکمه را در یک خط در کنار هم قرار دهید. این ویژگی به ویژه زمانی مفید مواقع خواهد شد که بخواهید در طراحی سایت خود چندین دکمه را در یک چیدمان متناسب با یکدیگر در صفحه وب قرار دهید. همچنین با استفاده از پلاگین های دکمه ها که توسط بوت استرپ فراهم شده اند میتوانید امکانات و جلوه های بیشتری را به طراحی سایت خود بدهید. این پلاگین در بخش پلاگین های بوت استرپ مورد بحث و بررسی قرار خواهد گرفت. جدول زیر کلاسهای مهم فراهم شده توسط بوت استرپ برای استفاده از Button Group را نشان میدهد:

[h=2]گروه بندی ساده دکمه ها در بوت استرپ :[/h] مثال زیر روش استفاده از کلاس btn-group را نشان میدهد :
[HTMLS]

<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>

​

[/HTMLS] تصویر کد بالا :

[h=2]گروه بندی چنتایی دکمه ها یا Button Toolbar در بوت استرپ :[/h] در مثال زیر با استفاده از کلاس btn-toolbar تعدادی از دکمه ها را باهم گروه بندی میکنیم و از بقیه مجزا میکنیم:
[HTMLS]

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Button 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class="btn btn-default">Button 8</button>
<button type="button" class="btn btn-default">Button 9</button>
</div>
</div>
​

[/HTMLS]
تصویر کد بالا :

[h=2]تغییر اندازه گروهی دکمه ها در بوت استرپ :[/h] با استفاده از کلاس btn-group-(lg-sm-md-xs میتوانید اندازه های مختلف را به دکمه ها اعمال کنید مثال :
[HTMLS]

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Button 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class="btn btn-default">Button 8</button>
<button type="button" class="btn btn-default">Button 9</button>
</div>
​

[/HTMLS]
تصویر کد بالا :

[h=2]دکمه های تودرتو (Nesting) در بوت استرپ :[/h] برای ایجاد دکمه های تودرتو میتوانید با قرار دادن کلاس btn-group داخل یک کلاس btn-group دیگر ، دکمه های تودرتو ایجاد کنید .مثال :
[HTMLS]

<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link 1</a></li>
<li><a href="#">Dropdown link 2</a></li>
</ul>
</div>
</div>

​

[/HTMLS]
تصویر کد بالا :

[h=2]ایجاد گروهی دکمه های عمودی در بوت استرپ :[/h] برای ایجاد گروه دکمه های عمودی از کلاس btn-group-vertical استفاده کنید. مثال :
[HTMLS]

<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>

<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link 1</a></li>
<li><a href="#">Dropdown link 2</a></li>
</ul>
</div>
</div>
​

[/HTMLS]
تصویر کدبالا :

در آموزش بعد با دکمه های آبشاری یا DropDown در بوت استرپ آشنا خواهیم شد.
در گروه: کامپوننت های لایه بندی
منبع: طراحی سایت