آموزش تنظیم شفافیت در بوت استرپ (Opacity)

0 دیدگاه

در مقاله تنظیم شفافیت در بوت استرپ به بررسی ویژگی شفافیت (Opacity) عناصر در طراحی صفحات وب می‌پردازدیم. ویژگی opacity در CSS میزان شفاف یا مات بودن یک عنصر را مشخص می‌کند.

فریم ورک بوت استرپ مجموعه‌ای از کلاس‌های از پیش تعریف‌شده برای کنترل شفافیت ارائه می‌دهد که به طراحان کمک می‌کند بدون نیاز به نوشتن کد CSS جداگانه، به راحتی سطوح مختلفی از شفافیت را روی عناصر اعمال کنند. این کلاس ها با ساختار opacity-{مقدار} نام‌گذاری شده‌اند که در آن {مقدار} عددی بین ۰ تا ۱۰۰ است و میزان شفافیت عنصر را مشخص می‌کند. در بسیاری از منابع آموزش بوت استرپ نیز از این کلاس‌ها برای ایجاد جلوه‌های بصری حرفه‌ای استفاده می شود.

برای درک بهتر، به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Opacity</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 text-center m-3 p-3">
     <h3>Opacity</h3>
     <div class="opacity-0 pb-3 bg-primary border border-dark">
      <p class="text-center text-dark display-6">5</p></div>
      <p>opacity-0 will not display the text</p>
     <div class="opacity-25 pb-3 bg-primary border border-dark">
       <p class="text-center text-dark display-6">25</p></div>
     <div class="opacity-50 pb-3 bg-primary border border-dark">
      <p class="text-center text-dark display-6">50</p></div>
     <div class="opacity-75 pb-3 bg-primary border border-dark">
      <p class="text-center text-dark display-6">75</p></div>
     <div class="opacity-100 pb-3 bg-primary border border-dark">
      <p class="text-center text-dark display-6">100</p></div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Opacity</title>

</head>

<body>

<h3>Opacity</h3>

<p>opacity-0 will not display the text</p>

</div>

</body>

</html>

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

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

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

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

نظرات

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

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

آموزش تنظیم شفافیت در بوت استرپ (Opacity)

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط