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

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

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

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

ಲೈವ್ ಡೆಮೊ

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

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

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

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

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

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

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

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

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

ವಿಧಾನಗಳು

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

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

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

.modal('ಟಾಗಲ್')

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

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

.modal('ಶೋ')

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

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

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

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

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

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

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

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

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

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

ಉದಾಹರಣೆಗಳು

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

• ನಿಯಮಿತ ಲಿಂಕ್
• ಡ್ರಾಪ್‌ಡೌನ್
  • Action
  • Another action
  • Something else here
  • Separated link
• ಡ್ರಾಪ್‌ಡೌನ್ 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ಡ್ರಾಪ್‌ಡೌನ್ 3
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

ಮಾರ್ಕ್ಅಪ್

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

<ul class = "nav nav-pills" > 
  <li class = "ಸಕ್ರಿಯ" ><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 = "ವಿಭಾಜಕ" ></li> 
      <li><a href = "#" > ಬೇರ್ಪಡಿಸಿದ ಲಿಂಕ್ </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      ಡ್ರಾಪ್‌ಡೌನ್
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

ವಿಧಾನಗಳು

$().dropdown()

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

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

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

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

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

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

$ ( '#navbar' ). scrollspy ()

ಮಾರ್ಕ್ಅಪ್

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

<body data-spy = "ಸ್ಕ್ರೋಲ್" > ... </body>  

ವಿಧಾನಗಳು

.scrollspy('refresh')

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

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

ಆಯ್ಕೆಗಳು

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

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

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

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

• ಮುಖಪುಟ
• ಪ್ರೊಫೈಲ್
• ಡ್ರಾಪ್‌ಡೌನ್
  • @fat
  • @mdo

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

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

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

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

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

ಮಾರ್ಕ್ಅಪ್

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

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

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

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

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

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

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

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

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

ವಿಧಾನಗಳು

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

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

ವಿಧಾನಗಳು

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

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

.popover('ಶೋ')

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

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

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

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

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

.popover('ಟಾಗಲ್')

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

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

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

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

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

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

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

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

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

ಮಾರ್ಕ್ಅಪ್

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

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

ವಿಧಾನಗಳು

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

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

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

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

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

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

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

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

ಬಗ್ಗೆ

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

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

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

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

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

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

ಮಾರ್ಕ್ಅಪ್

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

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

ವಿಧಾನಗಳು

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

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

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

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

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

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

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

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

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

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

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

ಬಗ್ಗೆ

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

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

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

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

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

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

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

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

ಬಾಗಿಕೊಳ್ಳಬಹುದಾದ ಅಂಶದ ನಿಯಂತ್ರಣವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿಯೋಜಿಸಲು ಕೇವಲ ಸೇರಿಸಿ 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>  

ವಿಧಾನಗಳು

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

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

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

.collapse('ಟಾಗಲ್')

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

.collapse('ಶೋ')

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

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

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

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

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

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

ಬಗ್ಗೆ

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

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

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

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

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

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

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

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

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

‹ ›

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

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

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

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

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

<div id = "myCarousel" class = "Carousel slide" >  
  <!-- ಏರಿಳಿಕೆ ಐಟಂಗಳು -->
  <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>

ವಿಧಾನಗಳು

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ಬಗ್ಗೆ

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

ಉದಾಹರಣೆ

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

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

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

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

ಆಯ್ಕೆಗಳು

ಮಾರ್ಕ್ಅಪ್

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

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

ವಿಧಾನಗಳು

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

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