Bootstrap

Bootstrap සඳහා Javascript

දැන් අභිරුචි jQuery ප්ලගීන 12ක් සමඟ Bootstrap හි සංරචක ජීවයට ගෙන එන්න .

jQuery ප්ලගීන ඔබ ආරම්භ කිරීමට Bootstrap ප්ලගීන දුසිමක්

දැනුම්දීම! සියලුම javascript ප්ලගීන සඳහා jQuery හි නවතම අනුවාදය අවශ්‍ය වේ.

Modals bootstrap-modal.js

මාදිලි ගැන

විධිමත්, නමුත් නම්‍යශීලී, අවශ්‍ය අවම ක්‍රියාකාරීත්වය සහ ස්මාර්ට් පෙරනිමි පමණක් සහිත සාම්ප්‍රදායික ජාවාස්ක්‍රිප්ට් මොඩල් ප්ලගිනය ලබා ගන්න.

ගොනුව බාගන්න

ස්ථිතික උදාහරණය

පහත දැක්වෙන්නේ ස්ථිතික ලෙස විදැහුම් කරන ලද මාදිලියකි.

×

ආකෘති ශීර්ෂකය

එක් සියුම් සිරුරක්...

වසන්න වෙනස්කම් සුරකින්න

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

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

ආදර්ශන මාදිලිය දියත් කරන්න

bootstrap-modal භාවිතා කිරීම

javascript හරහා මොඩලය අමතන්න:

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

විකල්ප

නම වර්ගය පෙරනිමිය විස්තර
පසුබිම බූලියන් සැබෑ මාදිලි පසුබිම් මූලද්‍රව්‍යයක් ඇතුළත් වේ. විකල්පයක් ලෙස, staticක්ලික් කිරීමේදී මාදිලිය වසා නොයන පසුබිමක් සඳහා සඳහන් කරන්න.
යතුරු පුවරුව බූලියන් සැබෑ ගැලවීමේ යතුර එබූ විට මාදිලිය වසා දමයි
පෙන්වන්න බූලියන් සැබෑ ආරම්භ කළ විට මාදිලිය පෙන්වයි.

සලකුණු කිරීම

ජාවාස්ක්‍රිප්ට් එක පේළියක්වත් ලිවීමෙන් තොරව ඔබට පහසුවෙන් ඔබේ පිටුවේ මාදිලි සක්‍රිය කළ හැකිය. මොඩල් මූලද්‍රව්‍ය හැඳුනුම්පතක් සහිත හෝ ඊට අනුරූප data-toggle="modal"වන පාලක මූලද්‍රව්‍යයක් මත සකසන්න , ක්ලික් කළ විට, එය ඔබගේ මාදිලිය දියත් කරනු ඇත.data-target="#foo"href="#foo"

එසේම, ඔබේ මාදිලියේ අවස්ථාවට විකල්ප එක් කිරීමට, ඒවා පාලන මූලද්‍රව්‍යයේ හෝ මාදිලියේ සලකුණු මත අමතර දත්ත ගුණාංග ලෙස ඇතුළත් කරන්න.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Launch Modal </a>    
  1. <div class = "modal" id = "myModal" >  
  2.   <div class = "modal-header" > 
  3.     <a class = "close" data-dismiss = "modal" > × </a>  
  4.     <h3> මාදිලි ශීර්ෂකය </h3>
  5.   </div>
  6.   <div class = "modal-body" > 
  7.     <p> එක සිහින් සිරුරක්... </p>
  8.   </div>
  9.   <div class = "modal-footer" > 
  10.     <a href = "#" class = "btn" > වසන්න </a>  
  11.     <a href = "#" class = "btn btn-primary" > වෙනස්කම් සුරකින්න </a>  
  12.   </div>
  13. </div>
දැනුම්දීම! ඔබට ඔබේ මාදිලිය තුළට සහ පිටතට සජීවීකරණය කිරීමට අවශ්‍ය නම් .fade, මූලද්‍රව්‍යයට පන්තියක් එක් කරන්න .modal(මෙය ක්‍රියාවෙන් බැලීමට ආදර්ශනය බලන්න) සහ bootstrap-transition.js ඇතුළත් කරන්න.

ක්රම

.modal(විකල්ප)

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

  1. $ ( '#myModal' ). මාදිලිය ({
  2.   යතුරු පුවරුව : අසත්ය 
  3. })

.modal('ටොගල්')

මාදිලියක් අතින් ටොගල් කරයි.

  1. $ ( '#myModal' ). මාදිලිය ( 'ටොගල්' )

.modal('show')

මාදිලියක් අතින් විවෘත කරයි.

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

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

මාදිලියක් අතින් සඟවයි.

  1. $ ( '#myModal' ). මාදිලිය ( 'සඟවන්න' )

සිදුවීම්

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

සිදුවීම විස්තර
පෙන්වන්න showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත මාදිලිය පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
සඟවන්න hideනිදසුන් ක්‍රමය කැඳවූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
සැඟවී ඇත මාදිලිය පරිශීලකයාගෙන් සඟවා අවසන් වූ විට මෙම සිදුවීම සිදු වේ (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). 
  1. $ ( '#myModal' ). මත ( 'සැඟවුණු' , ශ්රිතය () {   
  2.   //මොකක් හරි කරන්න...
  3. })

ScrollSpy bootstrap-scrollspy.js

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

ගොනුව බාගන්න

scrollspy සමඟ උදාහරණ navbar

පහත ප්‍රදේශය අනුචලනය කර සංචාලන යාවත්කාලීනය නරඹන්න. පතන උප අයිතම ද උද්දීපනය කෙරේ. උත්සහ කරන්න!

@මේදය

ඇඩ් ලෙගිං කීටාර්, බ්‍රන්ච් අයිඩී ආර්ට් පාටි ඩොලර් ලේබර්. Pitchfork yr enim lo-fi ඔවුන් විකුණා අවසන් වීමට පෙර. Tumblr ගොවිපල සිට මේසය දක්වා බයිසිකල් හිමිකම් කුමක් වුවත්. Anim keffiyeh carles Cardigan. Velit seitan mcsweeney ගේ ඡායාරූප කුටිය 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති සහ කාඩිගන් භාර අරමුදල culpa biodiesel wes Anderson සෞන්දර්යය. නිහිල් පච්ච කොටා ගත් චෝදනාව, විශ්වාසවන්ත උත්ප්‍රාසය ජෛව ඩීසල් කෙෆියේ කලාකරු උල්ලම්කෝ ප්‍රතිවිපාක.

@mdo

Veniam marfa උඩු රැවුල ස්කේට්බෝඩ්, adipisicing fugiat velit pitchfork රැවුල. Freegan beard aliqua Cupidatat mcsweeney's vero. කුපිඩටට් ෆෝ ලොකෝ නිසා, ඊඒ හෙල්වෙටිකා නුල්ලා කාර්ල්ස්. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. ලෝ-ෆයි වෙස් ඇන්ඩර්සන් +1 සාර්ටෝරියල්. කාල්ස් සෞන්දර්යාත්මක නොවන ව්‍යායාම quis gentrify. Brooklyn adipisicing craft beer vice keytar deserant.

එක

Occaecat commodo aliqua delectus. ෆැප් ක්‍රාෆ්ට් බියර් ඩෙසර්න්ට් ස්කේට්බෝඩ් ඊඒ. ලොමෝ බයිසිකල් හිමිකම් ඇඩිපිසිං බෑන් මයි, වේලිට් ඊ සන්ට් මීලඟ මට්ටමේ ලොකාවෝර් තනි සම්භවයක් ඇති කෝපි මැග්නා වේනියම් හි ඇත. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY අවම පණිවිඩකරු බෑගය. Cred ex in, තිරසාර delectus consectetur fanny pack iphone.

දෙක

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa ඕනෑම delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche Irony, thundercats ඔබ ඒවා ගැන අසා නැතුව ඇති hoodie gluten-free lo-fi fap aliquip. ඔවුන් විකිණී අවසන් වීමට පෙර කම්කරු ප්‍රභූ ස්ථානය, ටෙරී රිචඩ්සන් ප්‍රොඩන්ට් බ්‍රන්ච් නෙස්කියුන්ට් ක්විස් කොස්බි ස්වීටර් පැරියතුර් කෙෆියේ සහ හෙල්වෙටිකා ආර්ටිසන්. කාඩිගන් ක්‍රාෆ්ට් බියර් සීටන් රෙඩිමේඩ් වෙලිට්. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

bootstrap-scrollspy.js භාවිතා කිරීම

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

  1. $ ( '#navbar' ). scrollspy ()

සලකුණු කිරීම

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

  1. <body data-spy = "scroll" > ... </body>
දැනුම්දීම! Navbar සබැඳිවලට විසඳිය හැකි id ඉලක්ක තිබිය යුතුය. උදාහරණයක් ලෙස, <a href="#home">home</a>dom හි ඇති දෙයකට අනුරූප විය යුතුය <div id="home"></div>.

විකල්ප

නම වර්ගය පෙරනිමිය විස්තර
ඕෆ්සෙට් අංකය 10 අනුචලනයේ පිහිටීම ගණනය කිරීමේදී ඉහළින් ඕෆ්සෙට් කිරීමට පික්සල.

ටොගල් කළ හැකි ටැබ් bootstrap-tab.js

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

ගොනුව බාගන්න

උදාහරණ ටැබ්

පතන මෙනු හරහා පවා සැඟවුණු කවුළු අතර ටොගල් කිරීමට පහත ටැබ් ක්ලික් කරන්න.

අමු ඩෙනිම් ඔස්ටින් ජීන් කොට කලිසම ගැන ඔබ අසා නැතුව ඇති. Nesciunt tofu stumptown aliqua, retro synth master cleanse. උඩු රැවුල ක්ලිච් tempor, Williamsburg carles Vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure ටෙරී රිචඩ්සන් හිටපු දැල්ලන්. Aliquip placeat salvia cillum iphone. Seitan aliquip quis කාඩිගන් ඇමරිකානු ඇඟලුම්, මස් වෙළෙන්දා voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

bootstrap-tab.js භාවිතා කිරීම

ජාවාස්ක්‍රිප්ට් හරහා ටැබ් කළ හැකි ටැබ් සබල කරන්න:

  1. $ ( '#myTab' ). ටැබ් ( 'පෙන්වන්න' )

සලකුණු කිරීම

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

  1. <ul class = "nav nav-tabs" > 
  2.   <li><a href = "#home" data-toggle = "tab" > මුල් පිටුව </a></li>  
  3.   <li><a href = "#profile" data-toggle = "tab" > පැතිකඩ </a></li>  
  4.   <li><a href = "#messages" data-toggle = "tab" > Messages </a></li>  
  5.   <li><a href = "#settings" data-toggle = "tab" > Settings </a></li>  
  6. </ul>

ක්රම

$().tab

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

  1. <ul class = "nav nav-tabs" > 
  2.   <li class = "සක්‍රිය" ><a href = "#home" > නිවස </a></li>  
  3.   <li><a href = "#profile" > පැතිකඩ </a></li> 
  4.   <li><a href = "#messages" > Messages </a></li> 
  5.   <li><a href = "#settings" > Settings </a></li> 
  6. </ul>
  7.  
  8. <div class = "tab-content" > 
  9.   <div class = "tab-pane active" id = "home" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "messages" > ... </div>  
  12.   <div class = "tab-pane" id = "සැකසීම්" > ... </div>  
  13. </div>
  14.  
  15. <script>
  16.   $ ( කාර්යය () {  
  17.     $ ( '.tabs a:last' ). ටැබ් ( 'පෙන්වන්න' )
  18.   })
  19. </script>

සිදුවීම්

සිදුවීම විස්තර
පෙන්වන්න මෙම සිදුවීම ටැබ් දර්ශනය මත වෙඩි තැබේ, නමුත් නව ටැබය පෙන්වීමට පෙර. ක්‍රියාකාරී ටැබය සහ පෙර ක්‍රියාකාරී ටැබය (තිබේ නම්) පිළිවෙලින් භාවිතා කරන්න event.targetසහ ඉලක්ක කරන්න.event.relatedTarget
පෙන්වා ඇත මෙම සිදුවීම ටැබ් එකක් පෙන්වීමෙන් පසු ටැබ් දර්ශනය මත වෙඩි තබයි. ක්‍රියාකාරී ටැබය සහ පෙර ක්‍රියාකාරී ටැබය (තිබේ නම්) පිළිවෙලින් භාවිතා කරන්න event.targetසහ ඉලක්ක කරන්න.event.relatedTarget 
  1. $ ( 'a[data-toggle="tab"]' ). මත ( 'පෙන්වා ඇත' , ශ්රිතය ( e ) {   
  2.   ඊ . ඉලක්කය // සක්රිය ටැබ්
  3.   ඊ . අදාළ ඉලක්කය // පෙර ටැබය
  4. })

මෙවලම් ඉඟි bootstrap- tooltip.js

මෙවලම් ඉඟි ගැන

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

ගොනුව බාගන්න

මෙවලම් ඉඟි භාවිතා කිරීම උදාහරණය

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

තද කලිසම් ඊළඟ මට්ටමේ keffiyeh ඔබ ඒවා ගැන අසා නැතුව ඇති. ඡායාරූප කුටිය රැවුල අමු ඩෙනිම් ලෙටර්ප්‍රෙස් වීගන් මැසෙන්ජර් බෑග් ස්ටම්ප්ටවුන්. Farm-to-Table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel වල ටෙරී රිචඩ්සන් vinyl chambray ඇත. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel Williamsburg marfa, four loko mcsweeney's cleanse Vegan chambray. ඇත්ත වශයෙන්ම උත්ප්‍රාසාත්මක ශිල්පියෙක් මොන කීටාර් වුණත්, සීන්ස්ටර් ෆාම්-ටු-ටේබල් බෑන්ක්සි ඔස්ටින් ට්විටර් ෆ්‍රීගන් ක්‍රෙඩ් අමු ඩෙනිම් සිංගල් ඔරිජින් කෝපි වෛරස් හසුරුවයි.

bootstrap-tooltip.js භාවිතා කිරීම

ජාවාස්ක්‍රිප්ට් හරහා මෙවලම් ඉඟිය ක්‍රියාරම්භ කරන්න:

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

විකල්ප

නම වර්ගය පෙරනිමිය විස්තර
සජීවිකරණය බූලියන් සැබෑ මෙවලම් ඉඟියට css ෆේඩ් සංක්‍රාන්තියක් යොදන්න
ස්ථානගත කිරීම string|ක්‍රියාකාරීත්වය 'ඉහළ' මෙවලම් ඉඟිය ස්ථානගත කරන්නේ කෙසේද - top | පහළ | ඉතිරි | හරි
තේරීම්කරු නූල් බොරු තේරීම්කාරකයක් සපයා තිබේ නම්, මෙවලම් ඉඟි වස්තු නියමිත ඉලක්ක වෙත පවරනු ලැබේ.
ශීර්ෂය තන්තුව | කාර්යය '' 'මාතෘකාව' ටැගය නොමැති නම් පෙරනිමි මාතෘකා අගය
අවුලුවාලීම නූල් 'හූවර්' මෙවලම් ඉඟිය ක්‍රියාත්මක වන ආකාරය - hover | අවධානය | අත්පොත
ප්රමාදය අංකය | වස්තුව 0

මෙවලම් ඉඟිය පෙන්වීම සහ සැඟවීම ප්‍රමාද කරන්න (ms)

අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්‍රමාදය යෙදේ

වස්තු ව්යුහය යනු:delay: { show: 500, hide: 100 }
දැනුම්දීම! තනි මෙවලම් සඳහා විකල්ප විකල්ප වශයෙන් දත්ත උපලක්ෂණ භාවිතයෙන් නියම කළ හැක.

සලකුණු කිරීම

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

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

ක්රම

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

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

.tooltip('show')

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

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

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

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

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

.tooltip('ටොගල්')

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

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

Popovers bootstrap-popover.js

popovers ගැන

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

* මෙවලම් ඉඟි ඇතුළත් කිරීම අවශ්‍ය වේ

ගොනුව බාගන්න

උදාහරන popover hover popover

popover අවුලුවාලීමට බොත්තම මත සැරිසරන්න.

popover සඳහා සැරිසරන්න

bootstrap-popover.js භාවිතා කිරීම

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

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

විකල්ප

නම වර්ගය පෙරනිමිය විස්තර
සජීවිකරණය බූලියන් සැබෑ මෙවලම් ඉඟියට css ෆේඩ් සංක්‍රාන්තියක් යොදන්න
ස්ථානගත කිරීම string|ක්‍රියාකාරීත්වය 'හරි' popover ස්ථානගත කරන්නේ කෙසේද - top | පහළ | ඉතිරි | හරි
තේරීම්කරු නූල් බොරු තේරීම්කාරකයක් සපයා තිබේ නම්, මෙවලම් ඉඟි වස්තු නියමිත ඉලක්ක වෙත පවරනු ලැබේ
අවුලුවාලීම නූල් 'හූවර්' මෙවලම් ඉඟිය ක්‍රියාත්මක වන ආකාරය - hover | අවධානය | අත්පොත
ශීර්ෂය තන්තුව | කාර්යය '' 'මාතෘකාව' ගුණාංගය නොමැති නම් පෙරනිමි මාතෘකා අගය
අන්තර්ගතය තන්තුව | කාර්යය '' 'data-content' ගුණාංගය නොමැති නම් පෙරනිමි අන්තර්ගත අගය
ප්රමාදය අංකය | වස්තුව 0

popover පෙන්වීම සහ සැඟවීම ප්‍රමාද කරන්න (ms)

අංකයක් සපයා ඇත්නම්, සැඟවීම/පෙන්වීම යන දෙකටම ප්‍රමාදය යෙදේ

වස්තු ව්යුහය යනු:delay: { show: 500, hide: 100 }
දැනුම්දීම! තනි පුද්ගල popovers සඳහා විකල්ප විකල්ප වශයෙන් දත්ත ගුණාංග භාවිතයෙන් නියම කළ හැක.

සලකුණු කිරීම

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

ක්රම

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

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

.popover('show')

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

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

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

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

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

.popover('ටොගල්')

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

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

අනතුරු ඇඟවීමේ පණිවිඩ bootstrap-alert.js

ඇඟවීම් ගැන

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

බාගත

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

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

× ශුද්ධ guacamole! ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත.
×

අපොයි! ඔබට දෝෂයක් ඇත!

මේකයි ඒකයි වෙනස් කරලා නැවත උත්සහ කරන්න. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

මෙම පියවර ගන්න නැත්නම් මේක කරන්න

bootstrap-alert.js භාවිතා කිරීම

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

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

සලකුණු කිරීම

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

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

ක්රම

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

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

.alert ('close')

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

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

සිදුවීම්

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

සිදුවීම විස්තර
සමීපයි closeනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
වසා ඇත අනතුරු ඇඟවීම වසා ඇති විට මෙම සිදුවීම වෙඩි තබා ඇත (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). 
  1. $ ( '#මගේ අනතුරු ඇඟවීම' ). බැඳ ( 'වසා ඇත' , ශ්රිතය () {   
  2.   //මොකක් හරි කරන්න...
  3. })

බොත්තම් bootstrap-button.js

ගැන

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

ගොනුව බාගන්න

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

ප්‍රාන්ත සහ ටොගල් සඳහා බොත්තම් ප්ලගිනය භාවිතා කරන්න.

රාජ්යමය
තනි ටොගල්
පිරික්සුම් කොටුව
ගුවන් විදුලි

bootstrap-button.js භාවිතා කිරීම

javascript හරහා බොත්තම් සබල කරන්න:

  1. $ ( '.tabs' ). බොත්තම ()

සලකුණු කිරීම

දත්ත ගුණාංග බොත්තම් ප්ලගිනයට අත්‍යවශ්‍ය වේ. විවිධ සලකුණු වර්ග සඳහා පහත උදාහරණ කේතය පරීක්ෂා කරන්න.

  1. <!-- තනි බොත්තමක් මත ටොගල් කිරීම සක්‍රිය කිරීමට දත්ත-ටොගල්="බොත්තම" එක් කරන්න -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>  
  3.  
  4. <!-- btn-group මත තේරීම් කොටු විලාසය ටොගල් කිරීම සඳහා දත්ත-ටොගල්="buttons-checkbox" එක් කරන්න -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >  
  6.   <button class = "btn" > වම් </button> 
  7.   <button class = "btn" > මැද </button> 
  8.   <button class = "btn" > දකුණ </button> 
  9. </div>
  10.  
  11. <!-- btn-group මත රේඩියෝ විලාස ටොගල් කිරීම සඳහා දත්ත-ටොගල්="බොත්තම්-රේඩියෝ" එක් කරන්න -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >  
  13.   <button class = "btn" > වම් </button> 
  14.   <button class = "btn" > මැද </button> 
  15.   <button class = "btn" > දකුණ </button> 
  16. </div>

ක්රම

$().බොත්තම('ටොගල්')

තල්ලු තත්ත්වය ටොගල් කරයි. බොත්තමට එය සක්රිය කර ඇති පෙනුමක් ලබා දෙයි.

දැනුම්දීම! data-toggleඔබට ගුණාංගය භාවිතයෙන් බොත්තමක් ස්වයංක්‍රීයව ටොගල් කිරීම සක්‍රීය කළ හැක .
  1. <button class = "btn" data-toggle = "button" > … </button>

$().බොත්තම('පූරණය')

බොත්තම් තත්ත්වය පූරණය කිරීමට සකසයි - බොත්තම අක්‍රීය කරයි සහ පෙළ පූරණය කිරීමට පෙළ මාරු කරයි. දත්ත ගුණාංගය භාවිතයෙන් බොත්තම් මූලද්‍රව්‍ය මත පෙළ පූරණය කිරීම අර්ථ දැක්විය යුතුය data-loading-text.

  1. <button class = "btn" data-loading-text = "දේවල් පූරණය කරමින්..." > ... </button>
දැනුම්දීම! ෆයර්ෆොක්ස් පිටු පැටවීම් හරහා අක්‍රිය තත්වය දිගටම පවතියි . මේ සඳහා විසඳුමක් භාවිතා කිරීමයි autocomplete="off".

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

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

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

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

  1. <button class = "btn" data-complete-text = "නිමි!" > ... </button>   
  2. <script>
  3.   $ ( '.btn' ). බොත්තම ( 'සම්පූර්ණ' )
  4. </script>

Bootstrap -collapse.js හකුළන්න

ගැන

ඇකෝනියන් සහ සංචාලනය වැනි කඩා වැටෙන සංරචක සඳහා මූලික මෝස්තර සහ නම්‍යශීලී සහාය ලබා ගන්න.

ගොනුව බාගන්න

උදාහරණ ඇකෝනියන්

බිඳවැටීමේ ප්ලගිනය භාවිතා කරමින්, අපි සරල ඇකෝනියන් විලාසිතාවේ විජට් එකක් ගොඩනඟමු:

හැකිළිය හැකි කණ්ඩායම් අයිතම #1
Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.
හැකිළිය හැකි කණ්ඩායම් අයිතම #2
Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.
හැකිළිය හැකි කණ්ඩායම් අයිතම #3
Anim pariatur cliche rerehenderit, enim eiusmod high life chargeamus ටෙරී රිචඩ්සන් ඇඩ් දැල්ලන්. 3 wolf moon officia aute, not cupidatat skateboard dolor brunch. ආහාර ට්රක් රථය quinoa nesciunt eiusmod. Brunch 3 wolf moon tempor, sunt aliqua ඒ මත කුරුල්ලෙකු දමා දැල්ලන් තනි සම්භවයක් ඇති කෝපි nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labre wes anderson cred nesciunt sapiente ea proident. දැන්වීම් නිර්මාංශ ව්‍යතිරේක බුචර් වයිස් ලොමෝ. Leggings occaecat craft බියර් ෆාම්-ටු-ටේබල්, raw denim aesthetic synth nesciunt ඔබ සමහරවිට ඔවුන් ගැන අසා නැතුව ඇති accusamus labore sustainable VHS.

bootstrap-collapse.js භාවිතා කිරීම

ජාවාස්ක්‍රිප්ට් හරහා සබල කරන්න:

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

විකල්ප

නම වර්ගය පෙරනිමිය විස්තර
දෙමාපියන් තේරීම්කරු බොරු තේරීම්කාරකය නම්, මෙම කඩාවැටිය හැකි අයිතමය පෙන්වන විට සඳහන් කළ මාපිය යටතේ ඇති සියලුම බිඳවැටිය හැකි මූලද්‍රව්‍ය වසා දමනු ඇත. (සාම්ප්‍රදායික ඇකෝනියන් හැසිරීම් වලට සමාන)
ටොගල් කරන්න බූලියන් සැබෑ ආමන්ත්‍රණයේදී කඩාහැලෙන මූලද්‍රව්‍යය ටොගල් කරයි

සලකුණු කිරීම

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

  1. <button class = "btn btn- danger" data -toggle = "කඩා වැටීම" data-target = "#demo" >   
  2.   සරල කඩා වැටිය හැකි
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > ... </div>
දැනුම්දීම! කඩාහැලෙන පාලනයකට Accordion වැනි කණ්ඩායම් කළමනාකරණය එක් කිරීමට, දත්ත ගුණාංගය එක් කරන්න data-parent="#selector". මෙය ක්‍රියාත්මක වන ආකාරය බැලීමට ආදර්ශනය වෙත යොමු වන්න.

ක්රම

.collapse(විකල්ප)

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

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

.collapse('ටොගල්')

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

.collapse('show')

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

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

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

සිදුවීම්

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

සිදුවීම විස්තර
පෙන්වන්න showනිදසුන් ක්‍රමය හැඳින්වූ විට මෙම සිදුවීම වහාම ක්‍රියාත්මක වේ.
පෙන්වා ඇත බිඳවැටීමේ මූලද්‍රව්‍යයක් පරිශීලකයාට දෘශ්‍යමාන කර ඇති විට මෙම සිදුවීම ක්‍රියාත්මක වේ (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත).
සඟවන්න hideක්රමවේදය කැඳවා ඇති විට මෙම සිද්ධිය වහාම වෙඩි තබා ඇත.
සැඟවී ඇත බිඳවැටීමේ මූලද්‍රව්‍යයක් පරිශීලකයාගෙන් සඟවා ඇති විට මෙම සිදුවීම පුපුරවා හරිනු ලැබේ (css සංක්‍රාන්ති සම්පූර්ණ වන තෙක් බලා සිටිනු ඇත). 
  1. $ ( '#myCollapsible' ). මත ( 'සැඟවුණු' , ශ්රිතය () {   
  2.   //මොකක් හරි කරන්න...
  3. })

Typeahead bootstrap-typeahead.js

ගැන

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

ගොනුව බාගන්න

උදාහරණයක්

යතුරු ලියන ප්‍රතිඵල පෙන්වීමට පහත ක්ෂේත්‍රයේ ටයිප් කිරීම අරඹන්න.

bootstrap-typeahead.js භාවිතා කිරීම

ජාවාස්ක්‍රිප්ට් හරහා යතුරු ලියනය අමතන්න:

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

විකල්ප

නම වර්ගය පෙරනිමිය විස්තර
මූලාශ්රය අරාව [ ] එරෙහිව විමසීමට දත්ත මූලාශ්‍රය.
අයිතම අංකය 8 පතන තුළ පෙන්වීමට ඇති උපරිම අයිතම ගණන.
ගැලපෙන කාර්යය සිද්ධි සංවේදී නොවන විමසුමක් අයිතමයකට ගැලපෙනවාද යන්න තීරණය කිරීමට භාවිතා කරන ක්‍රමය. itemවිමසුම පරීක්ෂා කිරීමට එරෙහිව තනි තර්කයක් පිළිගනී. සමඟ වත්මන් විමසුමට පිවිසෙන්න this.query. trueවිමසුම ගැළපෙන්නේ නම් boolean එකක් ආපසු දෙන්න .
වර්ග කරන්නා කාර්යය නිශ්චිත ගැලපීම,
සිද්ධි සංවේදී, සිද්ධි සංවේදී
නොවන		 ස්වයං සම්පූර්ණ ප්‍රතිඵල වර්ග කිරීමට භාවිතා කරන ක්‍රමය. තනි තර්කයක් පිළිගන්නා itemsඅතර ටයිප්හෙඩ් අවස්ථාවෙහි විෂය පථය ඇත. සමඟ වත්මන් විමසුම යොමු කරන්න this.query.
ඉස්මතු කරන්නා කාර්යය සියලුම පෙරනිමි ගැලපීම් ඉස්මතු කරයි ස්වයං සම්පූර්ණ ප්‍රතිඵල උද්දීපනය කිරීමට භාවිතා කරන ක්‍රමය. තනි තර්කයක් පිළිගන්නා itemඅතර ටයිප්හෙඩ් අවස්ථාවෙහි විෂය පථය ඇත. html ආපසු ලබා දිය යුතුය.

සලකුණු කිරීම

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

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

ක්රම

.typeahead(විකල්ප)

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