گروه‌های ورودی 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>

آزمایش کنید