گروه‌های کلید

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

بوت استرپ به شما اجازه می‌دهد که مجموعه ای از کلیدها را (در یک خط) با هم در یک دسته گروه بندی کنید:[۱]


از عنصر <div> با کلاس .btn-group برای ایجاد یک گروه کلید استفاده کنید:

مثال

1 <div class="btn-group">
2   <button type="button" class="btn btn-primary">Apple</button>
3   <button type="button" class="btn btn-primary">Samsung</button>
4   <button type="button" class="btn btn-primary">Sony</button>
5 </div>


مشاهدهٔ نتیجه


نکته: به جای اعمال سایز کلید‌ها روی هر کلید موجود در گروه، از کلاس .btn-group-lg برای اندازه دادن به همهٔ کلیدهای گروه استفاده کنید:

مثال

1 <div class="btn-group btn-group-lg">
2   <button type="button" class="btn btn-primary">Apple</button>
3   <button type="button" class="btn btn-primary">Samsung</button>
4   <button type="button" class="btn btn-primary">Sony</button>
5 </div>


مشاهدهٔ نتیجه

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

بوت استرپ گروه‌های کلید عمودی را نیز پشتیبانی می‌کند:


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

مثال

1 <div class="btn-group-vertical">
2   <button type="button" class="btn btn-primary">Apple</button>
3   <button type="button" class="btn btn-primary">Samsung</button>
4   <button type="button" class="btn btn-primary">Sony</button>
5 </div>


مشاهدهٔ نتیجه


گروه های کلید Justify شده

برای گرفتن کل عرض صفحه نمایش از کلاس .btn-group-justified استفاده کنید:


مثال با عنصرهای <a>:

مثال

1 <div class="btn-group btn-group-justified">
2   <a href="#" class="btn btn-primary">Apple</a>
3   <a href="#" class="btn btn-primary">Samsung</a>
4   <a href="#" class="btn btn-primary">Sony</a>
5 </div>


مشاهدهٔ نتیجه


توجه: برای عنصر‌های <button>، باید هر کلید را درون یک کلاس .btn-group قرار دهید:

مثال

 1 <div class="btn-group btn-group-justified">
 2   <div class="btn-group">
 3     <button type="button" class="btn btn-primary">Apple</button>
 4   </div>
 5   <div class="btn-group">
 6     <button type="button" class="btn btn-primary">Samsung</button>
 7   </div>
 8   <div class="btn-group">
 9     <button type="button" class="btn btn-primary">Sony</button>
10   </div>
11 </div>


مشاهدهٔ نتیجه


گروه های کلید تودرتو و منو‌های کرکره ای (به انگلیسی: Dropdown)

گروه‌های کلید تودرتو برای ایجاد منوهای کرکره ای:

مثال

 1 <div class="btn-group">
 2   <button type="button" class="btn btn-primary">Apple</button>
 3   <button type="button" class="btn btn-primary">Samsung</button>
 4   <div class="btn-group">
 5     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 6     Sony <span class="caret"></span></button>
 7     <ul class="dropdown-menu" role="menu">
 8       <li><a href="#">Tablet</a></li>
 9       <li><a href="#">Smartphone</a></li>
10     </ul>
11   </div>
12 </div>


مشاهدهٔ نتیجه


کلید مجزای کرکره ای

مثال

 1 <div class="btn-group">
 2   <button type="button" class="btn btn-primary">Sony</button>
 3   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 4     <span class="caret"></span>
 5   </button>
 6   <ul class="dropdown-menu" role="menu">
 7     <li><a href="#">Tablet</a></li>
 8     <li><a href="#">Smartphone</a></li>
 9   </ul>
10 </div>


مشاهدهٔ نتیجه


تمرینات بوت استرپ

یک کلاس بوت استرپ برای گروه‌بندی کلیدها با هم اضافه کنید:


منابع آموزشی