دریابید که چگونه می توانید از آخرین ویژگی های Bootstrap، از جمله جزئیات تغییرات بزرگ برای کنترل های فرم استفاده کنید.
بوت استرپ یک فریم ورک فرانت اند محبوب است که توسعه وب را متحول کرده است. این فریم ورک با آخرین نسخه خود، Bootstrap 5.3.0، تعداد زیادی از ویژگی‌ها و پیشرفت‌های هیجان‌انگیز جدید را معرفی کرده است که شما را قادر می‌سازد تا وب‌سایت‌ها و برنامه‌های کاربردی خیره‌کننده، واکنش‌گرا و با ویژگی‌های غنی ایجاد کنید.
تغییر حالت تاریک
یکی از موارد قابل توجه اضافه شدن Bootstrap 5.3.0، تغییر حالت تاریک است. این جابجایی به کاربران وب‌سایت شما امکان می‌دهد بدون زحمت بین حالت‌های روشن و تاریک جابه‌جا شوند و استفاده یکپارچه از وب‌سایت یا برنامه شما را در شرایط مختلف نور تسهیل می‌کند.
برای استفاده از این ویژگی، به سادگی ویژگی data-bs-toggle=”dark-mode” را به هر دکمه یا عنصر پیوند اضافه کنید.
در اینجا یک مثال است:
<button type="button" class="btn btn-primary" data-bs-toggle="dark-mode">
Toggle Dark Mode
</button>
ابزارهای مقیاس قلم
Bootstrap 5.3.0 مجموعه‌ای از ابزارهای مقیاس فونت را معرفی می‌کند که به شما امکان می‌دهد به سرعت اندازه متن خود را بر اساس مقیاس‌های از پیش تعریف‌شده تنظیم کنید، بدون نیاز به انتخاب مقادیر خاص فونت.
می‌توانید از این ابزارها در ترکیب با سایر کلاس‌های تایپوگرافی Bootstrap برای دستیابی به تایپوگرافی مقیاس‌پذیر و سازگار در وب‌سایت یا برنامه خود استفاده کنید.
در اینجا چند نمونه از نحوه استفاده از ابزارهای مقیاس فونت آورده شده است:
<p class="fs-1">This is the largest font size</p>
<p class="fs-2">This is a slightly smaller font size</p>
<p class="fs-3">This is a medium font size</p>
<p class="fs-4">This is a small font size</p>
<p class="fs-5">This is the smallest font size</p>
آب و برق ناودان
یکی دیگر از موارد اضافه شده در Bootstrap 5.3.0، معرفی ابزارهای ناودانی است. این ابزارها اضافه کردن ناودان بین ستون‌ها را در طرح‌بندی شبکه بوت استرپ بدون نیاز به نوشتن CSS سفارشی آسان می‌کنند.
در اینجا مثالی از نحوه استفاده از ابزارهای ناودانی آورده شده است:
<div class="row gx-3">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
این مثال از کلاس gx-3 برای اضافه کردن یک ناودان 3 واحدی (یا 1.5rem) بین دو ستون استفاده می کند.
کنترل های فرم به روز شده
کنترل های فرم در بوت استرپ در نسخه 5.3.0 به روز شده است تا سازگاری و قابلیت استفاده را بهبود بخشد. کنترل‌های فرم جدید شامل سبک‌های به‌روزشده برای چک‌باکس‌ها، دکمه‌های رادیویی، و جعبه‌های انتخابی و همچنین بازخورد اعتبارسنجی بهبودیافته است.
چک باکس ها و دکمه های رادیویی
Bootstrap 5.3.0 سبک‌های جدیدی را برای چک باکس‌ها و دکمه‌های رادیویی معرفی می‌کند که استفاده از آن‌ها را آسان‌تر و در دسترس‌تر می‌کند. طراحی جدید دارای مناطق ضربه بزرگتر و نشانگرهای فوکوس بهبود یافته است که تعامل شما با این ورودی ها را آسان تر می کند.
در اینجا مثالی از نحوه استفاده از استایل های جدید چک باکس آورده شده است:
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">Default checkbox</label>
</div>
و در اینجا مثالی از نحوه استفاده از سبک های دکمه های رادیویی جدید آورده شده است:
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1">
<label class="form-check-label" for="radio1"> Option 1 </label>
</div>
توجه کنید که چگونه این نشانه گذاری از کلاس .form-check-input برای استایل دادن به خود عنصر ورودی و کلاس .form-check-label برای استایل دادن به برچسب استفاده می کند.
جعبه ها را انتخاب کنید
جعبه های انتخاب نیز در Bootstrap 5.3.0 با سبک های جدید برای سازگاری و قابلیت استفاده بهتر به روز شده اند. سبک‌های انتخاب جعبه جدید دارای مناطق ضربه بزرگتر و نشانگرهای فوکوس بهبودیافته هستند که تعامل شما با این ورودی‌ها را آسان‌تر می‌کند.
در اینجا نمونه ای از نحوه استفاده از سبک های جعبه انتخاب جدید آورده شده است:
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
توجه کنید که چگونه می توانید از کلاس .form-select برای استایل دادن به کادر انتخاب استفاده کنید.
بازخورد اعتبار سنجی
Bootstrap 5.3.0 همچنین سبک‌های بازخورد اعتبارسنجی جدیدی را برای کنترل‌های فرم معرفی می‌کند. این سبک ها ارائه بازخورد بصری به کاربران وب سایت شما را هنگامی که فرمی را به اشتباه پر می کنند آسان تر می کند.
در اینجا مثالی از نحوه استفاده از سبک های اعتبارسنجی جدید آورده شده است:
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control is-invalid" id="exampleInputPassword1" placeholder="Password"required>
<div class="invalid-feedback"> Please provide a valid password. </div>
</div>
توجه کنید که چگونه کلاس .is-invalid نشان می دهد که فیلد ورودی نامعتبر است و کلاس .invalid-feedback پیامی را به کاربر نمایش می دهد.
با این سبک های جدید، ایجاد فرم های قابل دسترس و سازگار برای وب سایت یا برنامه شما آسان تر از همیشه است.
پیشرفت های هیجان انگیز در Bootstrap 5.3.0
Bootstrap 5.3.0 یک به روز رسانی قابل توجه برای چارچوب محبوب CSS است که چندین ویژگی و پیشرفت جدید را در جدول به ارمغان می آورد. از تغییر حالت تاریک گرفته تا ابزارهای مقیاس فونت و ابزارهای ناودانی، ابزارهای جدید زیادی در اختیار شما هستند تا به شما در ساختن وب سایت ها و برنامه های بهتر کمک کنند.