ಗುಂಡಿಗಳು
ಬಹು ಗಾತ್ರಗಳು, ರಾಜ್ಯಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಬೆಂಬಲದೊಂದಿಗೆ ರೂಪಗಳು, ಸಂವಾದಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಲ್ಲಿ ಕ್ರಿಯೆಗಳಿಗಾಗಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಕಸ್ಟಮ್ ಬಟನ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಿ.
ಉದಾಹರಣೆಗಳು
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಹಲವಾರು ಪೂರ್ವನಿರ್ಧರಿತ ಬಟನ್ ಶೈಲಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಪ್ರತಿಯೊಂದೂ ತನ್ನದೇ ಆದ ಲಾಕ್ಷಣಿಕ ಉದ್ದೇಶವನ್ನು ಪೂರೈಸುತ್ತದೆ, ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಕೆಲವು ಹೆಚ್ಚುವರಿಗಳನ್ನು ಎಸೆಯಲಾಗುತ್ತದೆ.
<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"
ತಮ್ಮ ಉದ್ದೇಶವನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಸೂಕ್ತವಾಗಿ ತಿಳಿಸಲು ನೀಡಬೇಕು ಪರದೆಯ ಓದುಗರು.
<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>
ಅಂಗವಿಕಲ ಸ್ಥಿತಿ
ಯಾವುದೇ ಅಂಶಕ್ಕೆ disabled
ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬಟನ್ಗಳು ನಿಷ್ಕ್ರಿಯವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಿ . <button>
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಬಟನ್ಗಳನ್ನು pointer-events: none
ಅನ್ವಯಿಸಲಾಗಿದೆ, ಹೋವರ್ ಮತ್ತು ಸಕ್ರಿಯ ಸ್ಥಿತಿಗಳನ್ನು ಪ್ರಚೋದಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
<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>
ಗುಂಡಿಗಳನ್ನು ನಿರ್ಬಂಧಿಸಿ
ನಮ್ಮ ಡಿಸ್ಪ್ಲೇ ಮತ್ತು ಗ್ಯಾಪ್ ಉಪಯುಕ್ತತೆಗಳ ಮಿಶ್ರಣದೊಂದಿಗೆ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 4 ನಲ್ಲಿರುವಂತೆ ಪೂರ್ಣ-ಅಗಲ, "ಬ್ಲಾಕ್ ಬಟನ್ಗಳ" ರೆಸ್ಪಾನ್ಸಿವ್ ಸ್ಟ್ಯಾಕ್ಗಳನ್ನು ರಚಿಸಿ. ಬಟನ್ ನಿರ್ದಿಷ್ಟ ವರ್ಗಗಳ ಬದಲಿಗೆ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, ಅಂತರ, ಜೋಡಣೆ ಮತ್ತು ಸ್ಪಂದಿಸುವ ನಡವಳಿಕೆಗಳ ಮೇಲೆ ನಾವು ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಹೊಂದಿದ್ದೇವೆ.
<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-grid
gap-2
<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
ಕೇಂದ್ರೀಕರಿಸಿ.
<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>
ಸಮತಲವಾಗಿರುವಾಗ ಬಟನ್ಗಳ ಜೋಡಣೆಯನ್ನು ಸರಿಹೊಂದಿಸಲು ಹೆಚ್ಚುವರಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಬಹುದು. ಇಲ್ಲಿ ನಾವು ನಮ್ಮ ಹಿಂದಿನ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಉದಾಹರಣೆಯನ್ನು ತೆಗೆದುಕೊಂಡಿದ್ದೇವೆ ಮತ್ತು ಬಟನ್ಗಳನ್ನು ಇನ್ನು ಮುಂದೆ ಜೋಡಿಸದಿದ್ದಾಗ ಅವುಗಳನ್ನು ಬಲಕ್ಕೆ ಜೋಡಿಸಲು ಕೆಲವು ಫ್ಲೆಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಮತ್ತು ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಯನ್ನು ಸೇರಿಸಿದ್ದೇವೆ.
<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"
ಅದನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಸೂಕ್ತವಾಗಿ ರವಾನಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು.
<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<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>
ವಿಧಾನಗಳು
ಬಟನ್ ಕನ್ಸ್ಟ್ರಕ್ಟರ್ನೊಂದಿಗೆ ನೀವು ಬಟನ್ ನಿದರ್ಶನವನ್ನು ರಚಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
ವಿಧಾನ | ವಿವರಣೆ |
---|---|
toggle |
ತಳ್ಳುವ ಸ್ಥಿತಿಯನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಬಟನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದ ನೋಟವನ್ನು ನೀಡುತ್ತದೆ. |
dispose |
ಅಂಶದ ಬಟನ್ ಅನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. (DOM ಅಂಶದಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ) |
getInstance |
DOM ಅಂಶಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಬಟನ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ, ನೀವು ಇದನ್ನು ಈ ರೀತಿ ಬಳಸಬಹುದು:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
DOM ಅಂಶಕ್ಕೆ ಸಂಯೋಜಿತವಾಗಿರುವ ಬಟನ್ ನಿದರ್ಶನವನ್ನು ಹಿಂತಿರುಗಿಸುವ ಸ್ಥಿರ ವಿಧಾನ ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಿ. ನೀವು ಇದನ್ನು ಈ ರೀತಿ ಬಳಸಬಹುದು:bootstrap.Button.getOrCreateInstance(element) |
ಉದಾಹರಣೆಗೆ, ಎಲ್ಲಾ ಬಟನ್ಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಲು
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
ಸಾಸ್
ಅಸ್ಥಿರ
$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: $link-color;
$btn-link-hover-color: $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)
) {
color: $color;
@include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
&:hover {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
}
.btn-check:focus + &,
&:focus {
color: $hover-color;
@include gradient-bg($hover-background);
border-color: $hover-border;
@if $enable-shadows {
@include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
.show > &.dropdown-toggle {
color: $active-color;
background-color: $active-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
}
}
}
&:disabled,
&.disabled {
color: $disabled-color;
background-color: $disabled-background;
// Remove CSS gradients if they're enabled
background-image: if($enable-gradients, none, null);
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)
) {
color: $color;
border-color: $color;
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
.btn-check:focus + &,
&:focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
.btn-check:checked + &,
.btn-check:active + &,
&:active,
&.active,
&.dropdown-toggle.show {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
&:focus {
@if $enable-shadows {
@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
}
&:disabled,
&.disabled {
color: $color;
background-color: transparent;
}
}
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x;
@include font-size($font-size);
// Manually declare to provide an override to the browser default
@include border-radius($border-radius, 0);
}
ಕುಣಿಕೆಗಳು
$theme-colors
ಬಟನ್ ರೂಪಾಂತರಗಳು (ನಿಯಮಿತ ಮತ್ತು ಔಟ್ಲೈನ್ ಬಟನ್ಗಳಿಗಾಗಿ) ನಲ್ಲಿ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ರಚಿಸಲು ನಮ್ಮ ನಕ್ಷೆಯೊಂದಿಗೆ ಅವುಗಳ ಮಿಕ್ಸಿನ್ಗಳನ್ನು ಬಳಸುತ್ತವೆ scss/_buttons.scss
.
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value);
}
}