گروه ورودی (Input Groups)

«گروه ورودی» یعنی چسباندن متن، آیکن یا دکمه کنار ورودی. کلاس .input-group همه چیز را کنار هم می آورد. همچنین .input-group-text برای متنِ کمکی است. مثل برچسب @ جلوی نام کاربری.

ساخت گروه ورودی پایه

ابتدا یک ظرف با .input-group بساز. سپس متنِ کمکی یا ورودی را داخل آن بگذار.

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Your Email">
    <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">Small</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">Default</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">Large</span>
  <input type="text" class="form-control">
</div>

مشاهده در ادیتور

چند ورودی و چند کمک متن

می توانی چند ورودی یا چند کمک متن بگذاری. مثل نام و نام خانوادگی کنار هم.

<div class="input-group mb-3">
  <span class="input-group-text">Person</span>
  <input type="text" class="form-control" placeholder="First Name">
  <input type="text" class="form-control" placeholder="Last Name">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">One</span>
  <span class="input-group-text">Two</span>
  <span class="input-group-text">Three</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="Some text">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

مشاهده در ادیتور

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

دکمه ها را چپ یا راست ورودی بگذار. برای جستجو یا ارسال عالی است.

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Basic Button</button>
  <input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-success" type="button">Go</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Cancel</button>
</div>

مشاهده در ادیتور

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

می توانی دکمه کرکره ای بگذاری. نیاز به ظرف .dropdown جدا نیست.

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Username">
</div>

مشاهده در ادیتور

گام های عملی

1. یک ظرف با .input-group بساز.
2. کمک متن یا دکمه را اضافه کن.
3. ورودی را با .form-control قرار بده.

نکته: ترتیب عناصر مهم است تا گردی گوشه ها درست بماند.

جمع بندی سریع

• .input-group ورودی و الحاقات را کنار هم می آورد.
• .input-group-text برای متن کمکی است.
• اندازه ها با -sm و -lg تغییر می کنند.
• می توانی دکمه و منو اضافه کنی.

مطالب مرتبط: محدوده (Range)، چک باکس و رادیو، برچسب شناور.