در این بخش به آموزش کلاس clearfix در بوت استرپ می پردازیم. کلاس .clearfix
یکی از کلاسهای کمکی پرکاربرد در فریم ورک بوت استرپ است که برای حل مشکل رایج عناصر شناور (float) در طراحی صفحات وب بهکار میرود. زمانی که چند عنصر درون یک کانتینر از خاصیت float استفاده میکنند، ممکن است کانتینر نتواند ارتفاع درستی برای خود محاسبه کند. در این حالت، ارتفاع کانتینر برابر با صفر میشود و باعث بههمریختگی چیدمان عناصر بعدی در صفحه میگردد.
برای جلوگیری از این مشکل، میتوان کلاس .clearfix
را به تگ والد اضافه کرد تا مرورگر بهدرستی محتوای شناور داخل آن را تشخیص دهد. و ارتفاع واقعی کانتینر را بازیابی کند. این کلاس با استفاده از یک pseudo-element (::after
) بهصورت خودکار یک خط شکستهکننده (clear fix) ایجاد میکند، بدون آنکه نیاز به کدنویسی دستی یا افزودن تگهای اضافه باشد.
در واقع، بوت استرپ با تعریف کلاس .clearfix
در فایل CSS خود، امکان پیادهسازی سریع و مطمئن این تکنیک را فراهم کرده تا توسعهدهنده بتواند با افزودن تنها یک کلاس، چیدمان صحیح را حفظ کند. اگر در حال یادگیری طراحی صفحات واکنش گرا هستید یا قصد دارید وارد آموزش طراحی سایت با بوت استرپ شوید، آشنایی با عملکرد این کلاس یکی از مهارتهای پایهای و ضروری به حساب میآید.
استفاده از .clearfix
در مواقعی که چیدمان صفحه بر پایه float تنظیم شده، بسیار حیاتی است. و از بروز مشکلات ظاهری در طراحی واکنش گرا جلوگیری میکند. در ادامه، یک نمونه ساده از نحوه استفاده از کلاس .clearfix
در بوت استرپ آمده است:
مثال استفاده از کلاس clearfix در بوت استرپ
در نمونه زیر، نحوه استفاده از کلاس .clearfix
نمایش داده شده است. اگر این کلاس را به div اضافه نکنید، نمیتواند ارتفاع خود را مطابق با دکمههای داخلی تنظیم کند. همین موضوع باعث بههم ریختگی چیدمان صفحه میشود. استفاده از .clearfix
باعث میشود کانتینر بهدرستی تمام عناصر شناور داخلی را در بر بگیرد و از بروز مشکلات ظاهری جلوگیری شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!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> |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۹ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس