گروه کلیدها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

گروه کلیدها

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

از عنصر <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 برای گروه کلیدهای بزرگ و کلاس .btn-group-sm برای گروه کلیدهای کوچک استفاده کنید:

مثال

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>


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


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

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

از کلاس .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>


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


گروه کلیدهای تودرتو و منوهای کرکره ای (به انگلیسی: 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
 7     </button>
 8     <div class="dropdown-menu">
 9       <a class="dropdown-item" href="#">Tablet</a>
10       <a class="dropdown-item" href="#">Smartphone</a>
11     </div>
12   </div>
13 </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 dropdown-toggle-split" data-toggle="dropdown">
 4     <span class="caret"></span>
 5   </button>
 6   <div class="dropdown-menu">
 7     <a class="dropdown-item" href="#">Tablet</a>
 8     <a class="dropdown-item" href="#">Smartphone</a>
 9   </div>
10 </div>


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


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

مثال

 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   <div class="btn-group">
 5     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 6        Sony
 7     </button>
 8     <div class="dropdown-menu">
 9       <a class="dropdown-item" href="#">Tablet</a>
10       <a class="dropdown-item" href="#">Smartphone</a>
11     </div>
12   </div>
13 </div>


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


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

گروه کلیدها بطور پیش فرض “inline” (در یک خط) هستند که باعث می‌شود هنگام ایجاد چند گروه کلید، آنها کنار هم قرار بگیرند:

مثال

 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>
 6 
 7 <div class="btn-group">
 8   <button type="button" class="btn btn-primary">BMW</button>
 9   <button type="button" class="btn btn-primary">Mercedes</button>
10   <button type="button" class="btn btn-primary">Volvo</button>
11 </div>


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



منابع آموزشی