တစ်ဦးချင်း သို့မဟုတ် ပြုစုခြင်း။

ပလပ်အင်များကို တစ်ဦးချင်းစီ (အချို့သော မှီခိုမှု လိုအပ်သော်လည်း) သို့မဟုတ် အားလုံးကို တစ်ပြိုင်နက် ထည့်သွင်းနိုင်သည်။ bootstrap.js နှင့် bootstrap.min.js နှစ်ခုစလုံး တွင် ဖိုင်တစ်ခုတည်းတွင် ပလပ်အင်များ အားလုံးပါဝင်ပါသည်။

ဒေတာဂုဏ်တော်

JavaScript တစ်ကြောင်းတည်းမရေးဘဲ Markup API မှတဆင့် Bootstrap ပလပ်အင်အားလုံးကို သက်သက်သုံးနိုင်သည်။ ၎င်းသည် Bootstrap ၏ ပထမတန်းစား API ဖြစ်ပြီး ပလပ်အင်ကို အသုံးပြုသည့်အခါ သင်၏ ပထမဆုံး ထည့်သွင်းစဉ်းစားသင့်သည်။

ဆိုလိုသည်မှာ၊ အချို့သောအခြေအနေများတွင် ဤလုပ်ဆောင်ချက်ကို ပိတ်ရန် နှစ်လိုဖွယ်ဖြစ်နိုင်သည်။ ထို့ကြောင့်၊ `'data-api'` ဖြင့် ကိုယ်ထည်အမည်သတ်မှတ်ထားသော ဖြစ်ရပ်အားလုံးကို ပေါင်းစည်းခြင်းဖြင့် ဒေတာ attribute API ကို ပိတ်နိုင်သည့် စွမ်းရည်ကိုလည်း ပေးပါသည်။ ဤပုံသည်-

$ ( 'ခန္ဓာ' )။ off ( '.data-api' )

တနည်းအားဖြင့်၊ သီးခြားပလပ်အင်တစ်ခုအား ပစ်မှတ်ထားရန်၊ ဤကဲ့သို့သော data-api namespace နှင့်အတူ ပလပ်အင်၏အမည်ကို namespace အဖြစ် ထည့်သွင်းပါ-

$ ( 'ခန္ဓာ' )။ ပိတ်ခြင်း ( '.alert.data-api' )

ပရိုဂရမ်မာတစ် API

JavaScript API မှတဆင့် Bootstrap ပလပ်အင်များအားလုံးကို သင်အသုံးပြုနိုင်မည်ဟုလည်း ကျွန်ုပ်တို့ယုံကြည်ပါသည်။ အများသူငှာ API များအားလုံးသည် တစ်ခုတည်း၊ ချိတ်ဆက်နိုင်သော နည်းလမ်းများဖြစ်ပြီး စုစည်းမှုအပေါ် ပြန်လည်လုပ်ဆောင်ခဲ့သည်။

$ ( ".btn.danger" )။ ခလုတ် ( "ခလုတ်" )။ addClass ( "အဆီ" )

နည်းလမ်းအားလုံးသည် ရွေးချယ်ခွင့်ရှိသော ရွေးချယ်စရာအရာဝတ္ထု၊ သီးခြားနည်းလမ်းတစ်ခုအား ပစ်မှတ်ထားသည့် စာကြောင်းတစ်ခု သို့မဟုတ် မည်သည့်အရာကိုမျှ လက်ခံသင့်သည် (မူရင်းအပြုအမူဖြင့် ပလပ်အင်ကို အစပြုသည့်အရာဖြစ်သည်)။

$ ( "#myModal" )။ modal () // defaults ဖြင့် အစပြု ပါသည်။                       
$ ( "#myModal" )။ modal ({ ကီးဘုတ် : false }) // ကီးဘုတ်မပါဘဲ အစပြုထားသည်။     
$ ( "#myModal" )။ modal ( 'show' ) // အစပြုပြီး ချက်ချင်းပြသရန် ဖိတ်ခေါ်သည်။                

ပလပ်အင်တစ်ခုစီသည် `Constructor` ပိုင်ဆိုင်မှု- တွင် ၎င်း၏ အကြမ်းထည်တည်ဆောက်သူကို ဖော်ထုတ် $.fn.popover.Constructorပေးပါသည်။ အထူးပလပ်အင်ဥပမာတစ်ခုကို သင်ရယူလိုပါက၊ ၎င်းကို အစိတ်အပိုင်းတစ်ခုမှ တိုက်ရိုက်ရယူပါ- $('[rel=popover]').data('popover').

အဲ့ဒါနဲ့

Bootstrap သည် plugin အများစု၏ ထူးခြားသောလုပ်ဆောင်ချက်များအတွက် စိတ်ကြိုက်ဖြစ်ရပ်များကို ပံ့ပိုးပေးပါသည်။ ယေဘူယျအားဖြင့်၊ ၎င်းတို့သည် အဆုံးမရှိနှင့် အတိတ်ပါဝင်မှုပုံစံဖြင့် လာပါသည် - အဆုံးမရှိ (ဥပမာ show) သည် အဖြစ်အပျက်တစ်ခု၏အစတွင် အစပျိုးပြီး ၎င်း၏အတိတ်ပါဝင်မှုပုံစံ (ဥပမာ shown) သည် လုပ်ဆောင်ချက်တစ်ခုပြီးဆုံးချိန်တွင် အစပျိုးသည်။

အဆုံးမရှိသော အဖြစ်အပျက်များအားလုံးသည် ကြိုတင်ကာကွယ်မှု၏ မူရင်းလုပ်ဆောင်ချက်ကို ပံ့ပိုးပေးပါသည်။ ၎င်းသည် လုပ်ဆောင်ချက်တစ်ခုကို မစတင်မီ ရပ်တန့်ရန် စွမ်းရည်ကို ပံ့ပိုးပေးသည်။

$ ( '#myModal' )။ on ( 'ရှိုး' ၊ လုပ်ဆောင်ချက် ( င ) {   
    if (! data ) return e . PreventDefault () // modal ကိုပြသခြင်းမှရပ်တန့်သည်။   
})

အကူးအပြောင်းများအကြောင်း

ရိုးရှင်းသောအကူးအပြောင်းအကျိုးသက်ရောက်မှုများအတွက်၊ အခြား JS ဖိုင်များနှင့်အတူ bootstrap-transition.js တစ်ကြိမ်ပါဝင်ပါ။ compiled (သို့မဟုတ် minified) bootstrap.js ကို သင်အသုံးပြုနေပါက၊ ၎င်းကို ထည့်သွင်းရန် မလိုအပ်ပါ။

ကိစ္စရပ်များကို အသုံးပြု

အကူးအပြောင်း ပလပ်အင်၏ ဥပမာအချို့-

• ပုံစံများထဲတွင် ချော်လဲခြင်း သို့မဟုတ် နွမ်းသွားခြင်း။
• တက်ဘ်များ နွမ်းလာသည်။
• သတိပေးချက်များ နွမ်းပါးသည်။
• လျှောအဝိုင်းလေး

ဥပမာများ

Modals များသည် ချောမွေ့သော်လည်း လိုက်လျောညီထွေရှိပြီး အနိမ့်ဆုံးလိုအပ်သော လုပ်ဆောင်နိုင်စွမ်းနှင့် စမတ်ပုံသေများပါရှိသော ဒိုင်ယာလော့ခ်ကို ညွှန်ပြပါသည်။

အငြိမ်ဥပမာ

အောက်ခြေတွင် ခေါင်းစီး၊ ကိုယ်ထည်နှင့် လုပ်ဆောင်ချက်အစုံပါရှိသော ပြန်ဆိုထားသောပုံစံ။

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modal ခေါင်းစီး </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 မှတစ်ဆင့် modal တစ်ခုကိုပြောင်းပါ။ ၎င်းသည် အောက်သို့လျှောကျပြီး စာမျက်နှာ၏အပေါ်ဆုံးမှ မှိန်သွားလိမ့်မည်။

<!-- မော်ဒယ်ဖွင့်ရန် ခလုတ် -->
<a href="#myModal" role="button" class="btn" data-toggle = "modal"> စတင်ရန် ဒီမို မော်ဒယ် </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" > မော်ဒယ်လ် ခေါင်းစီး </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>

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

JavaScript မရေးဘဲ modal ကို အသက်သွင်းပါ။ data-toggle="modal"ခလုတ်တစ်ခုနှင့်အတူ၊ data-target="#foo"သို့မဟုတ် href="#foo"ပြောင်းရန် သီးခြားပုံစံတစ်ခုအား ပစ်မှတ်ထားရန် ခလုတ်တစ်ခုကဲ့သို့ ထိန်းချုပ်ကိရိယာဒြပ်စင်ပေါ်တွင် သတ်မှတ် ပါ။

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Launch modal </button>   

JavaScript မှတဆင့်

myModalJavaScript တစ်ကြောင်းတည်း ဖြင့် ID ဖြင့် modal ကိုခေါ်ဆိုပါ -

$ ( '#myModal' )။ ပုံစံ ( ရွေးချယ်စရာများ )

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-backdrop=""။

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

နည်းလမ်းများ

.modal(ရွေးချယ်စရာများ)

သင့်အကြောင်းအရာကို ပုံစံတူအဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object။

$ ( '#myModal' )။ ပုံစံ ({
  ကီးဘုတ် : အမှား 
})

.modal('toggle')

ပုံစံတစ်ခုကို ကိုယ်တိုင်ပြောင်းသည်။

$ ( '#myModal' )။ မော်ဒယ် ( 'ခလုတ်' )

.modal('ရှိုး')

မော်ဒယ်တစ်ခုကို ကိုယ်တိုင်ဖွင့်သည်။

$ ( '#myModal' )။ မော်ဒယ် ( 'ရှိုး' )

.modal('ဝှက်')

ပုံစံတစ်ခုကို ကိုယ်တိုင် ဝှက်ထားသည်။

$ ( '#myModal' )။ modal ( 'ဝှက်' )

အဲ့ဒါနဲ့

Bootstrap ၏ modal class သည် modal လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးပါသည်။

$ ( '#myModal' )။ on ( 'hidden' ၊ function () {   
  // တစ်ခုခုလုပ်...
})

ဥပမာများ

navbar၊ တက်ဘ်များနှင့် pills အပါအဝင် ဤရိုးရှင်းသော ပလပ်အင်များဖြင့် မည်သည့်အရာအားလုံးနီးပါးတွင် dropdown menus များကို ထည့်ပါ။

navbar တစ်ခုအတွင်း

တက်ဘ်များအတွင်း

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

data-toggle="dropdown"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 များကိုခေါ်ဆိုပါ-

$ ( '.dropdown-toggle' )။ dropdown ()

ရွေးချယ်စရာများ

တစ်ခုမှ

နည်းလမ်းများ

$().dropdown('toggle')

ပေးထားသော navbar သို့မဟုတ် တက်ဘ်လုပ်ထားသော လမ်းညွှန်ချက်အတွက် မီနူးများပြောင်းရန် ပရိုဂရမ်စနစ်သုံး api။

navbar တွင်ဥပမာ

ScrollSpy ပလပ်အင်သည် scroll position ကိုအခြေခံ၍ nav ပစ်မှတ်များကို အလိုအလျောက် update လုပ်ရန်အတွက်ဖြစ်သည်။ navbar အောက်ရှိ ဧရိယာကို ရွှေ့ပြီး တက်ကြွသော အတန်းပြောင်းလဲမှုကို ကြည့်ရှုပါ။ dropdown sub items ကိုလည်း မီးမောင်းထိုးပြပါမည်။

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

သင်၏ topbar လမ်းညွှန်မှုတွင် scrollspy အပြုအမူကို လွယ်ကူစွာထည့်ရန်၊ data-spy="scroll"သင်စူးစမ်းလိုသောဒြပ်စင်သို့ထည့်ရုံသာဖြစ်သည် (ပုံမှန်အားဖြင့် ဤအရာသည် body ဖြစ်မည်) နှင့် မည် data-target=".navbar"သည့် nav ကိုအသုံးပြုရန် ရွေးချယ်ပါ။ .navအစိတ်အပိုင်းတစ်ခု ဖြင့် scrollspy ကို သင်အသုံးပြုလိုပါလိမ့်မည် ။

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

JavaScript မှတဆင့်

JavaScript မှတဆင့် scrollspy ကိုခေါ်ဆိုပါ-

$ ( '#navbar' )။ scrollspy ()

နည်းလမ်းများ

.scrollspy('refresh')

DOM မှဒြပ်စင်များထည့်ခြင်း သို့မဟုတ် ဖယ်ရှားခြင်းနှင့်အတူ scrollspy ကိုအသုံးပြုသောအခါ၊ သင်သည်ထိုကဲ့သို့သောပြန်လည်ဆန်းသစ်သည့်နည်းလမ်းကိုခေါ်ဆိုရန် လိုအပ်သည်-

$ ( '[data-spy="scroll"]' )။ တစ်ခုချင်းစီ ( function () {  
  var $spy = $ ( ဒါ )။ scrollspy ( 'ပြန်လည်စတင်ခြင်း' )
});

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-offset=""။

အဲ့ဒါနဲ့

နမူနာ တက်ဘ်များ

dropdown menus များမှပင် ဒေသတွင်း အကြောင်းအရာအကန့်များမှတဆင့် အမြန်၊ သွက်လက်သော တဘ်လုပ်ဆောင်နိုင်စွမ်းကို ထည့်ပါ။

အသုံးပြုမှု

JavaScript မှတဆင့် tabbable တက်ဘလက်များကိုဖွင့်ပါ (တက်ဘ်တစ်ခုစီသည် တစ်ဦးချင်း အသက်သွင်းရန် လိုအပ်သည်-

$ ( '#myTab a' )။ နှိပ်ပါ ( function ( င ) {  
  င _ PreventDefault ();
  $ ( ဒါ )။ tab ( 'ရှိုး' );
})

တစ်ဘ်ချင်းစီကို နည်းလမ်းများစွာဖြင့် အသက်သွင်းနိုင်သည်-

$ ( '#myTab a[href="#profile"]' )။ tab ( 'ရှိုး' ); // အမည်ဖြင့် tab ကိုရွေးချယ်ပါ။ 
$ ( '#myTab a:first' )။ tab ( 'ရှိုး' ); // ပထမ tab ကိုရွေးချယ်ပါ။ 
$ ( '#myTab a:last' )။ tab ( 'ရှိုး' ); // နောက်ဆုံး tab ကို ရွေးပါ။ 
$ ( '#myTab li:eq(2) a' )။ tab ( 'ရှိုး' ); // တတိယတဘ်ကို ရွေးပါ (0-အညွှန်းပြုထားသည်) 

သေား

data-toggle="tab"JavaScript ကို ရိုးရိုးရှင်းရှင်း သို့မဟုတ် 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"> မက်ဆေ့ချ်များ </a></li >  
  <li><a href = "#settings" data-toggle = "tab"> ဆက် တင်များ </a></li>  
</ul>

နည်းလမ်းများ

$().တက်ဘ်

တက်ဘ်ဒြပ်စင်နှင့် အကြောင်းအရာကွန်တိန်နာကို အသက်သွင်းသည်။ တဘ် တွင် DOM တွင် ကွန်တိန်နာ node တစ်ခု data-targetသို့မဟုတ် ပစ်မှတ်တစ်ခု ရှိသင့်သည်။href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" > <a href="#home"> အိမ် </a> </li >  
  <li><a href="#profile"> ပရိုဖိုင် </a> < /li > 
  <li><a href="#messages"> မက်ဆေ့ချ် များ </a> </li > 
  <li><a href="#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>
  $ ( function () {  
    $ ( '#myTab a:last' )။ tab ( 'ရှိုး' );
  })
</script>

အဲ့ဒါနဲ့

$ ( 'a[data-toggle="tab"]' )။ on ( 'ပြသထားသည်' ၊ function ( e ) {   
  င _ ပစ်မှတ် // activated တက်ဘ်
  င _ ဆက်စပ်ပစ်မှတ် // ယခင်တက်ဘ ်
})

ဥပမာများ

Jason Frame မှရေးသားသောအလွန်ကောင်းမွန်သော jQuery.tipsy ပလပ်အင်မှမှုတ်သွင်းထားသည်။ Tooltips များသည် ပုံများပေါ်တွင် အားမကိုးဘဲ၊ ကာတွန်းများအတွက် CSS3 ကို အသုံးပြုကာ၊ ဒေသဆိုင်ရာ ခေါင်းစဉ်သိုလှောင်မှုအတွက် data-attributes များကို အပ်ဒိတ်ဗားရှင်းတစ်ခုဖြစ်သည်။

ကိရိယာဆိုင်ရာ အကြံပြုချက်များကို ကြည့်ရှုရန် အောက်ပါလင့်ခ်များကို နှိပ်ပါ။

လမ်းညွှန်လေးချက်

အသုံးပြုမှု

JavaScript မှတဆင့် tooltip ကိုအစပျိုးပါ

$ ( '#example' )။ ကိရိယာအကြံပြုချက် ( ရွေးချယ်စရာများ )

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-animation=""။

သေား

စွမ်းဆောင်ရည် အကြောင်းပြချက်များအတွက်၊ Tooltip နှင့် Popover data-apis တို့ကို ရွေးချယ်ထားပါသည်။ ၎င်းတို့ကို အသုံးပြုလိုပါက ရွေးချယ်မှုရွေးချယ်မှုတစ်ခုကိုသာ သတ်မှတ်ပါ။

<a href="#" rel="tooltip" title="ပထမ ကိရိယာ အကြံပြုချက်"> ကျွန်ုပ် အပေါ်တွင် ရွှေ့ ပါ </a> _ _   

နည်းလမ်းများ

$().tooltip(ရွေးချယ်စရာများ)

ဒြပ်စင်စုစည်းမှုသို့ ကိရိယာအကြံပြုချက် လက်ကိုင်ကို ပူးတွဲပါ။

.tooltip('ရှိုး')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပေးချက်ကို ထုတ်ပြသည်။

$ ( '#element' )။ tooltip ( 'ရှိုး' )

.tooltip('ဝှက်')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ဝှက်ထားသည်။

$ ( '#element' )။ ကိရိယာအကြံပြုချက် ( 'ဝှက်' )

.tooltip('toggle')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံဉာဏ်ကို ပြောင်းရန်။

$ ( '#element' )။ ကိရိယာအကြံပြုချက် ( 'ပြောင်းရန်' )

.tooltip('ဖျက်ရန်')

ဒြပ်စင်တစ်ခု၏ ကိရိယာအကြံပြုချက်ကို ဖျောက်ဖျက်ပစ်သည်။

$ ( '#element' )။ tooltip ( 'ဖျက်ဆီး' )

ဥပမာများ

iPad ပေါ်ရှိ အကြောင်းအရာများကဲ့သို့ ထပ်ဆင့်အသေးစား ထပ်ဆင့်ထည့်ရန်၊ ဒုတိယအချက်အလက်များအတွက် မည်သည့်ဒြပ်စင်သို့မဆို ထည့်ပါ။ Popover ကိုစတင်ရန် ခလုတ်ကို နှိပ်ပါ။ ပါဝင်ရန် Tooltip လိုအပ်ပါသည် ။

Static popover

ရွေးချယ်စရာ လေးခု ရနိုင်သည်- အပေါ်၊ ညာဘက်၊ အောက်နှင့် ဘယ်ဘက် ညှိထားသည်။

Popovers များကို JavaScript မှထုတ်ပေးပြီး dataရည်ညွှန်းချက်တစ်ခုအတွင်းမှ အကြောင်းအရာများကို ထုတ်ပေးသည့်အမှတ်အသားတစ်ခုမျှမရှိပါ။

တိုက်ရိုက်သရုပ်ပြ

လမ်းညွှန်လေးချက်

အသုံးပြုမှု

JavaScript မှတဆင့် popovers ကိုဖွင့်ပါ-

$ ( '#example' )။ popover ( ရွေးချယ်စရာများ )

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-animation=""။

သေား

စွမ်းဆောင်ရည် အကြောင်းပြချက်များအတွက်၊ Tooltip နှင့် Popover data-apis တို့ကို ရွေးချယ်ထားပါသည်။ ၎င်းတို့ကို အသုံးပြုလိုပါက ရွေးချယ်မှုရွေးချယ်မှုတစ်ခုကိုသာ သတ်မှတ်ပါ။

နည်းလမ်းများ

$().popover(ရွေးချယ်စရာများ)

အစိတ်အပိုင်းစုစည်းမှုတစ်ခုအတွက် popovers ကို စတင်သည်။

.popover('ရှိုး')

ဒြပ်စင်တစ်ခုပေါ်လာသည်။

$ ( '#element' )။ popover ( 'ရှိုး' )

.popover('ဝှက်')

ဒြပ်စင်များ ပေါ်လာခြင်းကို ဝှက်ထားသည်။

$ ( '#element' )။ popover ( 'ဝှက်' )

.popover('toggle')

ဒြပ်စင်တစ်ခုပေါ်လာသည်

$ ( '#element' )။ popover ( 'ပြောင်းရန်' )

.popover('ဖျက်ဆီး')

ဒြပ်စင်တစ်ခု၏ popover ကို ဖျောက်ဖျက်ပစ်သည်။

$ ( '#element' )။ popover ( 'ဖျက်ဆီး' )

နမူနာသတိပေးချက်များ

ဤပလပ်အင်ဖြင့် သတိပေးချက်စာတိုများအားလုံးကို ပယ်ရန် လုပ်ဆောင်နိုင်စွမ်းကို ထည့်ပါ။

အသုံးပြုမှု

JavaScript မှတစ်ဆင့် သတိပေးချက်ကို ထုတ်ပယ်ခြင်းကို ဖွင့်ပါ-

$ ( ". သတိပေးချက်" )။ သတိပေးချက် ()

သေား

data-dismiss="alert"အနီးကပ်သတိပေးချက် အလိုအလျောက် ပေးစွမ်းနိုင်စေရန် အနီးကပ် ခလုတ်ကို ထည့် လိုက်ရုံပါပဲ။

<a class="close" data-dismiss="alert" href="#" > & times ; _ _ _ _ </a>   

နည်းလမ်းများ

$().သတိပေးချက်()

သတိပေးချက်အားလုံးကို အနီးကပ်လုပ်ဆောင်နိုင်စွမ်းဖြင့် ချုပ်ပေးသည်။ ပိတ်သည့်အခါတွင် သင်၏သတိပေးချက်များကို တက်ကြွစေရန်၊ ၎င်းတို့တွင် အတန်း .fadeနှင့် .inအတန်းကို အသုံးချထားပြီးဖြစ်ကြောင်း သေချာပါစေ။

သတိပေးချက်('ပိတ်')

သတိပေးချက်ကို ပိတ်သည်။

$ ( ". သတိပေးချက်" )။ သတိပေးချက် ( 'ပိတ်' )

အဲ့ဒါနဲ့

Bootstrap ၏သတိပေးချက်အတန်းသည် သတိပေးချက်လုပ်ဆောင်နိုင်စွမ်းသို့ချိတ်ဆက်ရန်အတွက် အချို့သောဖြစ်ရပ်များကိုဖော်ပြသည်။

$ ( '#my-alert' )။ bind ( 'အပိတ်' ၊ function () {   
  // တစ်ခုခုလုပ်...
})

နမူနာအသုံးပြုမှုများ

ခလုတ်များဖြင့် ပိုမိုလုပ်ဆောင်ပါ။ ခလုတ်များကို ထိန်းချုပ်ရန် သို့မဟုတ် ကိရိယာဘားများကဲ့သို့သော နောက်ထပ်အစိတ်အပိုင်းများအတွက် ခလုတ်အုပ်စုများကို ဖန်တီးပါ။

တင်းမာသော

ခလုတ်တစ်ခုပေါ်ရှိ loading state ကိုသုံးရန် data-loading-text="Loading..." ကိုထည့်ပါ။

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Loading state </button>   

တစ်ခုတည်း ခလုတ်

ခလုတ်တစ်ခုတည်းတွင် ခလုတ်ဖွင့်ခြင်းကို စတင်ရန် data-toggle="button" ကို ထည့်ပါ။

<button type = "button" class = "btn" data-toggle = "button" > တစ်ခု ပြောင်းရန် </button>   

အမှန်ခြစ်ပါ။

btn-group တွင် checkbox ပုံစံပြောင်းရန်အတွက် data-toggle="buttons-checkbox" ကိုထည့်ပါ။

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > ဘယ်ဘက် </button>  
  <button type = "button" class = "btn" > အလယ် </button>  
  <button type = "button" class = "btn" > ညာဘက် </button>  
</div>

ရေဒီယို

btn-group တွင် ရေဒီယိုပုံစံပြောင်းရန်အတွက် data-toggle="buttons-radio" ကိုထည့်ပါ။

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > ဘယ်ဘက် </button>  
  <button type = "button" class = "btn" > အလယ် </button>  
  <button type = "button" class = "btn" > ညာဘက် </button>  
</div>

အသုံးပြုမှု

JavaScript မှတစ်ဆင့် ခလုတ်များကို ဖွင့်ပါ-

$ ( '.nav-tabs' )။ ခလုတ် ()

သေား

ဒေတာရည်ညွှန်းချက်များသည် ခလုတ်ပလပ်အင်တွင် ပါဝင်ပါသည်။ အမျိုးမျိုးသော markup အမျိုးအစားများအတွက် အောက်ပါနမူနာကုဒ်ကို စစ်ဆေးကြည့်ပါ။

ရွေးချယ်စရာများ

တစ်ခုမှ

နည်းလမ်းများ

$().ခလုတ်('toggle')

တွန်းသည့်အခြေအနေသို့ ပြောင်းရန်။ ခလုတ်ကို စဖွင့်ပြီးကြောင်း အသွင်အပြင်ကို ပေးသည်။

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().ခလုတ်('Loading')

ခလုတ်ကို ဖွင့်ခြင်းအဖြစ် သတ်မှတ်သည် - ခလုတ်ကို ပိတ်ပြီး စာသားကို စာသားတင်ခြင်းသို့ လဲလှယ်ပေးသည်။ ဒေတာ attribute ကို အသုံးပြု၍ စာသားအား တင်ခြင်းအား ခလုတ်ဒြပ်စင်ပေါ်တွင် သတ်မှတ်ရပါမည် data-loading-text။

<button type = "button" class = "btn" data-loading-text = "အရာများကို ဖွင့်နေသည်..." > ... </button>    

$().button('reset')

ခလုတ်အခြေအနေကို ပြန်လည်သတ်မှတ်သည် - စာသားကို မူရင်းစာသားသို့ ပြောင်းသည်။

$().ခလုတ်(string)

ခလုတ်အခြေအနေကို ပြန်လည်သတ်မှတ်သည် - မည်သည့်ဒေတာကိုမဆို သတ်မှတ်ထားသော စာသားအခြေအနေသို့ စာသားကို ဖလှယ်သည်။

<button type = "button" class = "btn" data-complete-text = "ပြီးပြီ!" > ... </button>    
<script>
  $ ( '.btn' )။ ခလုတ် ( 'ပြီးပါပြီ' )
</script>

အကြောင်း

အကော်ဒီယံနှင့် လမ်းကြောင်းပြခြင်းကဲ့သို့ ခေါက်နိုင်သော အစိတ်အပိုင်းများအတွက် အခြေခံပုံစံများနှင့် လိုက်လျောညီထွေရှိသော ပံ့ပိုးမှုရယူပါ။

* Transitions plugin ပါ၀င်ရန် လိုအပ်သည်။

ဥပမာ ဘာဂျာ

ပြိုကျသည့်ပလပ်အင်ကို အသုံးပြု၍ ကျွန်ုပ်တို့သည် ရိုးရှင်းသော ကော်ဒီယန်စတိုင်ဝစ်ဂျက်တစ်ခုကို တည်ဆောက်ခဲ့သည်-

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class="accordion-toggle" data-toggle = "ပြိုကျသည်" data-parent = "#accordion2" href = "#collapseOne" > _ _    
        စုစည်းနိုင်သော အဖွဲ့အမှတ် ၁
      </a>
    </div>
    <div id = "collapseOne" class = "ကော်ဒီယံ-ကိုယ်ထည် ပြိုကျခြင်း" >  
      <div class = "accordion-inner" > 
        တိရိစ္ဆာန်ပုဂ္ဂလိက cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class="accordion-toggle" data-toggle = "ပြိုကျသည်" data-parent = "#accordion2" href = "#collapseTwo" > _ _    
        စုစည်းနိုင်သော အဖွဲ့အမှတ် ၂
      </a>
    </div>
    <div id = "collapseTwo" class = "ကော်ဒီယံ-ကိုယ်ထည်ပြိုကျခြင်း" >  
      <div class = "accordion-inner" > 
        တိရိစ္ဆာန်ပုဂ္ဂလိက cliche...
      </div>
    </div>
  </div>
</div>
...

အကော်ဒီယံ အမှတ်အသားမပါဘဲ ပလပ်အင်ကိုလည်း သုံးနိုင်သည်။ အခြားဒြပ်စင်တစ်ခု၏ ချဲ့ထွင်ခြင်းနှင့် ပြိုကျခြင်းကို ခလုတ်တစ်ခု ပြုလုပ်ပါ။

<button type = "button" class = "btn btn-danger" data-toggle = "ပြိုကျသည်" data-target = "#demo" >    
  ရိုးရှင်းသော အထူးပင်
</button>
 
<div id = "သရုပ်ပြ" class = "ပြိုကျခြင်း" > … </div>  

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

ပြိုလဲနိုင်သော ဒြပ်စင်တစ်ခု၏ ထိန်းချုပ်မှုကို အလိုအလျောက် သတ်မှတ်ပေးရန်အတွက် ပေါင်းထည့် data-toggle="collapse"ကာ အစိတ်အပိုင်းတစ်ခုသို့ လိုက်ရုံသာ။ ပြိုကျမှုကို အသုံးချရန် ရည်ညွှန်းချက်သည် css ရွေးချယ်မှုတစ်ခုကို လက်ခံသည် data-target။ တွဲနိုင်သော အစိတ်အပိုင်းသို့ data-targetအတန်းကို ထည့်သွင်းရန် သေချာပါစေ ။ collapse၎င်းကို ပုံသေဖွင့်လိုပါက နောက်ထပ်အတန်းကို ထည့်ပါ in။

အကော်ဒီယံကဲ့သို့ အုပ်စုစီမံခန့်ခွဲမှုကို ပေါင်းစပ်နိုင်သော ထိန်းချုပ်မှုတစ်ခုသို့ ထည့်ရန်၊ ဒေတာရည်ညွှန်းချက်ကို ထည့်ပါ data-parent="#selector"။ လုပ်ဆောင်ချက်ကို ကြည့်ရန် ဒီမိုကို ကိုးကားပါ။

JavaScript မှတဆင့်

ကိုယ်တိုင်ဖွင့်ပါ-

$ ( ".collapse" )။ ပြိုကျခြင်း ()

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-parent=""။

နည်းလမ်းများ

.collapse(ရွေးချယ်စရာများ)

သင်၏အကြောင်းအရာကို ပေါင်းစပ်နိုင်သောဒြပ်စင်အဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object။

$ ( '#myCollapsible' )။ ပြိုကျခြင်း ({
  toggle : အမှား 
})

.collapse('toggle')

ပြရန် သို့မဟုတ် ဝှက်ထားရန် ခေါက်နိုင်သော အစိတ်အပိုင်းတစ်ခုကို ပြောင်းရန်။

.collapse('ရှိုး')

တွဲနိုင်သောဒြပ်စင်ကိုပြသသည်။

.collapse('ဝှက်')

တွဲနိုင်သောဒြပ်စင်ကို ဝှက်ထားသည်။

အဲ့ဒါနဲ့

Bootstrap ၏ပြိုကျမှုအတန်းသည် ပြိုကျသည့်လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးသည်။

$ ( '#myCollapsible' )။ on ( 'hidden' ၊ function () {   
  // တစ်ခုခုလုပ်...
})

ဥပမာ အဝိုင်းလေး

အောက်ဖော်ပြပါ ဆလိုက်ရှိုးသည် ဝိုင်းလေးကဲ့သို့ အစိတ်အပိုင်းများမှတဆင့် စက်ဘီးစီးခြင်းအတွက် ယေဘုယျ ပလပ်အင်နှင့် အစိတ်အပိုင်းကို ပြသထားသည်။

ပထမဆုံး Thumbnail အညွှန်း

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" >  
  <!-- ချားရဟတ်များ -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- ချားရဟတ် nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev" > & lsaquo ; _ _ _ </a>   
  <a class="carousel-control right" href = "#myCarousel" data-slide = "next" > & rsaquo; </a>   
</div>

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

...

JavaScript မှတဆင့်

အဝိုင်းလေးအား ကိုယ်တိုင်ခေါ်ဆိုပါ-

$ ( '.carousel' )။ အဝိုင်းလေး ()

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-interval=""။

နည်းလမ်းများ

.carousel(ရွေးချယ်စရာများ)

စိတ်ကြိုက်ရွေးချယ်စရာတစ်ခုဖြင့် အဝိုင်းလေးကို objectစတင်ပြီး အရာများမှတစ်ဆင့် စက်ဘီးစီးခြင်းကို စတင်သည်။

$ ( '.carousel' )။ ဝိုင်းလေး ({
  ကြားကာလ : 2000 
})

.carousel('စက်ဝန်း')

ဘယ်မှညာမှ အရာများ အဝိုင်းလေးကို ဖြတ်သန်းပါ။

.carousel('ခေတ္တရပ်')

စက်ဘီးဝိုင်းလေးအား အရာများမှတဆင့် စက်ဘီးစီးခြင်းမှ ရပ်တန့်စေပါသည်။

.carousel(နံပါတ်)

အဝိုင်းကို ဘောင်တစ်ခု (၀က်အခြေခံ၊ အခင်းအကျင်းတစ်ခုနှင့် ဆင်တူသည်) သို့ လည်ပတ်သည်။

.carousel('prev')

ယခင်အကုသိုလ်ကံမှ သံသရာ။

.carousel('next')

သံသရာလည်ရမယ့်အရာ။

အဲ့ဒါနဲ့

Bootstrap ၏ အဝိုင်းလေးအတန်းသည် အဝိုင်းလေး၏ လုပ်ဆောင်နိုင်စွမ်းကို ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်နှစ်ခုကို ဖော်ထုတ်ပေးပါသည်။

ဥပမာ

မည်သည့်ပုံစံဖြင့်မဆို စာသားထည့်သွင်းခြင်းဖြင့် ကောင်းမွန်သော စာရိုက်ခေါင်းများကို လျင်မြန်စွာ ဖန်တီးနိုင်စေရန် အခြေခံ၊ လွယ်ကူစွာ တိုးချဲ့ထားသော ပလပ်အင်တစ်ခု။

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

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

အထက်နမူနာတွင် ပြထားသည့်အတိုင်း typeahead လုပ်ဆောင်နိုင်စွမ်းရှိသော ဒြပ်စင်တစ်ခုကို စာရင်းသွင်းရန် ဒေတာ attribute များကို ထည့်ပါ။

JavaScript မှတဆင့်

စာရိုက်ခေါင်းကို ကိုယ်တိုင်ခေါ်ဆိုပါ-

$ ( '.typeahead' )။ စာစီစာရိုက် ()

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-source=""။

နည်းလမ်းများ

.typeahead(ရွေးချယ်စရာများ)

စာရိုက်ခေါင်းဖြင့် ထည့်သွင်းမှုကို စတင်သည်။

ဥပမာ

ဘယ်ဘက်ရှိ subnavigation သည် affix plugin ၏ တိုက်ရိုက်သရုပ်ပြတစ်ခုဖြစ်သည်။

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

မည်သည့်ဒြပ်စင်သို့ affix အပြုအမူကို လွယ်ကူစွာထည့်ရန်၊ data-spy="affix"သင်စူးစမ်းလိုသောဒြပ်စင်သို့ထည့်ရုံသာဖြစ်သည်။ ထို့နောက် ဒြပ်စင်တစ်ခုအား အဖွင့်အပိတ်လုပ်ရန် အချိန်သတ်မှတ်ရန် အော့ဖ်ဆက်များကို အသုံးပြုပါ။

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

JavaScript မှတဆင့်

JavaScript မှတဆင့် affix plugin ကိုခေါ်ဆိုပါ-

$ ( '#navbar' )။ affix ()

နည်းလမ်းများ

.affix('ပြန်လည်စတင်ခြင်း')

DOM မှဒြပ်စင်များထည့်ခြင်း သို့မဟုတ် ဖယ်ရှားခြင်းနှင့်အတူ affix ကိုအသုံးပြုသောအခါ၊ ပြန်လည်ဆန်းသစ်သည့်နည်းလမ်းကို သင်ခေါ်ဆိုလိုပါမည်-

$ ( '[data-spy="affix"]' )။ တစ်ခုချင်းစီ ( function () {  
  $ ( ဒါ )။ affix ( 'ပြန်လည်စတင်ရန်' )
});

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-offset-top="200"။