in English

ಗುಂಡಿಗಳು

ಬಹು ಗಾತ್ರಗಳು, ರಾಜ್ಯಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಬೆಂಬಲದೊಂದಿಗೆ ರೂಪಗಳು, ಸಂವಾದಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಲ್ಲಿ ಕ್ರಿಯೆಗಳಿಗಾಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕಸ್ಟಮ್ ಬಟನ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಿ.

ಈ ಪುಟದಲ್ಲಿ

ಉದಾಹರಣೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಹಲವಾರು ಪೂರ್ವನಿರ್ಧರಿತ ಬಟನ್ ಶೈಲಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಪ್ರತಿಯೊಂದೂ ತನ್ನದೇ ಆದ ಲಾಕ್ಷಣಿಕ ಉದ್ದೇಶವನ್ನು ಪೂರೈಸುತ್ತದೆ, ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಕೆಲವು ಹೆಚ್ಚುವರಿಗಳನ್ನು ಎಸೆಯಲಾಗುತ್ತದೆ.

html

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

<button type="button" class="btn btn-link">Link</button>

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

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

ಪಠ್ಯ ಸುತ್ತುವಿಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ

ಬಟನ್ ಪಠ್ಯವನ್ನು ಕಟ್ಟಲು ನೀವು ಬಯಸದಿದ್ದರೆ, ನೀವು .text-nowrapವರ್ಗವನ್ನು ಬಟನ್‌ಗೆ ಸೇರಿಸಬಹುದು. ಸಾಸ್‌ನಲ್ಲಿ, ಪ್ರತಿ ಬಟನ್‌ಗೆ ಪಠ್ಯ ಸುತ್ತುವಿಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ನೀವು ಹೊಂದಿಸಬಹುದು $btn-white-space: nowrap.

ಬಟನ್ ಟ್ಯಾಗ್ಗಳು

ತರಗತಿಗಳನ್ನು ಅಂಶದೊಂದಿಗೆ .btnಬಳಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ . ಆದಾಗ್ಯೂ, ನೀವು ಈ ತರಗತಿಗಳನ್ನು ಅಥವಾ ಅಂಶಗಳನ್ನು <button>ಸಹ ಬಳಸಬಹುದು (ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳು ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸಬಹುದು).<a><input>

<a>ಪ್ರಸ್ತುತ ಪುಟದಲ್ಲಿನ ಹೊಸ ಪುಟಗಳು ಅಥವಾ ವಿಭಾಗಗಳಿಗೆ ಲಿಂಕ್ ಮಾಡುವ ಬದಲು ಪುಟದಲ್ಲಿನ ಕಾರ್ಯವನ್ನು ಪ್ರಚೋದಿಸಲು (ವಿಷಯ ಕುಸಿಯುವಂತೆ) ಬಳಸುವ ಅಂಶಗಳ ಮೇಲೆ ಬಟನ್ ತರಗತಿಗಳನ್ನು ಬಳಸುವಾಗ , ಈ ಲಿಂಕ್‌ಗಳಿಗೆ role="button"ತಮ್ಮ ಉದ್ದೇಶವನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಸೂಕ್ತವಾಗಿ ತಿಳಿಸಲು ನೀಡಬೇಕು ಪರದೆಯ ಓದುಗರು.

ಲಿಂಕ್

html

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ಔಟ್ಲೈನ್ ಬಟನ್ಗಳು

ಒಂದು ಬಟನ್ ಅಗತ್ಯವಿದೆ, ಆದರೆ ಅವರು ತರುವ ಭಾರೀ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳಲ್ಲವೇ? .btn-outline-*ಯಾವುದೇ ಬಟನ್‌ನಲ್ಲಿ ಎಲ್ಲಾ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು ಮತ್ತು ಬಣ್ಣಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಡೀಫಾಲ್ಟ್ ಮಾರ್ಪಾಡು ವರ್ಗಗಳನ್ನು ಬದಲಾಯಿಸಿ .

html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ಕೆಲವು ಬಟನ್ ಶೈಲಿಗಳು ತುಲನಾತ್ಮಕವಾಗಿ ಬೆಳಕಿನ ಮುಂಭಾಗದ ಬಣ್ಣವನ್ನು ಬಳಸುತ್ತವೆ ಮತ್ತು ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಹೊಂದಲು ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಮಾತ್ರ ಬಳಸಬೇಕು.

ಗಾತ್ರಗಳು

ದೊಡ್ಡ ಅಥವಾ ಚಿಕ್ಕ ಬಟನ್‌ಗಳನ್ನು ಇಷ್ಟಪಡುತ್ತೀರಾ? ಸೇರಿಸಿ .btn-lgಅಥವಾ .btn-smಹೆಚ್ಚುವರಿ ಗಾತ್ರಗಳಿಗೆ.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

CSS ವೇರಿಯೇಬಲ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಗಾತ್ರವನ್ನು ಸಹ ನೀವು ರೋಲ್ ಮಾಡಬಹುದು:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

ಅಂಗವಿಕಲ ಸ್ಥಿತಿ

ಯಾವುದೇ ಅಂಶಕ್ಕೆ disabledಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬಟನ್‌ಗಳು ನಿಷ್ಕ್ರಿಯವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಿ . <button>ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಟನ್‌ಗಳನ್ನು pointer-events: noneಅನ್ವಯಿಸಲಾಗಿದೆ, ಹೋವರ್ ಮತ್ತು ಸಕ್ರಿಯ ಸ್ಥಿತಿಗಳನ್ನು ಪ್ರಚೋದಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

ಅಂಶವನ್ನು ಬಳಸಿಕೊಂಡು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಟನ್‌ಗಳು <a>ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾಗಿ ವರ್ತಿಸುತ್ತವೆ:

<a>ಗಳು ಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ , ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ದೃಷ್ಟಿಗೆ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವಂತೆ ಮಾಡಲು ವರ್ಗವನ್ನು disabledಸೇರಿಸಬೇಕು ..disabled
pointer-eventsಆಂಕರ್ ಬಟನ್‌ಗಳಲ್ಲಿ ಎಲ್ಲವನ್ನೂ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕೆಲವು ಭವಿಷ್ಯದ-ಸ್ನೇಹಿ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಲಾಗಿದೆ .
ಬಳಸಿಕೊಂಡು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಟನ್‌ಗಳು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅಂಶದ ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸಲು ಗುಣಲಕ್ಷಣವನ್ನು <a>ಒಳಗೊಂಡಿರಬೇಕು .aria-disabled="true"
ಬಳಸುವ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಟನ್‌ಗಳು <a> ಗುಣಲಕ್ಷಣವನ್ನು ಒಳಗೊಂಡಿರಬಾರದು href.

ಪ್ರಾಥಮಿಕ ಲಿಂಕ್ ಲಿಂಕ್

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

ಲಿಂಕ್ ಕ್ರಿಯಾತ್ಮಕತೆಯ ಎಚ್ಚರಿಕೆ

hrefನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಲಿಂಕ್‌ನಲ್ಲಿ ನೀವು ಗುಣಲಕ್ಷಣವನ್ನು ಇರಿಸಬೇಕಾದ ಸಂದರ್ಭಗಳನ್ನು ಕವರ್ ಮಾಡಲು , .disabledವರ್ಗವು s pointer-events: noneನ ಲಿಂಕ್ ಕಾರ್ಯವನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ . <a>ಈ CSS ಆಸ್ತಿಯನ್ನು ಇನ್ನೂ HTML ಗಾಗಿ ಪ್ರಮಾಣೀಕರಿಸಲಾಗಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ, ಆದರೆ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಇದನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ಸಹ pointer-events: none, ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಶನ್ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ, ಅಂದರೆ ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರು ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರು ಇನ್ನೂ ಈ ಲಿಂಕ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಆದ್ದರಿಂದ ಸುರಕ್ಷಿತವಾಗಿರಲು, ಜೊತೆಗೆ , aria-disabled="true"ಕೀಬೋರ್ಡ್ tabindex="-1"ಫೋಕಸ್ ಸ್ವೀಕರಿಸುವುದನ್ನು ತಡೆಯಲು ಈ ಲಿಂಕ್‌ಗಳ ಮೇಲೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಅವುಗಳ ಕಾರ್ಯವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕಸ್ಟಮ್ JavaScript ಅನ್ನು ಬಳಸಿ.

ಪ್ರಾಥಮಿಕ ಲಿಂಕ್ ಲಿಂಕ್

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ಗುಂಡಿಗಳನ್ನು ನಿರ್ಬಂಧಿಸಿ

ನಮ್ಮ ಡಿಸ್‌ಪ್ಲೇ ಮತ್ತು ಗ್ಯಾಪ್ ಯುಟಿಲಿಟಿಗಳ ಮಿಶ್ರಣದೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ನಲ್ಲಿರುವಂತೆ ಪೂರ್ಣ-ಅಗಲ, "ಬ್ಲಾಕ್ ಬಟನ್‌ಗಳ" ರೆಸ್ಪಾನ್ಸಿವ್ ಸ್ಟ್ಯಾಕ್‌ಗಳನ್ನು ರಚಿಸಿ. ಬಟನ್ ನಿರ್ದಿಷ್ಟ ವರ್ಗಗಳ ಬದಲಿಗೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, ಅಂತರ, ಜೋಡಣೆ ಮತ್ತು ಸ್ಪಂದಿಸುವ ನಡವಳಿಕೆಗಳ ಮೇಲೆ ನಾವು ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಹೊಂದಿದ್ದೇವೆ.

html

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ಇಲ್ಲಿ ನಾವು ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆಯ ಬದಲಾವಣೆಯನ್ನು ರಚಿಸುತ್ತೇವೆ, ಲಂಬವಾಗಿ ಜೋಡಿಸಲಾದ ಬಟನ್‌ಗಳಿಂದ ಪ್ರಾರಂಭಿಸಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನವರೆಗೆ md, ಅಲ್ಲಿ ವರ್ಗವನ್ನು ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ, ಹೀಗಾಗಿ ಉಪಯುಕ್ತತೆಯನ್ನು ರದ್ದುಗೊಳಿಸಲಾಗುತ್ತದೆ. ಅವುಗಳ ಬದಲಾವಣೆಯನ್ನು ನೋಡಲು ನಿಮ್ಮ ಬ್ರೌಸರ್ ಅನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿ..d-md-block.d-gridgap-2

html

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ಗ್ರಿಡ್ ಕಾಲಮ್ ಅಗಲ ತರಗತಿಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಬ್ಲಾಕ್ ಬಟನ್‌ಗಳ ಅಗಲವನ್ನು ನೀವು ಸರಿಹೊಂದಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಅರ್ಧ ಅಗಲದ "ಬ್ಲಾಕ್ ಬಟನ್" ಗಾಗಿ, ಬಳಸಿ .col-6. ಜೊತೆಗೆ ಅದನ್ನು ಅಡ್ಡಲಾಗಿ .mx-autoಕೇಂದ್ರೀಕರಿಸಿ.

html

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ಸಮತಲವಾಗಿರುವಾಗ ಬಟನ್‌ಗಳ ಜೋಡಣೆಯನ್ನು ಸರಿಹೊಂದಿಸಲು ಹೆಚ್ಚುವರಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಬಹುದು. ಇಲ್ಲಿ ನಾವು ನಮ್ಮ ಹಿಂದಿನ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಉದಾಹರಣೆಯನ್ನು ತೆಗೆದುಕೊಂಡಿದ್ದೇವೆ ಮತ್ತು ಬಟನ್‌ಗಳನ್ನು ಇನ್ನು ಮುಂದೆ ಜೋಡಿಸದಿದ್ದಾಗ ಅವುಗಳನ್ನು ಬಲಕ್ಕೆ ಜೋಡಿಸಲು ಕೆಲವು ಫ್ಲೆಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಮತ್ತು ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಯನ್ನು ಸೇರಿಸಿದ್ದೇವೆ.

html

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ಬಟನ್ ಪ್ಲಗಿನ್

ಬಟನ್ ಪ್ಲಗಿನ್ ಸರಳವಾದ ಆನ್/ಆಫ್ ಟಾಗಲ್ ಬಟನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ದೃಷ್ಟಿಗೋಚರವಾಗಿ, ಈ ಟಾಗಲ್ ಬಟನ್‌ಗಳು ಚೆಕ್‌ಬಾಕ್ಸ್ ಟಾಗಲ್ ಬಟನ್‌ಗಳಿಗೆ ಹೋಲುತ್ತವೆ . ಆದಾಗ್ಯೂ, ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಮೂಲಕ ಅವುಗಳನ್ನು ವಿಭಿನ್ನವಾಗಿ ತಿಳಿಸಲಾಗುತ್ತದೆ: ಚೆಕ್‌ಬಾಕ್ಸ್ ಟಾಗಲ್‌ಗಳನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು "ಚೆಕ್ ಮಾಡಲಾಗಿದೆ"/"ಪರೀಕ್ಷಿಸಲಾಗಿಲ್ಲ" ಎಂದು ಘೋಷಿಸಲಾಗುತ್ತದೆ (ಅವುಗಳ ಗೋಚರಿಸುವಿಕೆಯ ಹೊರತಾಗಿಯೂ, ಅವು ಮೂಲಭೂತವಾಗಿ ಇನ್ನೂ ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳಾಗಿವೆ), ಆದರೆ ಈ ಟಾಗಲ್ ಬಟನ್‌ಗಳನ್ನು ಹೀಗೆ ಘೋಷಿಸಲಾಗುತ್ತದೆ "ಬಟನ್"/"ಬಟನ್ ಒತ್ತಿದರೆ". ಈ ಎರಡು ವಿಧಾನಗಳ ನಡುವಿನ ಆಯ್ಕೆಯು ನೀವು ರಚಿಸುತ್ತಿರುವ ಟಾಗಲ್ ಪ್ರಕಾರವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ ಮತ್ತು ಚೆಕ್‌ಬಾಕ್ಸ್‌ನಂತೆ ಅಥವಾ ನಿಜವಾದ ಬಟನ್‌ನಂತೆ ಘೋಷಿಸಿದಾಗ ಟಾಗಲ್ ಬಳಕೆದಾರರಿಗೆ ಅರ್ಥವಾಗುತ್ತದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ.

ಸ್ಥಿತಿಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಿ

data-bs-toggle="button"ಬಟನ್‌ನ activeಸ್ಥಿತಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸೇರಿಸಿ . .activeನೀವು ಬಟನ್ ಅನ್ನು ಪೂರ್ವ-ಟಾಗಲ್ ಮಾಡುತ್ತಿದ್ದರೆ, ನೀವು ಕ್ಲಾಸ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಸೇರಿಸಬೇಕು ಮತ್ತು aria-pressed="true" ಅದನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಸೂಕ್ತವಾಗಿ ರವಾನಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು.

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

ಲಿಂಕ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡಿ ಸಕ್ರಿಯ ಟಾಗಲ್ ಲಿಂಕ್ ಟಾಗಲ್ ಲಿಂಕ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ

html

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

ವಿಧಾನಗಳು

ಬಟನ್ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ನೊಂದಿಗೆ ನೀವು ಬಟನ್ ನಿದರ್ಶನವನ್ನು ರಚಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ:

const bsButton = new bootstrap.Button('#myButton')

ವಿಧಾನ	ವಿವರಣೆ
`dispose`	ಅಂಶದ ಬಟನ್ ಅನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. (DOM ಅಂಶದಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ)
`getInstance`	DOM ಅಂಶಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಬಟನ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ, ನೀವು ಇದನ್ನು ಈ ರೀತಿ ಬಳಸಬಹುದು: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	DOM ಅಂಶಕ್ಕೆ ಸಂಯೋಜಿತವಾಗಿರುವ ಬಟನ್ ನಿದರ್ಶನವನ್ನು ಹಿಂದಿರುಗಿಸುವ ಸ್ಥಿರ ವಿಧಾನ ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಿ. ನೀವು ಇದನ್ನು ಈ ರೀತಿ ಬಳಸಬಹುದು: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	ತಳ್ಳುವ ಸ್ಥಿತಿಯನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಬಟನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದ ನೋಟವನ್ನು ನೀಡುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ಎಲ್ಲಾ ಬಟನ್‌ಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಲು

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

ಅಸ್ಥಿರ

v5.2.0 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರುವ CSS ಅಸ್ಥಿರ ವಿಧಾನದ ಭಾಗವಾಗಿ, ಬಟನ್‌ಗಳು ಈಗ .btnವರ್ಧಿತ ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. CSS ವೇರಿಯೇಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು Sass ಮೂಲಕ ಹೊಂದಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ Sass ಗ್ರಾಹಕೀಕರಣವು ಇನ್ನೂ ಬೆಂಬಲಿತವಾಗಿದೆ.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

ಪ್ರತಿ ಪರಿವರ್ತಕ ವರ್ಗವು ನಮ್ಮ , , ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳೊಂದಿಗೆ .btn-*ಹೆಚ್ಚುವರಿ CSS ನಿಯಮಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸೂಕ್ತವಾದ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನವೀಕರಿಸುತ್ತದೆ .button-variant()button-outline-variant()button-size()

.btn-*ನಮ್ಮದೇ ಆದ CSS ಮತ್ತು Sass ವೇರಿಯೇಬಲ್‌ಗಳ ಮಿಶ್ರಣದೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಮರುಹೊಂದಿಸುವ ಮೂಲಕ ನಮ್ಮ ಡಾಕ್ಸ್‌ಗೆ ವಿಶಿಷ್ಟವಾದ ಬಟನ್‌ಗಳಿಗಾಗಿ ನಾವು ಮಾಡುವಂತಹ ಕಸ್ಟಮ್ ಮಾರ್ಪಾಡು ವರ್ಗವನ್ನು ನಿರ್ಮಿಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ .

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

ಸಾಸ್ ಅಸ್ಥಿರ

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

ಸಾಸ್ ಮಿಕ್ಸಿನ್ಸ್

ಬಟನ್‌ಗಳಿಗಾಗಿ ಮೂರು ಮಿಕ್ಸಿನ್‌ಗಳಿವೆ: ಬಟನ್ ಮತ್ತು ಬಟನ್ ಔಟ್‌ಲೈನ್ ವೇರಿಯಂಟ್ ಮಿಕ್ಸಿನ್‌ಗಳು (ಎರಡೂ ಆಧರಿಸಿ $theme-colors), ಜೊತೆಗೆ ಬಟನ್ ಗಾತ್ರದ ಮಿಕ್ಸಿನ್.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

ಸಾಸ್ ಕುಣಿಕೆಗಳು

$theme-colorsಬಟನ್ ರೂಪಾಂತರಗಳು (ನಿಯಮಿತ ಮತ್ತು ಔಟ್‌ಲೈನ್ ಬಟನ್‌ಗಳಿಗಾಗಿ) ನಲ್ಲಿ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ರಚಿಸಲು ನಮ್ಮ ನಕ್ಷೆಯೊಂದಿಗೆ ಅವುಗಳ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

ಗುಂಡಿಗಳು

ಉದಾಹರಣೆಗಳು

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

ಪಠ್ಯ ಸುತ್ತುವಿಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ

ಬಟನ್ ಟ್ಯಾಗ್ಗಳು

ಔಟ್ಲೈನ್ ​​ಬಟನ್ಗಳು

ಗಾತ್ರಗಳು

ಅಂಗವಿಕಲ ಸ್ಥಿತಿ

ಲಿಂಕ್ ಕ್ರಿಯಾತ್ಮಕತೆಯ ಎಚ್ಚರಿಕೆ

ಗುಂಡಿಗಳನ್ನು ನಿರ್ಬಂಧಿಸಿ

ಬಟನ್ ಪ್ಲಗಿನ್

ಸ್ಥಿತಿಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಿ

ವಿಧಾನಗಳು

CSS

ಅಸ್ಥಿರ

ಸಾಸ್ ಅಸ್ಥಿರ

ಸಾಸ್ ಮಿಕ್ಸಿನ್ಸ್

ಸಾಸ್ ಕುಣಿಕೆಗಳು

ಔಟ್ಲೈನ್ ಬಟನ್ಗಳು