اکثر اوغات گروه دکمه برای منوها ، تب ها و …. کاربردهای مختلفی دارند ، گروه دکمه ها در بوت استرپ به صورت پیش فرض وجود دارند ، در این قسمت از اموزش های بوت استرپ به طراحی دکمه های گروهی خواهیم پرداخت.
پیشنهاد میشود پیش از ورود به این قسمت ، سایر قسمت های دوره ی بوت استرپ را دنبال کنید .
گروه دکمه ها
بوت استرپ 4 به شما امکان می دهد یک سری دکمه ها را با هم (در یک خط) در یک گروه دکمه گروه بندی کنید به نمونه مثال زیر توجه کنید :
برای ساخت دکمه های بالا کافی است در المنت div از کلاس .btn-group استفاده کنید ، مثال زیر را بررسی کنید :
|
1 2 3 4 5 |
<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> |
نکته : به جای اعمال اندازه دکمه در هر دکمه در یک گروه ، از کلاس .btn-group-lg برای یک گروه بزرگ دکمه یا .btn-group-sm برای یک گروه دکمه کوچک استفاده کنید:
دکمه بزرگ :
دکمه عادی
دکمه کوچک
مثال برای درک ساختن دکمه در سایز های مختلف به روش زیر است :
|
1 2 3 4 5 |
<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 را به المنت div خود اضافه کنید :
|
1 2 3 4 5 |
<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> |
منوهای گروهی و دکمه های کشویی
گروه های دکمه ای کشویی برای ایجاد منوهای کشویی (در فصل بعد اطلاعات بیشتری در مورد بازشویی ها خواهید یافت):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
تقسیم دکمه کشو
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
گروه دکمه های عمودی با دکمه کشویی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
گروه های دکمه ای
شما این امکان را به صورت پیش فرض دارید که دکمه ها را به صورت زیر کنار یک دیگر و به صورت گروهی قرار دهید .
ویدیوی قسمت دهم
امیدوارم این قسمت از اموزش های بوت استرپ برای شما عزیزان مفید و کاربردی واقع شده باشد .
پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
درصورت تمایل میتوانید سایر قسمت های دوره bootstrap را دنبال کنید.
موفق و پیروز باشید.
