دکمه های گروهی در بوت استرپ

هدایت عباسی آموزش بوت استرپ

در این قسمت با دکمه های گروهی در بوت استرپ 4 و 3 آشنا می شوید. با کلاس btn-group و دکمه های گروهی افقی ، دکمه های گروهی عمودی ، دکمه های dropdown و غیره همراه با مثال آشنا می شوید.

کلاس btn-group

در این بخش از آموزش بوت استرپ از تاپ سایت 98 به سراغ دکمه های گروهی افقی می رویم.

کلاس btn-group برای ساخت دکمه گروهی در بوت استرپ 4 و 3 بکار می رود.

بوت استرپ 4 به شما امکان می دهد مجموعه ای از دکمه ها را با هم (در یک خط واحد) گروه بندی کنید.

ابتدا یک div با کلاس btn-group باز می کنید و دکمه ها را در آن قرار می دهید و سپس آن را می بندید.

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

کد زیر را می توانید پس از فراخوانی فایل های بوت استرپ تست نمایید.

<div class="container">
<h1>TopSite98</h1>
<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>

سایز دکمه های گروهی

حال به سایز دکمه های گروهی در بوت استرپ (bootstrap) می رسیم.

دکمه های گروهی می توانند کوچک ، متوسط و بزرگ باشند.

برای سایز کوچک کلاس btn-group-sm را قرار می دهیم.

برای دکمه های متوسط از کلاس btn-group-md را استفاده می کنیم.

برای سایز بزرگ کلاس btn-group-lg را قرار می دهیم.

حالت پیش فرض دکمه های گروهی در بوت استرپ btn-group-md میباشد که حالت متوسط است.

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

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

برای ساخت و ایجاد دکمه های گروهی عمودی در بوت استرپ 4 می توانید از کلاس btn-group-vertical استفاده نمایید.

برای دکمه های عمودی می توانید سایز را مشخص کنید حالت پیش فرض md است.

در زیر یک مثال از دکمه های عمودی در بوت استرپ را مشاهده میکنید.

کد بوت استرپ زیر تست شده میباشد.

<div class="container">
<h1>TopSite98</h1>
<div class="btn-group-vertical">
<button type="button" class="btn btn-success">html</button>
<button type="button" class="btn btn-success">css</button>
<button type="button" class="btn btn-success">jquery</button>
</div>
</div>

دکمه dropdown در بوت استرپ

در این بخش با دکمه dropdown آشنا می شوید.

برای دکمه می توانید منوی کشویی قرار داد. در زیر یک مثال از آن را می بینید.

برای این کار یک دکمه یا button از نوع dropdown-toggle قرار می دهیم که می تواند زیرمجموعه داشته باشد.

زیرمجموعه را در یک div از کلاس dropdown-menu قرار می دهید.

<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Benz</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Toyota
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Toyota1</a>
<a class="dropdown-item" href="#">Toyota2</a>
</div>
</div>
</div>

در بخش دکمه های گروهی بوت استرپ با دکمه Split آشنا می شوید.

کد زیر را پس از فراخوانی بوت استرپ 4 ، اجرا کنید و نتیجه را ببینید.

<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-success 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>

دکمه گروهی عمودی و منوی کشویی

در این قسمت با دکمه گروهی عمودی و منوی کشویی آشنا می شوید.

قبلا در مورد کلاس btn-group-vertical صحبت کردیم.

در اینجا قصد داریم در مورد منوی کشویی یا dropdown بحث کنیم.

در مثال زیر ما دو دکمه عمودی و یک دکمه داریم که دارای زیرمجموعه است.

<div class="btn-group-vertical">
<button type="button" class="btn btn-info">Apple</button>
<button type="button" class="btn btn-info">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 از نوع btn-group داشته باشیم.

اگر دو مجموعه دکمه را داشته باشیم می توانیم آنها را جدا قرار دهیم.

در مثال زیر ، دو مجموعه دکمه گروهی را در کنار هم قرار داده ایم.

<div class="container">
<h1>TopSite98</h1>
<div class="btn-group">
<button type="button" class="btn btn-info">html</button>
<button type="button" class="btn btn-info">css</button>
<button type="button" class="btn btn-info">php</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">windows</button>
<button type="button" class="btn btn-success">word</button>
<button type="button" class="btn btn-success">Excel</button>
</div>
</div>

امیدواریم این آموزش برای شما مفید باشد.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید