پرسش

چرا کلاس‌های form-group، form-row و form-inline در بوت‌ استرپ 5 کار نمیکنن؟

Why are form-group, form-row, and form-inline not working in Bootstrap 5?

سلام من دارم از بوت‌استرپ 5 استفاده میکنم و متوجه شدم که کلاس‌ های form-group، form-row و form-inline دیگه کار نمیکنن. توی نسخه‌ های قبلی بوت‌ استرپ، این کلاس‌ها خیلی به دردم میخوردن و فرم‌ هام رو باهاشون میساختم، ولی حالا توی نسخه جدید بوت‌ استرپ انگار این کلاس‌ها کار نمیکنن. میشه راهنمایی کنین چطور میتونم توی بوت‌استرپ 5 فرم‌ هام رو درست کنم؟

#bootstrap #form

1403/06/03

پاسخ

مهرشاد براتی برنامه نویس فول استک وب ،موبایل ،دستکاپ ،کارشناس ارشد مهندسی کامپیوتر نرم افزار

بیوگرافی مهرشاد براتی

سلام خب تو بوت‌ استرپ 5 یه سری تغییرات اساسی انجام شده و بعضی از کلاس‌ هایی که توی نسخه‌ های قبلی بود، حذف یا تغییر کردن. به همین خاطر، کلاس‌های form-group، form-row و form-inline دیگه توی نسخه جدید بوت‌ استرپ کار نمیکنن. این کلاس‌ها توی بوت‌ استرپ 4 و نسخه‌ های قبل از اون خیلی استفاده میشدن، ولی حالا بوت‌ استرپ 5 برای ساده‌ سازی و مدرن‌ تر کردن ساختارها، یه سری تغییرات داده. اما نگران نباش میتونی به راحتی با استفاده از ابزارها و کلاس‌ های جدیدی که بوت‌ استرپ 5 ارائه داده، فرم‌هات رو به شکلی بسازی که نیازته.

استفاده از سیستم گرید به جای استفاده از form-row، از row و col توی سیستم گرید جدید استفاده کن. این سیستم خیلی منعطف‌ تره و بهت این امکان رو میده که با استفاده از کلاس‌های col سایزهای مختلف برای فرم‌ هات تعیین کنی و اینطوری یه ساختار مرتب و منظم برای چیدمان فیلدهای فرم داشته باشی.

کلاس‌های جدید برای فرم به جای form-group حالا میتونی از کلاس‌های جدیدی مثل mb-3 استفاده کنی که برای فاصله‌ گذاری بین عناصر فرم به کار میره. این کلاس بهت کمک میکنه تا بتونی کنترل بیشتری روی ظاهر و فاصله‌ گذاری فرم‌هات داشته باشی.

ساخت (Inline Forms) برای ساخت فرم‌های افقی که قبلاً از form-inline استفاده میکردیم، حالا توی بوت‌استرپ 5 میتونی از کلاس‌های Flexbox مثل d-flex و align-items-center استفاده کنی. این کلاس‌ ها بهت کمک میکنن تا فیلدهای فرم رو تو یک خط (به صورت افقی) بچینی

مثال کاربردی:

فرض کن میخوای یه فرم ساده با دو تا فیلد ورودی و یه دکمه ثبت درست کنی

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap 5 Form Example</title>
</head>
<body>
  <div class="container mt-5">
    <form>
      <div class="row mb-3">
        <!-- Column for Email input -->
        <div class="col">
          <label for="inputEmail" class="form-label">Email address</label>
          <input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
        </div>
        <!-- Column for Password input -->
        <div class="col">
          <label for="inputPassword" class="form-label">Password</label>
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
      </div>
      <!-- Inline form elements with Flexbox -->
      <div class="d-flex align-items-center">
        <div class="form-check me-3">
          <input class="form-check-input" type="checkbox" id="rememberMe">
          <label class="form-check-label" for="rememberMe">
            Remember me
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html

با row و col، میتونیم فیلدهای ورودی رو به صورت مرتب کنار هم بچینیم. اینجا از mb-3 هم برای فاصله‌گذاری بین عناصر استفاده کردیم.

با d-flex و align-items-center، فیلدهای چک‌باکس و دکمه ثبت رو به صورت افقی چیدیم.

پاسخ: 1403/06/03

آخرین آپدیت: 1403/08/01