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

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

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

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

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

$ ( 'ದೇಹ' ). ಆಫ್ ( '.data-api' )

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

$ ( 'ದೇಹ' ). ಆಫ್ ( '.alert.data-api' )

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

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

$ ( ".btn.danger" ). ಬಟನ್ ( "ಟಾಗಲ್" ). addClass ( "ಕೊಬ್ಬು" )

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

$ ( "#myModal" ). ಮಾದರಿ () // ಡೀಫಾಲ್ಟ್‌ಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲಾಗಿದೆ                       
$ ( "#myModal" ). ಮಾದರಿ ({ ಕೀಬೋರ್ಡ್ : ತಪ್ಪು }) // ಯಾವುದೇ ಕೀಬೋರ್ಡ್ ಇಲ್ಲದೆ ಪ್ರಾರಂಭಿಸಲಾಗಿದೆ     
$ ( "#myModal" ). ಮೋಡಲ್ ( 'ಶೋ' ) // ಪ್ರದರ್ಶನವನ್ನು ತಕ್ಷಣವೇ ಪ್ರಾರಂಭಿಸುತ್ತದೆ ಮತ್ತು ಆಹ್ವಾನಿಸುತ್ತದೆ                

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

ಸಂಘರ್ಷವಿಲ್ಲ

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

var bootstrapButton = $ . ಎಫ್ಎನ್ _ ಬಟನ್ . noConflict () // ಹಿಂದೆ ನಿಗದಿಪಡಿಸಿದ ಮೌಲ್ಯಕ್ಕೆ $.fn.button ಹಿಂತಿರುಗಿ 
$ _ ಎಫ್ಎನ್ _ bootstrapBtn = bootstrapButton             // $().bootstrapBtn ಬೂಟ್‌ಸ್ಟ್ರಾಪ್ ಕಾರ್ಯವನ್ನು ನೀಡಿ

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

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

ಎಲ್ಲಾ ಇನ್ಫಿನಿಟಿವ್ ಈವೆಂಟ್‌ಗಳು ಡೀಫಾಲ್ಟ್ ಕಾರ್ಯವನ್ನು ತಡೆಗಟ್ಟುತ್ತವೆ. ಇದು ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ಕ್ರಿಯೆಯ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆಯನ್ನು ನಿಲ್ಲಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.

$ ( '#myModal' ). ರಂದು ( 'ಶೋ' , ಕಾರ್ಯ ( ಇ ​​) {   
    ವೇಳೆ (! ಡೇಟಾ ) ಹಿಂತಿರುಗಿ ಇ . ತಡೆಗಟ್ಟುವ ಡೀಫಾಲ್ಟ್ () // ಮಾದರಿಯನ್ನು ತೋರಿಸುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ   
})

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

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

ಪ್ರಕರಣಗಳನ್ನು ಬಳಸಿ

ಪರಿವರ್ತನೆ ಪ್ಲಗಿನ್‌ನ ಕೆಲವು ಉದಾಹರಣೆಗಳು:

• ಮಾದರಿಗಳಲ್ಲಿ ಸ್ಲೈಡಿಂಗ್ ಅಥವಾ ಮರೆಯಾಗುವುದು
• ಟ್ಯಾಬ್‌ಗಳು ಮರೆಯಾಗುತ್ತಿವೆ
• ಮರೆಯಾಗುತ್ತಿರುವ ಎಚ್ಚರಿಕೆಗಳು
• ಸ್ಲೈಡಿಂಗ್ ಏರಿಳಿಕೆ ಫಲಕಗಳು

ಉದಾಹರಣೆಗಳು

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

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

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

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

ಲೈವ್ ಡೆಮೊ

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

<!-- ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸಲು ಬಟನ್ -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > ಡೆಮೊ ಮಾದರಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿ </a>    
 
<!-- ಮಾದರಿ -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > ಮೋಡಲ್ ಹೆಡರ್ </h3> 
  </div>
  <div class = "modal-body" > 
    <p> ಒಂದು ಉತ್ತಮ ದೇಹ... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > ಮುಚ್ಚು </button>   
    <button class = "btn btn-primary" > ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಿ </button> 
  </div>
</div>

ಬಳಕೆ

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

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

<button type = "button" data- toggle = "modal" data-target = "#myModal" > ಲಾಂಚ್ ಮಾಡಲ್ </button>   

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

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

$ ( '#myModal' ). ಮಾದರಿ ( ಆಯ್ಕೆಗಳು )

ಆಯ್ಕೆಗಳು

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

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

ವಿಧಾನಗಳು

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

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

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

.modal('ಟಾಗಲ್')

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

$ ( '#myModal' ). ಮಾದರಿ ( 'ಟಾಗಲ್' )

.modal('ಶೋ')

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

$ ( '#myModal' ). ಮಾದರಿ ( 'ಶೋ' )

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

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

$ ( '#myModal' ). ಮಾದರಿ ( 'ಮರೆಮಾಡು' )

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

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

$ ( '#myModal' ). ಆನ್ ( 'ಗುಪ್ತ' , ಕಾರ್ಯ () {   
  //ಏನಾದರೂ ಮಾಡು...
})

ಉದಾಹರಣೆಗಳು

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

ನವಬಾರ್ ಒಳಗೆ

ಟ್ಯಾಬ್‌ಗಳ ಒಳಗೆ

ಬಳಕೆ

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

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

<div ವರ್ಗ = "ಡ್ರಾಪ್‌ಡೌನ್" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > ಡ್ರಾಪ್‌ಡೌನ್ ಟ್ರಿಗ್ಗರ್ </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

<div ವರ್ಗ = "ಡ್ರಾಪ್‌ಡೌನ್" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    ಡ್ರಾಪ್‌ಡೌನ್
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

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

$ ( '.dropdown-toggle' ). ಡ್ರಾಪ್‌ಡೌನ್ ()

ಆಯ್ಕೆಗಳು

ಯಾವುದೂ

ವಿಧಾನಗಳು

$().dropdown('ಟಾಗಲ್')

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

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

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

ಬಳಕೆ

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

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

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

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

JavaScript ಮೂಲಕ scrollspy ಗೆ ಕರೆ ಮಾಡಿ:

$ ( '#navbar' ). scrollspy ()

ವಿಧಾನಗಳು

.scrollspy('refresh')

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

$ ( '[data-spy="scroll"]' ). ಪ್ರತಿ ( ಕಾರ್ಯ () {  
  var $spy = $ ( ಇದು ). scrollspy ( 'ರಿಫ್ರೆಶ್' )
});

ಆಯ್ಕೆಗಳು

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

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

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

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

ಬಳಕೆ

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

$ ( '#myTab a' ). ಕ್ಲಿಕ್ ಮಾಡಿ ( ಕಾರ್ಯ ( ಇ ) {  
  ಇ . ತಡೆಗಟ್ಟುವಿಕೆ ಡೀಫಾಲ್ಟ್ ();
  $ ( ಇದು ). ಟ್ಯಾಬ್ ( 'ಶೋ' );
})

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

$ ( '#myTab a[href="#profile"]' ). ಟ್ಯಾಬ್ ( 'ಶೋ' ); // ಹೆಸರಿನ ಮೂಲಕ ಟ್ಯಾಬ್ ಆಯ್ಕೆಮಾಡಿ 
$ ( '#myTab a:first' ). ಟ್ಯಾಬ್ ( 'ಶೋ' ); // ಮೊದಲ ಟ್ಯಾಬ್ ಆಯ್ಕೆಮಾಡಿ 
$ ( '#myTab a:last' ). ಟ್ಯಾಬ್ ( 'ಶೋ' ); // ಕೊನೆಯ ಟ್ಯಾಬ್ ಆಯ್ಕೆಮಾಡಿ 
$ ( '#myTab li:eq(2) a' ). ಟ್ಯಾಬ್ ( 'ಶೋ' ); // ಮೂರನೇ ಟ್ಯಾಬ್ ಆಯ್ಕೆಮಾಡಿ (0-ಸೂಚ್ಯಂಕ) 

ಮಾರ್ಕ್ಅಪ್

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

<ul class = "nav nav-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 = "#settings" data-toggle = "tab" > ಸೆಟ್ಟಿಂಗ್‌ಗಳು </a></li>  
</ul>

ವಿಧಾನಗಳು

$().ಟ್ಯಾಬ್

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

<ul class = "nav nav- tabs" id = "myTab" >  
  <li class = "ಸಕ್ರಿಯ" ><a href = "#ಮನೆ" > ಮನೆ </a></li>  
  <li><a href = "#profile" > ಪ್ರೊಫೈಲ್ </a></li> 
  <li><a href = "#messages" > ಸಂದೇಶಗಳು </a></li> 
  <li><a href = "#settings" > ಸೆಟ್ಟಿಂಗ್‌ಗಳು </a></li> 
</ul>
 
<div class = "ಟ್ಯಾಬ್-ವಿಷಯ" > 
  <div class = "tab-pane active" id = "ಹೋಮ್" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<ಸ್ಕ್ರಿಪ್ಟ್>
  $ ( ಕಾರ್ಯ () {  
    $ ( '#myTab a:last' ). ಟ್ಯಾಬ್ ( 'ಶೋ' );
  })
</script>

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

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

ಉದಾಹರಣೆಗಳು

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

ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ, ಟೂಲ್‌ಟಿಪ್ ಮತ್ತು ಪಾಪ್‌ಓವರ್ ಡೇಟಾ-ಎಪಿಸ್ ಆಯ್ಕೆಯಾಗಿದೆ, ಅಂದರೆ ನೀವು ಅವುಗಳನ್ನು ನೀವೇ ಪ್ರಾರಂಭಿಸಬೇಕು .

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

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

ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳಲ್ಲಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳೊಂದಿಗೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪೋವರ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, containerಅನಗತ್ಯ ಅಡ್ಡ ಪರಿಣಾಮಗಳನ್ನು ತಪ್ಪಿಸಲು ನೀವು (ಕೆಳಗೆ ದಾಖಲಿಸಲಾಗಿದೆ) ಆಯ್ಕೆಯನ್ನು ಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ.

ಬಳಕೆ

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

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

ಆಯ್ಕೆಗಳು

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

ಮಾರ್ಕ್ಅಪ್

<a href = "#" data-toggle = "tooltip" title = "ಮೊದಲ ಟೂಲ್‌ಟಿಪ್" > ನನ್ನ ಮೇಲೆ ಸುಳಿದಾಡಿ </a>   

ವಿಧಾನಗಳು

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

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

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

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

$ ( '#ಅಂಶ' ). ಟೂಲ್ಟಿಪ್ ( 'ಶೋ' )

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

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

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

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

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

$ ( '#ಅಂಶ' ). ಟೂಲ್ಟಿಪ್ ( 'ಟಾಗಲ್' )

.ಟೂಲ್ಟಿಪ್('ನಾಶ')

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

$ ( '#ಅಂಶ' ). ಟೂಲ್ಟಿಪ್ ( 'ನಾಶ' )

ಉದಾಹರಣೆಗಳು

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

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

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

dataಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಗುಣಲಕ್ಷಣದೊಳಗಿನ ವಿಷಯದಿಂದ ಪಾಪೋವರ್‌ಗಳಂತೆ ಯಾವುದೇ ಮಾರ್ಕ್‌ಅಪ್ ಅನ್ನು ತೋರಿಸಲಾಗಿಲ್ಲ .

ಲೈವ್ ಡೆಮೊ

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

ಬಳಕೆ

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

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

ಆಯ್ಕೆಗಳು

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

ಮಾರ್ಕ್ಅಪ್

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

ವಿಧಾನಗಳು

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

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

.popover('ಶೋ')

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

$ ( '#ಅಂಶ' ). ಪಾಪೋವರ್ ( 'ಶೋ' )

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

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

$ ( '#ಅಂಶ' ). ಪಾಪೋವರ್ ( 'ಮರೆಮಾಡು' )

.popover('ಟಾಗಲ್')

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

$ ( '#ಅಂಶ' ). ಪಾಪೋವರ್ ( 'ಟಾಗಲ್' )

.popover('ನಾಶ')

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

$ ( '#ಅಂಶ' ). ಪಾಪೋವರ್ ( 'ನಾಶ' )

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

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

ಬಳಕೆ

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

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

ಮಾರ್ಕ್ಅಪ್

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

<a class = "close" data-dismiss = "ಎಚ್ಚರಿಕೆ" href = "#" > × </a>   

ವಿಧಾನಗಳು

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

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

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

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

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

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

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

$ ( '#ನನ್ನ-ಎಚ್ಚರಿಕೆ' ). ಬೈಂಡ್ ( 'ಮುಚ್ಚಿದ' , ಕಾರ್ಯ () {   
  //ಏನಾದರೂ ಮಾಡು...
})

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

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

ರಾಜ್ಯಪೂರ್ಣ

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

<button type = "button" class = "btn btn-primary" data-loading-text = "ಲೋಡ್ ಆಗುತ್ತಿದೆ..." > ಲೋಡ್ ಆಗುತ್ತಿರುವ ಸ್ಥಿತಿ </button>   

ಏಕ ಟಾಗಲ್

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

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>   

ಚೆಕ್ಬಾಕ್ಸ್

data-toggle="buttons-checkbox"btn-group ನಲ್ಲಿ ಚೆಕ್‌ಬಾಕ್ಸ್ ಶೈಲಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸೇರಿಸಿ .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > ಎಡ </button>  
  <button type = "button" class = "btn btn-primary" > ಮಧ್ಯಮ </button>  
  <button type = "button" class = "btn btn-primary" > ಬಲ </button>  
</div>

ರೇಡಿಯೋ

data-toggle="buttons-radio"btn-ಗುಂಪಿನಲ್ಲಿ ರೇಡಿಯೋ ಶೈಲಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಸೇರಿಸಿ .

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > ಎಡ </button>  
  <button type = "button" class = "btn btn-primary" > ಮಧ್ಯಮ </button>  
  <button type = "button" class = "btn btn-primary" > ಬಲ </button>  
</div>

ಬಳಕೆ

JavaScript ಮೂಲಕ ಬಟನ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ:

$ ( '.nav-tabs' ). ಬಟನ್ ()

ಮಾರ್ಕ್ಅಪ್

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

ಆಯ್ಕೆಗಳು

ಯಾವುದೂ

ವಿಧಾನಗಳು

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

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

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

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

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

<button type = "button" class = "btn" data-loading-text = "ಸಾಮಾನುಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ..." > ... </button>    

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

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

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

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

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

ಬಗ್ಗೆ

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

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

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

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

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div ವರ್ಗ = "ಅಕಾರ್ಡಿಯನ್-ಹೆಡಿಂಗ್" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body compound in" >  
      <div class = "accordion-inner" > 
        ಆನಿಂ ಪರಿಯತುರ್ ಕ್ಲೀಚೆ...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div ವರ್ಗ = "ಅಕಾರ್ಡಿಯನ್-ಹೆಡಿಂಗ್" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಗುಂಪು ಐಟಂ #2
      </a>
    </div>
    <div id = "collapseTwo" class = "ಅಕಾರ್ಡಿಯನ್-ಬಾಡಿ ಕುಸಿತ" >  
      <div class = "accordion-inner" > 
        ಆನಿಂ ಪರಿಯತುರ್ ಕ್ಲೀಚೆ...
      </div>
    </div>
  </div>
</div>
...

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

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

ಬಳಕೆ

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

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

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

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

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

$ ( ".ಕುಸಿತ" ). ಕುಸಿತ ()

ಆಯ್ಕೆಗಳು

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

ವಿಧಾನಗಳು

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

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

$ ( '#myCollapsible' ). ಕುಸಿಯಲು ({
  ಟಾಗಲ್ : ಸುಳ್ಳು 
})

.collapse('ಟಾಗಲ್')

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

.collapse('ಶೋ')

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

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

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

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

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

$ ( '#myCollapsible' ). ಆನ್ ( 'ಗುಪ್ತ' , ಕಾರ್ಯ () {   
  //ಏನಾದರೂ ಮಾಡು...
})

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

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

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

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

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "Carousel slide" >  
  <ಓಲ್ ವರ್ಗ = "ಏರಿಳಿಕೆ-ಸೂಚಕಗಳು" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- ಏರಿಳಿಕೆ ಐಟಂಗಳು -->
  <div class = "carousel-inner" > 
    <div class = "ಸಕ್ರಿಯ ಐಟಂ" > … </div> 
    <div class = "ಐಟಂ" > … </div> 
    <div class = "ಐಟಂ" > … </div> 
  </div>
  <!-- ಕರೋಸೆಲ್ ನ್ಯಾವ್ -->
  <a class = "ಏರಿಳಿಕೆ-ನಿಯಂತ್ರಣ ಎಡ" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "ಏರಿಳಿಕೆ-ನಿಯಂತ್ರಣ ಬಲ" href = "#myCarousel" data-slide = "ಮುಂದೆ" > › </a>   
</div>

ಬಳಕೆ

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

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

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

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

$ ( '.carousel' ). ಏರಿಳಿಕೆ ()

ಆಯ್ಕೆಗಳು

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

ವಿಧಾನಗಳು

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

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

$ ( '.carousel' ). ಏರಿಳಿಕೆ ({
  ಮಧ್ಯಂತರ : 2000 
})

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

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

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

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

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

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

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

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

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

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

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

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

ಉದಾಹರಣೆ

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

<ಇನ್ಪುಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ" ಡೇಟಾ- provide = "ಟೈಪ್ಹೆಡ್" >  

autocomplete="off"ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟೈಪ್‌ಹೆಡ್ ಡ್ರಾಪ್‌ಡೌನ್‌ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಮೆನುಗಳು ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ತಡೆಯಲು ನೀವು ಹೊಂದಿಸಲು ಬಯಸುತ್ತೀರಿ .

ಬಳಕೆ

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

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

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

ಇದರೊಂದಿಗೆ ಟೈಪ್‌ಹೆಡ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಕರೆ ಮಾಡಿ:

$ ( '.typeahead' ). ಟೈಪ್‌ಹೆಡ್ ()

ಆಯ್ಕೆಗಳು

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

ವಿಧಾನಗಳು

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

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

ಉದಾಹರಣೆ

ಎಡಭಾಗದಲ್ಲಿರುವ ಉಪನ್ಯಾವಿಗೇಶನ್ ಅಫಿಕ್ಸ್ ಪ್ಲಗಿನ್‌ನ ಲೈವ್ ಡೆಮೊ ಆಗಿದೆ.

ಬಳಕೆ

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

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

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

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

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

$ ( '#navbar' ). ಅಂಟಿಸು ()

ಆಯ್ಕೆಗಳು

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