තනි හෝ සම්පාදනය කරන ලදී

ප්ලගීන තනි තනිව (සමහරට අවශ්‍ය පරායත්තතා ඇතත්) හෝ සියල්ල එකවර ඇතුළත් කළ හැක. bootstrap.js සහ bootstrap.min.js යන දෙකෙහිම සියලුම ප්ලගීන එක් ගොනුවක අඩංගු වේ.

දත්ත ගුණාංග

JavaScript එක පේළියක්වත් ලිවීමෙන් තොරව ඔබට සියලුම Bootstrap ප්ලගීන මාර්ක්අප් API හරහා භාවිතා කළ හැක. මෙය Bootstrap හි පළමු පන්තියේ API වන අතර ප්ලගිනයක් භාවිතා කිරීමේදී ඔබේ පළමු සැලකිල්ල විය යුතුය.

එනම්, සමහර අවස්ථාවලදී මෙම ක්‍රියාකාරිත්වය අක්‍රිය කිරීම යෝග්‍ය විය හැකිය. එම නිසා, අපි ``data-api`` සමඟ ඇති ශරීර නාමවල ඇති සියලුම සිදුවීම් බන්ධනය කිරීමෙන් දත්ත උපලක්ෂණ API අක්‍රිය කිරීමේ හැකියාව ද ලබා දෙන්නෙමු. මෙය පෙනෙන්නේ මෙසේය.

$ ( 'ශරීරය' ). අක්රිය ( '.data-api' )

විකල්පයක් ලෙස, නිශ්චිත ප්ලගිනයක් ඉලක්ක කිරීමට, ප්ලගිනයේ නම නාම අවකාශයක් ලෙස දත්ත-api නාම අවකාශය සමඟ ඇතුළත් කරන්න:

$ ( 'ශරීරය' ). අක්රිය ( '.alert.data-api' )

ක්‍රමලේඛන API

JavaScript API හරහා ඔබට සියලුම Bootstrap ප්ලගීන භාවිතා කිරීමට හැකි වනු ඇතැයි අපි විශ්වාස කරමු. සියලුම පොදු API තනි, දම්වැල් ක්‍රම වන අතර, ක්‍රියා කළ එකතුව ආපසු ලබා දෙන්න.

$ ( ".btn.danger" ). බොත්තම ( "ටොගල්" ). addClass ( "මේදය" )

සියලුම ක්‍රම විකල්ප විකල්ප වස්තුවක්, විශේෂිත ක්‍රමයක් ඉලක්ක කරන තන්තුවක් හෝ කිසිවක් (පෙරනිමි හැසිරීම් සහිත ප්ලගිනයක් ආරම්භ කරන) පිළිගත යුතුය:

$ ( "#myModal" ). මාදිලිය () // පෙරනිමියෙන් ආරම්භ කරන ලදී                       
$ ( "#myModal" ). මාදිලිය ({ යතුරු පුවරුව : අසත්‍ය }) // යතුරු පුවරුවක් නොමැතිව ආරම්භ කරන ලදී     
$ ( "#myModal" ). modal ( 'show' ) // ආරම්භ කිරීම සහ දර්ශනය වහාම කැඳවයි                

සෑම ප්ලගිනයක්ම එහි අමු ඉදිකිරීම්කරු 'ඉදිකිරීම්කරු' දේපලක් මත නිරාවරණය කරයි: $.fn.popover.Constructor. ඔබ විශේෂිත ප්ලගින අවස්ථාවක් ලබා ගැනීමට කැමති නම්, එය මූලද්‍රව්‍යයකින් කෙලින්ම ලබා ගන්න: $('[rel=popover]').data('popover').

ගැටුමක් නැත

සමහර විට වෙනත් UI රාමු සමඟ Bootstrap ප්ලගීන භාවිතා කිරීම අවශ්‍ය වේ. මෙම තත්වයන් තුළ, නාම අවකාශයේ ගැටීම් විටින් විට සිදු විය හැක. මෙය සිදුවුවහොත්, ඔබට .noConflictඅගය ප්‍රතිවර්තනය කිරීමට අවශ්‍ය ප්ලගිනය ඇමතීමට හැකිය.

var bootstrapButton = $ . fn _ බොත්තම . noConflict () // $.fn.button කලින් පවරන ලද අගයට ආපසු දෙන්න 
$ _ fn _ bootstrapBtn = bootstrapButton             // $().bootstrapBtn bootstrap ක්‍රියාකාරීත්වය ලබා දෙන්න

සිදුවීම්

Bootstrap බොහෝ ප්ලගිනයේ අද්විතීය ක්‍රියා සඳහා අභිරුචි සිදුවීම් සපයයි. සාමාන්‍යයෙන්, මේවා අසංඛ්‍යාත සහ අතීත කෘදන්ත ස්වරූපයකින් පැමිණේ - එහිදී showයම් සිදුවීමක් ආරම්භයේදී අසංඛ්‍යාත (උදා.) ක්‍රියාරම්භ කරන අතර, එහි අතීත කෘදන්ත ස්වරූපය (උදා. shown) ක්‍රියාවක් සම්පූර්ණ කිරීමේදී ප්‍රේරක වේ.

සියලුම අසංඛ්‍යාත සිදුවීම් පෙරනිමිය වැළැක්වීමේ ක්‍රියාකාරීත්වය සපයයි. ක්‍රියාවක් ආරම්භ වීමට පෙර එය ක්‍රියාත්මක කිරීම නැවැත්වීමේ හැකියාව මෙය සපයයි.

$ ( '#myModal' ). මත ( 'show' , ශ්රිතය ( e ) {   
    නම් (! දත්ත ) ආපසු e . PreventDefault () // මාදිලිය පෙන්වීමෙන් නවත්වයි   
})

මාරුවීම් ගැන

සරල සංක්‍රාන්ති ප්‍රයෝග සඳහා, අනෙක් 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>

සජීවී නිරූපණය

පහත බොත්තම ක්ලික් කිරීමෙන් JavaScript හරහා මාදිලියක් ටොගල් කරන්න. එය පහළට ලිස්සා ගොස් පිටුවේ ඉහළ සිට මැකී යනු ඇත.

<!-- මාදිලිය අවුලුවාලීමට බොත්තම -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo මාදිලිය දියත් කරන්න </a>    
 
<!-- Modal -->
<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" > Modal header </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>   

JavaScript හරහා

myModalජාවාස්ක්‍රිප්ට් එක පේළියක් සහිත හැඳුනුම්පතක් සහිත මාදිලියක් අමතන්න :

$ ( '#myModal' ). මාදිලිය ( විකල්ප )

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය 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' ). මාදිලිය ( 'සඟවන්න' )

සිදුවීම්

Bootstrap's modal class මගින් මාදිලියේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

$ ( '#myModal' ). මත ( 'සැඟවුණු' , ශ්රිතය () {   
  //මොකක් හරි කරන්න...
})

උදාහරණ

navbar, tabs, සහ pills ඇතුළුව, මෙම සරල ප්ලගිනය සමඟ ඕනෑම දෙයකට පතන මෙනු එක් කරන්න.

නව තීරුවක් තුළ

ටැබ් තුළ

භාවිතය

දත්ත ගුණාංග හරහා

data-toggle="dropdown"පතන ටොගල් කිරීමට සබැඳියකට හෝ බොත්තමකට එක් කරන්න .

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown trigger </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL නොවෙනස්ව තබා ගැනීමට, data-targetවෙනුවට attribute භාවිතා කරන්න 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>

JavaScript හරහා

JavaScript හරහා පතනයන් අමතන්න:

$ ( '.dropdown-toggle' ). පතන ()

විකල්ප

කිසිවක් නැත

ක්රම

$().dropdown('toggle')

ලබා දී ඇති navbar හෝ ටැබ් කළ සංචාලනය සඳහා මෙනු ටොගල් කිරීම සඳහා ක්‍රමලේඛන api.

navbar හි උදාහරණය

ScrollSpy ප්ලගිනය අනුචලන ස්ථානය මත පදනම්ව nav ඉලක්ක ස්වයංක්‍රීයව යාවත්කාලීන කිරීම සඳහා වේ. නව තීරුවට පහළින් ප්‍රදේශය අනුචලනය කර සක්‍රිය පන්ති වෙනස නරඹන්න. පතන උප අයිතම ද උද්දීපනය කෙරේ.

භාවිතය

දත්ත ගුණාංග හරහා

ඔබගේ topbar navigation වෙත පහසුවෙන් scrollspy හැසිරීම එක් data-spy="scroll"කිරීමට, ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යය වෙත එක් කරන්න (බොහෝ විට මෙය ශරීරය විය හැක) සහ data-target=".navbar"කුමන nav භාවිතා කළ යුතුද යන්න තේරීමට. ඔබට සංරචකයක් සමඟ scrollspy භාවිතා කිරීමට අවශ්‍ය වනු ඇත .nav.

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

JavaScript හරහා

JavaScript හරහා scrollspy අමතන්න:

$ ( '#navbar' ). scrollspy ()

ක්රම

.scrollspy('refresh')

DOM වෙතින් මූලද්‍රව්‍ය එකතු කිරීම හෝ ඉවත් කිරීම සමඟ සම්බන්ධව scrollspy භාවිතා කරන විට, ඔබට එවැනි නැවුම් කිරීමේ ක්‍රමය ඇමතීමට අවශ්‍ය වනු ඇත:

$ ( '[data-spy="scroll"]' ). එක් එක් ( කාර්යය () {  
  var $spy = $ ( මෙය ). scrollspy ( 'refresh' )
});

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset="".

සිදුවීම්

උදාහරණ ටැබ්

පතන මෙනු හරහා පවා දේශීය අන්තර්ගතයේ කවුළු හරහා සංක්‍රමණය වීමට ඉක්මන්, ගතික ටැබ් ක්‍රියාකාරිත්වය එක් කරන්න.

භාවිතය

ජාවාස්ක්‍රිප්ට් හරහා ටැබ් කළ හැකි ටැබ් සබල කරන්න (එක් එක් ටැබ් එක තනි තනිව සක්‍රිය කළ යුතුය):

$ ( '#myTab a' ). ක්ලික් කරන්න ( කාර්යය ( ඉ ) {  
  ඊ . PreventDefault ();
  $ ( මෙය ). ටැබ් ( 'show' );
})

ඔබට ක්‍රම කිහිපයකින් තනි ටැබ් සක්‍රිය කළ හැක:

$ ( '#myTab a[href="#profile"]' ). ටැබ් ( 'show' ); // නමින් ටැබ් එක තෝරන්න 
$ ( '#myTab a:first' ). ටැබ් ( 'show' ); // පළමු ටැබය තෝරන්න 
$ ( '#myTab a:last' ). ටැබ් ( 'show' ); // අවසාන ටැබය තෝරන්න 
$ ( '#myTab li:eq(2) a' ). ටැබ් ( 'show' ); // තෙවන ටැබය තෝරන්න (0-සුචිගත කර ඇත) 

සලකුණු කිරීම

data-toggle="tab"ඔබට සරලව සඳහන් කිරීමෙන් හෝ data-toggle="pill"මූලද්‍රව්‍යයක් මත ජාවාස්ක්‍රිප්ට් ලිවීමෙන් තොරව ටැබ් එකක් හෝ පෙති සංචාලනයක් සක්‍රිය කළ හැක . navටැබයට සහ nav-tabsපන්ති එකතු කිරීම ulBootstrap ටැබ් මෝස්තරය යොදනු ඇත.

<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" > Messages </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Settings </a></li>  
</ul>

ක්රම

$().tab

ටැබ් මූලද්‍රව්‍යයක් සහ අන්තර්ගත බහාලුමක් සක්‍රිය කරයි. පටිත්තෙහි DOM හි බහාලුම් නෝඩයක් data-targetහෝ ඉලක්ක කර තිබිය යුතුය .href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "සක්‍රිය" ><a href = "#home" > නිවස </a></li>  
  <li><a href = "#profile" > පැතිකඩ </a></li> 
  <li><a href = "#messages" > 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 = "සැකසීම්" > ... </div>  
</div>
 
<script>
  $ ( කාර්යය () {  
    $ ( '#myTab a:last' ). ටැබ් ( 'show' );
  })
</script>

සිදුවීම්

$ ( 'a[data-toggle="tab"]' ). මත ( 'පෙන්වයි' , ශ්‍රිතය ( ඉ ) {   
  ඊ . ඉලක්කය // සක්රිය ටැබ්
  ඊ . අදාළ ඉලක්කය // පෙර ටැබය
})

උදාහරණ

Jason Frame විසින් ලියන ලද විශිෂ්ට jQuery.tipsy ප්ලගිනය මගින් ආභාෂය ලබා ඇත; මෙවලම් ඉඟි යනු යාවත්කාලීන කළ අනුවාදයකි, එය රූප මත රඳා නොපවතින, සජීවිකරණ සඳහා CSS3 භාවිතා කරන්න, සහ දේශීය මාතෘකා ආචයනය සඳහා දත්ත-ගුණාංග.

කාර්ය සාධන හේතූන් මත, මෙවලම් ඉඟිය සහ popover දත්ත-apis තෝරාගෙන ඇත, එනම් ඔබ විසින්ම ඒවා ආරම්භ කළ යුතුය .

මෙවලම් ඉඟි බැලීමට පහත සබැඳි මත සැරිසරන්න:

දිශාවන් හතරක්

ආදාන කණ්ඩායම් වල මෙවලම් ඉඟි

Bootstrap ආදාන කණ්ඩායම් සමඟ මෙවලම් ඉඟි සහ popovers භාවිතා කරන විට, ඔබට containerඅනවශ්‍ය අතුරු ආබාධ වළක්වා ගැනීමට (පහත ලේඛනගත කර ඇති) විකල්පය සැකසීමට සිදුවේ.

භාවිතය

JavaScript හරහා මෙවලම් ඉඟිය ක්‍රියාරම්භ කරන්න:

$ ( '#උදාහරණ' ). මෙවලම් ඉඟිය ( විකල්ප )

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

සලකුණු කිරීම

<a href = "#" data-toggle = "tooltip" title = "පළමු මෙවලම් ඉඟිය" > මා මත සැරිසරන්න </a>   

ක්රම

$().උපකරණ ඉඟි(විකල්ප)

මූලද්‍රව්‍ය එකතුවකට මෙවලම් ඉඟි හසුරුවන්නක් අමුණන්න.

.toltip('show')

මූලද්‍රව්‍යයක මෙවලම් ඉඟියක් හෙළි කරයි.

$ ( '#මූලද්‍රව්‍ය' ). මෙවලම් ඉඟිය ( 'පෙන්වන්න' )

.toltip('සඟවන්න')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවයි.

$ ( '#මූලද්‍රව්‍ය' ). මෙවලම් ඉඟිය ( 'සඟවන්න' )

.tooltip('ටොගල්')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය ටොගල් කරයි.

$ ( '#මූලද්‍රව්‍ය' ). මෙවලම් ඉඟිය ( 'ටොගල්' )

.toltip('විනාශ කරන්න')

මූලද්‍රව්‍යයක මෙවලම් ඉඟිය සඟවා විනාශ කරයි.

$ ( '#මූලද්‍රව්‍ය' ). මෙවලම් ඉඟිය ( 'විනාශ කරන්න' )

උදාහරණ

නිවාස ද්විතීයික තොරතුරු සඳහා ඕනෑම මූලද්‍රව්‍යයකට iPad මත ඇති ඒවා වැනි කුඩා අන්තර්ගතයන් එක් කරන්න. popover අවුලුවාලීමට බොත්තම මත සැරිසරන්න. මෙවලම් ඉඟි ඇතුළත් කිරීම අවශ්‍ය වේ .

ස්ථිතික popover

විකල්ප හතරක් තිබේ: ඉහළ, දකුණ, පහළ සහ වමට පෙළගස්වා ඇත.

dataජාවාස්ක්‍රිප්ට් සහ උපලක්ෂණයක් තුළ ඇති අන්තර්ගතයෙන් popovers ලෙස සලකුණු කිරීමක් නොපෙන්වයි .

සජීවී නිරූපණය

දිශාවන් හතරක්

භාවිතය

JavaScript හරහා popovers සබල කරන්න:

$ ( '#උදාහරණ' ). popover ( විකල්ප )

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-animation="".

සලකුණු කිරීම

කාර්ය සාධන හේතූන් මත, Tooltip සහ Popover දත්ත-apis තෝරා ඇත. ඔබ ඒවා භාවිතා කිරීමට කැමති නම් තේරීම් විකල්පයක් සඳහන් කරන්න.

ක්රම

$().popover(විකල්ප)

මූලද්‍රව්‍ය එකතුවක් සඳහා popover ආරම්භ කරයි.

.popover('show')

මූලද්‍රව්‍ය popover අනාවරණය කරයි.

$ ( '#මූලද්‍රව්‍ය' ). popover ( 'show' )

.popover('සඟවන්න')

මූලද්‍රව්‍ය popover සඟවයි.

$ ( '#මූලද්‍රව්‍ය' ). popover ( 'සඟවන්න' )

.popover('ටොගල්')

මූලද්‍රව්‍ය popover ටොගල් කරයි.

$ ( '#මූලද්‍රව්‍ය' ). popover ( 'ටොගල්' )

.popover('විනාශ කරන්න')

මූලද්‍රව්‍යයක පොපෝවර් සඟවා විනාශ කරයි.

$ ( '#මූලද්‍රව්‍ය' ). popover ( 'විනාශ' )

උදාහරණ ඇඟවීම්

මෙම ප්ලගිනය සමඟින් සියලුම අනතුරු ඇඟවීමේ පණිවිඩ සඳහා ඉවත් කිරීමේ ක්‍රියාකාරිත්වය එක් කරන්න.

භාවිතය

ජාවාස්ක්‍රිප්ට් හරහා අනතුරු ඇඟවීමක් ඉවත දැමීම සබල කරන්න:

$ ( ".ඇලට්" ). අනතුරු ඇඟවීම ()

සලකුණු කිරීම

data-dismiss="alert"අනතුරු ඇඟවීමේ සමීප ක්‍රියාකාරීත්වයක් ස්වයංක්‍රීයව ලබා දීමට ඔබගේ වසන්න බොත්තමට එක් කරන්න.

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

ක්රම

$().ඇලඟුම්()

සමීප ක්‍රියාකාරීත්වයකින් සියලුම ඇඟවීම් ආවරණය කරයි. වසා දැමූ විට ඔබේ ඇඟවීම් සජීවීකරණය කර ගැනීමට, ඒවා දැනටමත් ඒවාට අදාළ කර ඇති බව සහතික කර .fadeගන්න .in.

.alert ('close')

අනතුරු ඇඟවීමක් වසා දමයි.

$ ( ".ඇලට්" ). අනතුරු ඇඟවීම ( 'වසන්න' )

සිදුවීම්

Bootstrap හි අනතුරු ඇඟවීමේ පන්තිය අනතුරු ඇඟවීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

$ ( '#මගේ අනතුරු ඇඟවීම' ). බැඳ ( 'වසා ඇත' , ශ්රිතය () {   
  //මොකක් හරි කරන්න...
})

උදාහරණ භාවිතය

බොත්තම් සමඟ තවත් කරන්න. පාලන බොත්තම සඳහන් කරයි හෝ මෙවලම් තීරු වැනි තවත් සංරචක සඳහා බොත්තම් කණ්ඩායම් සාදන්න.

රාජ්යමය

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-group මත රේඩියෝ විලාස ටොගල් කිරීම සඳහා එක් කරන්න .

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

$().බොත්තම('නැවත පිහිටුවන්න')

බොත්තම් තත්ත්වය යළි සකසයි - පෙළ මුල් පෙළට මාරු කරයි.

$().බොත්තම(string)

බොත්තම් තත්ත්‍වය යළි සකසයි - ඕනෑම දත්ත නිර්වචනය කළ පෙළ තත්ත්වයකට පෙළ මාරු කරයි.

<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 = "කඩා වැටීම" 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 class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "Colapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        හැකිළිය හැකි කණ්ඩායම් අයිතම #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body කඩා වැටීම" >  
      <div class = "accordion-inner" > 
        අනිම් පරියේතුර් ක්ලිචේ...
      </div>
    </div>
  </div>
</div>
...

ඔබට Accordion සලකුණු කිරීමකින් තොරව ප්ලගිනය භාවිතා කළ හැකිය. වෙනත් මූලද්‍රව්‍යයක ප්‍රසාරණය සහ කඩා වැටීම ටොගල් බොත්තමක් සාදන්න.

<button type = "button" class = "btn btn- danger" data -toggle = "Colapse " data-target = "#demo" >    
  සරල කඩා වැටිය හැකි
</button>
 
<div id = "demo" class = "collapse in" > ... </div>  

භාවිතය

දත්ත ගුණාංග හරහා

බිඳ වැටිය හැකි මූලද්‍රව්‍යයක පාලනය ස්වයංක්‍රීයව පැවරීමට මූලද්‍රව්‍යයට එකතු කරන්න data-toggle="collapse". ගුණාංගය බිඳවැටීම යෙදීමට css තේරීමක් පිළිගනී data-target. කඩා වැටිය හැකි මූලද්‍රව්‍යයට data-targetපන්තිය එක් කිරීමට වග බලා ගන්න . collapseඔබ එය පෙරනිමියෙන් විවෘත කිරීමට කැමති නම්, අමතර පන්තිය එක් කරන්න in.

කඩාහැලෙන පාලනයකට Accordion වැනි කණ්ඩායම් කළමනාකරණය එක් කිරීමට, දත්ත ගුණාංගය එක් කරන්න data-parent="#selector". මෙය ක්‍රියාත්මක වන ආකාරය බැලීමට ආදර්ශනය වෙත යොමු වන්න.

JavaScript හරහා

මෙය සමඟ අතින් සබල කරන්න:

$ ( ". කඩා වැටීම" ). කඩා වැටීම ()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-parent="".

ක්රම

.collapse(විකල්ප)

ඔබේ අන්තර්ගතය බිඳ වැටිය හැකි මූලද්‍රව්‍යයක් ලෙස සක්‍රිය කරයි. විකල්ප විකල්ප පිළිගනී object.

$ ( '#myCollapsible' ). කඩා වැටීම ({
  toggle : බොරු 
})

.collapse('ටොගල්')

හකුළ හැකි මූලද්‍රව්‍යයක් පෙන්වීමට හෝ සැඟවීමට ටොගල් කරයි.

.collapse('show')

කඩා වැටෙන මූලද්‍රව්‍යයක් පෙන්වයි.

.Colapse('සඟවන්න')

කඩා වැටෙන මූලද්‍රව්‍ය සඟවයි.

සිදුවීම්

Bootstrap හි කඩා වැටීමේ පන්තිය බිඳ වැටීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

$ ( '#myCollapsible' ). මත ( 'සැඟවුණු' , ශ්රිතය () {   
  //මොකක් හරි කරන්න...
})

උදාහරණ කැරොසල්

පහත විනිවිදක දර්ශනය කැරොසල් වැනි මූලද්‍රව්‍ය හරහා බයිසිකල් පැදීම සඳහා සාමාන්‍ය ප්ලගිනයක් සහ සංරචකයක් පෙන්වයි.

පළමු සිඟිති රූ ලේබලය

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.

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" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "සක්‍රිය" ></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>
  <!-- Carousel 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.

JavaScript හරහා

කැරූසල් හස්තීයව අමතන්න:

$ ( '.carousel' ). කැරොසල් ()

විකල්ප

දත්ත ගුණාංග හෝ JavaScriptz හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-interval="".

ක්රම

.කැරූසල්(විකල්ප)

විකල්ප විකල්ප සමඟ කැරොසල් objectආරම්භ කර අයිතම හරහා බයිසිකල් පැදීම ආරම්භ කරයි.

$ ( '.carousel' ). කැරොසල් ({
  පරතරය : 2000 
})

.කැරූසල්('චක්‍රය')

කැරොසල් අයිතම හරහා වමේ සිට දකුණට චක්‍රීය කරයි.

.කැරූසල්('විරාමය')

අයිතම හරහා බයිසිකල් පැදීමෙන් කැරොසල් නවත්වයි.

.කැරූසල්(අංකය)

විශේෂිත රාමුවකට කැරොසල් චක්‍රීය කරයි (0 පදනම්, අරාවකට සමාන).

.කැරූසල්('පෙර')

පෙර අයිතමයට සයිකල්.

.කැරූසල්('ඊළඟ')

ඊළඟ අයිතමයට සයිකල්.

සිදුවීම්

Bootstrap's carousel පන්තිය කැරූසල් ක්‍රියාකාරීත්වයට සම්බන්ධ කිරීම සඳහා සිදුවීම් දෙකක් හෙලිදරව් කරයි.

උදාහරණයක්

ඕනෑම ආකාරයක පෙළ ආදානයක් සමඟ ඉක්මනින් අලංකාර යතුරු ලියනය කිරීම සඳහා මූලික, පහසුවෙන් දිගු කළ ප්ලගිනයක්.

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

autocomplete="off"Bootstrap typeahead dropdown මත පෙරනිමි බ්‍රවුසර මෙනු දර්ශනය වීම වැළැක්වීමට ඔබට සැකසීමට අවශ්‍ය වනු ඇත .

භාවිතය

දත්ත ගුණාංග හරහා

ඉහත උදාහරණයේ පෙන්වා ඇති පරිදි typeahead ක්‍රියාකාරීත්වය සහිත මූලද්‍රව්‍යයක් ලියාපදිංචි කිරීමට දත්ත ගුණාංග එක් කරන්න.

JavaScript හරහා

යතුරු ලියනය හස්තීයව අමතන්න:

$ ( '.typeahead' ). යතුරු ලියනය ()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-source="".

ක්රම

.typeahead(විකල්ප)

යතුරු ලියනයකින් ආදානයක් ආරම්භ කරයි.

උදාහරණයක්

වම් පස ඇති උප සංචලනය ඇෆික්ස් ප්ලගිනයේ සජීවී ආදර්ශනයකි.

භාවිතය

දත්ත ගුණාංග හරහා

ඕනෑම මූලද්‍රව්‍යයකට ඇෆික්ස් හැසිරීම පහසුවෙන් එක් කිරීමට data-spy="affix", ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යයට එක් කරන්න. ඉන්පසු මූලද්‍රව්‍යයක් ඇමිණීම සක්‍රිය සහ අක්‍රිය කළ යුත්තේ කවදාද යන්න අර්ථ දැක්වීමට ඕෆ්සෙට් භාවිත කරන්න.

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

JavaScript හරහා

JavaScript හරහා affix ප්ලගිනය අමතන්න:

$ ( '#navbar' ). ඇලවීම ()

විකල්ප

දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-, ලෙසට එකතු කරන්න data-offset-top="200".