د ماډلونو په اړه

یو منظم، مګر انعطاف منونکی، د دودیز جاواسکریپټ ماډل پلگ ان ته یوازې د لږترلږه اړین فعالیت او سمارټ ډیفالټ سره واخلئ.

جامد مثال

لاندې یو په ثابت ډول وړاندې شوی ماډل دی.

ژوندۍ ډیمو

د لاندې تڼۍ په کلیک کولو سره د جاوا سکریپټ له لارې موډل بدل کړئ. دا به د پاڼې له پورتنۍ برخې څخه ښکته او تیاره شي.

د بوټسټریپ ماډل کارول

موډل ته د جاوا سکرپٹ له لارې زنګ ووهئ:

$ ( '#myModal' ). موډل ( اختیارونه )

اختیارونه

مارک اپ

تاسو کولی شئ په اسانۍ سره په خپله پاڼه کې موډلونه فعال کړئ پرته لدې چې د جاوا سکرپٹ یوه کرښه ولیکئ. یوازې data-toggle="modal"د کنټرولر عنصر سره تنظیم کړئ data-target="#foo"یا href="#foo"کوم چې د ماډل عنصر ID سره ورته وي ، او کله چې کلیک وکړئ ، دا به ستاسو ماډل پیل کړي.

همچنان ، ستاسو موډل مثال کې اختیارونه اضافه کولو لپاره ، یوازې دا د کنټرول عنصر یا پخپله موډل مارک اپ کې د اضافي ډیټا ځانګړتیاو په توګه شامل کړئ.

<a class = "btn" data-toggle = "modal" href = "#myModal" > موډل پیل کړئ </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    د تڼۍ ټولګي = "بند" ډاټا - ډسسم = "موډل" > × </ تڼۍ>  
    <h3> موډل سرلیک </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>

میتودونه

موډل (اختیارونه)

ستاسو مینځپانګه د ماډل په توګه فعالوي. یو اختیاري اختیارونه مني object.

$ ( '#myModal' ). موډل ({
  کیبورډ : غلط 
})

موډل('ټوګل')

په لاسي ډول موډل بدلوي.

$ ( '#myModal' ). موډل ( 'ټوګل' )

موډل('شو')

په لاسي ډول موډل خلاصوي.

$ ( '#myModal' ). موډل ( 'شو' )

موډل('پټ')

په لاسي ډول یو موډل پټوي.

$ ( '#myModal' ). موډل ( پټول )

پیښې

د بوټسټریپ موډل کلاس د موډل فعالیت کې د ځړولو لپاره یو څو پیښې افشا کوي.

$ ( '#myModal' ). پر ( 'پټ' ، فنکشن () {   
  // یو څه وکړه…
})

د ښکته کیدو په اړه

د دې ساده پلگ ان سره په بوټسټریپ کې نږدې هرڅه ته د ډراپ ډاون مینو اضافه کړئ. بوټسټریپ په نیوبار، ټبونو او ګولیو کې د بشپړ ډراپ ډاون مینو ملاتړ کوي.

مثالونه

د ډراپ ډاونونو ازموینې لپاره په نیوبار او لاندې ګولیو کې د ډراپ ډاون نیوی لینکونو باندې کلیک وکړئ.

• منظم لینک
• ښکته کول
  • 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>

د یو آر ایل د ساتلو لپاره، د data-targetځای په ځای خاصیت وکاروئ 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()

د ورکړل شوي نیوبار یا ټب شوي نیویګیشن لپاره د مینو فعالولو لپاره یو برنامهیک api.

د ScrollSpy پلگ ان د سکرول موقعیت پراساس د نوي هدفونو په اتوماتيک ډول تازه کولو لپاره دی.

د scrollspy سره navbar بېلګه

لاندې ساحه سکرول کړئ او د نیویګیشن تازه معلومات وګورئ. د ښکته کولو فرعي توکي به هم روښانه شي. هڅه وکړئ!

د bootstrap-scrollspy.js کارول

scrollspy ته د جاوا سکرپٹ له لارې زنګ ووهئ:

$ ( '#navbar' ). scrollspy ()

مارک اپ

ستاسو د ټاپ بار نیویګیشن کې په اسانۍ سره د سکرول سپي چلند اضافه کولو لپاره ، یوازې data-spy="scroll"هغه عنصر ته اضافه کړئ چې تاسو یې جاسوسي غواړئ (په عموم کې دا به بدن وي).

<body data-spy = "سکرول" > ... </body>  

میتودونه

scrollspy('ریفریش')

کله چې د DOM څخه د عناصرو اضافه کولو یا لرې کولو سره په ګډه سکرولسپي وکاروئ ، تاسو اړتیا لرئ د ریفریش میتود ته زنګ ووهئ لکه:

$ ( '[data-spy="scroll"]' ). هر ( فعل () {  
  var $ جاسوس = $ ( دا ). scrollspy ( 'ریفریش' )
});

اختیارونه

پیښې

دا پلگ ان د محلي منځپانګې له لارې د لیږد لپاره چټک، متحرک ټب او د ګولۍ فعالیت زیاتوي.

د بېلګې ټبونه

د پټو پینونو تر منځ د بدلولو لپاره لاندې ټبونو باندې کلیک وکړئ، حتی د ډراپ ډاون مینو له لارې.

• کور
• پروفایل
• ښکته کول
  • @fat
  • @mdo

د bootstrap-tab.js کارول

د جاوا سکرپٹ له لارې د ټب وړ ټبونه فعال کړئ (هر ټب باید په انفرادي ډول فعال شي):

$ ( '#myTab a' ). کلیک وکړئ ( فنکشن ( e ) {  
  e . مخنیوی ډیفالټ ();
  ډالر ( دا ). tab ( 'شو' );
})

تاسو کولی شئ انفرادي ټبونه په څو لارو فعال کړئ:

$ ( '#myTab a[href="#profile"]' ). tab ( 'شو' ); // د نوم په واسطه ټب غوره کړئ 
$ ( '#myTab a:first' ). tab ( 'شو' ); // لومړی ټب غوره کړئ 
$ ( '#myTab a:last' ). tab ( 'شو' ); // وروستی ټب غوره کړئ 
$ ( '#myTab li:eq(2) a' ). tab ( 'شو' ); // دریم ټب غوره کړئ (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" > پیغامونه </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > ترتیبات </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" > پیغامونه </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 = "پیغامونه" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( فعالیت () {  
    $ ( '#myTab a:last' ). tab ( 'شو' );
  })
</script>

پیښې

$ ( 'a[data-toggle="tab"]' ). پر ( ' ښودل شوی ' , فنکشن ( e ) {   
  e . هدف // فعال شوی ټب
  e . اړوند هدف // پخوانی ټب
})

د وسیلو په اړه

د جیسن فریم لخوا لیکل شوي د عالي jQuery.tipsy پلگ ان څخه الهام اخیستل؛ Tooltips یو تازه شوی نسخه ده، کوم چې په انځورونو تکیه نه کوي، د متحرکاتو لپاره css3 کاروي، او د ځایی سرلیک ذخیره کولو لپاره د ډاټا ځانګړتیاوې.

د Tooltips کارولو بېلګه

د وسیلې لارښوونو لیدو لپاره لاندې لینکونو ته ځیر شئ:

د bootstrap-tooltip.js کارول

د جاواسکریپټ له لارې د وسیلې ټایپ پیل کړئ:

$ ( '#مثال' ). وسیلې ( اختیارونه )

اختیارونه

مارک اپ

د فعالیت دلایلو لپاره، Tooltip او Popover data-apis غوره شوي دي. که تاسو غواړئ دوی وکاروئ یوازې د انتخاب کونکي انتخاب مشخص کړئ.

<a href = "#" rel = "tooltip" title = "first tooltip" > په ما باندې ووهئ </a>   

میتودونه

$().تولیپ(اختیارونه)

د عناصرو ټولګه ته د اوزار ټایپ هینډلر ضمیمه کوي.

.tooltip('شو')

د عنصر وسیله ټیپ څرګندوي.

$ ( '# عنصر' ). وسیلې ( 'شو' )

.tooltip('پټ')

د یو عنصر وسیله ټیپ پټوي.

$ ( '# عنصر' ). وسیلې ټپ ( پټول )

.tooltip('ټوګل')

د یو عنصر د وسیلې ټاپ ټګل کوي.

$ ( '# عنصر' ). وسیلې ټپ ( ' ټوګل ' )

د پاپورز په اړه

د منځپانګې کوچنۍ پوښښ اضافه کړئ، لکه په iPad کې، د کور ثانوي معلوماتو لپاره هر عنصر ته.

* Tooltip ته اړتیا لري چې پکې شامل شي

د هور پاپ اوور مثال

د پاپ اوور د پیل کولو لپاره تڼۍ باندې ځړول.

د bootstrap-popover.js کارول

د جاوا سکرپٹ له لارې پاپور فعال کړئ:

$ ( '#مثال' ). پاپور ( اختیارونه )

اختیارونه

مارک اپ

د فعالیت دلایلو لپاره، Tooltip او Popover data-apis غوره شوي دي. که تاسو غواړئ دوی وکاروئ یوازې د انتخاب کونکي انتخاب مشخص کړئ.

میتودونه

$(.popover(اختیارونه)

د عنصر راټولولو لپاره پاپور پیل کوي.

.popover('شو')

د پاپ اوور عناصر څرګندوي.

$ ( '# عنصر' ). پاپور ( 'شو' )

پاپ اوور('پټ')

د پاپ اوور عناصر پټوي.

$ ( '# عنصر' ). پاپور ( 'پټ' )

.popover('ټوګل')

د عناصرو پاپ اوور ټګل کوي.

$ ( '# عنصر' ). پاپ اوور ( ' ټوګل ' )

د خبرتیاو په اړه

د خبرتیا پلگ ان خبرتیاو ته د نږدې فعالیت اضافه کولو لپاره یو کوچنی ټولګی دی.

بېلګې خبرتیاوې

د خبرتیا پلگ ان په منظم خبرتیا پیغامونو کار کوي، او پیغامونه بلاک کوي.

د bootstrap-alert.js کارول

د جاواسکریپټ له لارې د خبرتیا ګوښه کول فعال کړئ:

$ ( ". خبرتیا" ). خبرتیا ()

مارک اپ

یوازې data-dismiss="alert"خپل نږدې تڼۍ ته اضافه کړئ ترڅو په اتوماتيک ډول د خبرتیا نږدې فعالیت ورکړئ.

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

میتودونه

$().خبرتیا()

د نږدې فعالیت سره ټول خبرتیاوې وپلټئ. د دې لپاره چې ستاسو خبرتیاوې د تړلو پر مهال متحرک شي، ډاډ ترلاسه کړئ چې دوی لا دمخه په دوی باندې پلي شوي .fadeاو .inټولګي لري.

خبرتیا('نږدې')

یو خبرتیا بندوي.

$ ( ". خبرتیا" ). خبرتیا ( 'نږدې' )

پیښې

د بوټسټریپ د خبرتیا ټولګي د خبرتیا فعالیت ته د رسیدو لپاره یو څو پیښې افشا کوي.

$ ( '#my-alert' ). bind ( 'تړل' ، فنکشن () {   
  // یو څه وکړه…
})

په اړه

د بټونو سره ډیر څه وکړئ. د کنټرول تڼۍ حالتونه یا د نورو برخو لکه اوزار بارونو لپاره د بټونو ګروپونه رامینځته کړئ.

د کارولو مثالونه

د ریاستونو او ټګلونو لپاره د بټونو پلگ ان وکاروئ.

د bootstrap-button.js کارول

د جاوا سکرپٹ له لارې تڼۍ فعال کړئ:

$ ( '.nav-tabs' ). تڼۍ ()

مارک اپ

د ډیټا ځانګړتیاوې د تڼۍ پلگ ان لپاره لازمي دي. د مختلف مارک اپ ډولونو لپاره لاندې مثال کوډ وګورئ.

<!-- ډیټا-toggle="button" اضافه کړئ ترڅو په یوه تڼۍ کې ټګلینګ فعال کړئ -->
<button class = "btn" data-toggle = "button" > واحد Toggle </button>  
 
<!-- په btn-group کې د چک بکس سټایل ټوګل کولو لپاره data-toggle="buttons-checkbox" اضافه کړئ -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <بټن کلاس = "btn" > چپ </ تڼۍ> 
  <button class = "btn" > منځنی </ تڼۍ> 
  <بټن کلاس = "btn" > ښي </ تڼۍ> 
</div>
 
<!-- په btn-group کې د راډیو سټایل ټوګل کولو لپاره data-toggle="buttons-radio" اضافه کړئ -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <بټن کلاس = "btn" > چپ </ تڼۍ> 
  <button class = "btn" > منځنی </ تڼۍ> 
  <بټن کلاس = "btn" > ښي </ تڼۍ> 
</div>

میتودونه

$().بټن('ټوګل')

د فشار حالت ټوګل کوي. تڼۍ ته داسې بڼه ورکوي چې دا فعاله شوې ده.

<بټن کلاس = "btn" ډاټا-ټوګل = "تڼۍ" > … </ تڼۍ>   

$().بټن('لوډ کول')

د تڼۍ حالت د بارولو لپاره تنظیموي - تڼۍ غیر فعالوي او متن د بارولو متن ته بدلوي. د متن پورته کول باید د ډاټا ځانګړتیا په کارولو سره د تڼۍ په عنصر کې تعریف شي data-loading-text.

<button class = "btn" data-loading-text = "د توکو بارول..." > ... </button>   

$().بټن('ری سیٹ')

د تڼۍ حالت بیا تنظیموي - متن اصلي متن ته بدلوي.

$(). تڼۍ( تار)

د تڼۍ حالت بیا تنظیموي - متن هرډول ډیټا تعریف شوي متن حالت ته بدلوي.

<button class = "btn" data-complete-text = "بشپړ شوی!" ... </ تڼۍ >   
<script>
  $ ( '.btn' ). تڼۍ ( 'بشپړ' )
</script>

په اړه

بیس سټایلونه او انعطاف وړ ملاتړ د سقوط وړ برخو لکه اکارډینز او نیویګیشن لپاره ترلاسه کړئ.

* د شاملولو لپاره د لیږد پلگ ان ته اړتیا لري.

د اکارډیشن بیلګه

د سقوط پلگ ان په کارولو سره، موږ یو ساده اکارډین سټایل ویجټ جوړ کړ:

د bootstrap-collapse.js کارول

د جاوا سکرپٹ له لارې فعال کړئ:

$ ( ". سقوط" ). سقوط ()

اختیارونه

مارک اپ

یوازې عنصر ته اضافه کړئ data-toggle="collapse"او a data-targetپه اتوماتيک ډول د سقوط وړ عنصر کنټرول وټاکئ. خاصیت د data-targetسی ایس ایس انتخاب کونکی مني ترڅو د سقوط پلي کړي. ډاډ ترلاسه کړئ چې ټولګي collapseد سقوط وړ عنصر ته اضافه کړئ. که تاسو غواړئ چې دا په ډیفالټ خلاص شي، اضافي ټولګي اضافه کړئ in.

<بټن کلاس = "btn btn-خطر" data- toggle = "colapse " data-target = "#demo" >   
  ساده د سقوط وړ
</ تڼۍ>
 
<div id = "demo" class = "colapse in" > … </div>  

میتودونه

سقوط (اختیارونه)

ستاسو مینځپانګه د سقوط وړ عنصر په توګه فعالوي. یو اختیاري اختیارونه مني object.

$ ( '#myCollapsible' ). سقوط ({
  تورول : دروغ 
})

سقوط ('ټوګل')

د ښودلو یا پټولو لپاره د سقوط وړ عنصر بدلوي.

سقوط ('شو')

د سقوط وړ عنصر ښیې.

سقوط ('پټ')

د سقوط وړ عنصر پټوي.

پیښې

د بوټسټریپ سقوط ټولګي د سقوط فعالیت ته د رسیدو لپاره یو څو پیښې افشا کوي.

$ ( '#myCollapsible' ). پر ( 'پټ' ، فنکشن () {   
  // یو څه وکړه…
})

په اړه

د عناصرو له لارې د سایکل چلولو لپاره عمومي پلگ ان. په زړه پورې تګ راتګ.

بیلګه carousel

لاندې سلایډ وګورئ.

لومړی تمبیل لیبل

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 کارول

د جاوا سکرپٹ له لارې زنګ ووهئ:

$ ( '.carousel' ). carousel ()

اختیارونه

مارک اپ

د معلوماتو ځانګړتیاوې د تیرو او راتلونکو کنټرولونو لپاره کارول کیږي. لاندې نمونه مارک اپ وګورئ.

<div id = "myCarousel" class = "carousel" >  
  <!-- Carousel توکي -->
  <div class = "carousel-inner" > 
    <div class = "فعال توکي" > … </div> 
    <div class = "توکی" > … </div> 
    <div class = "توکی" > … </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>

میتودونه

carousel(اختیارونه)

د اختیاري اختیارونو سره کاروسیل objectپیل کوي او د توکو له لارې سایکل چلول پیل کوي.

$ ( '.carousel' ). carousel ({
  وقفه : 2000 
})

carousel('سایکل')

د کیروسل توکي له کیڼ څخه ښیې ته بایسکل.

carousel('وقف')

کیروسیل د توکو له لارې د سایکل چلولو مخه نیسي.

carousel(شمیره)

کاروسیل یو ځانګړي چوکاټ ته سایکل کوي (0 پر بنسټ، د سرې سره ورته).

carousel('مخکې')

تیر توکي ته سایکل.

carousel('بل')

راتلونکي توکي ته سایکل.

پیښې

د بوټسټریپ کیروسیل ټولګي د کیروسل فعالیت کې د ځړولو لپاره دوه پیښې افشا کوي.

په اړه

یو بنسټیز، په اسانۍ سره پراخ شوی پلگ ان د هر ډول متن ان پټ سره په چټکۍ سره د ښکلي ټایپ هیډونو جوړولو لپاره.

بېلګه

د ټایپ سر پایلې ښودلو لپاره لاندې ساحه کې ټایپ کول پیل کړئ.

د bootstrap-typeahead.js کارول

د جاوا سکرپٹ له لارې ټایپ هیډ ته زنګ ووهئ:

$ ( '.typeahead' ). ټایپ مخکښ ()

اختیارونه

مارک اپ

د ټایپ هیډ فعالیت سره د عنصر راجستر کولو لپاره د ډیټا ځانګړتیاوې اضافه کړئ.

<د انپټ ډول = "متن" ډاټا - چمتو کول = "ټایپ هیډ" >  

میتودونه

.typeahead(اختیارونه)

د ټایپ هیډ سره ان پټ پیل کوي.