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

0 دیدگاه

در این بخش، ابزارهای کمکی مربوط به box-shadow در بوت استرپ معرفی می‌شوند. بوت استرپ مجموعه ای از کلاس‌های CSS را در اختیار شما قرار می‌دهد که با استفاده از آن‌ها می‌توانید انواع مختلفی از سایه را به عناصر وب‌سایت خود اضافه کنید.

این کلاس ها از پیش تعریف شده‌اند و به‌سادگی قابل استفاده هستند:

کلاس	توضیح
`.shadow-none`	بدون هیچگونه سایه
`.shadow-sm`	اضافه کردن سایه ملایم و کم‌رنگ
`.shadow`	اعمال سایه با شدت متوسط
`.shadow-lg`	ایجاد سایه بزرگ و پررنگ برای تاکید بیشتر

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

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

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap - Shadows</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>Shadow effect</h4>
       <div><button class="btn shadow-none">Button with no shadow</button></div>
       <div><button class="btn shadow">Button with a subtle shadow</button></div>
       <div><button class="btn shadow-sm">Button with a regular shadow</button></div>
       <div><button class="btn shadow-lg">Button with a larger shadow</button></div>
     </div>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Shadows</title>

</head>

<body>

<h4>Shadow effect</h4>

<div><button class="btn shadow-none">Button with no shadow</button></div>

<div><button class="btn shadow">Button with a subtle shadow</button></div>

<div><button class="btn shadow-sm">Button with a regular shadow</button></div>

<div><button class="btn shadow-lg">Button with a larger shadow</button></div>

</div>

</body>

</html>

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

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

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

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

نظرات

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

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

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

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط