انفرادي یا تالیف شوی

پلگ انونه په انفرادي ډول شامل کیدی شي (که څه هم ځینې یې اړتیا لري)، یا ټول په یوځل کې. دواړه bootstrap.js او bootstrap.min.js په یوه فایل کې ټول پلگ ان لري.

د معلوماتو ځانګړتیاوې

تاسو کولی شئ د جاواسکریپټ یوه کرښه لیکلو پرته د مارک اپ API له لارې په خالص ډول ټول بوټسټریپ پلگ ان وکاروئ. دا د بوټسټریپ لومړی ټولګي API دی او د پلگ ان کارولو پرمهال باید ستاسو لومړی پام وي.

هغه وویل، په ځینو حاالتو کې دا د پام وړ وي چې دا فعالیت بند کړي. له همدې امله، موږ دا وړتیا هم چمتو کوو چې د 'ډاټا-اپي' سره د بدن نوم ځای کې د ټولو پیښو غیر پابند کولو سره د ډیټا خاصیت API غیر فعال کړو. دا داسې ښکاري:

$ ( 'بدن' ). بند ( '.data-api' )

په بدیل سره، د یو ځانګړي پلگ ان په نښه کولو لپاره، یوازې د پلگ ان نوم د نوم ځای په توګه شامل کړئ د ډیټا-api نوم ځای سره دا ډول:

$ ( 'بدن' ). بند ( '.alert.data-api' )

پروګراماتي API

موږ دا هم باور لرو چې تاسو باید د جاواسکریپټ API له لارې په خالص ډول ټول بوټسټریپ پلگ ان وکاروئ. ټول عامه APIs واحد، د زنځیر وړ میتودونه دي، او هغه ټولګه بیرته راولي چې عمل یې کړی.

$ ( ".btn.خطر" ). تڼۍ ( "ټوګل" ). addClass ( "چټک" )

ټولې میتودونه باید د اختیاري اختیارونو اعتراض ومني، یو تار چې یو ځانګړی میتود په نښه کوي، یا هیڅ شی (کوم چې د ډیفالټ چلند سره پلگ ان پیل کوي):

$ ( "#myModal" ). موډل () // د ډیفالټ سره پیل شوی                       
$ ( "#myModal" ). موډل ({ کیبورډ : غلط }) // د کیبورډ پرته پیل شوی     
$ ( "#myModal" ). موډل ( 'شو' ) // سمدلاسه پیل کوي او غوښتنه کوي                

هر پلگ ان خپل خام جوړونکی هم په 'جوړونکي' ملکیت کې افشا کوي: $.fn.popover.Constructor. که تاسو غواړئ یو ځانګړی پلگ ان مثال ترلاسه کړئ، دا په مستقیم ډول له یو عنصر څخه ترلاسه کړئ: $('[rel=popover]').data('popover').

هیڅ شخړه نشته

ځینې ​​​​وختونه دا اړینه ده چې د نورو UI چوکاټونو سره د بوټسټریپ پلگ ان وکاروئ. په دې شرایطو کې، د نوم ځای ټکر کله ناکله واقع کیدی شي. که دا پیښ شي، تاسو کولی .noConflictشئ هغه پلگ ان ته زنګ ووهئ چې تاسو یې غواړئ ارزښت بیرته راوباسئ.

var bootstrapButton = $ . fn _ تڼۍ _ noConflict () // $.fn.button مخکې ټاکل شوي ارزښت ته راستانه کړئ 
$ _ fn _ bootstrapBtn = bootstrapBtn             // $().bootstrapBtn د بوټسټراپ فعالیت

پیښې

بوټسټریپ د ډیری پلگ ان ځانګړي کړنو لپاره دودیز پیښې چمتو کوي. عموما، دا په غیر انتفاعي او پخوانۍ برخه اخیستونکي بڼه کې راځي - چیرې چې انفینیټیوټ (مثال show) د پیښې په پیل کې پیل کیږي، او د هغې پخوانۍ برخه اخیستونکي بڼه (مثال shown) د عمل په بشپړیدو کې محرک دی.

ټولې بې ساري پیښې د مخنیوي ډیفالټ فعالیت چمتو کوي. دا د دې وړتیا چمتو کوي چې د پیل کیدو دمخه د عمل اجرا ودروي.

$ ( '#myModal' ). آن ( 'شو' ، فنکشن ( e ) {   
    که (! ډاټا ) بیرته راستانه شي e . مخنیوی ډیفالټ () // موډل د ښودلو مخه نیسي   
})

د لیږد په اړه

د ساده لیږد اغیزو لپاره، یو ځل د نورو JS فایلونو سره bootstrap-transition.js شامل کړئ. که تاسو تالیف شوی (یا کم شوی) bootstrap.js کاروئ ، نو د دې شاملولو ته اړتیا نشته — دا دمخه شتون لري.

قضیې وکاروئ

د لیږد پلگ ان یو څو مثالونه:

• په موډلونو کې سلیډینګ یا غوړیدل
• د ټبونو له مینځه وړل
• د خبرتیاو له مینځه وړل
• د carousel تختو سلایډ

مثالونه

موډلونه منظم دي، مګر انعطاف وړ، ډیالوګ د لږ تر لږه اړین فعالیت او سمارټ ډیفالټ سره اشاره کوي.

جامد مثال

په فوټر کې د سرلیک، بدن، او د کړنو سیټ سره وړاندې شوی ماډل.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    د تڼۍ ډول = "تڼۍ" طبقه = "بند" ډاټا-ډسمس = "موډل" aria-hidden = "ریښتیا" > × </ تڼۍ>    
    <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>

ژوندۍ ډیمو

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

<!-- د موډل د چلولو تڼۍ -->
<a href = "#myModal" رول = "button" class = "btn" data-toggle = "modal" > ډیمو موډل پیل کړئ </a>    
 
<!-- موډل -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" رول = "dialog" aria-labelledby = "myModalLabel" aria -hidden = "real " >      
  <div class = "modal-header" > 
    د تڼۍ ډول = "تڼۍ" طبقه = "بند" ډاټا-دسمس = "موډل" aria-hidden = "ریښتیا" > × </ تڼۍ>    
    <h3 id = "myModalLabel" > موډل سرلیک </h3> 
  </div>
  <div class = "modal-body" > 
    <p> یو ښه بدن… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria- hidden = "real " > وتړئ </ تڼۍ>   
    <بټن کلاس = "btn btn-primary" > بدلونونه خوندي کړئ </ تڼۍ> 
  </div>
</div>

کارول

د معلوماتو ځانګړتیاو له لارې

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

د تڼۍ ډول = "تڼۍ" ډاټا-ټوګل = "موډل" ډاټا هدف = "#myModal" > موډل پیل کړئ </button>   

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

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

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-backdrop="".

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

میتودونه

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

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

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

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

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

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

موډل('شو')

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

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

موډل('پټ')

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

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

پیښې

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

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

مثالونه

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

د نوي بار دننه

د ټبونو دننه

کارول

د معلوماتو ځانګړتیاو له لارې

data-toggle="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>

د یو آر ایل د ساتلو لپاره، د data-targetځای په ځای خاصیت وکاروئ href="#".

<div class = " dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" رول = "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>

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

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

$ ( '. dropdown-toggle' ). ښکته کول ()

اختیارونه

هیڅ نه

میتودونه

$(). dropdown('toggle')

د ورکړل شوي نیوبار یا ټب شوي نیویګیشن لپاره مینو ته د توګل کولو لپاره یو پروګراماتي API.

په navbar کې مثال

د ScrollSpy پلگ ان د سکرول موقعیت پراساس د نوي هدفونو په اتوماتيک ډول تازه کولو لپاره دی. د نیوبار لاندې ساحه سکرول کړئ او د فعال ټولګي بدلون وګورئ. د ښکته کولو فرعي توکي به هم روښانه شي.

کارول

د معلوماتو ځانګړتیاو له لارې

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

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

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

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

$ ( '#navbar' ). scrollspy ()

میتودونه

scrollspy('ریفریش')

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

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-offset="".

پیښې

د بېلګې ټبونه

د ځایی مینځپانګو پینونو له لارې لیږد لپاره ګړندي ، متحرک ټب فعالیت اضافه کړئ ، حتی د ډراپ ډاون مینو له لارې.

کارول

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

$ ( '#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 کاروي، او د ځایی سرلیک ذخیره کولو لپاره د معلوماتو ځانګړتیاوې.

د فعالیت دلایلو لپاره، د اوزار ټایپ او پاپ اوور ډیټا-اپیس غوره شوي، پدې معنی چې تاسو باید دوی پخپله پیل کړئ .

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

څلور لارې

د ننوتو ګروپونو کې وسیلې

کله چې د بوټسټریپ ان پټ ګروپونو سره د وسیلې ټایپونه او پاپورونه وکاروئ ، نو تاسو به د containerناغوښتل شوي اړخیزو اغیزو مخنیوي لپاره (لاندې مستند شوي) اختیار تنظیم کړئ.

کارول

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

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-animation="".

مارک اپ

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > په ما باندې ځړول </a>   

میتودونه

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

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

.tooltip('شو')

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

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

.tooltip('پټ')

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

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

.tooltip('ټوګل')

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

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

.tooltip('له منځه وړل')

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

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

مثالونه

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

جامد پاپور

څلور اختیارونه شتون لري: پورته، ښیې، ښکته، او کیڼ اړخ ته.

هیڅ مارک اپ د پاپ اوور په توګه نه ښودل شوی د جاواسکریپټ او مینځپانګې څخه په یو dataخاصیت کې رامینځته شوی.

ژوندۍ ډیمو

څلور لارې

کارول

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

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-animation="".

مارک اپ

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

میتودونه

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

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

.popover('شو')

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

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

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

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

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

.popover('ټوګل')

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

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

پاپ اوور('له منځه وړل')

د عنصر پاپ اوور پټوي او له مینځه وړي.

$ ( '# عنصر' ). پاپ اوور ( 'تباه کول' )

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

د دې پلگ ان سره ټولو خبرتیا پیغامونو ته د ګوښه کولو فعالیت اضافه کړئ.

کارول

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

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

مارک اپ

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

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

میتودونه

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

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

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

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

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

پیښې

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

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

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

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

دولتي

data-loading-text="Loading..."په تڼۍ کې د بارولو حالت کارولو لپاره اضافه کړئ .

د تڼۍ ډول = "تڼۍ" کلاس = "btn btn-primary" data-loading-text = "لوډیږي..." > د بارولو حالت </button>   

واحد ټګول

data-toggle="button"په یوه تڼۍ کې د توګل کولو فعالولو لپاره اضافه کړئ .

د تڼۍ ډول = "تڼۍ" کلاس = "btn btn-primary" data-toggle = "button" > واحد ټګل </button>   

چک بکس

data-toggle="buttons-checkbox"په btn ګروپ کې د چیک باکس سټایل ټګلینګ لپاره اضافه کړئ .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  د تڼۍ ډول = "تڼۍ" کلاس = "btn btn-primary" > کیڼ </ تڼۍ>  
  د تڼۍ ډول = "تڼۍ" کلاس = "btn btn-primary" > منځنی </ تڼۍ>  
  د تڼۍ ډول = "تڼۍ" کلاس = "btn btn-primary" > ښي </ تڼۍ>  
</div>

راډیو

data-toggle="buttons-radio"په btn ګروپ کې د راډیو سټایل ټګلینګ لپاره اضافه کړئ .

<div class = "btn-group" data-toggle = "buttons-radio" >  
  د تڼۍ ډول = "تڼۍ" کلاس = "btn btn-primary" > کیڼ </ تڼۍ>  
  د تڼۍ ډول = "تڼۍ" کلاس = "btn btn-primary" > منځنی </ تڼۍ>  
  د تڼۍ ډول = "تڼۍ" کلاس = "btn btn-primary" > ښي </ تڼۍ>  
</div>

کارول

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

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

مارک اپ

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

اختیارونه

هیڅ نه

میتودونه

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

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

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

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

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

د تڼۍ ډول = "تڼۍ" کلاس = "btn" data-loading-text = "د توکو بارول..." > ... </ تڼۍ>    

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

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

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

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

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

په اړه

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

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

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

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

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseOne" >    
        د سقوط وړ ګروپ توکي #1
      </a>
    </div>
    <div id = "collapseOne" class = "د accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        انیم پاریاتور کلیک...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        د ماتیدو وړ ګروپ توکي #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        انیم پاریاتور کلیک...
      </div>
    </div>
  </div>
</div>
...

تاسو کولی شئ د اکارډین مارک اپ پرته پلگ ان وکاروئ. یو تڼۍ جوړ کړئ د بل عنصر پراخیدل او سقوط کول.

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

کارول

د معلوماتو ځانګړتیاو له لارې

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

د تړل کیدو وړ کنټرول ته د اکارډین په څیر ګروپ مدیریت اضافه کولو لپاره ، د ډیټا خاصیت اضافه کړئ data-parent="#selector". ډیمو ته مراجعه وکړئ ترڅو دا په عمل کې وګورئ.

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

په لاسي ډول د دې سره فعال کړئ:

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-parent="".

میتودونه

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

ستاسو مینځپانګه د سقوط وړ عنصر په توګه فعالوي. یو اختیاري اختیارونه مني 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.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "فعال" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 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>

کارول

د معلوماتو ځانګړتیاو له لارې

د کاروسیل موقعیت په اسانۍ سره کنټرولولو لپاره د معلوماتو ځانګړتیاوې وکاروئ. data-slideکلیدي کلمې مني prevیا next، کوم چې د اوسني موقعیت سره سم د سلایډ موقعیت بدلوي. په بدیل سره، کاروسل data-slide-toته د خام سلایډ شاخص لیږدولو لپاره وکاروئ data-slide-to="2"، کوم چې د سلایډ موقعیت یو ځانګړي شاخص ته ځي چې پیل کیږي 0.

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

carousel په لاسي ډول سره زنګ ووهئ:

$ ( '.carousel' ). carousel ()

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاوا سکریپټز له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-interval="".

میتودونه

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

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

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

carousel('سایکل')

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

carousel('وقف')

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

carousel(شمیره)

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

carousel('مخکې')

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

carousel('بل')

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

پیښې

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

بېلګه

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

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

تاسو غواړئ د autocomplete="off"بوټسټریپ ټایپ هیډ ډراپ ډاون کې د ډیفالټ براوزر مینو څرګندیدو مخه ونیسئ.

کارول

د معلوماتو ځانګړتیاو له لارې

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

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

په لاسي ډول ټایپ هیډ ته زنګ ووهئ:

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

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-source="".

میتودونه

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

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

بېلګه

په ښي خوا کې فرعي نیویګیشن د affix پلگ ان ژوندی ډیمو دی.

کارول

د معلوماتو ځانګړتیاو له لارې

د دې لپاره چې په اسانۍ سره هر عنصر ته د عاطفي چلند اضافه کړئ، یوازې هغه عنصر ته اضافه کړئ data-spy="affix"چې تاسو یې جاسوس کول غواړئ. بیا د آفسیټونو څخه کار واخلئ ترڅو تعریف کړئ کله چې د عنصر پننګ کول او یا بند کړئ.

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

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

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

$ ( '#navbar' ). نښلول ()

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-offset-top="200".