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

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

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

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

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

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

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

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

پروګراماتي API

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

$(.btn.danger").بټن("toggle").addClass("fat")

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

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

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

هیڅ شخړه نشته

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

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

پیښې

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

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

$('#myModal').on('sho', function (e) {
    که (! ډاټا) بیرته راستانه شي e.preventDefault() // موډل د ښودلو مخه نیسي
})

د لیږد په اړه

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

قضیې وکاروئ

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

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

مثالونه

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

جامد مثال

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

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <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" role="button" class="btn" data-toggle="modal">ډیمو موډل پیل کړئ</a>

<!-- موډل -->
<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>

کارول

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

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

<button type="button" data-toggle="modal" data-target="#myModal">موډل پیل کړئ</button>

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

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

$('#myModal').modal(اختیارونه)

اختیارونه

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

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

میتودونه

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

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

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

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

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

$('#myModal').modal('toggle')

موډل('شو')

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

$('#myModal').modal('show')

موډل('پټ')

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

$('#myModal').modal('hide')

پیښې

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

$('#myModal').on('hidden', function () {
  // یو څه وکړه…
})

مثالونه

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

د نوي بار دننه

د ټبونو دننه

کارول

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

data-toggle="dropdown"د ډراپ ډاون بدلولو لپاره لینک یا تڼۍ کې اضافه کړئ .

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown محرک</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

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

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

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

اختیارونه

هیڅ نه

میتودونه

$(). 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"]').each(function () {
  var $spy = $(دا). scrollspy('refresh')
});

اختیارونه

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

پیښې

د بېلګې ټبونه

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

کارول

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

$('#myTab a').کلک(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

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

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

<script>
  $(فعال () {
    $('#myTab a:last').tab('show');
  })
</script>

پیښې

$('a[data-toggle="tab"]').on('sshow', function (e) {
  e.target // فعال شوی ټب
  e.relatedTarget // پخوانی ټب
})

مثالونه

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

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

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

څلور لارې

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

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

کارول

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

$('#example').tooltip(اختیارونه)

اختیارونه

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

مارک اپ

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

میتودونه

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

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

.tooltip('شو')

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

$('#element').tooltip('show')

.tooltip('پټ')

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

$('#element').tooltip('hide')

.tooltip('ټوګل')

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

$('#element').tooltip('toggle')

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

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

$('#element').tooltip('destroy')

مثالونه

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

جامد پاپور

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

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

ژوندۍ ډیمو

څلور لارې

کارول

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

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

اختیارونه

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

مارک اپ

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

میتودونه

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

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

.popover('شو')

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

$('#element').popover('show')

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

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

$('#element').popover('hide')

.popover('ټوګل')

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

$('#element').popover('toggle')

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

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

$('#element').popover('destroy')

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

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

کارول

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

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

مارک اپ

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

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

میتودونه

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

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

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

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

$(.alert").alert('close')

پیښې

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

$('#my-alert').bind('closed', function () {
  // یو څه وکړه…
})

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

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

دولتي

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

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

واحد ټګول

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

<button type="button" class="btn btn-primary" data-toggle="button">واحد توګل</button>

چک بکس

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

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">کیڼ</button>
  <button type="button" class="btn btn-primary">منځنی</button>
  <button type="button" class="btn btn-primary">ښي</button>
</div>

راډیو

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

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">کیڼ</button>
  <button type="button" class="btn btn-primary">منځنی</button>
  <button type="button" class="btn btn-primary">ښي</button>
</div>

کارول

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

$('.nav-tabs').button()

مارک اپ

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

اختیارونه

هیڅ نه

میتودونه

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

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

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

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

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

<button type="button" class="btn" data-loading-text="لوډ کول توکي..." >...</button>

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

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

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

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

<button type="button" class="btn" data-complete-text="ختم!" >...</buton>
<script>
  $('.btn').بټن('بشپړ')
</script>

په اړه

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

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

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

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

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" 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="collapse" data-parent="#accordion2" href="#collapseTwo">
        د ماتیدو وړ ګروپ توکي #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        انیم پاریاتور کلیک...
      </div>
    </div>
  </div>
</div>
...

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

د تڼۍ ډول="بټن" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  ساده د سقوط وړ
</ تڼۍ>

<div id="demo" class="collapse in"> … </div>

کارول

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

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

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

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

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

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

اختیارونه

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

میتودونه

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

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

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

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

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

سقوط ('شو')

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

سقوط ('پټ')

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

پیښې

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

$('#myCollapsible').on('hidden', function () {
  // یو څه وکړه…
})

بیلګه 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="active"></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="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</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('بل')

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

پیښې

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

بېلګه

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

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

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

کارول

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

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

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

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

$('.typeahead').typeahead()

اختیارونه

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

میتودونه

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

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

بېلګه

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

کارول

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

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

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

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

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

$('#navbar').affix()

اختیارونه

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