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

[saeed410]

آموزش بوت استرپ و طراحی واکنش گرا Button Group : با استفاده از Button Group در بوت استرپ میتوانید چندین دکمه را در یک خط در کنار هم قرار دهید. این ویژگی به ویژه زمانی مفید مواقع خواهد شد که بخواهید در طراحی سایت (http://Sypna.ir) خود چندین دکمه را در یک چیدمان متناسب با یکدیگر در صفحه وب قرار دهید. همچنین با استفاده از پلاگین های دکمه ها که توسط بوت استرپ فراهم شده اند میتوانید امکانات و جلوه های بیشتری را به طراحی سایت (http://Sypna.ir) خود بدهید. این پلاگین در بخش پلاگین های بوت استرپ مورد بحث و بررسی قرار خواهد گرفت. جدول زیر کلاسهای مهم فراهم شده توسط بوت استرپ برای استفاده از Button Group را نشان میدهد:

http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootStrapButtonGroups/Bootstrap-Bottun-Group-Classes.JPG
گروه بندی ساده دکمه ها در بوت استرپ : مثال زیر روش استفاده از کلاس btn-group را نشان میدهد :

<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>

تصویر کد بالا :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootStrapButtonGroups/Bootstrap-Bottun-Group-Classes-demo1.JPG
گروه بندی چنتایی دکمه ها یا Button Toolbar در بوت استرپ : در مثال زیر با استفاده از کلاس btn-toolbar تعدادی از دکمه ها را باهم گروه بندی میکنیم و از بقیه مجزا میکنیم:

<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>
تصویر کد بالا :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootStrapButtonGroups/Bootstrap-Bottun-Group-Classes-Toolbar-Demo.JPG
تغییر اندازه گروهی دکمه ها در بوت استرپ : با استفاده از کلاس btn-group-(lg-sm-md-xs میتوانید اندازه های مختلف را به دکمه ها اعمال کنید مثال :

<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>
تصویر کد بالا :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootStrapButtonGroups/Bootstrap-Bottun-Group-Sizing-Demo.JPG
دکمه های تودرتو (Nesting) در بوت استرپ : برای ایجاد دکمه های تودرتو میتوانید با قرار دادن کلاس btn-group داخل یک کلاس btn-group دیگر ، دکمه های تودرتو ایجاد کنید .مثال :

<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>

تصویر کد بالا :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootStrapButtonGroups/Bootstrap-Bottun-Group-Nesting-Demo.JPG
ایجاد گروهی دکمه های عمودی در بوت استرپ : برای ایجاد گروه دکمه های عمودی از کلاس btn-group-vertical استفاده کنید. مثال :

<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>
تصویر کدبالا :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/BootStrapButtonGroups/Bootstrap-Bottun-Group-Vertical-Demo.JPG
در آموزش بعد با دکمه های آبشاری یا DropDown در بوت استرپ آشنا خواهیم شد.
در گروه: کامپوننت های لایه بندی (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/9/%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
منبع: طراحی سایت (http://Sypna.ir)