மாதிரிகள் பற்றி

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

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

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

நேரடி டெமோ

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

பூட்ஸ்ட்ராப்-மாடலைப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக மாதிரியை அழைக்கவும்:

$ ( '#myModal' ). மாதிரி ( விருப்பங்கள் )

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

மார்க்அப்

ஜாவாஸ்கிரிப்ட்டின் ஒரு வரியை எழுதாமல் உங்கள் பக்கத்தில் எளிதாக மாதிரிகளை நீங்கள் செயல்படுத்தலாம். ஒரு data-toggle="modal"கட்டுப்படுத்தி உறுப்பை ஒரு மாதிரி உறுப்பு ஐடியுடன் ஒத்திருக்கும் data-target="#foo"அல்லது அதைக் கிளிக் செய்தால், அது உங்கள் மாதிரியைத் தொடங்கும்.href="#foo"

மேலும், உங்கள் மாதிரி நிகழ்வில் விருப்பங்களைச் சேர்க்க, கட்டுப்பாட்டு உறுப்பு அல்லது மாதிரி மார்க்அப்பில் கூடுதல் தரவு பண்புக்கூறுகளாக அவற்றைச் சேர்க்கவும்.

<a class = "btn" data-toggle = "modal" href = "#myModal" > துவக்க மாதிரி </a>    

<div class = "modal " id = "myModal" >  
  <div class = "modal-header" > 
    <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" > மூடு </a>  
    <a href = "#" class = "btn btn-primary" > மாற்றங்களைச் சேமி </a>  
  </div>
</div>

முறைகள்

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

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

$ ( '#myModal' ). மாதிரி ({
  விசைப்பலகை : பொய் 
})

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

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

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

.modal('show')

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

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

.modal('மறை')

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

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

நிகழ்வுகள்

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

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

கீழிறங்கும் பற்றி

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

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

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

• வழக்கமான இணைப்பு
• கீழே போடு
  • 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 = "active" ><a href = "#" > வழக்கமான இணைப்பு </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      கீழே போடு
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > செயல் </a></li> 
      <li><a href = "#" > மற்றொரு செயல் </a></li> 
      <li><a href = "#" > வேறு ஏதாவது இங்கே உள்ளது </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > பிரிக்கப்பட்ட இணைப்பு </a></li> 
    </ul>
  </li>
  ...
</ul>

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()

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

ஸ்க்ரோல்ஸ்பை செருகுநிரல் ஸ்க்ரோல் பொசிஷனின் அடிப்படையில் நாவ் இலக்குகளை தானாக புதுப்பிப்பதற்கானது.

scrollspy உடன் எடுத்துக்காட்டு navbar

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

bootstrap-scrollspy.js ஐப் பயன்படுத்துதல்

javascript வழியாக scrollspy ஐ அழைக்கவும்:

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

மார்க்அப்

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

<body data-spy = "சுருள்" > ... </body>  

முறைகள்

.scrollspy('refresh')

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

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

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

நிகழ்வுகள்

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

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

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

• வீடு
• சுயவிவரம்
• கீழே போடு
  • @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" > 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 மற்றும் உள்ளூர் தலைப்பு சேமிப்பகத்திற்கான தரவு பண்புக்கூறுகளைப் பயன்படுத்துகிறது.

உதவிக்குறிப்புகளின் எடுத்துக்காட்டு பயன்பாடு

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

bootstrap-tooltip.js ஐப் பயன்படுத்துதல்

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

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

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

மார்க்அப்

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

<a href = "#" rel = "tooltip" title = "முதல் உதவிக்குறிப்பு" > என் மேல் சுருட்டு </a>   

முறைகள்

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

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

.tooltip('show')

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

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

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

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

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

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

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

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

popovers பற்றி

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

* உதவிக்குறிப்பு சேர்க்கப்பட வேண்டும்

உதாரணம் ஹோவர் பாப்ஓவர்

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

bootstrap-popover.js ஐப் பயன்படுத்துதல்

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

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

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

மார்க்அப்

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

முறைகள்

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

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

.popover('ஷோ')

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

$ ( '#உறுப்பு' ). பாப்ஓவர் ( 'ஷோ' )

.popover('மறை')

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

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

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

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

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

எச்சரிக்கைகள் பற்றி

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

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

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

bootstrap-alert.js ஐப் பயன்படுத்துதல்

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

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

மார்க்அப்

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

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

முறைகள்

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

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

.alert('close')

எச்சரிக்கையை மூடுகிறது.

$ ( ".எச்சரிக்கை" ). எச்சரிக்கை ( 'மூடு' )

நிகழ்வுகள்

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

$ ( '#மை-எச்சரிக்கை' ). பிணைப்பு ( 'மூடப்பட்டது' , செயல்பாடு () {   
  // ஏதாவது செய்…
})

பற்றி

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

எடுத்துக்காட்டு பயன்பாடுகள்

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

bootstrap-button.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக பொத்தான்களை இயக்கு:

$ ( '.nav-tabs' ). பொத்தான் ()

மார்க்அப்

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

<!-- ஒற்றைப் பொத்தானில் மாற்றுவதைச் செயல்படுத்த தரவு-மாற்று = "பொத்தானை" சேர்க்கவும் -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- btn-group --> தேர்வுப்பெட்டி பாணியை மாற்றுவதற்கு data-toggle="buttons-checkbox" ஐச் சேர்க்கவும் -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > இடது </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > வலது </button> 
</div>
 
<!-- btn-group --> இல் ரேடியோ பாணியை மாற்றுவதற்கு data-toggle="buttons-radio" ஐச் சேர்க்கவும் -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > இடது </button> 
  <button class = "btn" > Middle </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>   
<script>
  $ ( '.btn' ). பொத்தான் ( 'முழு' )
</script>

பற்றி

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

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

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

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

bootstrap-collapse.js ஐப் பயன்படுத்துதல்

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

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

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

மார்க்அப்

data-toggle="collapse"மடிக்கக்கூடிய உறுப்பின் கட்டுப்பாட்டை தானாக ஒதுக்க, ஒரு data-targetஉறுப்பைச் சேர்க்கவும் . பண்புக்கூறு சுருக்கத்தைப் data-targetபயன்படுத்துவதற்கு css தேர்வியை ஏற்றுக்கொள்கிறது. collapseமடிக்கக்கூடிய உறுப்புடன் வகுப்பைச் சேர்க்க மறக்காதீர்கள் . இது இயல்புநிலையாகத் திறக்கப்பட வேண்டுமெனில், கூடுதல் வகுப்பைச் சேர்க்கவும் in.

<button class = "btn btn-danger" data-toggle = "சரிவு" data-target = "#demo" >   
  எளிய மடிக்கக்கூடியது
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

முறைகள்

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

‹ ›

bootstrap-carousel.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் மூலம் அழைக்கவும்:

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

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

மார்க்அப்

முந்தைய மற்றும் அடுத்த கட்டுப்பாடுகளுக்கு தரவு பண்புக்கூறுகள் பயன்படுத்தப்படுகின்றன. கீழே உள்ள எடுத்துக்காட்டு மார்க்அப்பைப் பார்க்கவும்.

<div id = "myCarousel" class = "carousel" >  
  <!-- கொணர்வி பொருட்கள் -->
  <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>

முறைகள்

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

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

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

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

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

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

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

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

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

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

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

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

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

நிகழ்வுகள்

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

பற்றி

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

உதாரணமாக

தட்டச்சு முடிவுகளைக் காட்ட கீழே உள்ள புலத்தில் தட்டச்சு செய்யத் தொடங்கவும்.

bootstrap-typeahead.js ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்ட் வழியாக டைப்ஹெட்டை அழைக்கவும்:

$ ( '.typeahead' ). டைப்ஹெட் ()

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

மார்க்அப்

டைப்ஹெட் செயல்பாட்டுடன் ஒரு உறுப்பைப் பதிவு செய்ய தரவு பண்புக்கூறுகளைச் சேர்க்கவும்.

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

முறைகள்

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

டைப்ஹெட் மூலம் உள்ளீட்டைத் துவக்குகிறது.