ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

ಈಗ 12 ಕಸ್ಟಮ್ jQuery ಪ್ಲಗಿನ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಘಟಕಗಳನ್ನು ಜೀವಕ್ಕೆ ತನ್ನಿ .

ಮಾದರಿಗಳು

ಸುವ್ಯವಸ್ಥಿತ, ಆದರೆ ಹೊಂದಿಕೊಳ್ಳುವ, ಸಾಂಪ್ರದಾಯಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡಲ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಕನಿಷ್ಠ ಅಗತ್ಯವಿರುವ ಕ್ರಿಯಾತ್ಮಕತೆ ಮತ್ತು ಸ್ಮಾರ್ಟ್ ಡಿಫಾಲ್ಟ್‌ಗಳೊಂದಿಗೆ ತೆಗೆದುಕೊಳ್ಳಿ.

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

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

Scrollspy

ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಲಿಂಕ್ ಅನ್ನು ತೋರಿಸಲು ನಿಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿರುವ ಲಿಂಕ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಲು scrollspy ಬಳಸಿ.

ಟಾಗಲ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳು

ಸ್ಥಳೀಯ ವಿಷಯದ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಫಲಕಗಳ ಮೂಲಕ ಟಾಗಲ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಮೂಲಕ ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳನ್ನು ಹೆಚ್ಚು ಉಪಯುಕ್ತವಾಗಿಸಲು ಈ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿ.

ಸಾಧನಸಲಹೆಗಳು

jQuery Tipsy ಪ್ಲಗಿನ್‌ನಲ್ಲಿ ಹೊಸ ಟೇಕ್, ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಚಿತ್ರಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲ, ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ USS CSS3 ಮತ್ತು ಸ್ಥಳೀಯ ಶೀರ್ಷಿಕೆ ಸಂಗ್ರಹಣೆಗಾಗಿ ಡೇಟಾ-ಗುಣಲಕ್ಷಣಗಳು.

ಪಾಪೋವರ್ಸ್ *

ವಸತಿ ದ್ವಿತೀಯ ಮಾಹಿತಿಗಾಗಿ ಯಾವುದೇ ಅಂಶಕ್ಕೆ iPad ನಲ್ಲಿರುವಂತಹ ವಿಷಯದ ಸಣ್ಣ ಮೇಲ್ಪದರಗಳನ್ನು ಸೇರಿಸಿ.

* ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ

ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳು

ಎಚ್ಚರಿಕೆಯ ಪ್ಲಗಿನ್ ಎಚ್ಚರಿಕೆಗಳಿಗೆ ನಿಕಟ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಲು ಒಂದು ಚಿಕ್ಕ ವರ್ಗವಾಗಿದೆ.

ಗುಂಡಿಗಳು

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

ಕುಗ್ಗಿಸು

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

ಏರಿಳಿಕೆ

ವಿಷಯದ ಸಂವಾದಾತ್ಮಕ ಸ್ಲೈಡ್‌ಶೋ ಒದಗಿಸಲು ನೀವು ಬಯಸುವ ಯಾವುದೇ ವಿಷಯದ ಮೆರ್ರಿ-ಗೋ-ರೌಂಡ್ ಅನ್ನು ರಚಿಸಿ.

ಟೈಪ್‌ಹೆಡ್

ಯಾವುದೇ ಫಾರ್ಮ್ ಪಠ್ಯ ಇನ್‌ಪುಟ್‌ನೊಂದಿಗೆ ಸೊಗಸಾದ ಟೈಪ್‌ಹೆಡ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಲು ಮೂಲಭೂತ, ಸುಲಭವಾಗಿ ವಿಸ್ತರಿಸಲಾದ ಪ್ಲಗಿನ್.

ಪರಿವರ್ತನೆಗಳು *

ಸರಳ ಪರಿವರ್ತನೆಯ ಪರಿಣಾಮಗಳಿಗಾಗಿ, ಮೋಡಲ್‌ಗಳಲ್ಲಿ ಸ್ಲೈಡ್ ಮಾಡಲು ಅಥವಾ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಮಸುಕಾಗಿಸಲು ಒಮ್ಮೆ bootstrap-transition.js ಅನ್ನು ಸೇರಿಸಿ.

* ಪ್ಲಗಿನ್‌ಗಳಲ್ಲಿ ಅನಿಮೇಷನ್‌ಗೆ ಅಗತ್ಯವಿದೆ

ತಲೆ ಎತ್ತಿ! ಎಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ಗಳಿಗೆ jQuery ನ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯ ಅಗತ್ಯವಿದೆ.

ಮಾದರಿಗಳ ಬಗ್ಗೆ

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಸ್ಥಿರ ಉದಾಹರಣೆ

ಕೆಳಗೆ ಸ್ಥಿರವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾದ ಮಾದರಿಯಾಗಿದೆ.

ಲೈವ್ ಡೆಮೊ

ಕೆಳಗಿನ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ javascript ಮೂಲಕ ಮಾದರಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಿ. ಇದು ಕೆಳಗೆ ಸ್ಲೈಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಪುಟದ ಮೇಲ್ಭಾಗದಿಂದ ಮಸುಕಾಗುತ್ತದೆ.

ಡೆಮೊ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿ

ಬೂಟ್‌ಸ್ಟ್ರಾಪ್-ಮೋಡಲ್ ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಮಾದರಿಗೆ ಕರೆ ಮಾಡಿ:

$('#myModal').modal(ಆಯ್ಕೆಗಳು)

ಆಯ್ಕೆಗಳು

ಹೆಸರು	ಮಾದರಿ	ಪೂರ್ವನಿಯೋಜಿತ	ವಿವರಣೆ
ಹಿನ್ನೆಲೆ	ಬೂಲಿಯನ್	ನಿಜ	ಮಾದರಿ-ಬ್ಯಾಕ್‌ಡ್ರಾಪ್ ಅಂಶವನ್ನು ಒಳಗೊಂಡಿದೆ
ಕೀಬೋರ್ಡ್	ಬೂಲಿಯನ್	ನಿಜ	ಎಸ್ಕೇಪ್ ಕೀಲಿಯನ್ನು ಒತ್ತಿದಾಗ ಮೋಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ

ಮಾರ್ಕ್ಅಪ್

ಒಂದೇ ಸಾಲಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯದೆಯೇ ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ನೀವು ಸುಲಭವಾಗಿ ಮಾದರಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು. data-toggle="modal"ಒಂದು ನಿಯಂತ್ರಕ ಅಂಶದ ಮೇಲೆ ಹೊಂದಿಸಿ data-target="#foo"ಅಥವಾ href="#foo"ಇದು ಮಾದರಿ ಅಂಶ ಐಡಿಗೆ ಅನುರೂಪವಾಗಿದೆ ಮತ್ತು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಅದು ನಿಮ್ಮ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

ಅಲ್ಲದೆ, ನಿಮ್ಮ ಮಾದರಿ ನಿದರ್ಶನಕ್ಕೆ ಆಯ್ಕೆಗಳನ್ನು ಸೇರಿಸಲು, ಅವುಗಳನ್ನು ನಿಯಂತ್ರಣ ಅಂಶ ಅಥವಾ ಮೋಡಲ್ ಮಾರ್ಕ್ಅಪ್‌ನಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಾಗಿ ಸೇರಿಸಿ.

<a class="btn" data-toggle="modal" href="#myModal" >ಲಾಂಚ್ ಮಾಡಲ್</a>

<div class="modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>ಮೋಡಲ್ ಹೆಡರ್</h3>
  </div>
  <div class="modal-body">
    <p>ಒಂದು ಉತ್ತಮ ದೇಹ...</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary">ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಿ</a>
    <a href="#" class="btn">ಮುಚ್ಚು</a>
  </div>
</div>

ತಲೆ ಎತ್ತಿ! ನಿಮ್ಮ ಮಾದರಿಯನ್ನು ಒಳಗೆ ಮತ್ತು ಹೊರಗೆ ಅನಿಮೇಟ್ ಮಾಡಲು ನೀವು ಬಯಸಿದರೆ .fade, ಅಂಶಕ್ಕೆ ವರ್ಗವನ್ನು ಸೇರಿಸಿ .modal(ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಲು ಡೆಮೊವನ್ನು ನೋಡಿ) ಮತ್ತು bootstrap-transition.js ಅನ್ನು ಸೇರಿಸಿ.

ವಿಧಾನಗಳು

.modal(ಆಯ್ಕೆಗಳು)

ನಿಮ್ಮ ವಿಷಯವನ್ನು ಮಾದರಿಯಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ object.

$('#myModal').modal({
  ಕೀಬೋರ್ಡ್: ತಪ್ಪು
})

.modal('ಟಾಗಲ್')

ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

$('#myModal').modal('ಟಾಗಲ್')

.modal('ಶೋ')

ಹಸ್ತಚಾಲಿತವಾಗಿ ಒಂದು ಮಾದರಿಯನ್ನು ತೆರೆಯುತ್ತದೆ.

$('#myModal').modal('ಶೋ')

.modal('ಮರೆಮಾಡು')

ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮರೆಮಾಡುತ್ತದೆ.

$('#myModal').modal('hide')

ಕಾರ್ಯಕ್ರಮಗಳು

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

ಈವೆಂಟ್	ವಿವರಣೆ
ತೋರಿಸು	`show`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ	ಮೋಡಲ್ ಅನ್ನು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
ಮರೆಮಾಡಿ	`hide`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆ ಮಾಡಿದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಮರೆಮಾಡಲಾಗಿದೆ	ಬಳಕೆದಾರರಿಂದ ಮೋಡಲ್ ಅನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).

$('#myModal').on('ಹಿಡನ್', ಫಂಕ್ಷನ್ () {
  //ಏನಾದರೂ ಮಾಡು...
})

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳ ಬಗ್ಗೆ

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆಗಳು

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ಡ್ರಾಪ್‌ಡೌನ್ ನ್ಯಾವ್ ಲಿಂಕ್‌ಗಳು ಮತ್ತು ಕೆಳಗಿನ ಮಾತ್ರೆಗಳ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.

bootstrap-dropdown.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಕರೆ ಮಾಡಿ:

$('.dropdown-toggle').dropdown()

ಮಾರ್ಕ್ಅಪ್

ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಡ್ರಾಪ್‌ಡೌನ್ ಕಾರ್ಯವನ್ನು ತ್ವರಿತವಾಗಿ ಸೇರಿಸಲು ಕೇವಲ ಸೇರಿಸಿ data-toggle="dropdown"ಮತ್ತು ಯಾವುದೇ ಮಾನ್ಯವಾದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡ್ರಾಪ್‌ಡೌನ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಕ್ರಿಯಗೊಳ್ಳುತ್ತದೆ.

ತಲೆ ಎತ್ತಿ! data-target="#fat"ಅಥವಾ ಬಳಸಿಕೊಂಡು ನಿರ್ದಿಷ್ಟ ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ನೀವು ಐಚ್ಛಿಕವಾಗಿ ಗುರಿಪಡಿಸಬಹುದು href="#fat".

<ul class="nav ಮಾತ್ರೆಗಳು">
  <li class="active"><a href="#">ನಿಯಮಿತ ಲಿಂಕ್</a></li>
  <li class="dropdown" id="menu1">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
      ಡ್ರಾಪ್‌ಡೌನ್
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">ಕ್ರಿಯೆ</a></li>
      <li><a href="#">ಮತ್ತೊಂದು ಕ್ರಿಯೆ</a></li>
      <li><a href="#">ಇಲ್ಲಿ ಬೇರೇನಾದರೂ ಇದೆ</a></li>
      <li class="divider"></li>
      <li><a href="#">ಬೇರ್ಪಡಿಸಿದ ಲಿಂಕ್</a></li>
    </ul>
  </li>
  ...
</ul>

ವಿಧಾನಗಳು

$().dropdown()

ನೀಡಿರುವ ನ್ಯಾವ್‌ಬಾರ್ ಅಥವಾ ಟ್ಯಾಬ್ಡ್ ನ್ಯಾವಿಗೇಶನ್‌ಗಾಗಿ ಮೆನುಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ API.

ScrollSpy ಪ್ಲಗಿನ್ ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ NAV ಗುರಿಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸುತ್ತದೆ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

scrollspy ಜೊತೆಗೆ ಉದಾಹರಣೆ navbar

ಕೆಳಗಿನ ಪ್ರದೇಶವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು ನ್ಯಾವಿಗೇಶನ್ ನವೀಕರಣವನ್ನು ವೀಕ್ಷಿಸಿ. ಡ್ರಾಪ್‌ಡೌನ್ ಉಪ ಐಟಂಗಳನ್ನು ಹಾಗೆಯೇ ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ. ಪ್ರಯತ್ನಪಡು!

@ಕೊಬ್ಬು

ಜಾಹೀರಾತು ಲೆಗ್ಗಿಂಗ್ಸ್ ಕೀಟಾರ್, ಬ್ರಂಚ್ ಐಡಿ ಆರ್ಟ್ ಪಾರ್ಟಿ ಡೋಲರ್ ಲೇಬರ್. ಪಿಚ್‌ಫೋರ್ಕ್ yr enim lo-fi ಅವರು ಕ್ವಿಯನ್ನು ಮಾರಾಟ ಮಾಡುವ ಮೊದಲು. Tumblr ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್ ಬೈಸಿಕಲ್ ಹಕ್ಕುಗಳು ಏನೇ ಇರಲಿ. ಆನಿಮ್ ಕೆಫಿಯೆ ಕಾರ್ಲೆಸ್ ಕಾರ್ಡಿಜನ್. ವೆಲಿಟ್ ಸೀಟನ್ ಮೆಕ್ಸ್ವೀನಿ ಅವರ ಫೋಟೋ ಬೂತ್ 3 ತೋಳ ಚಂದ್ರ ಇರುರೆ. ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ ಲೋಮೋ ಜೀನ್ ಶಾರ್ಟ್ಸ್, ವಿಲಿಯಮ್ಸ್ಬರ್ಗ್ ಹೂಡಿ ಮಿನಿಮ್ ಕ್ವಿ ನೀವು ಬಹುಶಃ ಅವರ ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ ಮತ್ತು ಕಾರ್ಡಿಗನ್ ಟ್ರಸ್ಟ್ ಫಂಡ್ ಕಲ್ಪಾ ಬಯೋಡೀಸೆಲ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಸೌಂದರ್ಯ. ನಿಹಿಲ್ ಟ್ಯಾಟೂಡ್ ಆಕ್ಸಾಮಸ್, ಕ್ರೆಡ್ ಐರನಿ ಬಯೋಡೀಸೆಲ್ ಕೆಫಿಯೆಹ್ ಕುಶಲಕರ್ಮಿ ಉಲ್ಲಮ್ಕೊ ಪರಿಣಾಮ.

@mdo

ವೆನಿಯಮ್ ಮಾರ್ಫಾ ಮೀಸೆ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್, ಅಡಿಪಿಸಿಸಿಂಗ್ ಫ್ಯೂಜಿಯಾಟ್ ವೆಲಿಟ್ ಪಿಚ್‌ಫೋರ್ಕ್ ಗಡ್ಡ. ಫ್ರೀಗನ್ ಗಡ್ಡ ಅಲಿಕ್ವಾ ಕ್ಯುಪಿಡಾಟಟ್ ಮೆಕ್ಸ್ವೀನಿಸ್ ವೆರೋ. ಕ್ಯುಪಿಡಾಟತ್ ನಾಲ್ಕು ಲೋಕೊ ನಿಸಿ, ಈ ಹೆಲ್ವೆಟಿಕಾ ನುಲ್ಲಾ ಕಾರ್ಲೆಸ್. ಟ್ಯಾಟೂಡ್ ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ ಫುಡ್ ಟ್ರಕ್, ಮೆಕ್ಸ್ವೀನಿಯ ಕ್ವಿಸ್ ನಾನ್ ಫ್ರೀಗಾನ್ ವಿನೈಲ್. ಲೋ-ಫೈ ವೆಸ್ ಆಂಡರ್ಸನ್ +1 ಸಾರ್ಟೋರಿಯಲ್. ಕಾರ್ಲೆಸ್ ನಾನ್ ಎಸ್ತಟಿಕ್ ಎಕ್ಸರ್ಸಿಟೇಶನ್ ಕ್ವಿಸ್ ಜೆಂಟ್ರಿಫೈ. ಬ್ರೂಕ್ಲಿನ್ ಅಡಿಪಿಸಿಸಿಂಗ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ವೈಸ್ ಕೀಟಾರ್ ಡೆಸೆರಂಟ್.

ಒಂದು

ಒಕೆಕಾಟ್ ಕಮೊಡೊ ಅಲಿಕ್ವಾ ಡೆಲೆಕ್ಟಸ್. ಫ್ಯಾಪ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಡೆಸರ್ಂಟ್ ಸ್ಕೇಟ್ಬೋರ್ಡ್ ಇಎ. ಲೋಮೋ ಬೈಸಿಕಲ್ ರೈಟ್ಸ್ ಅಡಿಪಿಸಿಸಿಂಗ್ ಬಾನ್ ಮೈ, ವೆಲಿಟ್ ಇಎ ಸುಂಟ್ ನೆಕ್ಸ್ಟ್ ಲೆವೆಲ್ ಲೊಕಾವೋರ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ಇನ್ ಮ್ಯಾಗ್ನಾ ವೆನಿಯಮ್. ಹೈ ಲೈಫ್ ಐಡಿ ವಿನೈಲ್, ಎಕೋ ಪಾರ್ಕ್ ಕಾನ್ಸಿಕ್ವಾಟ್ ಕ್ವಿಸ್ ಅಲಿಕ್ವಿಪ್ ಬ್ಯಾನ್ ಮೈ ಪಿಚ್‌ಫೋರ್ಕ್. Vero VHS ಉತ್ತಮವಾಗಿದೆ. Consectetur Nisi DIY ಮಿನಿಮ್ ಮೆಸೆಂಜರ್ ಬ್ಯಾಗ್. ಕ್ರೆಡಿಟ್ ಎಕ್ಸ್ ಇನ್, ಸಸ್ಟೈನಬಲ್ ಡೆಲೆಕ್ಟಸ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಫ್ಯಾನಿ ಪ್ಯಾಕ್ ಐಫೋನ್.

ಎರಡು

ಇನ್ಸಿಡಿಡಂಟ್ ಎಕೋ ಪಾರ್ಕ್‌ನಲ್ಲಿ, ಅಫಿಷಿಯಾ ಡೆಸೆರಂಟ್ ಮೆಕ್ಸ್‌ವೀನಿಯ ಪ್ರೊಡೆಂಟ್ ಮಾಸ್ಟರ್ ಕ್ಲೀನ್ಸ್ ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್ ಸಪಿಯೆಂಟೆ ವೆನಿಯಮ್. ಎಕ್ಸೆಪ್ಟಿಯರ್ ವಿಎಚ್‌ಎಸ್ ಎಲಿಟ್, ಪ್ರೊಡೆಂಟ್ ಶೋರೆಡಿಚ್ +1 ಬಯೋಡೀಸೆಲ್ ಲೇಬರ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್. ಏಕ-ಮೂಲದ ಕಾಫಿ ದಾರಿಹೋಕರು ಇರುರೆ ನಾಲ್ಕು ಲೋಕೋ, ಕ್ಯುಪಿಡಾಟ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಮಾಸ್ಟರ್ ಕ್ಲೆನ್ಸ್. ನೀವು ಬಹುಶಃ ಆರ್ಟ್ ಪಾರ್ಟಿ ಫ್ಯಾನಿ ಪ್ಯಾಕ್, ಟ್ಯಾಟೂಡ್ ನುಲ್ಲಾ ಕಾರ್ಡಿಜನ್ ಟೆಂಪರ್ ಜಾಹೀರಾತುಗಳ ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ ಎಂದು ಊಹಿಸಿ. ಪ್ರೊಡೆಂಟ್ ವುಲ್ಫ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಾರ್ಟೋರಿಯಲ್ ಕೆಫಿಯೆಹ್ ಇಯು ಬ್ಯಾನ್ ಮಿ ಸಸ್ಟೆನೇಬಲ್. ಎಲಿಟ್ ವುಲ್ಫ್ ವೋಲ್ಪ್ಟೇಟ್, ಲೋ-ಫೈ ಇಎ ಪೋರ್ಟ್‌ಲ್ಯಾಂಡ್ ಅವರು ನಾಲ್ಕು ಲೋಕೋಗಳನ್ನು ಮಾರಾಟ ಮಾಡುವ ಮೊದಲು. ಲೊಕಾವೋರ್ ಎನಿಮ್ ನಾಸ್ಟ್ರುಡ್ ಮಲ್ಕ್ಷ್ಕ್ ಬ್ರೂಕ್ಲಿನ್ ನೆಸ್ಸಿಯುಂಟ್.

ಮೂರು

ಕೀಟಾರ್ ಟ್ವೀ ಬ್ಲಾಗ್, ಕಲ್ಪಾ ಮೆಸೆಂಜರ್ ಬ್ಯಾಗ್ ಮಾರ್ಫಾ ಯಾವುದೇ ಡೆಲೆಕ್ಟಸ್ ಫುಡ್ ಟ್ರಕ್. ಸಪಿಯೆಂಟೆ ಸಿಂಥ್ ಐಡಿ ಅಸ್ಸುಮೆಂಡಾ. ಲೊಕಾವೋರ್ ಸೆಡ್ ಹೆಲ್ವೆಟಿಕಾ ಕ್ಲೀಷೆ ಐರನಿ, ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್‌ಗಳನ್ನು ನೀವು ಬಹುಶಃ ಅವರ ಬಗ್ಗೆ ಕೇಳಿರದೇ ಇರುವ ಕಾರಣ ಹೂಡಿ ಗ್ಲುಟನ್-ಫ್ರೀ ಲೊ-ಫೈ ಫ್ಯಾಪ್ ಅಲಿಕ್ವಿಪ್. ಅವರು ಮಾರಾಟವಾಗುವ ಮೊದಲು ಲೇಬರ್ ಎಲಿಟ್ ಪ್ಲೇಸ್ಯಾಟ್, ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಪ್ರೊಡೆಂಟ್ ಬ್ರಂಚ್ ನೆಸ್ಸಿಯುಂಟ್ ಕ್ವಿಸ್ ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ ಪ್ಯಾರಿಯಾಟರ್ ಕೆಫಿಯೆಹ್ ಯುಟ್ ಹೆಲ್ವೆಟಿಕಾ ಆರ್ಟಿಸನ್. ಕಾರ್ಡಿಜನ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಸೀಟನ್ ರೆಡಿಮೇಡ್ ವೆಲಿಟ್. VHS ಚೇಂಬ್ರೆ ಲೇಬರ್ ಟೆಂಪೋರ್ ವೆನಿಯಮ್. ಆನಿಂ ಮೊಲ್ಲಿತ್ ಮಿನಿಮ್ ಕೊಮೊಡೊ ಉಲ್ಲಮ್ಕೊ ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್.

bootstrap-scrollspy.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ scrollspy ಗೆ ಕರೆ ಮಾಡಿ:

$('#navbar').scrollspy()

ಮಾರ್ಕ್ಅಪ್

ನಿಮ್ಮ ಟಾಪ್‌ಬಾರ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ಸ್ಕ್ರಾಲ್‌ಸ್ಪಿ ನಡವಳಿಕೆಯನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಲು, data-spy="scroll"ನೀವು ಕಣ್ಣಿಡಲು ಬಯಸುವ ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ (ಹೆಚ್ಚು ಸಾಮಾನ್ಯವಾಗಿ ಇದು ದೇಹವಾಗಿರುತ್ತದೆ).

<body data-spy="scroll" >...</body>

ತಲೆ ಎತ್ತಿ! Navbar ಲಿಂಕ್‌ಗಳು ಪರಿಹರಿಸಬಹುದಾದ ಐಡಿ ಗುರಿಗಳನ್ನು ಹೊಂದಿರಬೇಕು. ಉದಾಹರಣೆಗೆ, <a href="#home">home</a>ಡೊಮ್‌ನಲ್ಲಿರುವ ಯಾವುದನ್ನಾದರೂ ಹೊಂದಿರಬೇಕು <div id="home"></div>.

ಆಯ್ಕೆಗಳು

ಹೆಸರು	ಮಾದರಿ	ಪೂರ್ವನಿಯೋಜಿತ	ವಿವರಣೆ
ಆಫ್ಸೆಟ್	ಸಂಖ್ಯೆ	10	ಸ್ಕ್ರಾಲ್‌ನ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವಾಗ ಮೇಲಿನಿಂದ ಆಫ್‌ಸೆಟ್ ಮಾಡಲು ಪಿಕ್ಸೆಲ್‌ಗಳು.

ಈ ಪ್ಲಗಿನ್ ಸ್ಥಳೀಯ ವಿಷಯದ ಮೂಲಕ ಪರಿವರ್ತನೆಗಾಗಿ ತ್ವರಿತ, ಕ್ರಿಯಾತ್ಮಕ ಟ್ಯಾಬ್ ಮತ್ತು ಮಾತ್ರೆ ಕಾರ್ಯವನ್ನು ಸೇರಿಸುತ್ತದೆ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಟ್ಯಾಬ್‌ಗಳು

ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳ ಮೂಲಕವೂ ಗುಪ್ತ ಫಲಕಗಳ ನಡುವೆ ಟಾಗಲ್ ಮಾಡಲು ಕೆಳಗಿನ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.

ರಾ ಡೆನಿಮ್ ಜೀನ್ ಶಾರ್ಟ್ಸ್ ಆಸ್ಟಿನ್ ಬಗ್ಗೆ ನೀವು ಬಹುಶಃ ಕೇಳಿಲ್ಲ. ನೆಸ್ಸಿಯುಂಟ್ ತೋಫು ಸ್ಟಂಪ್‌ಟೌನ್ ಅಲಿಕ್ವಾ, ರೆಟ್ರೊ ಸಿಂಥ್ ಮಾಸ್ಟರ್ ಕ್ಲೆನ್ಸ್. ಮೀಸೆ ಕ್ಲೀಚೆ ಟೆಂಪರ್, ವಿಲಿಯಮ್ಸ್ಬರ್ಗ್ ಕಾರ್ಲೆಸ್ ಸಸ್ಯಾಹಾರಿ ಹೆಲ್ವೆಟಿಕಾ. ರೆಪ್ರೆಹೆಂಡರಿಟ್ ಕಟುಕ ರೆಟ್ರೊ ಕೆಫಿಯೆಹ್ ಡ್ರೀಮ್‌ಕ್ಯಾಚರ್ ಸಿಂಥ್. ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ eu banh mi, qui irure ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಎಕ್ಸ್ ಸ್ಕ್ವಿಡ್. ಸಾಲ್ವಿಯಾ ಸಿಲಮ್ ಐಫೋನ್ ಅನ್ನು ಅಲಿಕ್ವಿಪ್ ಮಾಡಿ. ಸೀಟಾನ್ ಅಲಿಕ್ವಿಪ್ ಕ್ವಿಸ್ ಕಾರ್ಡಿಗನ್ ಅಮೇರಿಕನ್ ಉಡುಪು, ಬುತ್ಚೆರ್ ವೋಲ್ಪ್ಟೇಟ್ ನಿಸಿ ಕ್ವಿ.

ಫುಡ್ ಟ್ರಕ್ ಫಿಕ್ಸೀ ಲೊಕಾವೋರ್, ಆಕ್ಸಾಮಸ್ ಮೆಕ್ಸ್‌ವೀನಿಯ ಮರ್ಫಾ ನುಲ್ಲಾ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ಸ್ಕ್ವಿಡ್. ವ್ಯಾಯಾಮ +1 ಲೇಬರ್ ವೆಲಿಟ್, ಬ್ಲಾಗ್ ಸಾರ್ಟೋರಿಯಲ್ PBR ಲೆಗ್ಗಿಂಗ್ಸ್ ಮುಂದಿನ ಹಂತದ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕುಶಲಕರ್ಮಿ ನಾಲ್ಕು ಲೋಕೋ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಟ್ವೀ. ಕ್ವಿ ಫೋಟೋ ಬೂತ್ ಲೆಟರ್‌ಪ್ರೆಸ್, ಕಮೊಡೊ ಎನಿಮ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ mlkshk ಅಲಿಕ್ವಿಪ್ ಜೀನ್ ಶಾರ್ಟ್ಸ್ ಉಲ್ಲಮ್ಕೊ ಆಡ್ ವಿನೈಲ್ ಸಿಲಮ್ PBR. ಹೋಮೋ ನಾಸ್ಟ್ರುಡ್ ಸಾವಯವ, ಅಸ್ಸುಮೆಂಡಾ ಲೇಬರ್ ಸೌಂದರ್ಯದ ಮ್ಯಾಗ್ನಾ ಡೆಲೆಕ್ಟಸ್ ಮೊಲಿಟ್. ಕೀಟರ್ ಹೆಲ್ವೆಟಿಕಾ VHS ಸಾಲ್ವಿಯಾ ವೈಆರ್, ವೆರೊ ಮ್ಯಾಗ್ನಾ ವೆಲಿಟ್ ಸಪಿಯೆಂಟೆ ಲೇಬರ್ ಸ್ಟಂಪ್‌ಟೌನ್. ಸಸ್ಯಾಹಾರಿ ಫ್ಯಾನಿ ಪ್ಯಾಕ್ ಓಡಿಯೊ ಸಿಲಮ್ ವೆಸ್ ಆಂಡರ್ಸನ್ 8-ಬಿಟ್, ಸುಸ್ಥಿರ ಜೀನ್ ಶಾರ್ಟ್ಸ್ ಗಡ್ಡ ಮತ್ತು DIY ನೈತಿಕ ಕಲ್ಪಾ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಜೈವಿಕ ಡೀಸೆಲ್. ಆರ್ಟ್ ಪಾರ್ಟಿ ಸೀನ್‌ಸ್ಟರ್ ಸ್ಟಂಪ್‌ಟೌನ್, ಟಂಬ್ಲರ್ ಬುತ್ಚೆರ್ ವೆರೋ ಸಿಂಟ್ ಕ್ವಿ ಸ್ಯಾಪಿಯೆಂಟೆ ಆಕ್ಸಾಮಸ್ ಟ್ಯಾಟೂಡ್ ಎಕೋ ಪಾರ್ಕ್.

ಎಟ್ಸಿ ಮಿಕ್ಸ್‌ಟೇಪ್ ವೇಫೇರ್ಸ್, ಎಥಿಕಲ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ತೋಫು ಅವರು ಮೆಕ್ಸ್‌ವೀನಿಯ ಸಾವಯವ ಲೋಮೊ ರೆಟ್ರೊ ಫ್ಯಾನಿ ಪ್ಯಾಕ್ ಲೊ-ಫೈ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್ ರೆಡಿಮೇಡ್ ಅನ್ನು ಮಾರಾಟ ಮಾಡುವ ಮೊದಲು. ಮೆಸೆಂಜರ್ ಬ್ಯಾಗ್ ಜೆಂಟ್ರಿಫೈ ಪಿಚ್‌ಫೋರ್ಕ್ ಟ್ಯಾಟೂಡ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್, ಐಫೋನ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಲೊಕಾವೋರ್ ಕಾರ್ಲೆಸ್ ಎಟ್ಸಿ ಸಾಲ್ವಿಯಾ ಬ್ಯಾಂಕ್ಸಿ ಹೂಡಿ ಹೆಲ್ವೆಟಿಕಾ. DIY ಸಿಂಥ್ PBR ಬ್ಯಾಂಕಿ ವ್ಯಂಗ್ಯ. ಲೆಗ್ಗಿಂಗ್ಸ್ ಜೆಂಟ್ರಿಫೈ ಸ್ಕ್ವಿಡ್ 8-ಬಿಟ್ ಕ್ರೆಡ್ ಪಿಚ್‌ಫೋರ್ಕ್. Williamsburg banh mi ಏನೇ ಅಂಟು-ಮುಕ್ತ, ಕಾರ್ಲ್ಸ್ ಪಿಚ್‌ಫೋರ್ಕ್ ಜೈವಿಕ ಡೀಸೆಲ್ ಫಿಕ್ಸೀ etsy ರೆಟ್ರೋ mlkshk ವೈಸ್ ಬ್ಲಾಗ್. ವಿನೈಲ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಬ್ಲಾಗ್ ಸ್ಟಂಪ್‌ಟೌನ್, ನೀವು ಬಹುಶಃ ಅವರ ಬಗ್ಗೆ ಕೇಳಿಲ್ಲದಿರುವ ಸಿನೆಸ್ಟರ್ ಕ್ರೆಡ್. ಪಿಚ್‌ಫೋರ್ಕ್ ಸಮರ್ಥನೀಯ ತೋಫು ಸಿಂಥ್ ಚೇಂಬ್ರೇ ವೈಆರ್.

ಟ್ರಸ್ಟ್ ಫಂಡ್ ಸೀಟನ್ ಲೆಟರ್‌ಪ್ರೆಸ್, ಕೀಟಾರ್ ರಾ ಡೆನಿಮ್ ಕೆಫಿಯೆಹ್ ಎಟ್ಸಿ ಆರ್ಟ್ ಪಾರ್ಟಿ ಅವರು ಮಾಸ್ಟರ್ ಕ್ಲೀನ್ಸ್ ಗ್ಲುಟನ್-ಫ್ರೀ ಸ್ಕ್ವಿಡ್ ಸೀನ್‌ಸ್ಟರ್ ಫ್ರೀಗನ್ ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ ಅನ್ನು ಮಾರಾಟ ಮಾಡುವ ಮೊದಲು. ಫ್ಯಾನಿ ಪ್ಯಾಕ್ ಪೋರ್ಟ್ಲ್ಯಾಂಡ್ ಸೀಟಾನ್ DIY, ಆರ್ಟ್ ಪಾರ್ಟಿ ಲೊಕಾವೋರ್ ವುಲ್ಫ್ ಕ್ಲೀಚೆ ಹೈ ಲೈಫ್ ಎಕೋ ಪಾರ್ಕ್ ಆಸ್ಟಿನ್. Cred vinyl keffiyeh DIY ಸಾಲ್ವಿಯಾ PBR, banh mi ಮೊದಲು ಅವರು ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್ VHS ವೈರಲ್ ಲೊಕಾವೋರ್ ಕಾಸ್ಬಿ ಸ್ವೆಟರ್ ಅನ್ನು ಮಾರಾಟ ಮಾಡಿದರು. ಲೋಮೋ ವುಲ್ಫ್ ವೈರಲ್, ಮೀಸೆ ರೆಡಿಮೇಡ್ ಥಂಡರ್‌ಕ್ಯಾಟ್ಸ್ ಕೆಫಿಯೆಹ್ ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಮಾರ್ಫಾ ಎಥಿಕಲ್. ವುಲ್ಫ್ ಸಾಲ್ವಿಯಾ ಫ್ರೀಗನ್, ಸಾರ್ಟೋರಿಯಲ್ ಕೆಫಿಯೆಹ್ ಎಕೋ ಪಾರ್ಕ್ ಸಸ್ಯಾಹಾರಿ.

bootstrap-tab.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

$('#myTab').tab('ಶೋ')

ಮಾರ್ಕ್ಅಪ್

data-toggle="tab"ಸರಳವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ ಅಥವಾ data-toggle="pill"ಅಂಶದ ಮೇಲೆ ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯದೆಯೇ ನೀವು ಟ್ಯಾಬ್ ಅಥವಾ ಮಾತ್ರೆ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು .

<ul class="tabs">
  <li><a href="#home" data-toggle="tab">ಹೋಮ್</a></li>
  <li><a href="#profile" data-toggle="tab">ಪ್ರೊಫೈಲ್</a></li>
  <li><a href="#messages" data-toggle="tab">ಸಂದೇಶಗಳು</a></li>
  <li><a href="#ettings" data-toggle="tab">ಸೆಟ್ಟಿಂಗ್‌ಗಳು</a></li>
</ul>

ವಿಧಾನಗಳು

$().ಟ್ಯಾಬ್

ಟ್ಯಾಬ್ ಅಂಶ ಮತ್ತು ವಿಷಯ ಧಾರಕವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಟ್ಯಾಬ್ ಒಂದು `ಡೇಟಾ-ಟಾರ್ಗೆಟ್` ಅಥವಾ ಡಾಮ್‌ನಲ್ಲಿ ಕಂಟೇನರ್ ನೋಡ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುವ `href` ಅನ್ನು ಹೊಂದಿರಬೇಕು.

<ul class="tabs">
  <li class="active"><a href="#home">ಮನೆ</a></li>
  <li><a href="#profile">ಪ್ರೊಫೈಲ್</a></li>
  <li><a href="#messages">ಸಂದೇಶಗಳು</a></li>
  <li><a href="#settings">ಸೆಟ್ಟಿಂಗ್‌ಗಳು</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<ಸ್ಕ್ರಿಪ್ಟ್>
  $(ಕಾರ್ಯ () {
    $('.tabs a: last').tab('show')
  })
</script>

ಕಾರ್ಯಕ್ರಮಗಳು

ಈವೆಂಟ್	ವಿವರಣೆ
ತೋರಿಸು	ಈ ಈವೆಂಟ್ ಟ್ಯಾಬ್ ಶೋನಲ್ಲಿ ಫೈರ್ ಆಗುತ್ತದೆ, ಆದರೆ ಹೊಸ ಟ್ಯಾಬ್ ಅನ್ನು ತೋರಿಸುವ ಮೊದಲು. ಕ್ರಮವಾಗಿ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಮತ್ತು ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ (ಲಭ್ಯವಿದ್ದಲ್ಲಿ) ಅನ್ನು ಬಳಸಿ `event.target`ಮತ್ತು ಗುರಿಪಡಿಸಲು.`event.relatedTarget`
ತೋರಿಸಲಾಗಿದೆ	ಟ್ಯಾಬ್ ತೋರಿಸಿದ ನಂತರ ಈ ಈವೆಂಟ್ ಟ್ಯಾಬ್ ಶೋನಲ್ಲಿ ಫೈರ್ ಆಗುತ್ತದೆ. ಕ್ರಮವಾಗಿ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಮತ್ತು ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ (ಲಭ್ಯವಿದ್ದಲ್ಲಿ) ಅನ್ನು ಬಳಸಿ `event.target`ಮತ್ತು ಗುರಿಪಡಿಸಲು.`event.relatedTarget`

$('a[data-toggle="tab"]').on('ತೋರಿಸಲಾಗಿದೆ', ಕಾರ್ಯ (ಇ) {
  ಇ.ಟಾರ್ಗೆಟ್ // ಸಕ್ರಿಯ ಟ್ಯಾಬ್
  e.relatedTarget // ಹಿಂದಿನ ಟ್ಯಾಬ್
})

ಟೂಲ್ಟಿಪ್ಸ್ ಬಗ್ಗೆ

ಜೇಸನ್ ಫ್ರೇಮ್ ಬರೆದ ಅತ್ಯುತ್ತಮ jQuery.tipsy ಪ್ಲಗಿನ್‌ನಿಂದ ಸ್ಫೂರ್ತಿ; ಟೂಲ್‌ಟಿಪ್‌ಗಳು ನವೀಕರಿಸಿದ ಆವೃತ್ತಿಯಾಗಿದ್ದು, ಚಿತ್ರಗಳನ್ನು ಅವಲಂಬಿಸಿಲ್ಲ, ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ uss css3 ಮತ್ತು ಸ್ಥಳೀಯ ಶೀರ್ಷಿಕೆ ಸಂಗ್ರಹಣೆಗಾಗಿ ಡೇಟಾ-ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅವಲಂಬಿಸಿಲ್ಲ.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಟೂಲ್ಟಿಪ್ಸ್ನ ಉದಾಹರಣೆ ಬಳಕೆ

ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ನೋಡಲು ಕೆಳಗಿನ ಲಿಂಕ್‌ಗಳ ಮೇಲೆ ಸುಳಿದಾಡಿ:

bootstrap-tooltip.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಟ್ರಿಗರ್ ಮಾಡಿ:

$('#ಉದಾಹರಣೆ').ಟೂಲ್ಟಿಪ್(ಆಯ್ಕೆಗಳು)

ಆಯ್ಕೆಗಳು

ಹೆಸರು	ಮಾದರಿ	ಪೂರ್ವನಿಯೋಜಿತ	ವಿವರಣೆ
ಅನಿಮೇಷನ್	ಬೂಲಿಯನ್	ನಿಜ	ಟೂಲ್‌ಟಿಪ್‌ಗೆ css ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ
ನಿಯೋಜನೆ	ಸ್ಟ್ರಿಂಗ್	'ಟಾಪ್'	ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಇರಿಸುವುದು - ಟಾಪ್ \| ಕೆಳಗೆ \| ಬಿಟ್ಟು \| ಬಲ
ಆಯ್ಕೆಗಾರ	ಸ್ಟ್ರಿಂಗ್	ಸುಳ್ಳು	ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಒದಗಿಸಿದರೆ, ಟೂಲ್‌ಟಿಪ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗುರಿಗಳಿಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ.
ಶೀರ್ಷಿಕೆ	ದಾರ \| ಕಾರ್ಯ	''	`ಶೀರ್ಷಿಕೆ` ಟ್ಯಾಗ್ ಇಲ್ಲದಿದ್ದಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಶೀರ್ಷಿಕೆ ಮೌಲ್ಯ
ಪ್ರಚೋದಕ	ಸ್ಟ್ರಿಂಗ್	'ಹಾರಾಡುತ್ತಿರು'	ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಟ್ರಿಗರ್ ಮಾಡಲಾಗಿದೆ - ಹೋವರ್ \| ಗಮನ \| ಕೈಪಿಡಿ
ವಿಳಂಬ	ಸಂಖ್ಯೆ \| ವಸ್ತು	0	ಟೂಲ್ಟಿಪ್ (ಮಿಸೆ) ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ವಿಳಂಬ ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಮರೆಮಾಡು/ತೋರಿಕೆ ಎರಡಕ್ಕೂ ವಿಳಂಬವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ವಸ್ತುವಿನ ರಚನೆ ಹೀಗಿದೆ:`delay: { show: 500, hide: 100 }`

ತಲೆ ಎತ್ತಿ! ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಬಳಕೆಯ ಮೂಲಕ ವೈಯಕ್ತಿಕ ಟೂಲ್‌ಟಿಪ್‌ಗಳ ಆಯ್ಕೆಗಳನ್ನು ಪರ್ಯಾಯವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಮಾರ್ಕ್ಅಪ್

ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ, Tooltip ಮತ್ತು Popover ಡೇಟಾ-apis ಆಯ್ಕೆಮಾಡಲಾಗಿದೆ. ನೀವು ಅವುಗಳನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಕೇವಲ ಆಯ್ಕೆ ಆಯ್ಕೆಯನ್ನು ಸೂಚಿಸಿ.

ವಿಧಾನಗಳು

$().ಟೂಲ್ಟಿಪ್(ಆಯ್ಕೆಗಳು)

ಎಲಿಮೆಂಟ್ ಸಂಗ್ರಹಕ್ಕೆ ಟೂಲ್‌ಟಿಪ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಲಗತ್ತಿಸುತ್ತದೆ.

.ಟೂಲ್ಟಿಪ್('ಶೋ')

ಅಂಶಗಳ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

$('#ಎಲಿಮೆಂಟ್').ಟೂಲ್ಟಿಪ್('ಶೋ')

.ಟೂಲ್ಟಿಪ್('ಮರೆಮಾಡು')

ಎಲಿಮೆಂಟ್ಸ್ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ.

$('#ಎಲಿಮೆಂಟ್').ಟೂಲ್ಟಿಪ್('ಮರೆಮಾಡು')

.ಟೂಲ್ಟಿಪ್('ಟಾಗಲ್')

ಅಂಶಗಳ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

$('#ಎಲಿಮೆಂಟ್').ಟೂಲ್ಟಿಪ್('ಟಾಗಲ್')

ಪಾಪೋವರ್ಸ್ ಬಗ್ಗೆ

* ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಹೋವರ್ ಪಾಪೋವರ್

ಪಾಪೋವರ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲು ಬಟನ್ ಮೇಲೆ ಸುಳಿದಾಡಿ.

ಪಾಪೋವರ್‌ಗಾಗಿ ಸುಳಿದಾಡಿ

bootstrap-popover.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಪಾಪೋವರ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

$('#ಉದಾಹರಣೆ').popover(ಆಯ್ಕೆಗಳು)

ಆಯ್ಕೆಗಳು

ಹೆಸರು	ಮಾದರಿ	ಪೂರ್ವನಿಯೋಜಿತ	ವಿವರಣೆ
ಅನಿಮೇಷನ್	ಬೂಲಿಯನ್	ನಿಜ	ಟೂಲ್‌ಟಿಪ್‌ಗೆ css ಫೇಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ
ನಿಯೋಜನೆ	ಸ್ಟ್ರಿಂಗ್	'ಬಲ'	ಪಾಪೋವರ್ ಅನ್ನು ಹೇಗೆ ಇರಿಸುವುದು - ಟಾಪ್ \| ಕೆಳಗೆ \| ಬಿಟ್ಟು \| ಬಲ
ಆಯ್ಕೆಗಾರ	ಸ್ಟ್ರಿಂಗ್	ಸುಳ್ಳು	ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಒದಗಿಸಿದರೆ, ಟೂಲ್‌ಟಿಪ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗುರಿಗಳಿಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ
ಪ್ರಚೋದಕ	ಸ್ಟ್ರಿಂಗ್	'ಹಾರಾಡುತ್ತಿರು'	ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಹೇಗೆ ಟ್ರಿಗರ್ ಮಾಡಲಾಗಿದೆ - ಹೋವರ್ \| ಗಮನ \| ಕೈಪಿಡಿ
ಶೀರ್ಷಿಕೆ	ದಾರ \| ಕಾರ್ಯ	''	`ಶೀರ್ಷಿಕೆ` ಗುಣಲಕ್ಷಣವು ಇಲ್ಲದಿದ್ದಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಶೀರ್ಷಿಕೆ ಮೌಲ್ಯ
ವಿಷಯ	ದಾರ \| ಕಾರ್ಯ	''	`ಡೇಟಾ-ಕಂಟೆಂಟ್` ಗುಣಲಕ್ಷಣ ಇಲ್ಲದಿದ್ದರೆ ಡಿಫಾಲ್ಟ್ ವಿಷಯ ಮೌಲ್ಯ
ವಿಳಂಬ	ಸಂಖ್ಯೆ \| ವಸ್ತು	0	ಪಾಪೋವರ್ ಅನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ವಿಳಂಬ (ಮಿಸೆ) ಸಂಖ್ಯೆಯನ್ನು ಒದಗಿಸಿದರೆ, ಮರೆಮಾಡು/ತೋರಿಕೆ ಎರಡಕ್ಕೂ ವಿಳಂಬವನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ವಸ್ತುವಿನ ರಚನೆ ಹೀಗಿದೆ:`delay: { show: 500, hide: 100 }`

ತಲೆ ಎತ್ತಿ! ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಬಳಕೆಯ ಮೂಲಕ ವೈಯಕ್ತಿಕ ಪ��ಪೋವರ್‌ಗಳ ಆಯ್ಕೆಗಳನ್ನು ಪರ್ಯಾಯವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಮಾರ್ಕ್ಅಪ್

ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ, Tooltip ಮತ್ತು Popover ಡೇಟಾ-apis ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲಾಗುತ್ತದೆ. ನೀವು ಅವುಗಳನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ ಕೇವಲ ಆಯ್ಕೆ ಆಯ್ಕೆಯನ್ನು ಸೂಚಿಸಿ.

ವಿಧಾನಗಳು

$().popover(ಆಯ್ಕೆಗಳು)

ಅಂಶ ಸಂಗ್ರಹಕ್ಕಾಗಿ ಪಾಪೋವರ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

.popover('ಶೋ')

ಪಾಪೋವರ್ ಅಂಶಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

$('#ಎಲಿಮೆಂಟ್').ಪೋಪೋವರ್('ಶೋ')

.popover('ಮರೆಮಾಡು')

ಅಂಶಗಳ ಪಾಪೋವರ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ.

$('#ಎಲಿಮೆಂಟ್').ಪೋಪೋವರ್('ಮರೆಮಾಡು')

.popover('ಟಾಗಲ್')

ಅಂಶಗಳ ಪಾಪೋವರ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

$('#ಎಲಿಮೆಂಟ್').ಪಾಪೋವರ್('ಟಾಗಲ್')

ಎಚ್ಚರಿಕೆಗಳ ಬಗ್ಗೆ

ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಎಚ್ಚರಿಕೆಗಳು

ಎಚ್ಚರಿಕೆಗಳ ಪ್ಲಗಿನ್ ಸಾಮಾನ್ಯ ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಸಂದೇಶಗಳನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ.

× ಪವಿತ್ರ ಗ್ವಾಕಮೋಲ್! ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ.

ಓಹ್ ಸ್ನ್ಯಾಪ್! ನೀವು ದೋಷವನ್ನು ಹೊಂದಿದ್ದೀರಿ!

ಇದನ್ನು ಮತ್ತು ಅದನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಿ. ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್, ಈಸ್ಟ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್, ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ, ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್. ಕ್ರಾಸ್ ಮ್ಯಾಟಿಸ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಪುರುಸ್ ಸಿಟ್ ಅಮೆಟ್ ಫರ್ಮೆಂಟಮ್.

ಈ ಕ್ರಮವನ್ನು ಕೈಗೊಳ್ಳಿ ಅಥವಾ ಇದನ್ನು ಮಾಡಿ

bootstrap-alerts.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಎಚ್ಚರಿಕೆಯ ವಜಾಗೊಳಿಸುವಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

$(".ಎಚ್ಚರಿಕೆ-ಸಂದೇಶ").ಅಲರ್ಟ್()

ಮಾರ್ಕ್ಅಪ್

data-dismiss="alert"ಎಚ್ಚರಿಕೆಯ ನಿಕಟ ಕಾರ್ಯವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನೀಡಲು ನಿಮ್ಮ ಕ್ಲೋಸ್ ಬಟನ್‌ಗೆ ಸೇರಿಸಿ .

<a class="close" data-dismiss="alert" href="#">×</a>

ವಿಧಾನಗಳು

$().ಎಚ್ಚರಿಕೆ()

ನಿಕಟ ಕಾರ್ಯನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಎಲ್ಲಾ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಸುತ್ತುತ್ತದೆ. ಮುಚ್ಚಿದಾಗ ನಿಮ್ಮ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು, ಅವುಗಳಿಗೆ ಈಗಾಗಲೇ ಅನ್ವಯಿಸಲಾಗಿದೆ .fadeಮತ್ತು ವರ್ಗವನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ..in

ಎಚ್ಚರಿಕೆ ('ಮುಚ್ಚಿ')

ಎಚ್ಚರಿಕೆಯನ್ನು ಮುಚ್ಚುತ್ತದೆ.

$(".ಎಚ್ಚರಿಕೆ-ಸಂದೇಶ").ಎಚ್ಚರಿಕೆ('ಮುಚ್ಚಿ')

ಕಾರ್ಯಕ್ರಮಗಳು

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

ಈವೆಂಟ್	ವಿವರಣೆ
ಮುಚ್ಚಿ	`close`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ಮುಚ್ಚಲಾಗಿದೆ	ಎಚ್ಚರಿಕೆಯನ್ನು ಮುಚ್ಚಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).

$('#my-alert').bind('closed', function () {
  //ಏನಾದರೂ ಮಾಡು...
})

ಬಗ್ಗೆ

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಬಳಕೆಗಳು

ರಾಜ್ಯಗಳು ಮತ್ತು ಟಾಗಲ್‌ಗಳಿಗಾಗಿ ಬಟನ್‌ಗಳ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿ.

ರಾಜ್ಯಪೂರ್ಣ
ಏಕ ಟಾಗಲ್
ಚೆಕ್ಬಾಕ್ಸ್
ರೇಡಿಯೋ

bootstrap-button.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಗುಂಡಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

$('.tabs').button()

ಮಾರ್ಕ್ಅಪ್

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಬಟನ್ ಪ್ಲಗಿನ್‌ಗೆ ಅವಿಭಾಜ್ಯವಾಗಿವೆ. ವಿವಿಧ ಮಾರ್ಕ್ಅಪ್ ಪ್ರಕಾರಗಳಿಗಾಗಿ ಕೆಳಗಿನ ಉದಾಹರಣೆ ಕೋಡ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ.

<!-- ಒಂದೇ ಬಟನ್‌ನಲ್ಲಿ ಟಾಗಲ್ ಮಾಡುವುದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಡೇಟಾ-ಟಾಗಲ್ = "ಬಟನ್" ಸೇರಿಸಿ -->
<button class="btn" data-toggle="button">ಏಕ ಟಾಗಲ್</button>

<!-- btn-group --> ನಲ್ಲಿ ಚೆಕ್‌ಬಾಕ್ಸ್ ಶೈಲಿ ಟಾಗಲ್ ಮಾಡಲು ಡೇಟಾ-ಟಾಗಲ್ = "buttons-checkbox" ಸೇರಿಸಿ
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">ಎಡ</button>
  <button class="btn">ಮಧ್ಯ</button>
  <button class="btn">ಬಲ</button>
</div>

<!-- btn-group --> ನಲ್ಲಿ ರೇಡಿಯೋ ಶೈಲಿ ಟಾಗಲ್ ಮಾಡಲು ಡೇಟಾ-ಟಾಗಲ್ = "buttons-radio" ಸೇರಿಸಿ
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">ಎಡ</button>
  <button class="btn">ಮಧ್ಯ</button>
  <button class="btn">ಬಲ</button>
</div>

ವಿಧಾನಗಳು

$().ಬಟನ್('ಟಾಗಲ್')

ತಳ್ಳುವ ಸ್ಥಿತಿಯನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಇದು ಸಕ್ರಿಯಗೊಂಡಿರುವ ನೋಟವನ್ನು btn ನೀಡುತ್ತದೆ.

ತಲೆ ಎತ್ತಿ! data-toggleಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಬಟನ್‌ನ ಸ್ವಯಂ ಟಾಗಲ್ ಮಾಡುವಿಕೆಯನ್ನು ನೀವು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು .

<button class="btn" data-toggle="button" >…</button>

$().ಬಟನ್('ಲೋಡ್ ಆಗುತ್ತಿದೆ')

ಬಟನ್ ಸ್ಥಿತಿಯನ್ನು ಲೋಡ್ ಮಾಡಲು ಹೊಂದಿಸುತ್ತದೆ - ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಪಠ್ಯವನ್ನು ಲೋಡ್ ಮಾಡಲು ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಬಟನ್ ಅಂಶದ ಮೇಲೆ ಪಠ್ಯವನ್ನು ಲೋಡ್ ಮಾಡುವುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು data-loading-text.

<button class="btn" data-loading-text="loading stuff..." >...</button>

ತಲೆ ಎತ್ತಿ! ಫೈರ್‌ಫಾಕ್ಸ್ ಪುಟದ ಲೋಡ್‌ಗಳಾದ್ಯಂತ ನಿಷ್ಕ್ರಿಯಗೊಂಡ ಸ್ಥಿತಿಯನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ . ಇದಕ್ಕಾಗಿ ಒಂದು ಪರಿಹಾರವನ್ನು ಬಳಸುವುದು autocomplete="off".

$().ಬಟನ್('ರೀಸೆಟ್')

ಬಟನ್ ಸ್ಥಿತಿಯನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ - ಪಠ್ಯವನ್ನು ಮೂಲ ಪಠ್ಯಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ.

$().ಬಟನ್(ಸ್ಟ್ರಿಂಗ್)

ಬಟನ್ ಸ್ಥಿತಿಯನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ - ಯಾವುದೇ ಡೇಟಾ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಪಠ್ಯ ಸ್ಥಿತಿಗೆ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.

<button class="btn" data-complete-text="ಮುಗಿದಿದೆ!" >...</button>
<ಸ್ಕ್ರಿಪ್ಟ್>
  $('.btn').ಬಟನ್('ಸಂಪೂರ್ಣ')
</script>

ಬಗ್ಗೆ

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಅಕಾರ್ಡಿಯನ್

ಕುಸಿತದ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು, ನಾವು ಸರಳವಾದ ಅಕಾರ್ಡಿಯನ್ ಶೈಲಿಯ ವಿಜೆಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ:

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #1

ಅನಿಮ್ ಪ್ಯಾರಿಯಾಟುರ್ ಕ್ಲೀಷೆ ರಿಪ್ರೆಹೆಂಡರಿಟ್, ಎನಿಮ್ ಐಯುಸ್ಮೋಡ್ ಹೈ ಲೈಫ್ ಆಕ್ಯುಸಾಮಸ್ ಟೆರ್ರಿ ರಿಚರ್ಡ್ಸನ್ ಆಡ್ ಸ್ಕ್ವಿಡ್. 3 ವುಲ್ಫ್ ಮೂನ್ ಅಫಿಷಿಯಾ ಆಟಿ, ನಾನ್ ಕ್ಯುಪಿಡಾಟ್ ಸ್ಕೇಟ್‌ಬೋರ್ಡ್ ಡೋಲರ್ ಬ್ರಂಚ್. ಫುಡ್ ಟ್ರಕ್ ಕ್ವಿನೋವಾ ನೆಸ್ಸಿಯಂಟ್ ಲೇಬರ್ ಐಯುಸ್ಮೋಡ್. ಬ್ರಂಚ್ 3 ವುಲ್ಫ್ ಮೂನ್ ಟೆಂಪೋರ್, ಸನ್ಟ್ ಅಲಿಕ್ವಾ ಅದರ ಮೇಲೆ ಪಕ್ಷಿಯನ್ನು ಹಾಕಿದೆ ಸ್ಕ್ವಿಡ್ ಸಿಂಗಲ್-ಆರಿಜಿನ್ ಕಾಫಿ ನುಲ್ಲಾ ಅಸ್ಸುಮೆಂಡಾ ಶೋರೆಡಿಚ್ ಎಟ್. ನಿಹಿಲ್ ಅನಿಮ್ ಕೆಫಿಯೆಹ್ ಹೆಲ್ವೆಟಿಕಾ, ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಲೇಬರ್ ವೆಸ್ ಆಂಡರ್ಸನ್ ಕ್ರೆಡ್ ನೆಸ್ಸಿಯುಂಟ್ ಸಪಿಯೆಂಟೆ ಇಎ ಪ್ರೊಡೆಂಟ್. ಜಾಹೀರಾತು ಸಸ್ಯಾಹಾರಿ ಎಕ್ಸೆಪ್ಯೂರ್ ಬುತ್ಚೆರ್ ವೈಸ್ ಲೊಮೊ. ಲೆಗ್ಗಿಂಗ್ಸ್ occaecat ಕ್ರಾಫ್ಟ್ ಬಿಯರ್ ಫಾರ್ಮ್-ಟು-ಟೇಬಲ್, ಕಚ್ಚಾ ಡೆನಿಮ್ ಸೌಂದರ್ಯದ ಸಿಂಥ್ ನೆಸ್ಸಿಯಂಟ್ ನೀವು ಬಹುಶಃ ಅವುಗಳನ್ನು ಆಕ್ಯುಸಾಮಸ್ ಲೇಬರ್ ಸುಸ್ಥಿರ VHS ಬಗ್ಗೆ ಕೇಳಿಲ್ಲ.

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #2

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #3

bootstrap-collapse.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಸಕ್ರಿಯಗೊಳಿಸಿ:

$(".collapse").collapse()

ಆಯ್ಕೆಗಳು

ಹೆಸರು	ಮಾದರಿ	ಪೂರ್ವನಿಯೋಜಿತ	ವಿವರಣೆ
ಪೋಷಕ	ಆಯ್ಕೆಗಾರ	ಸುಳ್ಳು	ಸೆಲೆಕ್ಟರ್ ಆಗಿದ್ದರೆ, ಈ ಕೊಲಾಸಬೈಲ್ ಐಟಂ ಅನ್ನು ತೋರಿಸಿದಾಗ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪೋಷಕರ ಅಡಿಯಲ್ಲಿ ಎಲ್ಲಾ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶಗಳನ್ನು ಮುಚ್ಚಲಾಗುತ್ತದೆ. (ಸಾಂಪ್ರದಾಯಿಕ ಅಕಾರ್ಡಿಯನ್ ನಡವಳಿಕೆಯನ್ನು ಹೋಲುತ್ತದೆ)
ಟಾಗಲ್	ಬೂಲಿಯನ್	ನಿಜ	ಆಹ್ವಾನದಲ್ಲಿ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ

ಮಾರ್ಕ್ಅಪ್

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶದ ನಿಯಂತ್ರಣವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿಯೋಜಿಸಲು ಕೇವಲ ಸೇರಿಸಿ data-toggle="collapse"ಮತ್ತು ಅಂಶಕ್ಕೆ ಎ. ಕುಸಿತವನ್ನು ಅನ್ವಯಿಸಲು ಗುಣಲಕ್ಷಣವು css ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ data-target. ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶಕ್ಕೆ data-targetವರ್ಗವನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ . collapseನೀವು ಅದನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ತೆರೆಯಲು ಬಯಸಿದರೆ, ಹೆಚ್ಚುವರಿ ವರ್ಗವನ್ನು ಸೇರಿಸಿ in.

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  ಸರಳ ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ
</button>

<div id="demo" class="collapse in"> … </div>

ತಲೆ ಎತ್ತಿ! ಅಕಾರ್ಡಿಯನ್ ತರಹದ ಗುಂಪು ನಿರ್ವಹಣೆಯನ್ನು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ನಿಯಂತ್ರಣಕ್ಕೆ ಸೇರಿಸಲು, ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ data-parent="#selector". ಇದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ನೋಡಲು ಡೆಮೊವನ್ನು ನೋಡಿ.

ವಿಧಾನಗಳು

.collapse(ಆಯ್ಕೆಗಳು)

ನಿಮ್ಮ ವಿಷಯವನ್ನು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ object.

$('#myCollapsible').collapse({
  ಟಾಗಲ್: ತಪ್ಪು
})

.collapse('ಟಾಗಲ್')

ತೋರಿಸಲು ಅಥವಾ ಮರೆಮಾಡಲು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

.collapse('ಶೋ')

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ತೋರಿಸುತ್ತದೆ.

.collapse('ಮರೆಮಾಡು')

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಮರೆಮಾಡುತ್ತದೆ.

ಕಾರ್ಯಕ್ರಮಗಳು

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

ಈವೆಂಟ್	ವಿವರಣೆ
ತೋರಿಸು	`show`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ .
ತೋರಿಸಲಾಗಿದೆ	ಕುಸಿತದ ಅಂಶವು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
ಮರೆಮಾಡಿ	`hide`ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಮರೆಮಾಡಲಾಗಿದೆ	ಬಳಕೆದಾರರಿಂದ ಕುಸಿತದ ಅಂಶವನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (css ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).

$('#myCollapsible').on('ಹಿಡನ್', ಫಂಕ್ಷನ್ () {
  //ಏನಾದರೂ ಮಾಡು...
})

ಬಗ್ಗೆ

ಅಂಶಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್‌ಗಾಗಿ ಸಾರ್ವತ್ರಿಕ ಪ್ಲಗಿನ್. ಒಂದು ಮೋಜಿನ-ಗೋ-ರೌಂಡ್.

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ ಏರಿಳಿಕೆ

ಕೆಳಗಿನ ಸ್ಲೈಡ್‌ಶೋ ವೀಕ್ಷಿಸಿ.

ಮೊದಲ ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್

ಕ್ರಾಸ್ ಜಸ್ಟೊ ಓಡಿಯೊ, ಡ್ಯಾಪಿಬಸ್ ಎಸಿ ಫೆಸಿಲಿಸಿಸ್ ಇನ್, ಎಗೆಸ್ಟಾಸ್ ಎಗೆಟ್ ಕ್ವಾಮ್. ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ಎರಡನೇ ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್

ಮೂರನೇ ಥಂಬ್‌ನೇಲ್ ಲೇಬಲ್

‹ ›

ತಲೆ ಎತ್ತಿ! ಈ ಏರಿಳಿಕೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ, ನಾವು ಒದಗಿಸಿದ ಚಿತ್ರಗಳನ್ನು ತೆಗೆದುಹಾಕಿ ಮತ್ತು ಅವುಗಳನ್ನು ನಿಮ್ಮದೇ ಆದವುಗಳೊಂದಿಗೆ ಬದಲಾಯಿಸಿ.

bootstrap-carousel.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಕರೆ ಮಾಡಿ:

$('.carousel').carousel()

ಆಯ್ಕೆಗಳು

ಹೆಸರು	ಮಾದರಿ	ಪೂರ್ವನಿಯೋಜಿತ	ವಿವರಣೆ
ಮಧ್ಯಂತರ	ಸಂಖ್ಯೆ	5000	ಐಟಂ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸೈಕ್ಲಿಂಗ್ ಮಾಡುವ ನಡುವೆ ವಿಳಂಬವಾಗುವ ಸಮಯ.

ಮಾರ್ಕ್ಅಪ್

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಏರಿಳಿಕೆ ಪ್ಲಗಿನ್‌ಗೆ ಅವಿಭಾಜ್ಯವಾಗಿವೆ. ವಿವಿಧ ಮಾರ್ಕ್ಅಪ್ ಪ್ರಕಾರಗಳಿಗಾಗಿ ಕೆಳಗಿನ ಉದಾಹರಣೆ ಕೋಡ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ.

<div class="carousel">
  <!-- ಏರಿಳಿಕೆ ಐಟಂಗಳು -->
  <div class="carousel-inner">
    ...
  </div>
  <!-- ಕರೋಸೆಲ್ ನ್ಯಾವ್ -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

ವಿಧಾನಗಳು

.ಕರೋಸೆಲ್(ಆಯ್ಕೆಗಳು)

ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಏರಿಳಿಕೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ objectಮತ್ತು ಐಟಂಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

$('.myCarousel').carousel({
  ಮಧ್ಯಂತರ: 2000
})

.ಕರೋಸೆಲ್('ಸೈಕಲ್')

ಎಡದಿಂದ ಬಲಕ್ಕೆ ಏರಿಳಿಕೆ ಐಟಂಗಳ ಮೂಲಕ ಸೈಕಲ್‌ಗಳು.

.ಏರಿಳಿಕೆ('ವಿರಾಮ')

ಐಟಂಗಳ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಮಾಡುವುದರಿಂದ ಏರಿಳಿಕೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ.

.ಏರಿಳಿಕೆ(ಸಂಖ್ಯೆ)

ಏರಿಳಿಕೆಯನ್ನು ನಿರ್ದಿಷ್ಟ ಫ್ರೇಮ್‌ಗೆ ಸೈಕಲ್ ಮಾಡುತ್ತದೆ (0 ಆಧಾರಿತ, ರಚನೆಯಂತೆಯೇ).

.ಕರೋಸೆಲ್('ಹಿಂದಿನ')

ಹಿಂದಿನ ಐಟಂಗೆ ಸೈಕಲ್‌ಗಳು.

.ಏರಿಳಿಕೆ('ಮುಂದೆ')

ಮುಂದಿನ ಐಟಂಗೆ ಸೈಕಲ್‌ಗಳು.

ಕಾರ್ಯಕ್ರಮಗಳು

ಈವೆಂಟ್	ವಿವರಣೆ
ಸ್ಲೈಡ್	`slide`ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಆಹ್ವಾನಿಸಿದಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಬೆಂಕಿಯಿಡುತ್ತದೆ.
ಜಾರಿದ	ಏರಿಳಿಕೆ ಅದರ ಸ್ಲೈಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.

ಬಗ್ಗೆ

ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

ಉದಾಹರಣೆ

ಟೈಪ್‌ಹೆಡ್ ಫಲಿತಾಂಶಗಳನ್ನು ತೋರಿಸಲು ಕೆಳಗಿನ ಕ್ಷೇತ್ರದಲ್ಲಿ ಟೈಪ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿ.

bootstrap-typeahead.js ಅನ್ನು ಬಳಸುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಟೈಪ್‌ಹೆಡ್‌ಗೆ ಕರೆ ಮಾಡಿ:

$('.typeahead').typeahead()

ಆಯ್ಕೆಗಳು

ಹೆಸರು	ಮಾದರಿ	ಪೂರ್ವನಿಯೋಜಿತ	ವಿವರಣೆ
ಮೂಲ	ಶ್ರೇಣಿ	[ ]	ಪ್ರಶ್ನಿಸಲು ಡೇಟಾ ಮೂಲ.
ವಸ್ತುಗಳು	ಸಂಖ್ಯೆ	8	ಡ್ರಾಪ್‌ಡೌನ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಗರಿಷ್ಠ ಸಂಖ್ಯೆಯ ಐಟಂಗಳು.
ಹೊಂದಾಣಿಕೆಗಾರ	ಕಾರ್ಯ	ಕೇಸ್ ಸೂಕ್ಷ್ಮವಲ್ಲದ	ಪ್ರಶ್ನೆಯು ಐಟಂಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು ಬಳಸುವ ವಿಧಾನ. ಒಂದೇ ವಾದವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಅದರ `item`ವಿರುದ್ಧ ಪ್ರಶ್ನೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು. ಇದರೊಂದಿಗೆ ಪ್ರಸ್ತುತ ಪ್ರಶ್ನೆಯನ್ನು ಪ್ರವೇಶಿಸಿ `this.query`. `true`ಪ್ರಶ್ನೆಯು ಹೊಂದಾಣಿಕೆಯಾಗಿದ್ದರೆ ಬೂಲಿಯನ್ ಹಿಂತಿರುಗಿ .
ವಿಂಗಡಿಸುವ	ಕಾರ್ಯ	ನಿಖರ ಹೊಂದಾಣಿಕೆ, ಕೇಸ್ ಸೆನ್ಸಿಟಿವ್, ಕೇಸ್ ಸೆನ್ಸಿಟಿವ್	ಸ್ವಯಂಪೂರ್ಣ ಫಲಿತಾಂಶಗಳನ್ನು ವಿಂಗಡಿಸಲು ಬಳಸುವ ವಿಧಾನ. ಒಂದೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ `items`ಮತ್ತು ಟೈಪ್‌ಹೆಡ್ ನಿದರ್ಶನದ ವ್ಯಾಪ್ತಿಯನ್ನು ಹೊಂದಿದೆ. ನೊಂದಿಗೆ ಪ್ರಸ್ತುತ ಪ್ರಶ್ನೆಯನ್ನು ಉಲ್ಲೇಖಿಸಿ `this.query`.
ಹೈಲೈಟರ್	ಕಾರ್ಯ	ಎಲ್ಲಾ ಡೀಫಾಲ್ಟ್ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ	ಸ್ವಯಂಪೂರ್ಣತೆಯ ಫಲಿತಾಂಶಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಬಳಸುವ ವಿಧಾನ. ಒಂದೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ `item`ಮತ್ತು ಟೈಪ್‌ಹೆಡ್ ನಿದರ್ಶನದ ವ್ಯಾಪ್ತಿಯನ್ನು ಹೊಂದಿದೆ. html ಅನ್ನು ಹಿಂತಿರುಗಿಸಬೇಕು.

ಮಾರ್ಕ್ಅಪ್

ಟೈಪ್‌ಹೆಡ್ ಕಾರ್ಯನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಅಂಶವನ್ನು ನೋಂದಾಯಿಸಲು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸಿ.

<ಇನ್‌ಪುಟ್ ಟೈಪ್="ಟೆಕ್ಸ್ಟ್" ಡೇಟಾ-ಪ್ರೊವೈಡ್="ಟೈಪ್‌ಹೆಡ್">

ವಿಧಾನಗಳು

.typeahead(ಆಯ್ಕೆಗಳು)

ಟೈಪ್‌ಹೆಡ್‌ನೊಂದಿಗೆ ಇನ್‌ಪುಟ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

jQuery ಪ್ಲಗಿನ್‌ಗಳು ನೀವು ಪ್ರಾರಂಭಿಸಲು ಒಂದು ಡಜನ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳು

ಪಾಪೋವರ್ಸ್ *

ಪರಿವರ್ತನೆಗಳು *

Modals bootstrap-modal.js

ಮಾದರಿಗಳ ಬಗ್ಗೆ

ಸ್ಥಿರ ಉದಾಹರಣೆ

ಮಾದರಿ ಹೆಡರ್

ಲೈವ್ ಡೆಮೊ

ಮಾದರಿ ಶೀರ್ಷಿಕೆ

ಮಾದರಿಯಲ್ಲಿ ಪಠ್ಯ

ಮಾದರಿಯಲ್ಲಿ ಪಾಪೋವರ್

ಒಂದು ಮಾದರಿಯಲ್ಲಿ ಟೂಲ್ಟಿಪ್ಸ್

ಬೂಟ್‌ಸ್ಟ್ರಾಪ್-ಮೋಡಲ್ ಅನ್ನು ಬಳಸುವುದು

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

ವಿಧಾನಗಳು

.modal(ಆಯ್ಕೆಗಳು)

.modal('ಟಾಗಲ್')

.modal('ಶೋ')

.modal('ಮರೆಮಾಡು')

ಕಾರ್ಯಕ್ರಮಗಳು

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು bootstrap-dropdown.js

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳ ಬಗ್ಗೆ

ಉದಾಹರಣೆಗಳು

bootstrap-dropdown.js ಅನ್ನು ಬಳಸುವುದು

ಮಾರ್ಕ್ಅಪ್

ವಿಧಾನಗಳು

$().dropdown()

ScrollSpy bootstrap-scrollspy.js

scrollspy ಜೊತೆಗೆ ಉದಾಹರಣೆ navbar

@ಕೊಬ್ಬು

@mdo

ಒಂದು

ಎರಡು

ಮೂರು

bootstrap-scrollspy.js ಅನ್ನು ಬಳಸುವುದು

ಮಾರ್ಕ್ಅಪ್

ಆಯ್ಕೆಗಳು

ಟಾಗಲ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳು bootstrap-tab.js

ಉದಾಹರಣೆ ಟ್ಯಾಬ್‌ಗಳು

bootstrap-tab.js ಅನ್ನು ಬಳಸುವುದು

ಮಾರ್ಕ್ಅಪ್

ವಿಧಾನಗಳು

$().ಟ್ಯಾಬ್

ಕಾರ್ಯಕ್ರಮಗಳು

ಸಾಧನಸಲಹೆಗಳು bootstrap-tooltip.js

ಟೂಲ್ಟಿಪ್ಸ್ ಬಗ್ಗೆ

ಟೂಲ್ಟಿಪ್ಸ್ನ ಉದಾಹರಣೆ ಬಳಕೆ

bootstrap-tooltip.js ಅನ್ನು ಬಳಸುವುದು

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

ವಿಧಾನಗಳು

$().ಟೂಲ್ಟಿಪ್(ಆಯ್ಕೆಗಳು)

.ಟೂಲ್ಟಿಪ್('ಶೋ')

.ಟೂಲ್ಟಿಪ್('ಮರೆಮಾಡು')

.ಟೂಲ್ಟಿಪ್('ಟಾಗಲ್')

Popovers bootstrap-popover.js

ಪಾಪೋವರ್ಸ್ ಬಗ್ಗೆ

ಉದಾಹರಣೆ ಹೋವರ್ ಪಾಪೋವರ್

bootstrap-popover.js ಅನ್ನು ಬಳಸುವುದು

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

ವಿಧಾನಗಳು

$().popover(ಆಯ್ಕೆಗಳು)

.popover('ಶೋ')

.popover('ಮರೆಮಾಡು')

.popover('ಟಾಗಲ್')

ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳು bootstrap-alert.js

ಎಚ್ಚರಿಕೆಗಳ ಬಗ್ಗೆ

ಉದಾಹರಣೆ ಎಚ್ಚರಿಕೆಗಳು

ಓಹ್ ಸ್ನ್ಯಾಪ್! ನೀವು ದೋಷವನ್ನು ಹೊಂದಿದ್ದೀರಿ!

bootstrap-alerts.js ಅನ್ನು ಬಳಸುವುದು

ಮಾರ್ಕ್ಅಪ್

ವಿಧಾನಗಳು

$().ಎಚ್ಚರಿಕೆ()

ಎಚ್ಚರಿಕೆ ('ಮುಚ್ಚಿ')

ಕಾರ್ಯಕ್ರಮಗಳು

ಗುಂಡಿಗಳು bootstrap-button.js

ಬಗ್ಗೆ

ಉದಾಹರಣೆ ಬಳಕೆಗಳು