آموزش پس زمینه در بوت استرپ (background)

0 دیدگاه

این بخش به معرفی کلاس های کاربردی برای رنگ پس زمینه در بوت استرپ می‌پردازد. همچنین، به گرادینت هایی اشاره می‌کند که می‌توان آن‌ها را با این کلاس ها ترکیب کرد.

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

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

رنگ پس زمینه در بوت استرپ

همان‌طور که با استفاده از کلاس های زمینه ای می‌توان رنگ متن را تغییر داد، امکان تغییر رنگ پس زمینه نیز وجود دارد. کافی است یکی از این کلاس ها را به عنصر موردنظر اعمال کنید.

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</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>Background color utilities</h4>  
     
    <!--success color-->
    <div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div>
    <div class="p-3 mb-2 bg-success-subtle text-emphasis-success">background utility subtle--> .bg-success-subtle</div>
    <!--warning color-->
    <div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div>
    <div class="p-3 mb-2 bg-warning-subtle text-emphasis-warning">background utility subtle --> .bg-warning-subtle</div>
    <!--info color-->
    <div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div>
    <div class="p-3 mb-2 bg-info-subtle text-emphasis-info">background utility subtle--> .bg-info-subtle</div>
    <!--dark color-->
    <div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div>
    <div class="p-3 mb-2 bg-dark-subtle text-emphasis-dark">background utility subtle--> .bg-dark-subtle</div>
    <!--primary color-->
    <div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div>
    <div class="p-3 mb-2 bg-primary-subtle text-emphasis-primary">background utility subtle--> .bg-primary-subtle</div>
    <!--light color-->
    <div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div>
    <div class="p-3 mb-2 bg-light-subtle text-emphasis-light">background utility subtle--> .bg-light-subtle</div>
    <!--secondary color-->
    <div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div>
    <div class="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">background utility subtle--> .bg-secondary-subtle</div>
    <!--body color-->
    <div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div>
    <div class="p-3 mb-2 bg-black text-white">background utility subtle--> .bg-black</div>
    <!--danger color-->
    <div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div>
    <div class="p-3 mb-2 bg-danger-subtle text-emphasis-danger">background utility subtle--> .bg-danger-subtle</div>
    <!--white color-->
    <div class="p-3 mb-2 bg-white text-dark">background utility --> .bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-body">background utility subtle--> .bg-transparent</div>
    <!--secondary and tertiary color-->
    <p class="p-3 mb-2 bg-body-secondary">background utility --> .bg-body-secondary</p>
    <p class="p-3 mb-2 bg-body-tertiary">background utility --> .bg-body-tertiary</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Background</title>

</head>

<body>

<h4>Background color utilities</h4>

<div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div>

<div class="p-3 mb-2 bg-success-subtle text-emphasis-success">background utility subtle--> .bg-success-subtle</div>

<div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div>

<div class="p-3 mb-2 bg-warning-subtle text-emphasis-warning">background utility subtle --> .bg-warning-subtle</div>

<div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div>

<div class="p-3 mb-2 bg-info-subtle text-emphasis-info">background utility subtle--> .bg-info-subtle</div>

<div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div>

<div class="p-3 mb-2 bg-dark-subtle text-emphasis-dark">background utility subtle--> .bg-dark-subtle</div>

<div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div>

<div class="p-3 mb-2 bg-primary-subtle text-emphasis-primary">background utility subtle--> .bg-primary-subtle</div>

<div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div>

<div class="p-3 mb-2 bg-light-subtle text-emphasis-light">background utility subtle--> .bg-light-subtle</div>

<div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div>

<div class="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">background utility subtle--> .bg-secondary-subtle</div>

<div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div>

<div class="p-3 mb-2 bg-black text-white">background utility subtle--> .bg-black</div>

<div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div>

<div class="p-3 mb-2 bg-danger-subtle text-emphasis-danger">background utility subtle--> .bg-danger-subtle</div>

<div class="p-3 mb-2 bg-white text-dark">background utility --> .bg-white</div>

<div class="p-3 mb-2 bg-transparent text-body">background utility subtle--> .bg-transparent</div>

<p class="p-3 mb-2 bg-body-secondary">background utility --> .bg-body-secondary</p>

<p class="p-3 mb-2 bg-body-tertiary">background utility --> .bg-body-tertiary</p>

</body>

</html>

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

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

گرادینت پس زمینه

افزودن کلاس .bg-gradient باعث می‌شود یک گرادنیت خطی (linear gradient) به پس‌زمینه عنصر اعمال شود. این گرادینت از یک سفید نیمه شفاف در بالا شروع می‌شود و به‌تدریج در پایین محو می‌شود.

اگر قصد دارید این نوع گرادینت را در فایل CSS سفارشی خود اضافه کنید، کافی است از ویژگی زیر استفاده کنید:

background-image: var(--bs-gradient);

1	background-image: var(--bs-gradient);

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

<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</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>Background color utilities</h4>  
     
    <!--success color-->
    <div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div>
    <div class="p-3 mb-2 bg-success bg-gradient text-white">background gradient utility --> .bg-success bg-gradient</div>
    <!--warning color-->
    <div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div>
    <div class="p-3 mb-2 bg-warning bg-gradient text-emphasis-warning">background gradient utility --> .bg-warning bg-gradient</div>
    <!--info color-->
    <div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div>
    <div class="p-3 mb-2 bg-info bg-gradient text-emphasis-info">background gradient utility--> .bg-info bg-gradient</div>
    <!--dark color-->
    <div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div>
    <div class="p-3 mb-2 bg-dark bg-gradient text-white">background gradient utility --> .bg-dark bg-gradient</div>
    <!--primary color-->
    <div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div>
    <div class="p-3 mb-2 bg-primary bg-gradient text-white">background gradient utility--> .bg-primary bg-gradient</div>
    <!--light color-->
    <div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div>
    <div class="p-3 mb-2 bg-light bg-gradient text-emphasis-light">background gradient utility--> .bg-light bg-gradient</div>
    <!--secondary color-->
    <div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div>
    <div class="p-3 mb-2 bg-secondary bg-gradient text-white">background gradient utility--> .bg-secondary bg-gradient</div>
    <!--body color-->
    <div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div>
    <div class="p-3 mb-2 bg-black bg-gradient text-white">background gradient utility--> .bg-black bg-gradient</div>
    <!--danger color-->
    <div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div>
    <div class="p-3 mb-2 bg-danger bg-gradient text-white">background gradient utility--> .bg-danger bg-gradient</div>
    </div>
	</body>
</html>

<!DOCTYPE html> <!DOCTYPE html>

<head>

<title>Bootstrap Background</title>

</head>

<body>

<h4>Background color utilities</h4>

<div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div>

<div class="p-3 mb-2 bg-success bg-gradient text-white">background gradient utility --> .bg-success bg-gradient</div>

<div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div>

<div class="p-3 mb-2 bg-warning bg-gradient text-emphasis-warning">background gradient utility --> .bg-warning bg-gradient</div>

<div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div>

<div class="p-3 mb-2 bg-info bg-gradient text-emphasis-info">background gradient utility--> .bg-info bg-gradient</div>

<div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div>

<div class="p-3 mb-2 bg-dark bg-gradient text-white">background gradient utility --> .bg-dark bg-gradient</div>

<div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div>

<div class="p-3 mb-2 bg-primary bg-gradient text-white">background gradient utility--> .bg-primary bg-gradient</div>

<div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div>

<div class="p-3 mb-2 bg-light bg-gradient text-emphasis-light">background gradient utility--> .bg-light bg-gradient</div>

<div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div>

<div class="p-3 mb-2 bg-secondary bg-gradient text-white">background gradient utility--> .bg-secondary bg-gradient</div>

<div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div>

<div class="p-3 mb-2 bg-black bg-gradient text-white">background gradient utility--> .bg-black bg-gradient</div>

<div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div>

<div class="p-3 mb-2 bg-danger bg-gradient text-white">background gradient utility--> .bg-danger bg-gradient</div>

</div>

</body>

</html>

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

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

شفافیت (Opacity)

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

یا متغیر --bs-bg-opacity را با استفاده از استایل های سفارشی یا استایل های درون خطی (inline) بازنویسی کنید،
یا از کلاس‌های آماده‌ای مانند .bg-opacity-* استفاده کنید که در بوت استرپ ارائه شده‌اند.

در ادامه، مثالی را بررسی می‌کنیم که در آن مقدار متغیر CSS به‌صورت دستی بازنویسی شده است:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</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>Background opacity - override CSS variable</h4>
    <div class="bg-danger p-2 text-white">Default danger background</div>
    <div class="bg-danger p-2" style="--bs-bg-opacity: .5;">50% opacity of danger background</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Background</title>

</head>

<body>

<h4>Background opacity - override CSS variable</h4>

<div class="bg-danger p-2 text-white">Default danger background</div>

<div class="bg-danger p-2" style="--bs-bg-opacity: .5;">50% opacity of danger background</div>

</div>

</body>

</html>

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

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

در این بخش، مثالی را بررسی می‌کنیم که در آن از کلاس .bg-opacity برای تنظیم میزان شفافیت رنگ پس زمینه استفاده شده است:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Background</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>Background opacity utility</h4>
    <div class="bg-primary p-2 text-white">Primary default background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-10">10% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-25">25% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-50">50% opacity on primary background</div>
    <div class="bg-primary p-2 text-dark bg-opacity-75">75% opacity primary background</div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Background</title>

</head>

<body>

<h4>Background opacity utility</h4>

<div class="bg-primary p-2 text-white">Primary default background</div>

<div class="bg-primary p-2 text-dark bg-opacity-10">10% opacity on primary background</div>

<div class="bg-primary p-2 text-dark bg-opacity-25">25% opacity on primary background</div>

<div class="bg-primary p-2 text-dark bg-opacity-50">50% opacity on primary background</div>

<div class="bg-primary p-2 text-dark bg-opacity-75">75% opacity primary background</div>

</div>

</body>

</html>

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

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

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

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

نظرات

پکیج صفر تا صد آموزش سئو و بهینه سازی بصورت عملی

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

آموزش پس زمینه در بوت استرپ (background)

رنگ پس زمینه در بوت استرپ

گرادینت پس زمینه

شفافیت (Opacity)

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط