ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﮓﻧﺭ :5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

فهرست مطالب

    نمایش فهرست مطالب

ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﮓﻧﺭ

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ﯼﺎﻫ ﺱﻼﮐ

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

ﻝﺎﺜﻣ

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide &quot;meaning through colors&quot;.</p>
  <div class="bg-primary p-3"></div>
  <div class="bg-success p-3"></div>
  <div class="bg-info p-3"></div>
  <div class="bg-warning p-3"></div>
  <div class="bg-danger p-3"></div>
  <div class="bg-secondary p-3"></div>
  <div class="bg-dark p-3"></div>
  <div class="bg-light p-3"></div>
</div>

</body>
</html>

ﺎﻤﺷ ﺯﺍ ﺲﭘ ﻞﻗﺍﺪﺣ ﺎﯾ ،ﺪﻨﻨﮐﯽﻤﻧ ﺭﺎﮐ ﺏﻮﺧ ﻦﺘﻣ ﺎﺑ ﻻﺎﺑ

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﺎﻤﺷ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ

ﻝﺎﺜﻣ

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Background Color with Contrasting Text Color</h2>
  <p class="text-bg-primary">This text is important.</p>
  <p class="text-bg-success">This text indicates success.</p>
  <p class="text-bg-info">This text represents some information.</p>
  <p class="text-bg-warning">This text represents a warning.</p>
  <p class="text-bg-danger">This text represents danger.</p>
  <p class="text-bg-secondary">Secondary background color.</p>
  <p class="text-bg-dark">Dark grey background color.</p>
  <p class="text-bg-light">Light grey background color.</p>
</div>

</body>
</html>