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

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

ಉದಾಹರಣೆ

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

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

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

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

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

ಸಂದರ್ಭೋಚಿತ ವ್ಯತ್ಯಾಸಗಳು

ಬ್ಯಾಡ್ಜ್‌ನ ನೋಟವನ್ನು ಬದಲಾಯಿಸಲು ಕೆಳಗೆ ತಿಳಿಸಲಾದ ಯಾವುದೇ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ಸೇರಿಸಿ.

ಪ್ರಾಥಮಿಕ ದ್ವಿತೀಯ ಯಶಸ್ಸು ಅಪಾಯ ಎಚ್ಚರಿಕೆ ಮಾಹಿತಿ ಬೆಳಕು ಕತ್ತಲು

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು

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

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

ಬ್ಯಾಡ್ಜ್‌ಗಳನ್ನು ಹೆಚ್ಚು ದುಂಡಾಗಿ ಮಾಡಲು ಮಾರ್ಪಡಿಸುವ ವರ್ಗವನ್ನು ಬಳಸಿ .badge-pill(ದೊಡ್ಡದಾದ border-radiusಮತ್ತು ಹೆಚ್ಚುವರಿ ಸಮತಲದೊಂದಿಗೆ padding). ನೀವು v3 ನಿಂದ ಬ್ಯಾಡ್ಜ್‌ಗಳನ್ನು ಕಳೆದುಕೊಂಡರೆ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಪ್ರಾಥಮಿಕ ದ್ವಿತೀಯ ಯಶಸ್ಸು ಅಪಾಯ ಎಚ್ಚರಿಕೆ ಮಾಹಿತಿ ಬೆಳಕು ಕತ್ತಲು

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

ಲಿಂಕ್‌ಗಳು

ಒಂದು ಅಂಶದ ಮೇಲೆ ಸಾಂದರ್ಭಿಕ .badge-*ತರಗತಿಗಳನ್ನು ಬಳಸುವುದರಿಂದ ತ್ವರಿತವಾಗಿ ಹೋವರ್ ಮತ್ತು ಫೋಕಸ್ ಸ್ಟೇಟ್‌ಗಳೊಂದಿಗೆ ಕ್ರಿಯಾಶೀಲ ಬ್ಯಾಡ್ಜ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.<a>

ಪ್ರಾಥಮಿಕ ದ್ವಿತೀಯ ಯಶಸ್ಸು ಅಪಾಯ ಎಚ್ಚರಿಕೆ ಮಾಹಿತಿ ಬೆಳಕು ಕತ್ತಲು

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>