ಗುಂಡಿಗಳು

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

ಉದಾಹರಣೆಗಳು

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

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

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

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

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

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

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

<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-*ಯಾವುದೇ ಬಟನ್‌ನಲ್ಲಿ ಎಲ್ಲಾ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು ಮತ್ತು ಬಣ್ಣಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಡೀಫಾಲ್ಟ್ ಮಾರ್ಪಡಿಸುವ ತರಗತಿಗಳನ್ನು ಬದಲಾಯಿಸಿ .

<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ಹೆಚ್ಚುವರಿ ಗಾತ್ರಗಳಿಗೆ.

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

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

ಸೇರಿಸುವ ಮೂಲಕ-ಪೋಷಕರ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಬ್ಲಾಕ್ ಮಟ್ಟದ ಬಟನ್‌ಗಳನ್ನು ರಚಿಸಿ .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

ಸಕ್ರಿಯ ಸ್ಥಿತಿ

ಗಾಢವಾದ ಹಿನ್ನೆಲೆ, ಗಾಢವಾದ ಅಂಚು ಮತ್ತು ನೆರಳುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ, ಒಳಹರಿವಿನ ನೆರಳು ಹೊಂದಿರುವಾಗ ಬಟನ್‌ಗಳು ಒತ್ತಿದಾಗ ಗೋಚರಿಸುತ್ತವೆ. ಅವರು ಹುಸಿ-ವರ್ಗವನ್ನು ಬಳಸುವುದರಿಂದ s ಗೆ ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ<button> . ಆದಾಗ್ಯೂ, ನೀವು ರಾಜ್ಯವನ್ನು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಪುನರಾವರ್ತಿಸಬೇಕಾದರೆ .active(ಮತ್ತು ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ) ಅದೇ ಸಕ್ರಿಯ ನೋಟವನ್ನು ನೀವು ಇನ್ನೂ ಒತ್ತಾಯಿಸಬಹುದು .aria-pressed=“true”

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

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

ಯಾವುದೇ ಅಂಶಕ್ಕೆ disabledಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬಟನ್‌ಗಳು ನಿಷ್ಕ್ರಿಯವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಿ .<button>

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

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

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

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg 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 ಅನ್ನು ಬಳಸಿ.

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

ಬಟನ್ ಪ್ಲಗಿನ್

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

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

data-toggle="button"ಬಟನ್‌ನ activeಸ್ಥಿತಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸೇರಿಸಿ . .activeನೀವು ಬಟನ್ ಅನ್ನು ಮೊದಲೇ ಟಾಗಲ್ ಮಾಡುತ್ತಿದ್ದರೆ, ನೀವು ಹಸ್ತಚಾಲಿತವಾಗಿ ವರ್ಗ ಮತ್ತು aria-pressed="true" ಗೆ ಸೇರಿಸಬೇಕು <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

ಚೆಕ್ಬಾಕ್ಸ್ ಮತ್ತು ರೇಡಿಯೋ ಬಟನ್ಗಳು

ಚೆಕ್‌ಬಾಕ್ಸ್ ಅಥವಾ ರೇಡಿಯೋ ಶೈಲಿಯ ಬಟನ್ ಟಾಗಲ್ ಅನ್ನು ಒದಗಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ .buttonಶೈಲಿಗಳನ್ನು ಇತರ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ s. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಅವರ ಟಾಗಲ್ ನಡವಳಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಆ ಮಾರ್ಪಡಿಸಿದ ಬಟನ್‌ಗಳಿಗೆ ಸೇರಿಸಿ <label>ಮತ್ತು data-toggle="buttons"ನಿಮ್ಮ ಬಟನ್‌ಗಳಲ್ಲಿ s ಅನ್ನು ಶೈಲಿಗೆ ಸೇರಿಸಿ. ನೀವು ಒಂದೇ ಇನ್‌ಪುಟ್-ಚಾಲಿತ ಬಟನ್‌ಗಳು ಅಥವಾ ಅವುಗಳ ಗುಂಪುಗಳನ್ನು ರಚಿಸಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ..btn-group.btn-group-toggle<input>

ಈ ಬಟನ್‌ಗಳಿಗಾಗಿ ಪರಿಶೀಲಿಸಲಾದ ಸ್ಥಿತಿಯನ್ನು ಬಟನ್‌ನಲ್ಲಿನ ಈವೆಂಟ್ ಮೂಲಕ ಮಾತ್ರ ನವೀಕರಿಸಲಾಗುತ್ತದೆ . clickಇನ್‌ಪುಟ್ ಅನ್ನು ನವೀಕರಿಸಲು ನೀವು ಇನ್ನೊಂದು ವಿಧಾನವನ್ನು ಬಳಸಿದರೆ-ಉದಾ, <input type="reset">ಇನ್‌ಪುಟ್‌ನ ಆಸ್ತಿಯನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಅನ್ವಯಿಸುವ ಮೂಲಕ ಅಥವಾ ನೀವು ಹಸ್ತಚಾಲಿತವಾಗಿ checkedಟಾಗಲ್ .activeಮಾಡಬೇಕಾಗುತ್ತದೆ <label>.

.activeಪೂರ್ವ-ಪರಿಶೀಲಿಸಲಾದ ಬಟನ್‌ಗಳು ಇನ್‌ಪುಟ್‌ಗೆ ವರ್ಗವನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

ವಿಧಾನಗಳು