ﺎﻫ ﮓﻧﺭ :5 ﭖﺮﺘﺳﺍ ﺕﻮﺑ

فهرست مطالب

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

ﻦﺘﻣ ﯼﺎﻫ ﮓﻧﺭ

.ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ "ﺎﻫ ﮓﻧﺭ ﻖﯾﺮﻃ ﺯﺍ ﺎﻨﻌﻣ" ﻪﺋﺍﺭﺍ ﯼﺍﺮﺑ ﺎﻬﻧﺁ ﺯﺍ ﻥﺍﻮﺗ ﯽﻣ ﻪﮐ ﺖﺳﺍ ﯼﺍ ﻪﻨﯿﻣﺯ

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ ﻦﺘﻣ ﮓﻧﺭ ﯼﺎﻫ ﺱﻼﮐ

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light

.ﺖﺳﺍ ﻩﺎﯿﺳ ﺐﻠﻏﺍ ،ﺖﺳﺍ ﺽﺮﻓ ﺶﯿﭘ ﻪﻧﺪﺑ ﮓﻧﺭ .text-body

ﻝﺎﺜﻣ

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

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

<!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 Colors</h2>
  <p>Use the contextual classes to provide &quot;meaning through colors&quot;:</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>

</body>
</html>

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺪﯿﻔﺳ ﺎﯾ ﻩﺎﯿﺳ ﻦﺘﻣ ﯼﺍﺮﺑ ﺕﺭﻭﺪﮐ.text-white-50 50%> ﺎﯾ

ﻝﺎﺜﻣ

Black text with 50% opacity on white background

White text with 50% opacity on black background

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

<!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>Opacity Text Colors</h2>
  <p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
  <p class="text-black-50">Black text with 50% opacity on white background</p>
  <p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>

</body>
</html>

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

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

.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>