📘 Bootstrap 5 – Forms (بخش دوم)

1️⃣ Range Input (اسلایدر مقدار)

برای گرفتن مقدار عددی با Drag

<input type="range" class="form-range">

نکات مهم

• کلاس اصلی → form-range
• مقدار پیش‌فرض:

<input type="range" min="0" max="100" step="10">

2️⃣ Input Group

برای چسباندن متن، آیکن یا دکمه به input

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control">
</div>

3️⃣ Floating Labels

لیبل شناور داخل input

<div class="form-floating">
  <input class="form-control" placeholder="Name">
  <label>نام</label>
</div>

4️⃣ Form Layout (چیدمان فرم‌ها)

✔ چیدمان افقی

<div class="row">
  <div class="col-md-6">
    <input class="form-control">
  </div>
  <div class="col-md-6">
    <input class="form-control">
  </div>
</div>

🧠 تجربیات

1️⃣ مشکلات RTL در Bootstrap

گاهی نسخه RTL کامل نیست و باید دستی درستش کنیم:

.form-floating > label {
  color: #6e7174 !important;
}
.form-floating > input {
  direction: rtl !important;
}
.form-control {
  direction: rtl !important;
}

نتیجه:

• بعضی inputها هنوز چپ‌چین می‌مانند → باید دستی direction: rtl بدهیم
• بعضی رنگ‌ها در RTL اعمال نمی‌شوند → باید خودمان رنگ بدهیم

2️⃣ تفاوت رنگ‌ها در RTL و LTR

• گاهی رنگ placeholder و label درست اعمال نمی‌شود
• راه‌حل → override کردن با CSS

3️⃣ row-cols-lg-auto

• از lg به بالا ستون‌ها → کنار هم خودکار
• قبل از lg → زیر هم
• برای فرم‌های واکنش‌گرا عالیه

4️⃣ Floating Labels محدودیت مهم

• در Floating Labels نمی‌شود input را کوچک کرد (sm / lg)
• اگر کوچک کنی:
  • label درست شناور نمی‌شود
  • Bootstrap عمداً اجازه نمی‌دهد