මාදිලි ගැන

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

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

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

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

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

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

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

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

විකල්ප

සලකුණු කිරීම

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > Launch Modal </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('show')

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

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

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

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

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

සිදුවීම්

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

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

පතන ගැන

මෙම සරල ප්ලගිනය සමඟ Bootstrap හි ඕනෑම දෙයකට පතන මෙනු එක් කරන්න. බූට්ස්ට්‍රැප් නව තීරුව, ටැබ් සහ පෙති තුළ සම්පූර්ණ පතන මෙනු සහාය දක්වයි.

උදාහරණ

පහත වැටීම් පරීක්ෂා කිරීමට පහත navbar සහ පෙතිවල ඇති dropdown 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 = "සක්‍රිය" ><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වෙනුවට attribute භාවිතා කරන්න 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 ප්ලගිනය අනුචලන ස්ථානය මත පදනම්ව nav ඉලක්ක ස්වයංක්‍රීයව යාවත්කාලීන කිරීම සඳහා වේ.

scrollspy සමඟ උදාහරණ navbar

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

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

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

$ ( '#navbar' ). scrollspy ()

සලකුණු කිරීම

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

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

ක්රම

.scrollspy('refresh')

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

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

විකල්ප

සිදුවීම්

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

උදාහරණ ටැබ්

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

• නිවස
• පැතිකඩ
• පතන
  • @fat
  • @mdo

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

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

$ ( '#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පන්ති එකතු කිරීම 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" > 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"]' ). මත ( 'පෙන්වා ඇත' , ශ්රිතය ( e ) {   
  ඊ . ඉලක්කය // සක්රිය ටැබ්
  ඊ . අදාළ ඉලක්කය // පෙර ටැබය
})

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

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

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

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

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

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

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

විකල්ප

සලකුණු කිරීම

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

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

ක්රම

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

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

.tooltip('show')

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

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

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

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

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

.tooltip('ටොගල්')

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

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

popovers ගැන

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

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

උදාහරන popover hover popover

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

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

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

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

විකල්ප

සලකුණු කිරීම

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

ක්රම

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

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

.popover('show')

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

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

.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 හි අනතුරු ඇඟවීමේ පන්තිය අනතුරු ඇඟවීමේ ක්‍රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි.

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

ගැන

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

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

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

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

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

$ ( '.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 මත රේඩියෝ විලාස ටොගල් කිරීම සඳහා දත්ත-ටොගල්="බොත්තම්-රේඩියෝ" එක් කරන්න -->
<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>   

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

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

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

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

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

ගැන

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

* සංක්‍රාන්ති ප්ලගිනය ඇතුළත් කිරීම අවශ්‍ය වේ.

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

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

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

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

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

විකල්ප

සලකුණු කිරීම

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

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

ක්රම

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

දෙවන සිඟිති රූ ලේබලය

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.

තුන්වන සිඟිති රූ ලේබලය

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.

‹ ›

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

Javascript හරහා අමතන්න:

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

විකල්ප

සලකුණු කිරීම

පෙර සහ ඊළඟ පාලනයන් සඳහා දත්ත ගුණාංග භාවිතා වේ. පහත උදාහරණ සලකුණු කිරීම පරීක්ෂා කරන්න.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- කැරොසල් අයිතම -->
  <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>

ක්රම

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

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

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

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

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

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

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

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

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

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

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

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

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

සිදුවීම්

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

ගැන

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

උදාහරණයක්

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

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

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

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

විකල්ප

සලකුණු කිරීම

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

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

ක්රම

.typeahead(විකල්ප)

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