دکمه های گروهی (Button groups) در بوت استرپ

بهاره حسنیبهاره حسنی
131 بازدید

در آموزش قبل مبحث دکمه ها در بوت استرپ را آموختیم در این بخش میخواهیم دکمه های گروهی را به شما آموزش دهیم.

دکمه های گروهی با کلاس 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]

تصویر زیر خروجی کدهای بالا است :

btn-group

سایز دکمه ها (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]

خروجی کلاس های سایز دکمه ها :

btn group size

دکمه های گروهی عمودی (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]

دکمه های گروهی عمودی:

vertical button group

دکمه های گروهی تو در تو و منو های کشویی (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]

تصویر را ببینید:

split button

دکمه های گروهی عمودی (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]

مثل تصویر زیر:

vertical dropdown

گروه های دکمه در کنار هم (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]

گروه های دکمه همانند تصویر زیر در یک خط قرار میگیرند:

inline buttons

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

21+ محصولات
374+ سفارشات تکمیل شده
1860+ کاربران
396+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت