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

0 دیدگاه

در این بخش ابزارهای کنترلی مربوط به نمایش و مخفی سازی عناصر در بوت استرپ را بررسی می‌کنیم. کلاس های visibility در بوت استرپ به شما امکان می‌دهند وضعیت دیده شدن عناصر را بدون تغییر در نوع نمایش (display) کنترل کنید.

بوت استرپ دو کلاس اصلی برای مدیریت قابلیت نمایش عناصر به شما ارائه می‌دهد:

.visible: این کلاس به‌صورت پیش‌فرض فعال است. با استفاده از آن، محتوای مورد نظر روی صفحه قابل مشاهده خواهد بود.
.invisible: این کلاس برای پنهان کردن محتوای یک عنصر به کار می‌رود.

وقتی از کلاس .invisible استفاده می‌کنید، عنصر نه‌تنها از دید کاربران معمولی مخفی می‌شود، بلکه ابزارهای کمکی مانند صفحه‌خوان‌ها نیز آن را نادیده می‌گیرند.

در ادامه، یک مثال ساده از نحوه استفاده از کلاس های .visible و .invisible را مشاهده می‌کنید:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Visibility</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-2">
      <h4 class="display-5 text-success">
          Visibility utility classes
      </h4>
    </div>
    <div class="container mx-5 p-3">
    <strong>The utility classes that controls the visibility of the content on the webpage.</strong>
      <p class="visible text-bg-primary">
         The text on the webpage is visible due to the use of visibility class ".visible".
      </p>
      <p class="invisible">
        The text on the webpage is not visible due to the use of visibility class ".invisible".
      </p>
      <p class="text-bg-warning">This is the text that is without a visibility class usage.</p>
    </div>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Visibility</title>

</head>

<body>

Visibility utility classes

</h4>

</div>

<strong>The utility classes that controls the visibility of the content on the webpage.</strong>

The text on the webpage is visible due to the use of visibility class ".visible".

</p>

The text on the webpage is not visible due to the use of visibility class ".invisible".

</p>

<p class="text-bg-warning">This is the text that is without a visibility class usage.</p>

</div>

</body>

</html>

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

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

شناخت دقیق ابزارهای visibility در بوت استرپ به شما این امکان را می‌دهد که ظاهر سایت را بدون نیاز به حذف عناصر، به شکل کاملاً انعطاف‌پذیر مدیریت کنید. اگر می‌خواهید طراحی صفحات واکنش گرا و حرفه‌ای را به‌صورت گام‌به‌گام یاد بگیرید، پیشنهاد می‌کنیم حتماً نگاهی به دوره طراحی سایت با بوت استرپ بیندازید. در این دوره، تمام مفاهیم پایه تا پیشرفته بوت استرپ را به زبان ساده و کاربردی یاد می‌گیرید.

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

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

نظرات

آموزش انیمیشن‌ سازی دو بعدی با موهو – خلق انیمیشن‌ های خلاقانه شبیه دیرین دیرین

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

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

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط