گروه‌های ورودی Bootstrap 5

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

.input-group کلاس یک محفظه است که با افزودن آیکون، متن یا دکمه به قبل یا پس از فیلد ورودی به عنوان "متن کمک"، قابلیت‌های ورودی را افزایش می‌دهد.

اگر می‌خواهید استایل برای متن کمک مشخصی تنظیم کنید، از .input-group-text کلاس:

مثال

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="نام کاربر">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="آپ کا ای میل">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

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

اندازه گروه ورودی

لطفاً .input-group-sm طبقه برای گروه ورودی کوچک استفاده می‌شود، که .input-group-lg برای گروه ورودی بزرگ استفاده شود:

مثال

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">کوچک</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">پیش‌فرض</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">بزرگ</span>
  <input type="text" class="form-control">
</div>

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

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

کنترل ورودی‌ها یا افزونه‌های چندگانه اضافه کنید:

مثال

<!-- متعدد کنترل ورودی -->
<div class="input-group mb-3">
  <span class="input-group-text">نام شخص</span>
  <input type="text" class="form-control" placeholder="فامیل">
  <input type="text" class="form-control" placeholder="نام">
</div>
<!-- متعدد افزونه/متن کمک -->
<div class="input-group mb-3">
  <span class="input-group-text">یک</span>
  <span class="input-group-text">دو</span>
  <span class="input-group-text">سه</span>
  <input type="text" class="form-control">
</div>

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

گروپ ورودی با مربع انتخابی و دکمه انتخابی

شما همچنین می‌توانید از مربع انتخابی یا دکمه انتخابی به جای متن استفاده کنید:

مثال

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="کچھ لکھا تھا">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="کچھ لکھا تھا">
</div>

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

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

مثال

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">بنیادی دکمه</button>
  <input type="text" class="form-control" placeholder="کچھ لکھا تھا">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="جستجو">
  <button class="btn btn-success" type="submit">جاؤ</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="کچھ لکھا تھا">
  <button class="btn btn-primary" type="button">اوکی</button>
  <button class="btn btn-danger" type="button">کنسل</button>
</div>

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

دسوار نکل والا داخل گروپ

دسوار نکل کو داخل گروپ انپوت میں شامل کریں۔ لطفاً یاد رکھیں کہ آپ کو عادتاً .dropdown کا کارپٹر نیا نہیں چاہیے۔

مثال

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    دسوار نکل
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">لینک 1</a></li>
    <li><a class="dropdown-item" href="#">لینک 2</a></li>
    <li><a class="dropdown-item" href="#">لینک 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="نام کاربر">
</div>

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