ಅವಲೋಕನ

ವೈಯಕ್ತಿಕ ಅಥವಾ ಸಂಕಲನ

ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸೇರಿಸಬಹುದು (ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ರತ್ಯೇಕ *.jsಫೈಲ್‌ಗಳನ್ನು ಬಳಸಿ), ಅಥವಾ ಎಲ್ಲವನ್ನೂ ಒಂದೇ ಬಾರಿಗೆ (ಬಳಸಿ bootstrap.jsಅಥವಾ ಮಿನಿಫೈಡ್ bootstrap.min.js).

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಒಂದೇ ಸಾಲನ್ನು ಬರೆಯದೆಯೇ ನೀವು ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಮಾರ್ಕ್‌ಅಪ್ API ಮೂಲಕ ಸಂಪೂರ್ಣವಾಗಿ ಬಳಸಬಹುದು. ಇದು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ರಥಮ ದರ್ಜೆ API ಆಗಿದೆ ಮತ್ತು ಪ್ಲಗಿನ್ ಬಳಸುವಾಗ ನಿಮ್ಮ ಮೊದಲ ಪರಿಗಣನೆಯಾಗಬೇಕು.

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಈ ಕಾರ್ಯವನ್ನು ಆಫ್ ಮಾಡಲು ಅಪೇಕ್ಷಣೀಯವಾಗಬಹುದು ಎಂದು ಅದು ಹೇಳಿದೆ. ಆದ್ದರಿಂದ, ಡಾಕ್ಯುಮೆಂಟ್ ಹೆಸರಿನ ಅಂತರದಲ್ಲಿರುವ ಎಲ್ಲಾ ಈವೆಂಟ್‌ಗಳನ್ನು ಅನ್‌ಬೈಂಡ್ ಮಾಡುವ ಮೂಲಕ ಡೇಟಾ ಗುಣಲಕ್ಷಣ API ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ನಾವು ಒದಗಿಸುತ್ತೇವೆ data-api. ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

$(document).off('.data-api')

ಪರ್ಯಾಯವಾಗಿ, ನಿರ್ದಿಷ್ಟ ಪ್ಲಗಿನ್ ಅನ್ನು ಗುರಿಯಾಗಿಸಲು, ಈ ರೀತಿಯ ಡೇಟಾ-ಎಪಿಐ ನೇಮ್‌ಸ್ಪೇಸ್ ಜೊತೆಗೆ ಪ್ಲಗಿನ್‌ನ ಹೆಸರನ್ನು ನೇಮ್‌ಸ್ಪೇಸ್‌ನಂತೆ ಸೇರಿಸಿ:

$(document).off('.alert.data-api')

ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ API

JavaScript API ಮೂಲಕ ನೀವು ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬಳಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಎಂದು ನಾವು ನಂಬುತ್ತೇವೆ. ಎಲ್ಲಾ ಸಾರ್ವಜನಿಕ API ಗಳು ಏಕ, ಚೈನ್ ಮಾಡಬಹುದಾದ ವಿಧಾನಗಳು ಮತ್ತು ಕ್ರಿಯೆಯ ಮೇಲೆ ಸಂಗ್ರಹಣೆಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

$('.btn.danger').button('toggle').addClass('fat')

ಎಲ್ಲಾ ವಿಧಾನಗಳು ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸಬೇಕು, ನಿರ್ದಿಷ್ಟ ವಿಧಾನವನ್ನು ಗುರಿಯಾಗಿಸುವ ಸ್ಟ್ರಿಂಗ್ ಅಥವಾ ಯಾವುದನ್ನೂ (ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯೊಂದಿಗೆ ಪ್ಲಗಿನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

ಪ್ರತಿಯೊಂದು ಪ್ಲಗಿನ್ ತನ್ನ ಕಚ್ಚಾ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್ ಅನ್ನು Constructorಆಸ್ತಿಯ ಮೇಲೆ ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ: $.fn.popover.Constructor. ನೀವು ನಿರ್ದಿಷ್ಟ ಪ್ಲಗಿನ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ಬಯಸಿದರೆ, ಅದನ್ನು ನೇರವಾಗಿ ಅಂಶದಿಂದ ಹಿಂಪಡೆಯಿರಿ: $('[rel="popover"]').data('popover').

ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳು

ಪ್ಲಗಿನ್‌ನ Constructor.DEFAULTSವಸ್ತುವನ್ನು ಮಾರ್ಪಡಿಸುವ ಮೂಲಕ ನೀವು ಪ್ಲಗಿನ್‌ಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

ಸಂಘರ್ಷವಿಲ್ಲ

ಕೆಲವೊಮ್ಮೆ ಇತರ UI ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಬಳಸುವುದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೇಮ್‌ಸ್ಪೇಸ್ ಘರ್ಷಣೆಗಳು ಸಾಂದರ್ಭಿಕವಾಗಿ ಸಂಭವಿಸಬಹುದು. ಇದು ಸಂಭವಿಸಿದಲ್ಲಿ, ನೀವು .noConflictಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಲು ಬಯಸುವ ಪ್ಲಗಿನ್‌ಗೆ ನೀವು ಕರೆ ಮಾಡಬಹುದು.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

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

ಹೆಚ್ಚಿನ ಪ್ಲಗಿನ್‌ಗಳ ವಿಶಿಷ್ಟ ಕ್ರಿಯೆಗಳಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯವಾಗಿ, ಇವುಗಳು ಇನ್ಫಿನಿಟಿವ್ ಮತ್ತು ಪಾಸ್ಟ್ ಪಾರ್ಟಿಸಿಪಲ್ ರೂಪದಲ್ಲಿ ಬರುತ್ತವೆ - ಅಲ್ಲಿ ಇನ್ಫಿನಿಟಿವ್ (ಉದಾ. show) ಈವೆಂಟ್‌ನ ಪ್ರಾರಂಭದಲ್ಲಿ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತದೆ ಮತ್ತು ಅದರ ಭೂತಕಾಲದ ರೂಪ (ಉದಾ. shown) ಕ್ರಿಯೆಯ ಪೂರ್ಣಗೊಂಡ ಮೇಲೆ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತದೆ.

3.0.0 ರಂತೆ, ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಈವೆಂಟ್‌ಗಳು ನೇಮ್‌ಸ್ಪೇಸ್ ಆಗಿವೆ.

ಎಲ್ಲಾ ಅನಂತ ಘಟನೆಗಳು preventDefaultಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಇದು ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ಕ್ರಿಯೆಯ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆಯನ್ನು ನಿಲ್ಲಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

ಆವೃತ್ತಿ ಸಂಖ್ಯೆಗಳು

VERSIONಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ರತಿಯೊಂದು jQuery ಪ್ಲಗಿನ್‌ಗಳ ಆವೃತ್ತಿಯನ್ನು ಪ್ಲಗಿನ್‌ನ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ನ ಆಸ್ತಿಯ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದು . ಉದಾಹರಣೆಗೆ, ಟೂಲ್‌ಟಿಪ್ ಪ್ಲಗಿನ್‌ಗಾಗಿ:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

JavaScript ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದಾಗ ಯಾವುದೇ ವಿಶೇಷ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳಿಲ್ಲ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದಾಗ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ಲಗಿನ್‌ಗಳು ವಿಶೇಷವಾಗಿ ಆಕರ್ಷಕವಾಗಿ ಹಿಂತಿರುಗುವುದಿಲ್ಲ. ಈ ಸಂದರ್ಭದಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವದ ಬಗ್ಗೆ ನೀವು ಕಾಳಜಿವಹಿಸಿದರೆ, <noscript>ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಪರಿಸ್ಥಿತಿಯನ್ನು (ಮತ್ತು JavaScript ಅನ್ನು ಮರು-ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಹೇಗೆ) ವಿವರಿಸಲು ಬಳಸಿ, ಮತ್ತು/ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಸೇರಿಸಿ.

ಪರಿವರ್ತನೆಗಳು transition.js

ಪರಿವರ್ತನೆಗಳ ಬಗ್ಗೆ

ಸರಳ ಪರಿವರ್ತನೆಯ ಪರಿಣಾಮಗಳಿಗಾಗಿ, transition.jsಇತರ JS ಫೈಲ್‌ಗಳ ಜೊತೆಗೆ ಒಮ್ಮೆ ಸೇರಿಸಿ. ನೀವು ಸಂಕಲಿಸಿದ (ಅಥವಾ ಮಿನಿಫೈಡ್) ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ bootstrap.js, ಇದನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ - ಇದು ಈಗಾಗಲೇ ಇದೆ.

ಒಳಗೆ ಏನಿದೆ

Transition.js ಈವೆಂಟ್‌ಗಳಿಗೆ ಮೂಲ ಸಹಾಯಕ transitionEndಮತ್ತು CSS ಪರಿವರ್ತನೆ ಎಮ್ಯುಲೇಟರ್ ಆಗಿದೆ. CSS ಪರಿವರ್ತನೆಯ ಬೆಂಬಲವನ್ನು ಪರಿಶೀಲಿಸಲು ಮತ್ತು ಹ್ಯಾಂಗಿಂಗ್ ಪರಿವರ್ತನೆಗಳನ್ನು ಹಿಡಿಯಲು ಇತರ ಪ್ಲಗಿನ್‌ಗಳಿಂದ ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

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

transition.jsಕೆಳಗಿನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ತುಣುಕನ್ನು ಬಳಸಿಕೊಂಡು ಪರಿವರ್ತನೆಗಳನ್ನು ಜಾಗತಿಕವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು, ಅದು ಲೋಡ್ ಮಾಡಿದ ನಂತರ (ಅಥವಾ bootstrap.js, ಸಂದರ್ಭಾನುಸಾರವಾಗಿ) ಬರಬೇಕು bootstrap.min.js:

$.support.transition = false

ಮಾದರಿಗಳು modal.js

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

HTML5 ಅದರ ಶಬ್ದಾರ್ಥವನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ ಎಂಬ ಕಾರಣದಿಂದಾಗಿ, autofocusHTML ಗುಣಲಕ್ಷಣವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮಾದರಿಗಳಲ್ಲಿ ಯಾವುದೇ ಪರಿಣಾಮವನ್ನು ಬೀರುವುದಿಲ್ಲ. ಅದೇ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು, ಕೆಲವು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

ಉದಾಹರಣೆಗಳು

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

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ಲೈವ್ ಡೆಮೊ

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ಐಚ್ಛಿಕ ಗಾತ್ರಗಳು

ಮೋಡಲ್‌ಗಳು ಎರಡು ಐಚ್ಛಿಕ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿವೆ, ಎ ಮೇಲೆ ಇರಿಸಲು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳ ಮೂಲಕ ಲಭ್ಯವಿದೆ .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

ಅನಿಮೇಷನ್ ತೆಗೆದುಹಾಕಿ

ವೀಕ್ಷಿಸಲು ಮಸುಕಾಗುವ ಬದಲು ಸರಳವಾಗಿ ಗೋಚರಿಸುವ ಮಾದರಿಗಳಿಗಾಗಿ, .fadeನಿಮ್ಮ ಮೋಡಲ್ ಮಾರ್ಕ್‌ಅಪ್‌ನಿಂದ ವರ್ಗವನ್ನು ತೆಗೆದುಹಾಕಿ.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುವುದು

ಮಾದರಿಯೊಳಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಂನ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯಲು, ಅದರೊಳಗೆ ಗೂಡು ಕಟ್ಟಿಕೊಳ್ಳಿ .rowಮತ್ತು .modal-bodyನಂತರ ಸಾಮಾನ್ಯ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ಟ್ರಿಗ್ಗರ್ ಬಟನ್ ಆಧರಿಸಿ ಮಾದರಿ ವಿಷಯ ಬದಲಾಗುತ್ತಿದೆ

ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ವಿಷಯಗಳೊಂದಿಗೆ ಒಂದೇ ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸುವ ಬಟನ್‌ಗಳ ಗುಂಪನ್ನು ಹೊಂದಿರುವಿರಾ? ಬಳಸಿ event.relatedTargetಮತ್ತು HTML data-*ಗುಣಲಕ್ಷಣಗಳನ್ನು (ಬಹುಶಃ jQuery ಮೂಲಕ ) ಯಾವ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲಾಗಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಮೋಡಲ್‌ನ ವಿಷಯಗಳನ್ನು ಬದಲಾಯಿಸಲು. ವಿವರಗಳಿಗಾಗಿ ಮಾದರಿ ಈವೆಂಟ್‌ಗಳ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

ಬಳಕೆ

ಮೋಡಲ್ ಪ್ಲಗಿನ್ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ನಿಮ್ಮ ಗುಪ್ತ ವಿಷಯವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಸ್ಕ್ರೋಲಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ಅತಿಕ್ರಮಿಸಲು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು .modal-openಮೋಡಲ್‌ನ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡುವಾಗ ತೋರಿಸಿರುವ ಮಾದರಿಗಳನ್ನು ವಜಾಗೊಳಿಸಲು ಕ್ಲಿಕ್ ಪ್ರದೇಶವನ್ನು ಒದಗಿಸಲು a ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ.<body>.modal-backdrop

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

JavaScript ಬರೆಯದೆಯೇ ಮಾದರಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ. data-toggle="modal"ಒಂದು ಬಟನ್‌ನಂತಹ ನಿಯಂತ್ರಕ ಅಂಶದ ಮೇಲೆ ಹೊಂದಿಸಿ data-target="#foo"ಅಥವಾ href="#foo"ಟಾಗಲ್ ಮಾಡಲು ನಿರ್ದಿಷ್ಟ ಮಾದರಿಯನ್ನು ಗುರಿಯಾಗಿಸಲು.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

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

myModalಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಒಂದೇ ಸಾಲಿನ ಐಡಿಯೊಂದಿಗೆ ಮಾದರಿಗೆ ಕರೆ ಮಾಡಿ :

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

ವಿಧಾನಗಳು

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಅಥವಾ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.modalhidden.bs.modal

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

.modal('show')

ಹಸ್ತಚಾಲಿತವಾಗಿ ಒಂದು ಮಾದರಿಯನ್ನು ತೆರೆಯುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವುದಕ್ಕಿಂತ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.modal

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

.modal('hide')

ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮರೆಮಾಡುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .hidden.bs.modal

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

.modal('handleUpdate')

ಒಂದು ವೇಳೆ ಸ್ಕ್ರೋಲ್‌ಬಾರ್ ಅನ್ನು ಎದುರಿಸಲು ಮೋಡಲ್‌ನ ಸ್ಥಾನವನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ, ಇದು ಮೋಡಲ್ ಅನ್ನು ಎಡಕ್ಕೆ ನೆಗೆಯುವಂತೆ ಮಾಡುತ್ತದೆ.

ಮೋಡಲ್ ತೆರೆದಿರುವಾಗ ಅದರ ಎತ್ತರವು ಬದಲಾದಾಗ ಮಾತ್ರ ಅಗತ್ಯವಿದೆ.

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

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

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

ಎಲ್ಲಾ ಮಾದರಿ ಘಟನೆಗಳನ್ನು ಮಾದರಿಯಲ್ಲಿಯೇ (ಅಂದರೆ ನಲ್ಲಿ <div class="modal">) ಹಾರಿಸಲಾಗುತ್ತದೆ.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

ಉದಾಹರಣೆಗಳು

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

ನವಬಾರ್ ಒಳಗೆ

ಮಾತ್ರೆಗಳ ಒಳಗೆ

ಬಳಕೆ

.openಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ , ಪೋಷಕ ಪಟ್ಟಿ ಐಟಂನಲ್ಲಿ ವರ್ಗವನ್ನು ಟಾಗಲ್ ಮಾಡುವ ಮೂಲಕ ಡ್ರಾಪ್‌ಡೌನ್ ಪ್ಲಗಿನ್ ಗುಪ್ತ ವಿಷಯವನ್ನು (ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು) ಟಾಗಲ್ ಮಾಡುತ್ತದೆ .

ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ, ಡ್ರಾಪ್‌ಡೌನ್ ತೆರೆಯುವಿಕೆಯು ಮೆನುವಿನ ಹೊರಗೆ ಟ್ಯಾಪ್ ಮಾಡುವಾಗ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳನ್ನು ಮುಚ್ಚಲು ಟ್ಯಾಪ್ ಪ್ರದೇಶವಾಗಿ ಸೇರಿಸುತ್ತದೆ .dropdown-backdrop, ಇದು ಸರಿಯಾದ iOS ಬೆಂಬಲದ ಅವಶ್ಯಕತೆಯಾಗಿದೆ. ಇದರರ್ಥ ತೆರೆದ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನಿಂದ ಬೇರೆ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗೆ ಬದಲಾಯಿಸಲು ಮೊಬೈಲ್‌ನಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಟ್ಯಾಪ್ ಅಗತ್ಯವಿದೆ.

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

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

data-toggle="dropdown"ಡ್ರಾಪ್‌ಡೌನ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಲಿಂಕ್ ಅಥವಾ ಬಟನ್‌ಗೆ ಸೇರಿಸಿ .

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

ಲಿಂಕ್ ಬಟನ್‌ಗಳೊಂದಿಗೆ URL ಗಳನ್ನು ಹಾಗೇ ಇರಿಸಲು, data-targetಬದಲಿಗೆ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

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

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

ಆಯ್ಕೆಗಳು

ಯಾವುದೂ

ವಿಧಾನಗಳು

$().dropdown('toggle')

ನೀಡಿರುವ ನ್ಯಾವ್‌ಬಾರ್ ಅಥವಾ ಟ್ಯಾಬ್ಡ್ ನ್ಯಾವಿಗೇಶನ್‌ನ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.

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

ಎಲ್ಲಾ ಡ್ರಾಪ್‌ಡೌನ್ ಈವೆಂಟ್‌ಗಳನ್ನು .dropdown-menuಪೋಷಕ ಅಂಶದಲ್ಲಿ ಹಾರಿಸಲಾಗುತ್ತದೆ.

ಎಲ್ಲಾ ಡ್ರಾಪ್‌ಡೌನ್ ಈವೆಂಟ್‌ಗಳು relatedTargetಆಸ್ತಿಯನ್ನು ಹೊಂದಿವೆ, ಅದರ ಮೌಲ್ಯವು ಟಾಗಲ್ ಮಾಡುವ ಆಂಕರ್ ಅಂಶವಾಗಿದೆ.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

navbar ನಲ್ಲಿ ಉದಾಹರಣೆ

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

ಬಳಕೆ

ಸಂಬಂಧಿತ ಸ್ಥಾನೀಕರಣದ ಅಗತ್ಯವಿದೆ

position: relative;ಅನುಷ್ಠಾನ ವಿಧಾನ ಏನೇ ಇರಲಿ, ನೀವು ಬೇಹುಗಾರಿಕೆ ಮಾಡುತ್ತಿರುವ ಅಂಶದ ಮೇಲೆ scrollspy ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ . ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದು <body>. ಹೊರತುಪಡಿಸಿ ಇತರ ಅಂಶಗಳ ಮೇಲೆ ಸ್ಕ್ರೋಲ್‌ಸ್ಪೈ ಮಾಡುವಾಗ , ಒಂದು ಸೆಟ್ <body>ಅನ್ನು ಹೊಂದಲು ಮತ್ತು ಅನ್ವಯಿಸಲು ಮರೆಯದಿರಿ.heightoverflow-y: scroll;

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ನಿಮ್ಮ ಟಾಪ್‌ಬಾರ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ನಡವಳಿಕೆಯನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಲು, data-spy="scroll"ನೀವು ಕಣ್ಣಿಡಲು ಬಯಸುವ ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ (ಸಾಮಾನ್ಯವಾಗಿ ಇದು <body>). ನಂತರ data-targetಯಾವುದೇ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕದ ಮೂಲ ಅಂಶದ ID ಅಥವಾ ವರ್ಗದೊಂದಿಗೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .nav.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

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

ನಿಮ್ಮ CSS ನಲ್ಲಿ ಸೇರಿಸಿದ ನಂತರ position: relative;, JavaScript ಮೂಲಕ scrollspy ಗೆ ಕರೆ ಮಾಡಿ:

$('body').scrollspy({ target: '#navbar-example' })

ವಿಧಾನಗಳು

.scrollspy('refresh')

DOM ನಿಂದ ಅಂಶಗಳನ್ನು ಸೇರಿಸುವ ಅಥವಾ ತೆಗೆದುಹಾಕುವುದರೊಂದಿಗೆ scrollspy ಅನ್ನು ಬಳಸುವಾಗ, ನೀವು ರಿಫ್ರೆಶ್ ವಿಧಾನವನ್ನು ಹೀಗೆ ಕರೆಯಬೇಕಾಗುತ್ತದೆ:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-offset="".

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

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

ಬಳಕೆ

JavaScript ಮೂಲಕ ಟ್ಯಾಬ್ ಮಾಡಬಹುದಾದ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ (ಪ್ರತಿ ಟ್ಯಾಬ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುವ ಅಗತ್ಯವಿದೆ):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

ನೀವು ಪ್ರತ್ಯೇಕ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹಲವಾರು ರೀತಿಯಲ್ಲಿ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

ಮಾರ್ಕ್ಅಪ್

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

ಫೇಡ್ ಪರಿಣಾಮ

ಟ್ಯಾಬ್‌ಗಳು ಮಸುಕಾಗುವಂತೆ ಮಾಡಲು, .fadeಪ್ರತಿಯೊಂದಕ್ಕೂ ಸೇರಿಸಿ .tab-pane. ಮೊದಲ ಟ್ಯಾಬ್ ಫಲಕವು .inಆರಂಭಿಕ ವಿಷಯವನ್ನು ಗೋಚರಿಸುವಂತೆ ಮಾಡಬೇಕು.

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

ವಿಧಾನಗಳು

$().tab

ಟ್ಯಾಬ್ ಅಂಶ ಮತ್ತು ವಿಷಯ ಧಾರಕವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಟ್ಯಾಬ್ DOM ನಲ್ಲಿ ಕಂಟೈನರ್ ನೋಡ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುವ data-targetಅಥವಾ ಹೊಂದಿರಬೇಕು. hrefಮೇಲಿನ ಉದಾಹರಣೆಗಳಲ್ಲಿ, ಟ್ಯಾಬ್‌ಗಳು ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ <a>s ಆಗಿರುತ್ತವೆ.data-toggle="tab"

.tab('show')

ನೀಡಿರುವ ಟ್ಯಾಬ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದರ ಸಂಬಂಧಿತ ವಿಷಯವನ್ನು ತೋರಿಸುತ್ತದೆ. ಈ ಹಿಂದೆ ಆಯ್ಕೆ ಮಾಡಲಾದ ಯಾವುದೇ ಇತರ ಟ್ಯಾಬ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಲಾಗಿಲ್ಲ ಮತ್ತು ಅದರ ಸಂಬಂಧಿತ ವಿಷಯವನ್ನು ಮರೆಮಾಡಲಾಗಿದೆ. ಟ್ಯಾಬ್ ಫಲಕವನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.tab

$('#someTab').tab('show')

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

ಹೊಸ ಟ್ಯಾಬ್ ಅನ್ನು ತೋರಿಸುವಾಗ, ಈವೆಂಟ್‌ಗಳು ಈ ಕೆಳಗಿನ ಕ್ರಮದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ:

1. hide.bs.tab(ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಟ್ಯಾಬ್‌ನಲ್ಲಿ)
2. show.bs.tab(ತೋರಿಸಬೇಕಾದ ಟ್ಯಾಬ್‌ನಲ್ಲಿ)
3. hidden.bs.tab(ಹಿಂದಿನ ಸಕ್ರಿಯ ಟ್ಯಾಬ್‌ನಲ್ಲಿ, hide.bs.tabಈವೆಂಟ್‌ನಂತೆಯೇ)
4. shown.bs.tab(ಹೊಸದಾಗಿ-ಸಕ್ರಿಯವಾಗಿ ತೋರಿಸಿರುವ ಟ್ಯಾಬ್‌ನಲ್ಲಿ, show.bs.tabಈವೆಂಟ್‌ನಂತೆಯೇ)

ಯಾವುದೇ ಟ್ಯಾಬ್ ಈಗಾಗಲೇ ಸಕ್ರಿಯವಾಗಿಲ್ಲದಿದ್ದರೆ, hide.bs.tabಮತ್ತು hidden.bs.tabಈವೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುವುದಿಲ್ಲ.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

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

ಶೂನ್ಯ-ಉದ್ದದ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಎಂದಿಗೂ ಪ್ರದರ್ಶಿಸಲಾಗುವುದಿಲ್ಲ.

ಉದಾಹರಣೆಗಳು

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

ಸ್ಥಾಯೀ ಟೂಲ್ಟಿಪ್

ನಾಲ್ಕು ಆಯ್ಕೆಗಳು ಲಭ್ಯವಿದೆ: ಮೇಲಿನ, ಬಲ, ಕೆಳಗೆ ಮತ್ತು ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ.

ನಾಲ್ಕು ದಿಕ್ಕುಗಳು

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ಬಳಕೆ

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

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

$('#example').tooltip(options)

ಮಾರ್ಕ್ಅಪ್

ಟೂಲ್‌ಟಿಪ್‌ಗೆ ಅಗತ್ಯವಿರುವ ಮಾರ್ಕ್‌ಅಪ್ ಕೇವಲ dataಗುಣಲಕ್ಷಣವಾಗಿದೆ ಮತ್ತು titleHTML ಅಂಶದಲ್ಲಿ ನೀವು ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಹೊಂದಲು ಬಯಸುತ್ತೀರಿ. ಟೂಲ್‌ಟಿಪ್‌ನ ರಚಿತವಾದ ಮಾರ್ಕ್‌ಅಪ್ ಸರಳವಾಗಿದೆ, ಆದರೂ ಅದಕ್ಕೆ ಸ್ಥಾನದ ಅಗತ್ಯವಿರುತ್ತದೆ (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, topಪ್ಲಗಿನ್‌ನಿಂದ ಹೊಂದಿಸಲಾಗಿದೆ).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-animation="".

ವಿಧಾನಗಳು

$().tooltip(options)

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

.tooltip('show')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . shown.bs.tooltipಇದನ್ನು ಟೂಲ್‌ಟಿಪ್‌ನ "ಹಸ್ತಚಾಲಿತ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಶೂನ್ಯ-ಉದ್ದದ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಎಂದಿಗೂ ಪ್ರದರ್ಶಿಸಲಾಗುವುದಿಲ್ಲ.

$('#element').tooltip('show')

.tooltip('hide')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . hidden.bs.tooltipಇದನ್ನು ಟೂಲ್‌ಟಿಪ್‌ನ "ಹಸ್ತಚಾಲಿತ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.

$('#element').tooltip('hide')

.tooltip('toggle')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಅಥವಾ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ . ಇದನ್ನು ಟೂಲ್‌ಟಿಪ್‌ನ "ಹಸ್ತಚಾಲಿತ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.shown.bs.tooltiphidden.bs.tooltip

$('#element').tooltip('toggle')

.tooltip('destroy')

ಅಂಶದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು ನಾಶಪಡಿಸುತ್ತದೆ. ನಿಯೋಗವನ್ನು ಬಳಸುವ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ( ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡುselector ರಚಿಸಲಾಗಿದೆ ) ವಂಶಸ್ಥ ಪ್ರಚೋದಕ ಅಂಶಗಳ ಮೇಲೆ ಪ್ರತ್ಯೇಕವಾಗಿ ನಾಶಪಡಿಸಲಾಗುವುದಿಲ್ಲ.

$('#element').tooltip('destroy')

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

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

ಶೀರ್ಷಿಕೆ ಮತ್ತು ವಿಷಯಗಳೆರಡೂ ಶೂನ್ಯ-ಉದ್ದವನ್ನು ಹೊಂದಿರುವ ಪಾಪೋವರ್‌ಗಳನ್ನು ಎಂದಿಗೂ ಪ್ರದರ್ಶಿಸಲಾಗುವುದಿಲ್ಲ.

$(function () {
  $('[data-toggle="popover"]').popover()
})

ಉದಾಹರಣೆಗಳು

ಸ್ಥಿರ ಪಾಪ್ಓವರ್

ನಾಲ್ಕು ಆಯ್ಕೆಗಳು ಲಭ್ಯವಿದೆ: ಮೇಲಿನ, ಬಲ, ಕೆಳಗೆ ಮತ್ತು ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ.

ಲೈವ್ ಡೆಮೊ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ನಾಲ್ಕು ದಿಕ್ಕುಗಳು

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

ಮುಂದಿನ ಕ್ಲಿಕ್‌ನಲ್ಲಿ ವಜಾಗೊಳಿಸಿ

focusಬಳಕೆದಾರರು ಮಾಡುವ ಮುಂದಿನ ಕ್ಲಿಕ್‌ನಲ್ಲಿ ಪಾಪೋವರ್‌ಗಳನ್ನು ವಜಾಗೊಳಿಸಲು ಪ್ರಚೋದಕವನ್ನು ಬಳಸಿ .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

ಬಳಕೆ

JavaScript ಮೂಲಕ popovers ಸಕ್ರಿಯಗೊಳಿಸಿ:

$('#example').popover(options)

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-animation="".

ವಿಧಾನಗಳು

$().popover(options)

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

.popover('show')

ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಪಾಪೋವರ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ shown.bs.popoverಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. ಇದನ್ನು ಪಾಪೋವರ್‌ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಶೀರ್ಷಿಕೆ ಮತ್ತು ವಿಷಯಗಳೆರಡೂ ಶೂನ್ಯ-ಉದ್ದವನ್ನು ಹೊಂದಿರುವ ಪಾಪೋವರ್‌ಗಳನ್ನು ಎಂದಿಗೂ ಪ್ರದರ್ಶಿಸಲಾಗುವುದಿಲ್ಲ.

$('#element').popover('show')

.popover('hide')

ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಪಾಪೋವರ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ hidden.bs.popoverಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. ಇದನ್ನು ಪಾಪೋವರ್‌ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.

$('#element').popover('hide')

.popover('toggle')

ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಪಾಪೋವರ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ shown.bs.popoverಅಥವಾ hidden.bs.popoverಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. ಇದನ್ನು ಪಾಪೋವರ್‌ನ "ಕೈಪಿಡಿ" ಪ್ರಚೋದನೆ ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.

$('#element').popover('toggle')

.popover('destroy')

ಅಂಶದ ಪಾಪೋವರ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು ನಾಶಪಡಿಸುತ್ತದೆ. ನಿಯೋಗವನ್ನು ಬಳಸುವ ಪಾಪೋವರ್‌ಗಳನ್ನು ( ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು ರಚಿಸಲಾಗಿದೆ )selector ವಂಶಸ್ಥ ಪ್ರಚೋದಕ ಅಂಶಗಳ ಮೇಲೆ ಪ್ರತ್ಯೇಕವಾಗಿ ನಾಶಪಡಿಸಲಾಗುವುದಿಲ್ಲ.

$('#element').popover('destroy')

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

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

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

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

ಈ ಪ್ಲಗಿನ್‌ನೊಂದಿಗೆ ಎಲ್ಲಾ ಎಚ್ಚರಿಕೆ ಸಂದೇಶಗಳಿಗೆ ವಜಾಗೊಳಿಸುವ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಿ.

ಬಟನ್ ಅನ್ನು ಬಳಸುವಾಗ .close, ಅದು ಮೊದಲ ಮಗುವಾಗಿರಬೇಕು .alert-dismissibleಮತ್ತು ಮಾರ್ಕ್‌ಅಪ್‌ನಲ್ಲಿ ಯಾವುದೇ ಪಠ್ಯ ವಿಷಯವು ಅದರ ಮುಂದೆ ಬರಬಾರದು.

ಬಳಕೆ

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

ವಿಧಾನಗಳು

$().alert()

data-dismiss="alert"ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಸಂತತಿ ಅಂಶಗಳ ಮೇಲಿನ ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗಳಿಗೆ ಎಚ್ಚರಿಕೆಯನ್ನು ಆಲಿಸುವಂತೆ ಮಾಡುತ್ತದೆ . (ಡೇಟಾ-ಎಪಿಐನ ಸ್ವಯಂ-ಪ್ರಾರಂಭವನ್ನು ಬಳಸುವಾಗ ಅಗತ್ಯವಿಲ್ಲ.)

$().alert('close')

DOM ನಿಂದ ಅದನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ಎಚ್ಚರಿಕೆಯನ್ನು ಮುಚ್ಚುತ್ತದೆ. ಒಂದು ವೇಳೆ .fadeಮತ್ತು.in ಅದನ್ನು ತೆಗೆದುಹಾಕುವ ಮೊದಲು ಎಚ್ಚರಿಕೆಯು ಮಸುಕಾಗುತ್ತದೆ.

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

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ಗುಂಡಿಗಳು button.js

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

ರಾಜ್ಯಪೂರ್ಣ

data-loading-text="Loading..."ಬಟನ್‌ನಲ್ಲಿ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಬಳಸಲು ಸೇರಿಸಿ .

ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು v3.3.5 ರಿಂದ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ ಮತ್ತು v4 ನಲ್ಲಿ ತೆಗೆದುಹಾಕಲಾಗಿದೆ.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

ಏಕ ಟಾಗಲ್

data-toggle="button"ಒಂದೇ ಬಟನ್‌ನಲ್ಲಿ ಟಾಗಲ್ ಮಾಡುವುದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಸೇರಿಸಿ .

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

ಚೆಕ್ಬಾಕ್ಸ್ / ರೇಡಿಯೋ

ತಮ್ಮ ಶೈಲಿಗಳಲ್ಲಿ ಟಾಗಲ್ ಮಾಡುವುದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಹೊಂದಿರುವ ಚೆಕ್‌ಬಾಕ್ಸ್ ಅಥವಾ ರೇಡಿಯೊ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಸೇರಿಸಿ data-toggle="buttons"..btn-group

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

ವಿಧಾನಗಳು

$().button('toggle')

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

$().button('reset')

ಬಟನ್ ಸ್ಥಿತಿಯನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ - ಪಠ್ಯವನ್ನು ಮೂಲ ಪಠ್ಯಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಅಸಮಕಾಲಿಕವಾಗಿದೆ ಮತ್ತು ಮರುಹೊಂದಿಸುವಿಕೆಯು ನಿಜವಾಗಿ ಪೂರ್ಣಗೊಳ್ಳುವ ಮೊದಲು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

$().button(string)

ಪಠ್ಯವನ್ನು ಯಾವುದೇ ಡೇಟಾ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಪಠ್ಯ ಸ್ಥಿತಿಗೆ ಬದಲಾಯಿಸುತ್ತದೆ.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

ಕುಸಿತ. js

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

ಉದಾಹರಣೆ

ವರ್ಗ ಬದಲಾವಣೆಗಳ ಮೂಲಕ ಮತ್ತೊಂದು ಅಂಶವನ್ನು ತೋರಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ಕೆಳಗಿನ ಬಟನ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ:

• .collapseವಿಷಯವನ್ನು ಮರೆಮಾಡುತ್ತದೆ
• .collapsingಪರಿವರ್ತನೆಯ ಸಮಯದಲ್ಲಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ
• .collapse.inವಿಷಯವನ್ನು ತೋರಿಸುತ್ತದೆ

ನೀವು ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಲಿಂಕ್ ಅನ್ನು ಬಳಸಬಹುದು hrefಅಥವಾ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಬಟನ್ ಅನ್ನು ಬಳಸಬಹುದು data-target. ಎರಡೂ ಸಂದರ್ಭಗಳಲ್ಲಿ, data-toggle="collapse"ಇದು ಅಗತ್ಯವಿದೆ.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

ಪ್ಯಾನಲ್ ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಅಕಾರ್ಡಿಯನ್ ರಚಿಸಲು ಡೀಫಾಲ್ಟ್ ಕುಸಿತದ ನಡವಳಿಕೆಯನ್ನು ವಿಸ್ತರಿಸಿ.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.panel-bodys ನೊಂದಿಗೆ s ಅನ್ನು ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಲು ಸಹ ಸಾಧ್ಯವಿದೆ .list-group.

ಬಳಕೆ

ಕುಸಿತದ ಪ್ಲಗಿನ್ ಭಾರ ಎತ್ತುವಿಕೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಕೆಲವು ವರ್ಗಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ:

• .collapseವಿಷಯವನ್ನು ಮರೆಮಾಡುತ್ತದೆ
• .collapse.inವಿಷಯವನ್ನು ತೋರಿಸುತ್ತದೆ
• .collapsingಪರಿವರ್ತನೆಯು ಪ್ರಾರಂಭವಾದಾಗ ಸೇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅದು ಪೂರ್ಣಗೊಂಡಾಗ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ

ಈ ವರ್ಗಗಳನ್ನು ನಲ್ಲಿ ಕಾಣಬಹುದು component-animations.less.

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

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

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

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

ಇದರೊಂದಿಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಿ:

$('.collapse').collapse()

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-parent="".

ವಿಧಾನಗಳು

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

ತೋರಿಸಲು ಅಥವಾ ಮರೆಮಾಡಲು ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ವಾಸ್ತವವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಅಥವಾ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.collapsehidden.bs.collapse

.collapse('show')

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ತೋರಿಸುತ್ತದೆ. ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.collapse

.collapse('hide')

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶವನ್ನು ವಾಸ್ತವವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .hidden.bs.collapse

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

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

ಏರಿಳಿಕೆ carousel.js

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

ಉದಾಹರಣೆಗಳು

ಹಿಂದಿನ ಮುಂದೆ

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ಐಚ್ಛಿಕ ಶೀರ್ಷಿಕೆಗಳು

.carousel-captionಯಾವುದೇ ಒಳಗಿನ ಅಂಶದೊಂದಿಗೆ ಸುಲಭವಾಗಿ ನಿಮ್ಮ ಸ್ಲೈಡ್‌ಗಳಿಗೆ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಸೇರಿಸಿ .item. ಅದರೊಳಗೆ ಯಾವುದೇ ಐಚ್ಛಿಕ HTML ಅನ್ನು ಇರಿಸಿ ಮತ್ತು ಅದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲಾಗುತ್ತದೆ.

ಮೊದಲ ಸ್ಲೈಡ್ ಲೇಬಲ್

ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್ ಮೊಲ್ಲಿಸ್ ಇಂಟರ್ಡಮ್.

ಎರಡನೇ ಸ್ಲೈಡ್ ಲೇಬಲ್

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್.

ಮೂರನೇ ಸ್ಲೈಡ್ ಲೇಬಲ್

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ಹಿಂದಿನ ಮುಂದೆ

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

ಬಳಕೆ

ಬಹು ಏರಿಳಿಕೆಗಳು

ಏರಿಳಿಕೆ ನಿಯಂತ್ರಣಗಳು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಕರೋಸೆಲ್‌ಗಳಿಗೆ idಹೊರಗಿನ ಧಾರಕವನ್ನು (ದ ) ಬಳಸಬೇಕಾಗುತ್ತದೆ . .carouselಬಹು ಏರಿಳಿಕೆಗಳನ್ನು ಸೇರಿಸುವಾಗ ಅಥವಾ ಏರಿಳಿಕೆಯನ್ನು ಬದಲಾಯಿಸುವಾಗ id, ಸಂಬಂಧಿತ ನಿಯಂತ್ರಣಗಳನ್ನು ನವೀಕರಿಸಲು ಮರೆಯದಿರಿ.

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ಏರಿಳಿಕೆಯ ಸ್ಥಾನವನ್ನು ಸುಲಭವಾಗಿ ನಿಯಂತ್ರಿಸಲು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ. data-slideಕೀವರ್ಡ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ prevಅಥವಾ next, ಅದರ ಪ್ರಸ್ತುತ ಸ್ಥಾನಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಸ್ಲೈಡ್ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಪರ್ಯಾಯವಾಗಿ, data-slide-toಕಚ್ಚಾ ಸ್ಲೈಡ್ ಸೂಚ್ಯಂಕವನ್ನು ಏರಿಳಿಕೆಗೆ ರವಾನಿಸಲು ಬಳಸಿ data-slide-to="2", ಇದು ಸ್ಲೈಡ್ ಸ್ಥಾನವನ್ನು ನಿರ್ದಿಷ್ಟ ಸೂಚ್ಯಂಕಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ 0.

data-ride="carousel"ಪುಟ ಲೋಡ್‌ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಏರಿಳಿಕೆಯನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವಂತೆ ಗುರುತಿಸಲು ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ . ಅದೇ ಏರಿಳಿಕೆಯ (ಅನಾವಶ್ಯಕ ಮತ್ತು ಅನಗತ್ಯ) ಸ್ಪಷ್ಟ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾರಂಭದೊಂದಿಗೆ ಸಂಯೋಜನೆಯಲ್ಲಿ ಇದನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.

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

ಇದರೊಂದಿಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಏರಿಳಿಕೆಗೆ ಕರೆ ಮಾಡಿ:

$('.carousel').carousel()

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-interval="".

ವಿಧಾನಗಳು

.carousel(options)

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

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

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

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

ಎರಡೂ ಘಟನೆಗಳು ಈ ಕೆಳಗಿನ ಹೆಚ್ಚುವರಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿವೆ:

• direction: ಏರಿಳಿಕೆ ಸ್ಲೈಡಿಂಗ್ ಆಗುವ ದಿಕ್ಕಿನಲ್ಲಿ (ಒಂದೋ "left"ಅಥವಾ "right").
• relatedTarget: DOM ಅಂಶವನ್ನು ಸಕ್ರಿಯ ಐಟಂ ಆಗಿ ಸ್ಲೈಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ.

ಎಲ್ಲಾ ಏರಿಳಿಕೆ ಘಟನೆಗಳನ್ನು ಏರಿಳಿಕೆಯಲ್ಲಿಯೇ (ಅಂದರೆ ನಲ್ಲಿ <div class="carousel">) ಹಾರಿಸಲಾಗುತ್ತದೆ.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

ಅಫಿಕ್ಸ್ affix.js

ಉದಾಹರಣೆ

ಅಫಿಕ್ಸ್ ಪ್ಲಗಿನ್ ಟಾಗಲ್ position: fixed;ಆನ್ ಮತ್ತು ಆಫ್ ಆಗುತ್ತದೆ, ಜೊತೆಗೆ ಕಂಡುಬರುವ ಪರಿಣಾಮವನ್ನು ಅನುಕರಿಸುತ್ತದೆ position: sticky;. ಬಲಭಾಗದಲ್ಲಿರುವ ಉಪನ್ಯಾವಿಗೇಶನ್ ಅಫಿಕ್ಸ್ ಪ್ಲಗಿನ್‌ನ ಲೈವ್ ಡೆಮೊ ಆಗಿದೆ.

ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಅಫಿಕ್ಸ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿ. ಎರಡೂ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನಿಮ್ಮ ಅಂಟಿಸಲಾದ ವಿಷಯದ ಸ್ಥಾನ ಮತ್ತು ಅಗಲಕ್ಕಾಗಿ ನೀವು CSS ಅನ್ನು ಒದಗಿಸಬೇಕು.

ಗಮನಿಸಿ: Safari ರೆಂಡರಿಂಗ್ ಬಗ್‌ನಿಂದಾಗಿ ಎಳೆದ ಅಥವಾ ತಳ್ಳಿದ ಕಾಲಮ್‌ನಂತಹ ತುಲನಾತ್ಮಕವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಅಂಶದಲ್ಲಿರುವ ಅಂಶದ ಮೇಲೆ ಅಫಿಕ್ಸ್ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಬೇಡಿ .

CSS ಮೂಲಕ ಸ್ಥಾನೀಕರಣ

ಅಫಿಕ್ಸ್ ಪ್ಲಗಿನ್ ಮೂರು ವರ್ಗಗಳ ನಡುವೆ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ, ಪ್ರತಿಯೊಂದೂ ನಿರ್ದಿಷ್ಟ ಸ್ಥಿತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ: .affix, .affix-top, ಮತ್ತು .affix-bottom. ನಿಜವಾದ ಸ್ಥಾನಗಳನ್ನು ನಿಭಾಯಿಸಲು ಈ ವರ್ಗಗಳಿಗೆ ನೀವೇ (ಈ ಪ್ಲಗಿನ್‌ನಿಂದ ಸ್ವತಂತ್ರವಾಗಿ) position: fixed;ರಂದು ಹೊರತುಪಡಿಸಿ, ನೀವು ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಬೇಕು ..affix

ಅಫಿಕ್ಸ್ ಪ್ಲಗಿನ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

1. ಪ್ರಾರಂಭಿಸಲು, .affix-topಅಂಶವು ಅದರ ಉನ್ನತ ಸ್ಥಾನದಲ್ಲಿದೆ ಎಂದು ಸೂಚಿಸಲು ಪ್ಲಗಿನ್ ಸೇರಿಸುತ್ತದೆ. ಈ ಹಂತದಲ್ಲಿ ಯಾವುದೇ CSS ಸ್ಥಾನೀಕರಣದ ಅಗತ್ಯವಿಲ್ಲ.
2. ನೀವು ಅಂಟಿಸಲು ಬಯಸುವ ಅಂಶದ ಹಿಂದೆ ಸ್ಕ್ರೋಲಿಂಗ್ ಮಾಡುವುದು ನಿಜವಾದ ಅಂಟಿಸುವಿಕೆಯನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. ಇಲ್ಲಿಯೇ .affixಬದಲಾಯಿಸುತ್ತದೆ .affix-topಮತ್ತು ಹೊಂದಿಸುತ್ತದೆ position: fixed;(ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ನಿಂದ ಒದಗಿಸಲಾಗಿದೆ).
3. .affixಕೆಳಭಾಗದ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ, ಅದರ ಹಿಂದೆ ಸ್ಕ್ರೋಲಿಂಗ್ ಮಾಡುವುದರಿಂದ ಅದನ್ನು ಬದಲಾಯಿಸಬೇಕು .affix-bottom. ಆಫ್‌ಸೆಟ್‌ಗಳು ಐಚ್ಛಿಕವಾಗಿರುವುದರಿಂದ, ಒಂದನ್ನು ಹೊಂದಿಸಲು ನೀವು ಸೂಕ್ತವಾದ CSS ಅನ್ನು ಹೊಂದಿಸುವ ಅಗತ್ಯವಿದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, position: absolute;ಅಗತ್ಯವಿದ್ದಾಗ ಸೇರಿಸಿ. ಅಲ್ಲಿಂದ ಅಂಶವನ್ನು ಎಲ್ಲಿ ಇರಿಸಬೇಕೆಂದು ನಿರ್ಧರಿಸಲು ಪ್ಲಗಿನ್ ಡೇಟಾ ಗುಣಲಕ್ಷಣ ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಯ್ಕೆಯನ್ನು ಬಳಸುತ್ತದೆ.

ಕೆಳಗಿನ ಯಾವುದೇ ಬಳಕೆಯ ಆಯ್ಕೆಗಳಿಗಾಗಿ ನಿಮ್ಮ CSS ಅನ್ನು ಹೊಂದಿಸಲು ಮೇಲಿನ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ.

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಅಫಿಕ್ಸ್ ನಡವಳಿಕೆಯನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಲು, data-spy="affix"ನೀವು ಕಣ್ಣಿಡಲು ಬಯಸುವ ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ. ಅಂಶದ ಪಿನ್ನಿಂಗ್ ಅನ್ನು ಯಾವಾಗ ಟಾಗಲ್ ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಆಫ್‌ಸೆಟ್‌ಗಳನ್ನು ಬಳಸಿ.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

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

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-offset-top="200".

ವಿಧಾನಗಳು

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

ಸಂಬಂಧಿತ ಅಂಶಗಳ ಆಯಾಮಗಳು, ಸ್ಥಾನ ಮತ್ತು ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನವನ್ನು ಆಧರಿಸಿ ಅಫಿಕ್ಸ್ ಸ್ಥಿತಿಯನ್ನು ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಹೊಸ ಸ್ಥಿತಿಗೆ ಅನುಗುಣವಾಗಿ ಅಂಟಿಕೊಂಡಿರುವ ವಿಷಯಕ್ಕೆ .affix, .affix-top, ಮತ್ತು .affix-bottomತರಗತಿಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ ಅಥವಾ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ಅಂಟಿಸಲಾದ ವಿಷಯದ ಆಯಾಮಗಳು ಅಥವಾ ಗುರಿ ಅಂಶವನ್ನು ಬದಲಾಯಿಸಿದಾಗ, ಅಂಟಿಸಲಾದ ವಿಷಯದ ಸರಿಯಾದ ಸ್ಥಾನವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಈ ವಿಧಾನವನ್ನು ಕರೆಯಬೇಕಾಗುತ್ತದೆ.

$('#myAffix').affix('checkPosition')

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

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