தனிப்பட்ட அல்லது தொகுக்கப்பட்ட

செருகுநிரல்கள் தனித்தனியாக சேர்க்கப்படலாம் (சிலவற்றிற்கு தேவையான சார்புகள் இருந்தாலும்), அல்லது அனைத்தையும் ஒரே நேரத்தில் சேர்க்கலாம். bootstrap.js மற்றும் bootstrap.min.js இரண்டும் ஒரே கோப்பில் அனைத்து செருகுநிரல்களையும் கொண்டிருக்கும்.

தரவு பண்புக்கூறுகள்

ஜாவாஸ்கிரிப்ட்டின் ஒரு வரி கூட எழுதாமல் மார்க்அப் ஏபிஐ மூலம் அனைத்து பூட்ஸ்டார்ப் செருகுநிரல்களையும் நீங்கள் பயன்படுத்தலாம். இது பூட்ஸ்டார்ப்பின் முதல் வகுப்பு API ஆகும், மேலும் செருகுநிரலைப் பயன்படுத்தும் போது உங்கள் முதல் கருத்தில் இருக்க வேண்டும்.

சில சூழ்நிலைகளில் இந்த செயல்பாட்டை முடக்குவது விரும்பத்தக்கதாக இருக்கலாம். எனவே, `'data-api'` உடன் உடல் பெயரிடப்பட்ட அனைத்து நிகழ்வுகளையும் பிணைப்பதன் மூலம் தரவு பண்புக்கூறு API ஐ முடக்கும் திறனையும் நாங்கள் வழங்குகிறோம். இது போல் தெரிகிறது:

$ ( 'உடல்' ). ஆஃப் ( '.data-api' )

மாற்றாக, ஒரு குறிப்பிட்ட செருகுநிரலை குறிவைக்க, இது போன்ற தரவு-ஏபிஐ பெயர்வெளியுடன் சொருகியின் பெயரை ஒரு பெயர்வெளியாகச் சேர்க்கவும்:

$ ( 'உடல்' ). ஆஃப் ( '.alert.data-api' )

நிரல் API

ஜாவாஸ்கிரிப்ட் API மூலம் நீங்கள் அனைத்து பூட்ஸ்டார்ப் செருகுநிரல்களையும் பயன்படுத்த முடியும் என்று நாங்கள் நம்புகிறோம். அனைத்து பொது APIகளும் ஒற்றை, சங்கிலி முறைகள் மற்றும் செயல்பாட்டின் அடிப்படையில் சேகரிப்பைத் திரும்பப் பெறுகின்றன.

$ ( ".btn.danger" ). பொத்தான் ( "மாற்று" ). addClass ( "கொழுப்பு" )

அனைத்து முறைகளும் விருப்பத்தேர்வுகள் ஆப்ஜெக்ட், ஒரு குறிப்பிட்ட முறையை குறிவைக்கும் சரம் அல்லது எதையும் ஏற்க வேண்டும் (இது இயல்புநிலை நடத்தையுடன் ஒரு செருகுநிரலைத் தொடங்கும்):

$ ( "#myModal" ). மாதிரி () // இயல்புநிலையுடன் துவக்கப்பட்டது                       
$ ( "#myModal" ). மாதிரி ({ keyboard : false }) // விசைப்பலகை இல்லாமல் துவக்கப்பட்டது     
$ ( "#myModal" ). மாதிரி ( 'ஷோ' ) // நிகழ்ச்சியை உடனடியாக துவக்கி செயல்படுத்துகிறது                

ஒவ்வொரு செருகுநிரலும் அதன் மூல கன்ஸ்ட்ரக்டரை ஒரு `கன்ஸ்ட்ரக்டர்` சொத்தில் வெளிப்படுத்துகிறது: $.fn.popover.Constructor. நீங்கள் ஒரு குறிப்பிட்ட செருகுநிரல் நிகழ்வைப் பெற விரும்பினால், அதை ஒரு உறுப்பிலிருந்து நேரடியாக மீட்டெடுக்கவும்: $('[rel=popover]').data('popover').

மோதல் இல்லை

சில நேரங்களில் மற்ற UI கட்டமைப்புகளுடன் பூட்ஸ்டார்ப் செருகுநிரல்களைப் பயன்படுத்துவது அவசியம். இந்த சூழ்நிலைகளில், பெயர்வெளி மோதல்கள் அவ்வப்போது நிகழலாம். .noConflictஇது நடந்தால், நீங்கள் மதிப்பை மாற்ற விரும்பும் செருகுநிரலை அழைக்கலாம் .

var bootstrapButton = $ . fn _ பொத்தான் . noConflict () // $.fn.button ஐ முன்பு ஒதுக்கப்பட்ட மதிப்புக்கு திரும்பவும் 
$ _ fn _ bootstrapBtn = bootstrapButton             // $().bootstrapBtnக்கு பூட்ஸ்ட்ராப் செயல்பாட்டைக் கொடுங்கள்

நிகழ்வுகள்

பெரும்பாலான சொருகிகளின் தனிப்பட்ட செயல்களுக்கு பூட்ஸ்டார்ப் தனிப்பயன் நிகழ்வுகளை வழங்குகிறது. showபொதுவாக, இவை ஒரு முடிவிலி மற்றும் கடந்த பங்கேற்பு வடிவத்தில் வருகின்றன - ஒரு நிகழ்வின் தொடக்கத்தில் முடிவிலி (எ.கா. ) தூண்டப்படுகிறது, மேலும் அதன் கடந்த பங்கேற்பு வடிவம் (எ.கா. shown) ஒரு செயலின் முடிவில் தூண்டுதலாகும்.

அனைத்து முடிவிலி நிகழ்வுகளும் தடுக்கும் இயல்புநிலை செயல்பாட்டை வழங்குகின்றன. இது ஒரு செயலைத் தொடங்கும் முன் அதைச் செயல்படுத்துவதை நிறுத்தும் திறனை வழங்குகிறது.

$ ( '#myModal' ). அன்று ( 'ஷோ' , செயல்பாடு ( இ ) {   
    என்றால் (! தரவு ) திரும்ப e . தடுக்கும் இயல்புநிலை () // மாதிரி காட்டப்படுவதை நிறுத்துகிறது   
})

மாற்றங்கள் பற்றி

எளிய மாறுதல் விளைவுகளுக்கு, மற்ற JS கோப்புகளுடன் ஒருமுறை bootstrap-transition.js ஐச் சேர்க்கவும். நீங்கள் தொகுக்கப்பட்ட (அல்லது minified) bootstrap.js ஐப் பயன்படுத்துகிறீர்கள் என்றால் , இதைச் சேர்க்க வேண்டிய அவசியமில்லை—இது ஏற்கனவே உள்ளது.

பயன்பாடு வழக்குகள்

மாற்றம் செருகுநிரலின் சில எடுத்துக்காட்டுகள்:

• மாடல்களில் நெகிழ் அல்லது மறைதல்
• மங்கிப்போகும் தாவல்கள்
• மங்கலான விழிப்பூட்டல்கள்
• நெகிழ் கொணர்வி பலகைகள்

எடுத்துக்காட்டுகள்

மாதிரிகள் நெறிப்படுத்தப்பட்ட, ஆனால் நெகிழ்வான, குறைந்தபட்ச தேவையான செயல்பாடுகள் மற்றும் ஸ்மார்ட் இயல்புநிலைகளுடன் உரையாடல் கேட்கும்.

நிலையான உதாரணம்

அடிக்குறிப்பில் தலைப்பு, உடல் மற்றும் செயல்களின் தொகுப்பு ஆகியவற்றைக் கொண்ட ரெண்டர் செய்யப்பட்ட மாதிரி.

<div class = "modal hide fade" > 
  <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>

நேரடி டெமோ

கீழே உள்ள பொத்தானைக் கிளிக் செய்வதன் மூலம் ஜாவாஸ்கிரிப்ட் வழியாக ஒரு மாதிரியை மாற்றவும். அது கீழே சரிந்து பக்கத்தின் மேலிருந்து மங்கிவிடும்.

<!-- மோடலைத் தூண்டுவதற்கான பொத்தான் -->
<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>

பயன்பாடு

தரவு பண்புக்கூறுகள் மூலம்

ஜாவாஸ்கிரிப்ட் எழுதாமல் ஒரு மாதிரியை இயக்கவும். 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('show')

ஒரு மாதிரியை கைமுறையாக திறக்கிறது.

$ ( '#myModal' ). மாதிரி ( 'ஷோ' )

.modal('மறை')

ஒரு மாதிரியை கைமுறையாக மறைக்கிறது.

$ ( '#myModal' ). மாதிரி ( 'மறை' )

நிகழ்வுகள்

பூட்ஸ்டார்ப்பின் மாடல் கிளாஸ், மாடல் செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது.

$ ( '#myModal' ). on ( 'மறைக்கப்பட்ட' , செயல்பாடு () {   
  // ஏதாவது செய்…
})

எடுத்துக்காட்டுகள்

navbar, தாவல்கள் மற்றும் மாத்திரைகள் உட்பட, இந்த எளிய செருகுநிரல் மூலம் ஏறக்குறைய எதையும் கீழ்தோன்றும் மெனுக்களைச் சேர்க்கவும்.

ஒரு நவ்பாருக்குள்

தாவல்களுக்குள்

பயன்பாடு

தரவு பண்புக்கூறுகள் மூலம்

data-toggle="dropdown"கீழ்தோன்றும் நிலையை மாற்ற, இணைப்பு அல்லது பொத்தானில் சேர்க்கவும் .

<div class = "dropdown" > 
  <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 class = "dropdown" > 
  <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('மாற்று')

கொடுக்கப்பட்ட navbar அல்லது டேப் செய்யப்பட்ட வழிசெலுத்தலுக்கான மெனுக்களை மாற்றுவதற்கான ஒரு நிரல் API.

navbar இல் உதாரணம்

ஸ்க்ரோல்ஸ்பை செருகுநிரல் ஸ்க்ரோல் பொசிஷனின் அடிப்படையில் நாவ் இலக்குகளை தானாக புதுப்பிப்பதற்கானது. navbarக்கு கீழே உள்ள பகுதியை ஸ்க்ரோல் செய்து செயலில் உள்ள வகுப்பு மாற்றத்தைப் பார்க்கவும். கீழ்தோன்றும் துணை உருப்படிகளும் முன்னிலைப்படுத்தப்படும்.

பயன்பாடு

தரவு பண்புக்கூறுகள் மூலம்

உங்கள் டாப்பார் வழிசெலுத்தலில் ஸ்க்ரோல்ஸ்பை நடத்தையை எளிதாகச் சேர்க்க, data-spy="scroll"நீங்கள் உளவு பார்க்க விரும்பும் உறுப்பைச் சேர்க்கவும் (பொதுவாக இது உடலாக இருக்கும்) மற்றும் data-target=".navbar"எந்த nav ஐப் பயன்படுத்த வேண்டும் என்பதைத் தேர்ந்தெடுக்கவும். நீங்கள் ஒரு .navகூறு கொண்ட scrollspy பயன்படுத்த வேண்டும்.

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

ஜாவாஸ்கிரிப்ட் வழியாக

JavaScript மூலம் scrollspy ஐ அழைக்கவும்:

$ ( '#navbar' ). ஸ்க்ரோல்ஸ்பி ()

முறைகள்

.scrollspy('refresh')

DOM இலிருந்து உறுப்புகளைச் சேர்ப்பது அல்லது அகற்றுவதுடன் இணைந்து ஸ்க்ரோல்ஸ்பையைப் பயன்படுத்தும் போது, ​​நீங்கள் புதுப்பிப்பு முறையை இப்படி அழைக்க வேண்டும்:

$ ( '[data-spy="scroll"]' ). ஒவ்வொன்றும் ( செயல்பாடு () {  
  var $spy = $ ( இது ). scrollspy ( 'refresh' )
});

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-offset="".

நிகழ்வுகள்

எடுத்துக்காட்டு தாவல்கள்

கீழ்தோன்றும் மெனுக்கள் வழியாகவும், உள்ளூர் உள்ளடக்கத்தின் பலகங்கள் வழியாக மாறுவதற்கு விரைவான, மாறும் தாவல் செயல்பாட்டைச் சேர்க்கவும்.

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக டேப் செய்யக்கூடிய தாவல்களை இயக்கவும் (ஒவ்வொரு தாவலும் தனித்தனியாக செயல்படுத்தப்பட வேண்டும்):

$ ( '#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" > Home </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>

முறைகள்

$().tab

தாவல் உறுப்பு மற்றும் உள்ளடக்க கொள்கலனை செயல்படுத்துகிறது. தாவலில் DOM இல் ஒரு கண்டெய்னர் முனை data-targetஅல்லது இலக்கு வைக்கும் முனை இருக்க வேண்டும்.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > சுயவிவரம் </a></li> 
  <li><a href = "#messages" > செய்திகள் </a></li> 
  <li><a href = "#settings" > 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>
 
<script>
  $ ( செயல்பாடு () {  
    $ ( '#myTab a:last' ). தாவல் ( 'ஷோ' );
  })
</script>

நிகழ்வுகள்

$ ( 'a[data-toggle="tab"]' ). மீது ( 'காட்டப்பட்டுள்ளது' , செயல்பாடு ( இ ) {   
  இ . இலக்கு // செயல்படுத்தப்பட்ட தாவல்
  இ . தொடர்புடைய இலக்கு // முந்தைய தாவல்
})

எடுத்துக்காட்டுகள்

ஜேசன் ஃப்ரேம் எழுதிய சிறந்த jQuery.tipsy சொருகி மூலம் ஈர்க்கப்பட்டது; உதவிக்குறிப்புகள் புதுப்பிக்கப்பட்ட பதிப்பாகும், இது படங்களை நம்பாது, அனிமேஷன்களுக்கு CSS3 மற்றும் உள்ளூர் தலைப்பு சேமிப்பகத்திற்கான தரவு பண்புக்கூறுகளைப் பயன்படுத்துகிறது.

செயல்திறன் காரணங்களுக்காக, டூல்டிப் மற்றும் பாப்ஓவர் டேட்டா-ஏபிஸ் ஆகியவை தேர்வு செய்யப்படுகின்றன, அதாவது அவற்றை நீங்களே துவக்க வேண்டும் .

உதவிக்குறிப்புகளைப் பார்க்க கீழே உள்ள இணைப்புகளின் மீது வட்டமிடுங்கள்:

நான்கு திசைகள்

உள்ளீட்டு குழுக்களில் உதவிக்குறிப்புகள்

பூட்ஸ்டார்ப் உள்ளீட்டு குழுக்களுடன் உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்களைப் பயன்படுத்தும் போது, container​​தேவையற்ற பக்க விளைவுகளைத் தவிர்க்க நீங்கள் (கீழே ஆவணப்படுத்தப்பட்டுள்ளது) விருப்பத்தை அமைக்க வேண்டும்.

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக உதவிக்குறிப்பைத் தூண்டவும்:

$ ( '#எடுத்துக்காட்டு' ). உதவிக்குறிப்பு ( விருப்பங்கள் )

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-animation="".

மார்க்அப்

<a href = "#" data-toggle = "tooltip" title = "முதல் உதவிக்குறிப்பு" > என் மீது வட்டமிடுக </a>   

முறைகள்

$().உதவிக்குறிப்பு(விருப்பங்கள்)

உறுப்பு சேகரிப்பில் உதவிக்குறிப்பு கையாளுதலை இணைக்கிறது.

.tooltip('show')

ஒரு உறுப்பின் உதவிக்குறிப்பை வெளிப்படுத்துகிறது.

$ ( '#உறுப்பு' ). உதவிக்குறிப்பு ( 'ஷோ' )

உதவிக்குறிப்பு('மறை')

ஒரு உறுப்பின் உதவிக்குறிப்பை மறைக்கிறது.

$ ( '#உறுப்பு' ). உதவிக்குறிப்பு ( 'மறை' )

.tooltip('மாற்று')

ஒரு உறுப்பின் உதவிக்குறிப்பை மாற்றுகிறது.

$ ( '#உறுப்பு' ). உதவிக்குறிப்பு ( 'மாற்று' )

.tooltip('அழி')

ஒரு தனிமத்தின் உதவிக்குறிப்பை மறைத்து அழிக்கிறது.

$ ( '#உறுப்பு' ). உதவிக்குறிப்பு ( 'அழித்தல்' )

எடுத்துக்காட்டுகள்

ஐபாடில் உள்ளதைப் போன்ற உள்ளடக்கத்தின் சிறிய மேலடுக்குகளை வீட்டு இரண்டாம் நிலைத் தகவலுக்கான எந்த உறுப்புக்கும் சேர்க்கவும். பாப்ஓவரைத் தூண்டுவதற்கு பொத்தானின் மேல் வட்டமிடுங்கள். உதவிக்குறிப்பு சேர்க்கப்பட வேண்டும்.

நிலையான பாப்ஓவர்

நான்கு விருப்பங்கள் உள்ளன: மேல், வலது, கீழ் மற்றும் இடது சீரமைக்கப்பட்டது.

dataஜாவாஸ்கிரிப்ட் மற்றும் ஒரு பண்புக்கூறில் உள்ள உள்ளடக்கம் ஆகியவற்றிலிருந்து பாபோவர்களாக எந்த மார்க்அப்களும் காட்டப்படவில்லை .

நேரடி டெமோ

நான்கு திசைகள்

பயன்பாடு

ஜாவாஸ்கிரிப்ட் வழியாக பாப்ஓவர்களை இயக்கவும்:

$ ( '#எடுத்துக்காட்டு' ). popover ( விருப்பங்கள் )

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-animation="".

மார்க்அப்

செயல்திறன் காரணங்களுக்காக, டூல்டிப் மற்றும் பாப்ஓவர் டேட்டா-ஆபிஸ் தேர்வு செய்யப்பட்டுள்ளன. அவற்றைப் பயன்படுத்த விரும்பினால், ஒரு தேர்வி விருப்பத்தைக் குறிப்பிடவும்.

முறைகள்

$().popover(விருப்பங்கள்)

உறுப்பு சேகரிப்புக்கான பாப்ஓவர்களைத் துவக்குகிறது.

.popover('ஷோ')

பாப்ஓவர் கூறுகளை வெளிப்படுத்துகிறது.

$ ( '#உறுப்பு' ). popover ( 'ஷோ' )

.popover('மறை')

பாப்ஓவர் கூறுகளை மறைக்கிறது.

$ ( '#உறுப்பு' ). popover ( 'மறை' )

.popover('மாற்று')

உறுப்புகளின் பாப்ஓவரை மாற்றுகிறது.

$ ( '#உறுப்பு' ). popover ( 'மாற்று' )

.popover('அழித்தல்')

ஒரு தனிமத்தின் பாப்ஓவரை மறைத்து அழிக்கிறது.

$ ( '#உறுப்பு' ). பாப்ஓவர் ( 'அழித்தல்' )

எடுத்துக்காட்டு எச்சரிக்கைகள்

இந்த சொருகி மூலம் அனைத்து எச்சரிக்கை செய்திகளுக்கும் நிராகரிப்பு செயல்பாட்டைச் சேர்க்கவும்.

பயன்பாடு

ஜாவாஸ்கிரிப்ட் மூலம் விழிப்பூட்டலை நிராகரிப்பதை இயக்கு:

$ ( ".எச்சரிக்கை" ). எச்சரிக்கை ()

மார்க்அப்

data-dismiss="alert"விழிப்பூட்டல் நெருக்கமான செயல்பாட்டைத் தானாக வழங்க, உங்கள் மூடு பொத்தானைச் சேர்க்கவும் .

<a class = "close" data-dismiss = "alert" 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-குழுவில் தேர்வுப்பெட்டி பாணியை மாற்றுவதற்குச் சேர்க்கவும் .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > இடது </button>  
  <button type = "button" class = "btn btn-primary" > Middle </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" > Middle </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>    
<script>
  $ ( '.btn' ). பொத்தான் ( 'முழு' )
</script>

பற்றி

துருத்திகள் மற்றும் வழிசெலுத்தல் போன்ற மடிக்கக்கூடிய கூறுகளுக்கு அடிப்படை பாணிகள் மற்றும் நெகிழ்வான ஆதரவைப் பெறுங்கள்.

* மாற்றங்கள் சொருகி சேர்க்கப்பட வேண்டும்.

உதாரணம் துருத்தி

சரிவு செருகுநிரலைப் பயன்படுத்தி, நாங்கள் ஒரு எளிய துருத்தி பாணி விட்ஜெட்டை உருவாக்கினோம்:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        மடிக்கக்கூடிய குழு உருப்படி #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body fell in" >  
      <div class = "accordion-inner" > 
        அனிம் பாரியதுர் கிளிச்சே...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        மடிக்கக்கூடிய குழு உருப்படி #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body சரிவு" >  
      <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"மடிக்கக்கூடிய உறுப்பின் கட்டுப்பாட்டை தானாக ஒதுக்க, ஒரு data-targetஉறுப்பைச் சேர்க்கவும் . பண்புக்கூறு சுருக்கத்தைப் data-targetபயன்படுத்துவதற்கு css தேர்வியை ஏற்றுக்கொள்கிறது. collapseமடிக்கக்கூடிய உறுப்புடன் வகுப்பைச் சேர்க்க மறக்காதீர்கள் . இது இயல்புநிலையாகத் திறக்கப்பட வேண்டுமெனில், கூடுதல் வகுப்பைச் சேர்க்கவும் in.

மடிக்கக்கூடிய கட்டுப்பாட்டில் துருத்தி போன்ற குழு நிர்வாகத்தைச் சேர்க்க, தரவுப் பண்புக்கூறைச் சேர்க்கவும் data-parent="#selector". இதை செயலில் காண டெமோவைப் பார்க்கவும்.

ஜாவாஸ்கிரிப்ட் வழியாக

இதனுடன் கைமுறையாக இயக்கு:

$ ( ". சரிவு" ). சரிவு ()

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-parent="".

முறைகள்

.collapse(விருப்பங்கள்)

உங்கள் உள்ளடக்கத்தை மடிக்கக்கூடிய உறுப்பாக செயல்படுத்துகிறது. விருப்ப விருப்பங்களை ஏற்றுக்கொள்கிறது object.

$ ( '#myCollapsible' ). சரிவு ({
  மாற்று : பொய் 
})

.collapse('மாற்று')

மடிக்கக்கூடிய உறுப்பைக் காட்ட அல்லது மறைக்க மாற்றுகிறது.

.collapse('show')

மடிக்கக்கூடிய உறுப்பைக் காட்டுகிறது.

.collapse('மறை')

மடிக்கக்கூடிய உறுப்பை மறைக்கிறது.

நிகழ்வுகள்

பூட்ஸ்ட்ராப்பின் சரிவு வகுப்பு, சரிவு செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது.

$ ( '#myCollapsible' ). on ( 'மறைக்கப்பட்ட' , செயல்பாடு () {   
  // ஏதாவது செய்…
})

உதாரணம் கொணர்வி

கீழே உள்ள ஸ்லைடுஷோ, கொணர்வி போன்ற உறுப்புகள் வழியாக சைக்கிள் ஓட்டுவதற்கான பொதுவான செருகுநிரல் மற்றும் கூறுகளைக் காட்டுகிறது.

முதல் சிறுபட லேபிள்

க்ராஸ் ஜஸ்டோ ஓடியோ, டாபிபஸ் ஏசி ஃபேசிலிசிஸ் இன், எஜெஸ்டாஸ் எகெட் குவாம். டோனெக் ஐடி எலிட் நான் மை போர்டா கிராவிடா அட் எகெட் மெட்டஸ். 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.

‹ ›

<div id = "myCarousel" class = "கொணர்வி ஸ்லைடு" >  
  <ol class = "carousel-indicators" > 
    <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 = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- கொணர்வி nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

பயன்பாடு

தரவு பண்புக்கூறுகள் மூலம்

கொணர்வியின் நிலையை எளிதாகக் கட்டுப்படுத்த தரவு பண்புக்கூறுகளைப் பயன்படுத்தவும். data-slideமுக்கிய வார்த்தைகளை ஏற்றுக்கொள்கிறது prevஅல்லது next, ஸ்லைடு நிலையை அதன் தற்போதைய நிலைக்கு மாற்றும். மாற்றாக, data-slide-toஒரு மூல ஸ்லைடு குறியீட்டை கொணர்விக்கு அனுப்ப பயன்படுத்தவும் data-slide-to="2", இது ஸ்லைடு நிலையை ஒரு குறிப்பிட்ட குறியீட்டில் தொடங்கும் 0.

ஜாவாஸ்கிரிப்ட் வழியாக

கொணர்வியை கைமுறையாக அழைக்கவும்:

$ ( '.கொணர்வி' ). கொணர்வி ()

விருப்பங்கள்

தரவு பண்புக்கூறுகள் அல்லது JavaScriptz மூலம் விருப்பங்களை அனுப்பலாம். data-தரவு பண்புக்கூறுகளுக்கு, இல் உள்ளதைப் போல விருப்பப் பெயரைச் சேர்க்கவும் data-interval="".

முறைகள்

.கொணர்வி(விருப்பங்கள்)

விருப்பத்தேர்வுகளுடன் கொணர்வியைத் objectதொடங்கி உருப்படிகள் மூலம் சைக்கிள் ஓட்டத் தொடங்குகிறது.

$ ( '.கொணர்வி' ). கொணர்வி ({
  இடைவெளி : 2000 
})

.கொணர்வி('சுழற்சி')

இடமிருந்து வலமாக கொணர்வி உருப்படிகள் மூலம் சுழற்சிகள்.

.கொணர்வி('இடைநிறுத்தம்')

பொருட்கள் வழியாக சைக்கிள் ஓட்டுவதை கொணர்வி நிறுத்துகிறது.

.கொணர்வி(எண்)

கொணர்வியை ஒரு குறிப்பிட்ட சட்டகத்திற்குச் சுழற்றுகிறது (0 அடிப்படையிலானது, வரிசையைப் போன்றது).

.கொணர்வி('முந்தைய')

முந்தைய உருப்படிக்கான சுழற்சிகள்.

.கொணர்வி('அடுத்து')

அடுத்த உருப்படிக்கான சுழற்சிகள்.

நிகழ்வுகள்

பூட்ஸ்டார்ப்பின் கொணர்வி வகுப்பு, கொணர்வி செயல்பாட்டில் இணைக்கும் இரண்டு நிகழ்வுகளை வெளிப்படுத்துகிறது.

உதாரணமாக

எந்தவொரு படிவ உரை உள்ளீட்டிலும் நேர்த்தியான தட்டச்சு முனைகளை விரைவாக உருவாக்குவதற்கான அடிப்படை, எளிதாக நீட்டிக்கப்பட்ட செருகுநிரல்.

<input type = "text" data- provide = "typeahead" >  

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".