آموزش float در بوت استرپ

0 دیدگاه

کلاس float در بوت استرپ ابزاری ساده اما مؤثر برای کنترل موقعیت و چیدمان عناصر درون سیستم شبکه ای بوت استرپ است. توسعه دهندگان این کلاس‌ها را معمولاً همراه با کلاس های ستون مانند .col-* به‌کار می‌برند تا ساختارهایی واکنش گرا طراحی کنند.

با استفاده از کلاس های .float می‌توان عنصر را در محدوده ستون به سمت چپ یا راست شناور کرد یا ویژگی float را به طور کامل غیرفعال کرد. این رفتار مطابق با اندازه فعلی صفحه نمایش تغییر می‌کند، زیرا این کلاس ها همان نقاط شکست (Breakpoint) سیستم شبکه ای را به‌کار می‌گیرند.

توسعه دهندگان باید توجه داشته باشند که این کلاس ها روی آیتم های Flexbox تأثیر نمی‌گذارند؛ بنابراین اگر عناصر شما داخل یک کانتینر فلکس قرار دارند، استفاده از .float-* تغییری در موقعیت آن‌ها ایجاد نمی‌کند. اگر با ساختارهای Flexbox و سیستم گرید بوت استرپ آشنا نیستید، پیشنهاد می‌کنیم ابتدا یک دوره طراحی سایت با بوت استرپ ببینید.

بوت استرپ سه کلاس اصلی برای مدیریت ویژگی float ارائه می‌دهد:

.float-start: این کلاس عنصر را در ستون به سمت چپ شناور می‌کند.
.float-end: این کلاس عنصر را در ستون به سمت راست شناور می‌کند.
.float-none: این کلاس ویژگی float را از عنصر حذف می‌کند و آن را به حالت پیش‌فرض بازمی‌گرداند.

در ادامه، نمونه‌ای از نحوه استفاده از کلاس های .float-* را مشاهده می‌کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Float</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>
    <div class="container mt-3">
    <h4>Float utilities</h4>
    <div class="float-start">
      <button class="btn btn-success">Float start (on left)</button>
    </div>
    <div class="float-end">
      <button class="btn btn-primary">Float end (on right)</button>
    </div>
    <div class="float-none">
      <button class="btn btn-warning">Float none</button>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Float</title>

</head>

<body>

<h4>Float utilities</h4>

<button class="btn btn-success">Float start (on left)</button>

</div>

<button class="btn btn-primary">Float end (on right)</button>

</div>

<button class="btn btn-warning">Float none</button>

</div>

</body>

</html>

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

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

واکنش گرایی در Float بوت استرپ

شما می‌توانید مقدارهای مختلف .float را با اندازه های مختلف صفحه نمایش ترکیب کنید. به عبارت دیگر، می‌توان مشخص کرد که یک عنصر در اندازه‌های خاصی از صفحه، در چه جهتی شناور شود. این اندازه ها شامل sm, md, lg, xl و xxl هستند.

در ادامه، لیست کاملی از کلاس‌های کاربردی .float را مشاهده می‌کنید که در بوت استرپ پشتیبانی می‌شوند:

.float_start
.float_end
.float_none

برای نسخه های واکنش گرا:

.float_sm_start
.float_sm_end
.float_sm_none
.float_md_start
.float_md_end
.float_md_none
.float_lg_start
.float_lg_end
.float_lg_none
.float_xl_start
.float_xl_end
.float_xl_none
.float_xxl_start
.float_xxl_end
.float_xxl_none

نکته: برای مشاهده عملکرد این کلاس ها در اندازه های مختلف، کافیست اندازه پنجره مرورگر را تغییر دهید.

در ادامه، نمونه‌ای از نحوه عملکرد این کلاس ها در اندازه های مختلف صفحه نمایش ارائه می‌شود:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Float</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>
    <div class="container mt-3">
    <h4><u>Responsive float utilities</u></h4>
    
      <div class="float-sm-start p-2 text-primary">
          The text floats to the left when the screen size is small or wider.
      </div>
      
      <div class="float-md-end p-2 text-success">
          The text floats to the right when the screen size is medium or wider.
      </div>
      
      <div class="float-lg-none p-2 text-danger">
          The text does not float to the right when the screen size is large or wider.
      </div>
      
      <div class="float-xl-end p-2 text-info">
          The text floats to the right when the screen size is extra large or wider.
      </div>
      </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Float</title>

</head>

<body>

<h4><u>Responsive float utilities</u></h4>

The text floats to the left when the screen size is small or wider.

</div>

The text floats to the right when the screen size is medium or wider.

</div>

The text does not float to the right when the screen size is large or wider.

</div>

The text floats to the right when the screen size is extra large or wider.

</div>

</body>

</html>

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

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

به این مطلب امتیاز دهید

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

نظرات

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

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

آموزش float در بوت استرپ

واکنش گرایی در Float بوت استرپ

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط