ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
in English

ಬ್ಯಾಡ್ಜ್‌ಗಳು

ಬ್ಯಾಡ್ಜ್‌ಗಳಿಗೆ ದಾಖಲೆ ಮತ್ತು ಉದಾಹರಣೆಗಳು, ನಮ್ಮ ಸಣ್ಣ ಎಣಿಕೆ ಮತ್ತು ಲೇಬಲಿಂಗ್ ಘಟಕ.

ಈ ಪುಟದಲ್ಲಿ

ಉದಾಹರಣೆಗಳು

emಸಾಪೇಕ್ಷ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಘಟಕಗಳನ್ನು ಬಳಸಿಕೊಂಡು ತಕ್ಷಣದ ಮೂಲ ಅಂಶದ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಲು ಬ್ಯಾಡ್ಜ್‌ಗಳ ಅಳತೆ . v5 ರಂತೆ, ಬ್ಯಾಡ್ಜ್‌ಗಳು ಇನ್ನು ಮುಂದೆ ಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಫೋಕಸ್ ಅಥವಾ ಹೋವರ್ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ.

ಶೀರ್ಷಿಕೆಗಳು

ಉದಾಹರಣೆ ಶೀರ್ಷಿಕೆಹೊಸದು

ಉದಾಹರಣೆ ಶೀರ್ಷಿಕೆಹೊಸದು

ಉದಾಹರಣೆ ಶೀರ್ಷಿಕೆಹೊಸದು

ಉದಾಹರಣೆ ಶೀರ್ಷಿಕೆಹೊಸದು

ಉದಾಹರಣೆ ಶೀರ್ಷಿಕೆಹೊಸದು
ಉದಾಹರಣೆ ಶೀರ್ಷಿಕೆಹೊಸದು
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

ಗುಂಡಿಗಳು

ಕೌಂಟರ್ ಒದಗಿಸಲು ಲಿಂಕ್‌ಗಳು ಅಥವಾ ಬಟನ್‌ಗಳ ಭಾಗವಾಗಿ ಬ್ಯಾಡ್ಜ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಲಾಗುತ್ತದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ, ಬ್ಯಾಡ್ಜ್‌ಗಳು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಅಂತಹುದೇ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಗೊಂದಲವನ್ನು ಉಂಟುಮಾಡಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬ್ಯಾಡ್ಜ್‌ಗಳ ವಿನ್ಯಾಸವು ಅವುಗಳ ಉದ್ದೇಶದ ದೃಷ್ಟಿಗೋಚರ ಕ್ಯೂ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಈ ಬಳಕೆದಾರರಿಗೆ ಬ್ಯಾಡ್ಜ್‌ನ ವಿಷಯದೊಂದಿಗೆ ಸರಳವಾಗಿ ಪ್ರಸ್ತುತಪಡಿಸಲಾಗುತ್ತದೆ. ನಿರ್ದಿಷ್ಟ ಸನ್ನಿವೇಶವನ್ನು ಅವಲಂಬಿಸಿ, ಈ ಬ್ಯಾಡ್ಜ್‌ಗಳು ವಾಕ್ಯ, ಲಿಂಕ್ ಅಥವಾ ಬಟನ್‌ನ ಕೊನೆಯಲ್ಲಿ ಯಾದೃಚ್ಛಿಕ ಹೆಚ್ಚುವರಿ ಪದಗಳು ಅಥವಾ ಸಂಖ್ಯೆಗಳಂತೆ ಕಾಣಿಸಬಹುದು.

ಸಂದರ್ಭವು ಸ್ಪಷ್ಟವಾಗಿಲ್ಲದಿದ್ದರೆ ("ಅಧಿಸೂಚನೆಗಳು" ಉದಾಹರಣೆಯಂತೆ, "4" ಅಧಿಸೂಚನೆಗಳ ಸಂಖ್ಯೆ ಎಂದು ಅರ್ಥೈಸಿಕೊಳ್ಳಲಾಗುತ್ತದೆ), ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಮರೆಮಾಡಿದ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದ ತುಣುಕಿನ ಜೊತೆಗೆ ಹೆಚ್ಚುವರಿ ಸಂದರ್ಭವನ್ನು ಸೇರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಸ್ಥಾನ ಪಡೆದಿದೆ

a ಅನ್ನು ಮಾರ್ಪಡಿಸಲು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ .badgeಮತ್ತು ಅದನ್ನು ಲಿಂಕ್ ಅಥವಾ ಬಟನ್‌ನ ಮೂಲೆಯಲ್ಲಿ ಇರಿಸಿ.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

.badgeಹೆಚ್ಚು ಸಾಮಾನ್ಯ ಸೂಚಕಕ್ಕಾಗಿ ಎಣಿಕೆಯಿಲ್ಲದೆ ನೀವು ಇನ್ನೂ ಕೆಲವು ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ವರ್ಗವನ್ನು ಬದಲಾಯಿಸಬಹುದು .

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳು

ಬ್ಯಾಡ್ಜ್‌ನ ನೋಟವನ್ನು ತ್ವರಿತವಾಗಿ ಬದಲಾಯಿಸಲು ನಮ್ಮ ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಯ ತರಗತಿಗಳನ್ನು ಬಳಸಿ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಬಳಸುವಾಗ , ಸರಿಯಾದ ವಿನ್ಯಾಸಕ್ಕಾಗಿ .bg-lightನಿಮಗೆ ಪಠ್ಯ ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಯ ಅಗತ್ಯವಿರುತ್ತದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. .text-darkಏಕೆಂದರೆ ಹಿನ್ನೆಲೆ ಉಪಯುಕ್ತತೆಗಳು ಏನನ್ನೂ ಹೊಂದಿಸುವುದಿಲ್ಲ ಆದರೆ background-color.

ಪ್ರಾಥಮಿಕ ದ್ವಿತೀಯ ಯಶಸ್ಸು ಅಪಾಯ ಎಚ್ಚರಿಕೆ ಮಾಹಿತಿ ಬೆಳಕು ಕತ್ತಲು 
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು

ಅರ್ಥವನ್ನು ಸೇರಿಸಲು ಬಣ್ಣವನ್ನು ಬಳಸುವುದು ದೃಶ್ಯ ಸೂಚನೆಯನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ರವಾನೆಯಾಗುವುದಿಲ್ಲ. ಬಣ್ಣದಿಂದ ಸೂಚಿಸಲಾದ ಮಾಹಿತಿಯು ವಿಷಯದಿಂದಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಉದಾ ಗೋಚರ ಪಠ್ಯ), ಅಥವಾ .visually-hiddenವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳ ಮೂಲಕ ಸೇರಿಸಲಾಗಿದೆ.

ಪಿಲ್ ಬ್ಯಾಡ್ಜ್ಗಳು

.rounded-pillಬ್ಯಾಡ್ಜ್‌ಗಳನ್ನು ದೊಡ್ಡದರೊಂದಿಗೆ ಹೆಚ್ಚು ದುಂಡಾಗಿ ಮಾಡಲು ಯುಟಿಲಿಟಿ ವರ್ಗವನ್ನು ಬಳಸಿ border-radius.

ಪ್ರಾಥಮಿಕ ದ್ವಿತೀಯ ಯಶಸ್ಸು ಅಪಾಯ ಎಚ್ಚರಿಕೆ ಮಾಹಿತಿ ಬೆಳಕು ಕತ್ತಲು 
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

ಸಾಸ್

ಅಸ್ಥಿರ

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;