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

ပျော့ပျောင်းသော်လည်း လိုက်လျောညီထွေရှိသော၊ အနည်းဆုံးလိုအပ်သော လုပ်ဆောင်နိုင်စွမ်းနှင့် စမတ်ပုံသေများသာရှိသော ရိုးရာ 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" id = "myModal" >  
  <div class = "modal-header" > 
    <a class="close" data-dismiss="modal"> × </a> _ _ _ _ _  
    <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>

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

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

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

$().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>  

ရွေးချယ်မှုများ

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

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

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

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

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

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

$ ( '#myTab' )။ တက်ဘ ် ( 'ရှိုး' )

သေား

မည်သည့် javascript ကိုမျှ မရေးဘဲ တဘ် သို့မဟုတ် ဆေးပြား လမ်းညွှန်ချက် ကို ရိုးရှင်းစွာ သတ်မှတ်ခြင်း data-toggle="tab"သို့မဟုတ် data-toggle="pill"ဒြပ်စင်တစ်ခုပေါ်တွင် သင် အသက်သွင်းနိုင်သည်။

<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 တစ်ခုကို ပစ်မှတ်ထားသည့် `href` တစ်ခုခု ရှိသင့်သည်။

<ul class = "nav nav-tabs" > 
  <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 () {  
    $ ( '.tabs a:last' )။ တက်ဘ ် ( 'ရှိုး' )
  })
</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 မှတဆင့် ခလုတ်များကို ဖွင့်ပါ-

$ ( '.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 = "ခလုတ်များ-ရေဒီယို" >  
  <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>

အကြောင်း

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

ဥပမာ ဘာဂျာ

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

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 ။

ဒုတိယ ပုံသေး အညွှန်း

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' )။ အဝိုင်းလေး ()

ရွေးချယ်မှုများ

သေား

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

<div id = "myCarousel" class = "Carousel" >  
  <!-- ချားရဟတ်များ -->
  <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' )။ စာစီစာရိုက် ()

ရွေးချယ်မှုများ

Markup

Add data attributes to register an element with typeahead functionality.

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

Methods

.typeahead(options)

Initializes an input with a typeahead.