မော်ဒယ်များအကြောင်း

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

အငြိမ်ဥပမာ

အောက်တွင် ကိန်းသေပုံစံဖြင့် ပြန်ဆိုထားသည်။

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

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

bootstrap-modal ကိုအသုံးပြုခြင်း။

javascript မှတဆင့် modal ကိုခေါ်ဆိုပါ-

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

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

သေား

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

ထို့အပြင်၊ သင်၏ modal instance တွင် ရွေးချယ်စရာများထည့်ရန်၊ ၎င်းတို့ကို control element သို့မဟုတ် modal markup ကိုယ်တိုင်တွင် အပိုဒေတာ attributes အဖြစ် ထည့်သွင်းပါ။

<a class="btn" data-toggle="modal" href="#myModal"> ပစ်လွှတ် သည့် ပုံစံ </a> _ _ _ _ _    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modal ခေါင်းစီး </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('toggle')

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

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

.modal('ရှိုး')

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

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

.modal('ဝှက်')

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

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

အဲ့ဒါနဲ့

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

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

dropdowns အကြောင်း

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

ဥပမာများ

dropdowns စမ်းသပ်ရန် အောက်ဖော်ပြပါ navbar ရှိ dropdown nav လင့်ခ်များကို နှိပ်ပါ။

• ပုံမှန်လင့်ခ်
• ကျသည်
  • Action
  • Another action
  • Something else here
  • Separated link
• ဆွဲချ ၂
  • Action
  • Another action
  • Something else here
  • Separated link
• ဆွဲချ ၃
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js ကိုအသုံးပြုခြင်း။

javascript မှတဆင့် dropdown များကိုခေါ်ဆိုပါ-

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

သေား

မည်သည့်ဒြပ်စင်သို့မဆို dropdown လုပ်ဆောင်နိုင်စွမ်းကို အမြန်ထည့်ရန် ပေါင်းထည့်ရုံဖြင့် data-toggle="dropdown"တရားဝင်သော bootstrap 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အစား 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 ပလပ်အင်သည် scroll position ကိုအခြေခံ၍ nav ပစ်မှတ်များကို အလိုအလျောက် update လုပ်ရန်အတွက်ဖြစ်သည်။

scrollspy ဖြင့် နမူနာ navbar

အောက်ဖော်ပြပါ ဧရိယာကို ရွှေ့ပြီး လမ်းညွှန်မှု အပ်ဒိတ်ကို ကြည့်ပါ။ dropdown sub items ကိုလည်း မီးမောင်းထိုးပြပါမည်။ ကြိုးစားပါ။

bootstrap-scrollspy.js ကိုအသုံးပြုခြင်း။

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

$ ( '#navbar' )။ scrollspy ()

သေား

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

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

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

.scrollspy('refresh')

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

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

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

အဲ့ဒါနဲ့

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

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

dropdown menus များမှတစ်ဆင့် လျှို့ဝှက်အကန့်များကြားပြောင်းရန် အောက်ဖော်ပြပါတဘ်များကို နှိပ်ပါ။

• အိမ်
• ကိုယ်ရေးအကျဉ်း
• ကျသည်
  • @fat
  • @mdo

bootstrap-tab.js ကို အသုံးပြုခြင်း။

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

$ ( '#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-အညွှန်းပြုထားသည်) 

သေား

မည်သည့် javascript ကိုမျှ မရေးဘဲ တဘ် သို့မဟုတ် ဆေးပြား လမ်းညွှန်ချက် ကို ရိုးရှင်းစွာ သတ်မှတ်ခြင်း 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"> မက်ဆေ့ချ်များ </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 တက်ဘ်
  င _ ဆက်စပ်ပစ်မှတ် // ယခင်တက်ဘ ်
})

Tooltips အကြောင်း

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

Tooltips အသုံးပြုပုံ ဥပမာ

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

bootstrap-tooltip.js ကိုအသုံးပြုခြင်း။

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

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

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

သေား

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

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

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

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

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

.tooltip('ရှိုး')

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

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

.tooltip('ဝှက်')

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

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

.tooltip('toggle')

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

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

popover များအကြောင်း

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

* Tooltip ပါဝင်ရန် လိုအပ်သည် ။

ဥပမာ ခုန်ပျံကျော်လွှား

Popover ကိုစတင်ရန် ခလုတ်ကို နှိပ်ပါ။

bootstrap-popover.js ကိုအသုံးပြုခြင်း။

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

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

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

သေား

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

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

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

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

.popover('ရှိုး')

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

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

.popover('ဝှက်')

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

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

.popover('toggle')

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

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

သတိပေးချက်များအကြောင်း

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

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

သတိပေးချက်ပလပ်အင်သည် ပုံမှန်သတိပေးချက်မက်ဆေ့ဂျ်များနှင့် မက်ဆေ့ချ်များကို ပိတ်ဆို့နိုင်သည်။

bootstrap-alert.js ကိုအသုံးပြုခြင်း။

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

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

သေား

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

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

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

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

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

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

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

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

အဲ့ဒါနဲ့

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

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

အကြောင်း

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

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

ပြည်နယ်များနှင့် အဖွင့်အပိတ်များအတွက် ခလုတ်များကို အသုံးပြုပါ။

bootstrap-button.js ကိုအသုံးပြုခြင်း။

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

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

သေား

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

<!-- Add data-toggle="button" ကို ခလုတ်တစ်ခုတည်းတွင် ခလုတ်ဖွင့်ခြင်းကို စတင်ရန် -->
<button class = "btn" data-toggle = "button" > တစ်ခုတည်းပြောင်းရန် </button>  
 
btn-group တွင် checkbox ပုံစံပြောင်းရန်အတွက် <!-- Add data-toggle="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 တွင် ရေဒီယိုပုံစံပြောင်းရန် <!-- Add data-toggle="buttons-radio" -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > ဘယ်ဘက် </button> 
  <button class = "btn" > အလယ် </button> 
  <button class = "btn" > ညာဘက် </button> 
</div>

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

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

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

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

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

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

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

$().button('reset')

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

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

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

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

အကြောင်း

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

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

ဥပမာ ဘာဂျာ

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

bootstrap-collapse.js ကိုအသုံးပြုခြင်း။

javascript မှတဆင့်ဖွင့်ပါ-

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

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

သေား

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

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

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

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

‹ ›

bootstrap-carousel.js ကိုအသုံးပြုခြင်း။

javascript မှတဆင့်ခေါ်ဆိုပါ-

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

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

သေား

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

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

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

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

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

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

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

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

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

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

.carousel(နံပါတ်)

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

.carousel('prev')

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

.carousel('next')

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

အဲ့ဒါနဲ့

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

အကြောင်း

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

ဥပမာ

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

bootstrap-typeahead.js ကိုအသုံးပြုခြင်း။

javascript မှတဆင့် typeahead ကိုခေါ်ပါ

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

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

သေား

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

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

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

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

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