اسکریپت‌های مرورگر

آموزش‌های Bootstrap 5

• اسکریپت‌های سرور
• جدول دوره‌ها
• BS5 آموزش
• BS5 ورود به سیستم
• BS5 حاوی
• BS5 پایه شبکه
• BS5 چینش‌ها
• BS5 رنگ‌ها
• BS5 جدول‌ها
• BS5 تصاویر
• دکمه BS5
• BS5 Jumbotron
• کلاهک BS5
• BS5 جعبه‌های هشدار
• BS5 گروه دکمه
• BS5 نوار پیشرفت
• BS5 بارگذار
• BS5 صفحه‌های تغییر وضعیت
• BS5 گروه لیست
• BS5 کارت‌ها
• BS5 منوهای کشویی
• BS5 چینش
• BS5 ناوبری
• BS5 اسلایدر
• BS5 مدل‌ها
• BS5 ابزارهای راهنمایی
• BS5 پنجره‌های بالاپر
• BS5 Toast
• BS5 Scrollspy
• BS5 Offcanvas
• BS5 ابزارهای مفید

فرم‌های Bootstrap 5

• BS5 Flex
• BS5 فرم
• BS5 منوهای انتخابی
• BS5 چک باکس و دکمه‌های رادیویی
• BS5 محدوده
• BS5 گروه ورودی
• BS5 برچسب‌های شناور

شبکه‌های Bootstrap 5

• BS5 تأیید فرم
• سیستم شبکه BS5
• BS5 چیده/افقی
• BS5 شبکه XSmall
• BS5 شبکه Small
• BS5 شبکه Medium
• BS5 شبکه Large
• BS5 شبکه XLarge
• BS5 شبکه XXL

مثال‌های شبکه BS5

• Bootstrap 5 دیگر
• BS5 قالب پایه

BS5 ارزیابی

درس‌های انتخابی

• کیت ابزارهای CodeW3C.com

پیشنهاد دوره:

گروه دکمه

Bootstrap 5 اجازه می‌دهد تا یک مجموعه از دکمه‌ها را در یک گروه دکمه ترکیب کنید (در یک خط): .btn-group کلاس <div> عناصر برای ایجاد گروه دکمه استفاده کنید:

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">دجی‌تک</button>
  <button type="button" class="btn btn-primary">خبرنگار</button>
</div>

شما خودتان امتحان کنید

توضیح:لطفاً اندازه دکمه‌ها را برای همه دکمه‌های گروه کاربرد ندهید، بلکه از کلاس .btn-group-lg برای گروه دکمه‌های بزرگ یا به عنوان .btn-group-sm برای گروه دکمه‌های کوچک:

مثال

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">دجی‌تک</button>
  <button type="button" class="btn btn-primary">خبرنگار</button>
</div>

شما خودتان امتحان کنید

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

Bootstrap 5 همچنین از گروه دکمه‌های عمودی پشتیبانی می‌کند:

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

مثال

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">دجی‌تک</button>
  <button type="button" class="btn btn-primary">خبرنگار</button>
</div>

شما خودتان امتحان کنید

گروه دکمه‌های پارازیتی

به طور پیش‌فرض، گروه دکمه‌ها "inline" است و در صورت وجود چندین گروه دکمه، به صورت پارازیتی نمایش داده می‌شوند:

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">دجی‌تک</button>
  <button type="button" class="btn btn-primary">خبرنگار</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">جلی‌ان</button>
  <button type="button" class="btn btn-primary">وال‌هاول</button>
  <button type="button" class="btn btn-primary">آرس</button>
</div>

شما خودتان امتحان کنید

گروه دکمه‌های جاودان و منوهای پیدایشی

گروه دکمه‌های جاودان، به شما امکان می‌دهد منوهای پیدایشی ایجاد کنید (شما در فصل‌های بعدی بیشتر درباره منوهای پیدایشی یاد خواهید گرفت):

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">دجی‌تک</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">خبرنگار</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">موبایل</a>
      <a class="dropdown-item" href="#">تبلت</a>
    </div>
  </div>
</div>

شما خودتان امتحان کنید

ابزارخانه

آزمون JavaScript

لینک‌های حامی