آموزش کلاس clearfix در بوت استرپ

0 دیدگاه

در این بخش به آموزش کلاس clearfix در بوت استرپ می پردازیم. کلاس .clearfix یکی از کلاس‌های کمکی پرکاربرد در فریم ورک بوت استرپ است که برای حل مشکل رایج عناصر شناور (float) در طراحی صفحات وب به‌کار می‌رود. زمانی که چند عنصر درون یک کانتینر از خاصیت float استفاده می‌کنند، ممکن است کانتینر نتواند ارتفاع درستی برای خود محاسبه کند. در این حالت، ارتفاع کانتینر برابر با صفر می‌شود و باعث به‌هم‌ریختگی چیدمان عناصر بعدی در صفحه می‌گردد.

برای جلوگیری از این مشکل، می‌توان کلاس .clearfix را به تگ والد اضافه کرد تا مرورگر به‌درستی محتوای شناور داخل آن را تشخیص دهد. و ارتفاع واقعی کانتینر را بازیابی کند. این کلاس با استفاده از یک pseudo-element (::after) به‌صورت خودکار یک خط شکسته‌کننده (clear fix) ایجاد می‌کند، بدون آنکه نیاز به کدنویسی دستی یا افزودن تگ‌های اضافه باشد.

در واقع، بوت استرپ با تعریف کلاس .clearfix در فایل CSS خود، امکان پیاده‌سازی سریع و مطمئن این تکنیک را فراهم کرده تا توسعه‌دهنده بتواند با افزودن تنها یک کلاس، چیدمان صحیح را حفظ کند. اگر در حال یادگیری طراحی صفحات واکنش گرا هستید یا قصد دارید وارد آموزش طراحی سایت با بوت استرپ شوید، آشنایی با عملکرد این کلاس یکی از مهارت‌های پایه‌ای و ضروری به حساب می‌آید.

استفاده از .clearfix در مواقعی که چیدمان صفحه بر پایه float تنظیم شده، بسیار حیاتی است. و از بروز مشکلات ظاهری در طراحی واکنش گرا جلوگیری می‌کند. در ادامه، یک نمونه ساده از نحوه استفاده از کلاس .clearfix در بوت استرپ آمده است:

مثال استفاده از کلاس clearfix در بوت استرپ

در نمونه زیر، نحوه استفاده از کلاس .clearfix نمایش داده شده است. اگر این کلاس را به div اضافه نکنید، نمی‌تواند ارتفاع خود را مطابق با دکمه‌های داخلی تنظیم کند. همین موضوع باعث به‌هم ریختگی چیدمان صفحه می‌شود. استفاده از .clearfix باعث می‌شود کانتینر به‌درستی تمام عناصر شناور داخلی را در بر بگیرد و از بروز مشکلات ظاهری جلوگیری شود.

<!DOCTYPE html>
<html lang="en">
    <head>
       <title>Bootstrap - Helper - Clearfix</title>
       <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-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Clearfix example</h4><br>
          <div class="bg-success clearfix">
          <button type="button" class="btn btn-secondary float-start">Button floated left</button>
          <button type="button" class="btn btn-secondary float-end">Button floated right</button>
          </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Helper - Clearfix</title>

</head>

<body>

<h4>Clearfix example</h4><br>

<button type="button" class="btn btn-secondary float-start">Button floated left</button>

<button type="button" class="btn btn-secondary float-end">Button floated right</button>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره آموزش طراحی فروشگاه اینترنتی بدون کد نویسی در 8 ساعت

انتشار: ۹ تیر ۱۴۰۴

آموزش کلاس clearfix در بوت استرپ

مثال استفاده از کلاس clearfix در بوت استرپ

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط