سلام خب تو بوت استرپ 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/bootstrap@5.3.0/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">
<div class="col">
<label for="inputEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
</div>
<div class="col">
<label for="inputPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html
با row و col، میتونیم فیلدهای ورودی رو به صورت مرتب کنار هم بچینیم. اینجا از mb-3 هم برای فاصله‌گذاری بین عناصر استفاده کردیم.
با d-flex و align-items-center، فیلدهای چک‌باکس و دکمه ثبت رو به صورت افقی چیدیم.
