کتنه

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

پلگ انونه په انفرادي ډول شامل کیدی شي (د بوټسټریپ انفرادي *.jsفایلونو په کارولو سره) ، یا ټول په یوځل (د کارولو bootstrap.jsیا کوچني شوي bootstrap.min.js).

د تالیف شوي جاواسکریپټ کارول

دواړه bootstrap.jsاو bootstrap.min.jsپه یوه فایل کې ټول پلگ انونه لري. یوازې یو پکې شامل کړئ.

د پلگ ان انحصار

ځینې ​​​​پلگ انونه او د CSS برخې په نورو پلگ انونو پورې اړه لري. که تاسو په انفرادي ډول فلګونه شامل کړئ، ډاډ ترلاسه کړئ چې په اسنادو کې د دې انحصارونو لپاره وګورئ. دا هم په یاد ولرئ چې ټول پلگ ان په jQuery پورې اړه لري (دا پدې مانا ده چې jQuery باید د پلگ ان فایلونو دمخه شامل شي). زموږ سره مشوره وکړئbower.json ترڅو وګورئ چې د jQuery کومې نسخې ملاتړ کیږي.

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

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

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

$(document).off('.data-api')

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

$(document).off('.alert.data-api')

د معلوماتو ځانګړتیاو له لارې په هر عنصر کې یوازې یو پلگ ان

په ورته عنصر کې د ډیری پلگ انونو څخه د ډیټا ځانګړتیاوې مه کاروئ. د مثال په توګه، یو تڼۍ نشي کولی دواړه وسیله ټیپ ولري او موډل بدل کړي. د دې د ترسره کولو لپاره، د ریپ کولو عنصر وکاروئ.

پروګراماتي API

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

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

ډیفالټ ترتیبات

Constructor.DEFAULTSتاسو کولی شئ د پلگ ان څیز بدلولو سره د پلگ ان لپاره ډیفالټ تنظیمات بدل کړئ:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

هیڅ شخړه نشته

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

پیښې

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

تر 3.0.0 پورې، د بوټسټریپ ټولې پیښې په نوم ځای کې دي.

ټول غیر معمولي پیښې preventDefaultفعالیت چمتو کوي. دا د دې وړتیا چمتو کوي چې د پیل کیدو دمخه د عمل اجرا ودروي.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

د نسخې شمیرې

VERSIONد هر بوټسټریپ jQuery پلگ انونو نسخه د پلگ ان جوړونکي ملکیت له لارې لاسرسی کیدی شي . د مثال په توګه، د اوزار ټایپ پلگ ان لپاره:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

کله چې جاواسکریپټ غیر فعال وي نو کوم ځانګړي فال بیک نشته

د بوټسټریپ پلگ انونه په ځانګړي ډول په زړه پورې نه راځي کله چې جاواسکریپټ غیر فعال وي. که تاسو پدې قضیه کې د کارونکي تجربې ته پاملرنه کوئ ، نو <noscript>د وضعیت تشریح کولو لپاره وکاروئ (او څنګه د جاوا سکریپټ بیا فعال کړئ) خپلو کاروونکو ته ، او/یا خپل دودیز فال بیکونه اضافه کړئ.

د دریمې ډلې کتابتونونه

بوټسټریپ په رسمي ډول د دریمې ډلې جاواسکریپټ کتابتونونو لکه پروټوټایپ یا jQuery UI ملاتړ نه کوي. د .noConflictپیښو او نومونو سره سره، ممکن د مطابقت ستونزې شتون ولري چې تاسو یې پخپله حل کولو ته اړتیا لرئ.

د لیږد لیږد .js

د لیږد په اړه

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

دننه څه دي

Transition.js د پیښو لپاره یو بنسټیز مرستندوی دی transitionEndاو همدارنګه د CSS لیږد ایمولیټر دی. دا د نورو پلگ انونو لخوا کارول کیږي ترڅو د CSS لیږد مالتړ وګوري او ځړول لیږدونه ونیسي.

د لیږد غیر فعال کول

لیږدونه د لاندې جاواسکریپټ سنیپټ په کارولو سره په نړیواله کچه غیر فعال کیدی شي، کوم چې باید د بارولو وروسته transition.js(یا bootstrap.jsیا bootstrap.min.js، لکه څنګه چې قضیه وي) راشي:

$.support.transition = false

موډلونه modal.js

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

ډیری خلاص موډلونه ملاتړ نه کوي

ډاډ ترلاسه کړئ چې موډل خلاص نه کړئ پداسې حال کې چې بل لاهم څرګند دی. په یو وخت کې له یو څخه ډیر ماډل ښودل دودیز کوډ ته اړتیا لري.

د موډل مارک اپ ځای پرځای کول

تل هڅه وکړئ چې د موډل HTML کوډ په خپل سند کې د لوړې کچې موقعیت کې ځای په ځای کړئ ترڅو د نورو برخو څخه مخنیوی وشي چې د موډل ظاهري او/یا فعالیت اغیزه کوي.

د ګرځنده وسیلو خبرداری

په ګرځنده وسیلو کې د ماډلونو کارولو په اړه ځینې احتیاطونه شتون لري. د جزیاتو لپاره زموږ د براوزر ملاتړ سندونه وګورئ.

د دې له امله چې څنګه HTML5 خپل سیمانټیکونه تعریفوي، د autofocusHTML ځانګړتیا د بوټسټراپ ماډلونو کې هیڅ اغیزه نلري. د ورته تاثیر ترلاسه کولو لپاره ، ځینې دودیز جاواسکریپټ وکاروئ:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

مثالونه

جامد مثال

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ژوندۍ ډیمو

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

موډلونه د لاسرسي وړ کړئ

ډاډ ترلاسه کړئ چې اضافه کړئ role="dialog"او aria-labelledby="..."، د موډل سرلیک راجع کول، ته .modal، او ځان role="document"ته .modal-dialog.

aria-describedbyبرسیره پردې، تاسو کولی شئ د خپل موډل ډیالوګ په اړه توضیحات ورکړئ .modal.

د یوټیوب ویډیوګانې شاملول

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

اختیاري اندازه

موډلونه دوه اختیاري اندازې لري، د بدلون کونکي ټولګیو له لارې شتون لري چې په .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

حرکت لرې کړئ

د موډلونو لپاره چې د لیدو لپاره د تیاره کیدو پرځای په ساده ډول څرګندیږي ، .fadeټولګي له خپل ماډل مارک اپ څخه لرې کړئ.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

د گرډ سیسټم کارول

په موډل کې د بوټسټریپ گرډ سیسټم څخه د ګټې اخیستنې لپاره، یوازې په دننه کې نیست .rowاو .modal-bodyبیا د نورمال گرډ سیسټم ټولګي وکاروئ.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

د بټونو یوه ډله لرئ چې ټول ورته موډل رامینځته کوي، یوازې د یو څه مختلف مینځپانګو سره؟ د موډل مینځپانګې توپیر کولو لپاره د HTML ځانګړتیاوې وکاروئ (احتمالا د jQuery له لارې) د دې پورې اړه لري event.relatedTargetچې کوم data-*تڼۍ کلیک شوې . د جزیاتو لپاره د موډل پیښو اسناد وګورئ relatedTarget،

...نور تڼۍ...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

کارول

موډل پلگ ان ستاسو پټ مینځپانګه د غوښتنې سره سم ، د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې بدلوي. دا د ډیفالټ سکرول کولو چلند ته هم اضافه کوي او .modal-openد موډل څخه بهر کلیک کولو پرمهال د ښودل شوي ماډلونو د لرې کولو لپاره د کلیک ساحه چمتو کولو لپاره رامینځته کوي.<body>.modal-backdrop

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

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

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

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

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

اختیارونه

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

نوم ډول ډیفالټ توضیحات
پس منظر بولین یا تار'static' ریښتیا د ماډل شالید عنصر شامل دی. په بدیل سره، staticد شالید لپاره مشخص کړئ کوم چې په کلیک کولو موډل بند نه کوي.
کیبورډ بولین ریښتیا موډل بندوي کله چې د فرار کیلي فشار راوړي
ښودل بولین ریښتیا موډل ښیې کله چې پیل شي.
لرې لاره دروغ

دا اختیار د v3.3.0 راهیسې له مینځه وړل شوی او په v4 کې لرې شوی. موږ د دې پرځای وړاندیز کوو چې د پیرودونکي اړخ ټیمپلینګ یا د ډیټا پابند کولو چوکاټ وکاروئ ، یا پخپله jQuery.load زنګ ووهئ .

که چیرې لیرې یو آر ایل چمتو شي، مینځپانګه به یو ځل د jQuery میتود له لارې پورته شي او په div loadکې داخل شي . .modal-contentکه تاسو د ډاټا-api کاروئ، تاسو کولی شئ په بدیل hrefسره د ریموټ سرچینې مشخص کولو لپاره خاصیت وکاروئ. د دې یوه بیلګه لاندې ښودل شوې ده:

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

میتودونه

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

$('#myModal').modal({
  keyboard: false
})

په لاسي ډول موډل بدلوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې موډل واقعیا ښودل شوی یا پټ شوی وي (د بیلګې په توګه مخکې لدې shown.bs.modalیا hidden.bs.modalپیښه پیښ شي).

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

په لاسي ډول موډل خلاصوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې ماډل واقعیا وښودل شي (یعنې مخکې له دې چې shown.bs.modalپیښه پیښ شي).

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

په لاسي ډول یو موډل پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې موډل واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.modalپیښه پیښ شي).

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

د موډل موقعیت تنظیموي ترڅو د سکرول بار سره مقابله وکړي په هغه صورت کې چې یو یې څرګند شي، کوم چې موډل چپ لوري ته ځي.

یوازې اړتیا ده کله چې د موډل لوړوالی بدل شي پداسې حال کې چې خلاص وي.

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

پیښې

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

ټول موډل پیښې پخپله موډل کې ویشل شوي (یعنې په <div class="modal">).

د پیښې ډول تفصیل
show.bs.modal دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي. که د کلیک له امله رامینځته شي، کلیک شوی عنصر relatedTargetد پیښې ملکیت په توګه شتون لري.
ښودل شوی.bs.modal دا پیښه له مینځه وړل کیږي کله چې موډل کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). که د کلیک له امله رامینځته شي، کلیک شوی عنصر relatedTargetد پیښې ملکیت په توګه شتون لري.
hide.bs.modal دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
hidden.bs.modal دا پیښه له مینځه وړل کیږي کله چې موډل د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
loaded.bs.modal دا پیښه له مینځه وړل کیږي کله چې موډل د remoteاختیار په کارولو سره مینځپانګې بار کړي.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ډراپ ډاون dropdown.js

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

د نوي بار دننه

د ګولیو دننه

د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې، د ډراپ ډاون پلگ ان .openد اصلي لیست توکي کې د ټولګي په بدلولو سره پټ مینځپانګې (ډراپ ډاون مینو) ته بدلون ورکوي.

په ګرځنده وسیلو کې ، د ډراپ ډاون خلاصول .dropdown-backdropد ډراپ ډاون مینو بندولو لپاره د نل ساحې په توګه اضافه کوي کله چې له مینو څخه بهر ټایپ کول ، د مناسب iOS ملاتړ لپاره اړتیا. دا پدې مانا ده چې د خلاص ډراپ ډاون مینو څخه مختلف ډراپ ډاون مینو ته بدلول په موبایل کې اضافي نل ته اړتیا لري.

یادونه: دا data-toggle="dropdown"خاصیت د غوښتنلیک په کچه د ډراپ ډاون مینو بندولو لپاره تکیه کوي ، نو دا ښه نظر دی چې تل یې وکاروئ.

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

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

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

data-toggle="dropdown"لا هم اړتیا ده

پرته لدې چې تاسو د جاواسکریپټ له لارې خپل ډراپ ډاون ته زنګ ووهئ یا د دې پرځای د ډیټا-Api وکاروئ ، data-toggle="dropdown"تل اړین دي چې د ډراپ ډاون محرک عنصر کې شتون ولري.

هیڅ نه

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

ټولې ډراپ ډاؤن پیښې .dropdown-menuد اصلي عنصر څخه ډزې کیږي.

ټول ډراپ ډاؤن پیښې یو relatedTargetملکیت لري، چې ارزښت یې د ټګلینګ اینکر عنصر دی.

د پیښې ډول تفصیل
show.bs.dropdown دا پیښه سمدلاسه ډزې کوي کله چې د ښودلو مثال میتود ویل کیږي.
ښودل شوی.bs.dropdown دا پیښه له مینځه وړل کیږي کله چې ډراپ ډاون کارونکي ته ښکاره شي (د بشپړیدو لپاره به د CSS لیږد انتظار وکړي).
hide.bs.dropdown دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د پټولو مثال میتود بلل شوی وي.
hidden.bs.dropdown دا پیښه له مینځه وړل کیږي کله چې ډراپ ډاون د کارونکي څخه پټ شوی وي (د بشپړیدو لپاره به د CSS لیږد ته انتظار وباسي).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

په navbar کې مثال

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

@ غوړ

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi مخکې له دې چې دوی وپلورل شي qui. د ټمبلر فارم څخه تر میز پورې د بایسکل حق هر څه. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui تاسو شاید د دوی په اړه نه وي اوریدلي et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

وینیم مارفا مستې سکیټبورډ، adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat څلور loko nisi، ea helvetica nulla carles. ټاټو شوي کاسبي سویټر خوراکي لارۍ ، د میکسویني کویس غیر فریګن وینیل. Lo-fi Wes Anderson +1 sartorial. کارلس غیر جمالیاتی تمرین quis gentrify. د بروکلین adipisicing craft beer vice keytar deserunt.

یو

Occaecat commodo aliqua delectus. د فاپ کرافټ بیر ډیزرنټ سکیټ بورډ ea. د لومو بایسکل حقونه ایډپیسیکینګ banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. د لوړ ژوند id vinyl، echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. د DIY لږترلږه میسینجر کڅوړه جوړه کړئ. کریډ ایکس ان، دوامداره ډیلکټس کنسکټټور فینی پیک آی فون.

دوه

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats تاسو شاید د دوی په اړه نه وي اوریدلي چې پایله یې د هوډي ګلوټین فری لو فای فاپ الیکیپ. Labore elit placeat مخکې له دې چې دوی وپلورل شي، د ټیری ریچارډسن پروډینټ برانچ نیسسیونټ کویس کاسبی سویټر پیریټور کیفیه او هیلویټیکا هنرمند. د کارډیګن کرافټ بیر سیتان چمتو شوي ویلیټ. د VHS چیمبری لیبریس لنډمهاله وینیم. Anim mollit minim commodo ullamco thundercats.

کارول

Bootstrap nav ته اړتیا لري

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

د حل وړ ID اهداف اړین دي

د Navbar لینکونه باید د حل وړ ID اهداف ولري. د مثال په توګه، یو <a href="#home">home</a>باید په DOM کې د یو څه سره مطابقت ولري لکه <div id="home"></div>.

غیر :visibleهدفي عناصر له پامه غورځول شوي

د هدف عناصر چې د :visiblejQuery مطابق ندي به له پامه غورځول شي او د دوی اړونده توکي به هیڅکله روښانه نشي.

نسبي موقعیت ته اړتیا لري

مهمه نده چې د پلي کولو میتود وي ، سکرول سپي د position: relative;هغه عنصر کارولو ته اړتیا لري چې تاسو یې جاسوسي کوئ. په ډیرو مواردو کې دا دی <body>. کله چې د غیر نورو عناصرو سکرول کول <body>، ډاډ ترلاسه کړئ چې یو heightسیټ ولرئ او overflow-y: scroll;پلي یې کړئ.

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

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

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

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

ستاسو په سی ایس ایس کې اضافه کولو وروسته position: relative;، د جاواسکریپټ له لارې سکرول سپی ته زنګ ووهئ:

$('body').scrollspy({ target: '#navbar-example' })

میتودونه

.scrollspy('refresh')

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

اختیارونه

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

نوم ډول ډیفالټ توضیحات
بندول شمیره 10 د سکرول موقعیت محاسبه کولو پر مهال له پورتنۍ برخې څخه د خلاصولو لپاره پکسلونه.

پیښې

د پیښې ډول تفصیل
activate.bs.scrollspy دا پیښه هغه وخت اوریږي کله چې یو نوی توکي د سکرول سپي لخوا فعال شي.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

د بدلولو وړ ټبونه tab.js

د بېلګې ټبونه

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

خام ډینم تاسو شاید د جین شارټس آسټین په اړه نه وي اوریدلی. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor، Williamsburg Carles Vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. کاسبي سویټر eu banh mi, qui irure Terry Richardson ex squid. ایلیکیپ پلیسیټ سالویا سیلم آی فون. Seitan aliquip quis cardigan American apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

ټب شوي نیویګیشن پراخوي

دا پلگ ان د ټب شوي نیویګیشن برخې غزوي ترڅو د میز وړ ساحې اضافه کړي.

کارول

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

مارک اپ

تاسو کولی شئ د جاوا سکریپټ لیکلو پرته یو ټب یا د ګولی نیویګیشن په ساده ډول مشخص کولو data-toggle="tab"یا data-toggle="pill"د عنصر په واسطه فعال کړئ. navټب ته د او nav-tabsټولګیو اضافه کول ulبه د بوټسټریپ ټب سټایل پلي کړي ، پداسې حال کې چې د navاو nav-pillsټولګیو اضافه کول به د ګولۍ سټایل پلي کړي .

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

د غوړیدو اغیز

د دې لپاره چې ټبونه تیاره شي، .fadeهر یو ته اضافه کړئ .tab-pane. لومړی ټب پین باید هم باید .inلومړني مینځپانګه ښکاره کړي.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

میتودونه

$().tab

د ټب عنصر او د مینځپانګې کانټینر فعالوي. ټب باید په DOM کې د کانټینر نوډ په نښه کولو data-targetیا هم ولري. hrefپه پورته مثالونو کې، ټبونه د ځانګړتیاوو <a>سره s دي.data-toggle="tab"

.tab('show')

ورکړل شوی ټب غوره کوي او د هغې اړوند مینځپانګه ښیې. کوم بل ټب چې دمخه غوره شوی و غیر انتخاب شوی او د هغې اړوند مینځپانګه پټیږي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د ټب پین واقعیا ښودل شوي وي (یعنې مخکې له دې چې shown.bs.tabپیښه پیښ شي).

$('#someTab').tab('show')

پیښې

کله چې یو نوی ټب وښایاست، پیښې په لاندې ترتیب کې اوریدل کیږي:

  1. hide.bs.tab(په اوسني فعال ټب کې)
  2. show.bs.tab(په ښودل شوي ټب کې)
  3. hidden.bs.tab(په پخواني فعال ټب کې، د hide.bs.tabپیښې لپاره ورته ورته)
  4. shown.bs.tab(په نوي فعال یوازې ښودل شوي ټب کې، د show.bs.tabپیښې لپاره ورته ورته)

که چیرې هیڅ ټب لا دمخه فعال نه و ، نو پیښې hide.bs.tabاو hidden.bs.tabپیښې به نه ویستل کیږي.

د پیښې ډول تفصیل
show.bs.tab دا پیښه د ټب شو باندې ډزې کوي، مګر مخکې له دې چې نوی ټب ښودل شوی وي. په ترتیب سره د فعال ټب او پخوانی فعال ټب (که شتون ولري) وکاروئ event.targetاو په نښه کړئ.event.relatedTarget
ښودل شوی.bs.tab دا پیښه د ټب ښودلو وروسته د ټب ښودلو وروسته خپریږي. په ترتیب سره د فعال ټب او پخوانی فعال ټب (که شتون ولري) وکاروئ event.targetاو په نښه کړئ.event.relatedTarget
hide.bs.tab دا پیښه هغه وخت اوریږي کله چې یو نوی ټب وښودل شي (او پدې توګه پخوانی فعال ټب باید پټ شي). په ترتیب سره اوسني فعال ټب او نوي ژر تر ژره فعال ټب وکاروئ event.targetاو په نښه کړئ.event.relatedTarget
hidden.bs.tab دا پیښه د نوي ټب ښودلو وروسته ډزې کوي (او پدې توګه پخوانی فعال ټب پټ شوی). په ترتیب سره پخوانی فعال ټب او نوی فعال ټب وکاروئ event.targetاو په نښه کړئ.event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

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

د صفر اوږدوالي سرلیکونو سره اوزار لارښوونې هیڅکله نه ښودل کیږي.

مثالونه

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

تنګ پتلون د بلې کچې کیفیه تاسو شاید د دوی په اړه نه وي اوریدلي. د عکس بوټ ږیره خام ډینم لیټرپریس ویگن میسنجر کڅوړه سټمپټاون. د فارم څخه میز سیتان، د میکسویني فکسي پایښت وړ quinoa 8-bit امریکایی پوښاک د ټیری ریچارډسن وینیل چیمبری لري . بیرډ سټمپټاون، کارډیګینس بنه می لومو تندر کیټس. توفو بایوډیزل ویلیامسبرګ مارفا، څلور لوکو مکسوینی کلینز ویګن چیمبری. یو ریښتیني اوسپنیز هنرمند هر څه چې کیتار ، سینسټر فارم څخه تر میز بانکي آسټین ټویټر هینډل فریګن کریډ خام ډینم واحد اصلي کافي ویروس.

جامد وسیلې

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

څلور لارې

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

د غوره کولو فعالیت

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

په یوه پاڼه کې د ټولو وسیلو د پیل کولو یوه لاره به دا وي چې دوی د دوی د data-toggleځانګړتیاوو له مخې غوره کړي:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

کارول

د اوزار ټایپ پلگ ان د غوښتنې پراساس مینځپانګه او مارک اپ رامینځته کوي ، او د ډیفالټ له مخې د دوی محرک عنصر وروسته اوزار ټایپونه ځای په ځای کوي.

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

$('#example').tooltip(options)

مارک اپ

د وسیلې ټایپ لپاره اړین مارک اپ یوازې یو dataخاصیت دی او titleپه HTML عنصر کې تاسو غواړئ د اوزار ټایپ ولرئ. د وسیلې ټایپ رامینځته شوی مارک اپ خورا ساده دی ، که څه هم دا موقعیت ته اړتیا لري (د ډیفالټ لخوا ، topد پلگ ان لخوا ټاکل شوی).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

څو کرښې لینکونه

ځینې ​​​​وختونه تاسو غواړئ په هایپر لینک کې د وسیلې ټایپ اضافه کړئ چې ډیری لینونه پوښي. د وسیلې ټایپ پلگ ان ډیفالټ چلند دا دی چې دا په افقی او عمودی توګه مرکز کړي. white-space: nowrap;د دې څخه مخنیوي لپاره خپلو لنگرونو ته اضافه کړئ .

د تڼۍ ګروپونو، ان پټ ګروپونو، او میزونو کې وسیلې ځانګړي ترتیب ته اړتیا لري

کله چې په a .btn-groupیا an کې دننه عناصرو په اړه د وسیلې لارښوونې وکاروئ .input-group، یا د میز پورې اړوند عناصرو ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>) کې، تاسو باید اختیار مشخص کړئ container: 'body'(لاندې مستند شوی) ترڅو د ناغوښتل شوي اړخیزو اغیزو څخه مخنیوی وشي (لکه عنصر پراخیږي او/ یا خپل ګردي کونجونه له لاسه ورکوي کله چې د وسیلې ټایپ پیل شي).

هڅه مه کوئ چې په پټو عناصرو کې د وسیلې لارښوونې وښایئ

$(...).tooltip('show')کله چې هدف عنصر وي غوښتنه کول به display: none;د دې لامل شي چې د وسیلې ټایپ په غلط ډول ځای په ځای شي.

د کیبورډ او مرستندویه ټیکنالوژۍ کاروونکو لپاره د لاسرسي وړ وسیلې لارښوونې

د هغو کاروونکو لپاره چې د کیبورډ سره حرکت کوي، او په ځانګړې توګه د مرستندویه ټیکنالوژیو کاروونکي، تاسو باید یوازې د کیبورډ تمرکز وړ عناصرو لکه لینکونو، فورمو کنټرولونو، یا د tabindex="0"ځانګړتیاو سره هر ډول خپلمنځي عنصر ته وسیلې اضافه کړئ.

د معیوبو عناصرو په اړه وسیلې د ریپر عناصرو ته اړتیا لري

disabledپه یو یا .disabledعنصر کې د وسیلې ټایپ اضافه کولو لپاره ، عنصر د a دننه کېږدئ او د دې پرځای <div>د اوزار ټایپ پلي کړئ .<div>

اختیارونه

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

نوم ډول ډیفالټ تفصیل
حرکت بولین ریښتیا وسیلې ته د CSS فیډ لیږد پلي کړئ
کانتینر تار | دروغ دروغ

د وسیله ټایپ یو ځانګړي عنصر ته ضمیمه کوي. بېلګه: container: 'body'. دا اختیار په ځانګړي ډول ګټور دی چې دا تاسو ته اجازه درکوي د سند په جریان کې د محرک عنصر ته نږدې د اوزار ټایپ ځای په ځای کړئ - کوم چې به د کړکۍ د بیا اندازې پرمهال د توزیع کونکي عنصر څخه د لرې کیدو مخه ونیسي.

ځنډ شمیره | اعتراض 0

د وسیلې ټایپ ښودل او پټول ځنډول (ms) - د لارښود محرک ډول باندې نه پلي کیږي

که یوه شمیره ورکړل شي، ځنډ د پټولو / ښودلو لپاره کارول کیږي

د شیانو جوړښت دا دی:delay: { "show": 500, "hide": 100 }

html بولین دروغ HTML په وسیلې کې دننه کړئ. که غلط وي، د jQuery textمیتود به په DOM کې د مینځپانګې داخلولو لپاره وکارول شي. متن وکاروئ که تاسو د XSS بریدونو په اړه اندیښمن یاست.
ځای پرځای کول تار | فعالیت 'پورته'

څنګه د وسیلې ټاپ ځای ونیسئ - ټاپ | لاندې | پاتې | حق | اتومات
کله چې "آټو" مشخص شي، دا به په متحرک ډول د وسیلې ټایپ بیا تنظیم کړي. د مثال په توګه، که چیرې ځای پرځای کول "آټوکیټ کیڼ" وي، د وسیله ټایپ به د امکان په صورت کې کیڼ اړخ ته ښکاره شي، که نه نو دا به ښیې ښکاره شي.

کله چې یو فنکشن د ځای پرځای کولو ټاکلو لپاره کارول کیږي، دا د لومړي دلیل په توګه د Tooltip DOM نوډ سره او د محرک عنصر DOM نوډ د دویم په توګه ویل کیږي. thisشرایط د اوزار ټایپ مثال ته ټاکل شوي .

انتخاب کونکی تار دروغ که یو انتخاب کونکی چمتو شي، د اوزار ټایپ توکي به ټاکل شوي هدفونو ته واستول شي. په عمل کې، دا د متحرک HTML مینځپانګې وړولو لپاره کارول کیږي ترڅو د وسیلې لارښوونې اضافه کړي. دا او یو معلوماتي مثال وګورئ .
کينډۍ تار '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

د وسیلې ټایپ رامینځته کولو پرمهال د کارولو لپاره اساس HTML.

د وسیلې ټایپ titleبه په کې داخل شي .tooltip-inner.

.tooltip-arrowد وسیلې د تیر تیر شي.

د بهر تر ټولو لفافه عنصر باید .tooltipټولګي ولري.

عنوان تار | فعالیت ''

د اصلي سرلیک ارزښت که چیرې titleخاصیت موجود نه وي.

که چیرې یو فنکشن ورکړل شي، نو دا به د thisهغه عنصر سره د هغې د حوالې سره ویل کیږي چې د اوزار ټایپ سره نښلول کیږي.

محرک تار د تمرکز تمرکز د وسیلې ټایپ څنګه پیل کیږي - کلیک | هور | تمرکز | لارښود تاسو ممکن ډیری محرکونه تیر کړئ؛ دوی د ځای سره جلا کړئ. manualد کوم بل محرک سره یوځای نشي.
viewport تار | څيز | فعالیت {ټاکونکی: 'بدن'، پیډینګ: 0 }

د دې عنصر په حدودو کې د اوزار ټایپ ساتي. بېلګه: viewport: '#viewport'یا{ "selector": "#viewport", "padding": 0 }

که یو فنکشن ورکړل شي، دا د محرک عنصر DOM نوډ سره د یوازینۍ دلیل په توګه ویل کیږي. thisشرایط د اوزار ټایپ مثال ته ټاکل شوي .

د انفرادي وسیلو لپاره د معلوماتو ځانګړتیاوې

د انفرادي وسیلو لپاره اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي ، لکه څنګه چې پورته تشریح شوي.

میتودونه

$().tooltip(options)

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

.tooltip('show')

د عنصر وسیله ټیپ څرګندوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د وسیلې ټایپ واقعیا وښودل شي (یعنې مخکې له دې چې shown.bs.tooltipپیښه پیښ شي). دا د وسیلې ټایپ "دستي" محرک ګڼل کیږي. د صفر اوږدوالي سرلیکونو سره اوزار لارښوونې هیڅکله نه ښودل کیږي.

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

.tooltip('hide')

د یو عنصر وسیله ټیپ پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د وسیلې ټایپ واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.tooltipپیښه پیښ شي). دا د وسیلې ټایپ "دستي" محرک ګڼل کیږي.

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

.tooltip('toggle')

د یو عنصر د وسیلې ټاپ ټګل کوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د وسیلې ټایپ واقعیا ښودل شوي یا پټ شوي وي (د بیلګې په توګه مخکې لدې چې پیښه shown.bs.tooltipیا hidden.bs.tooltipپیښه پیښ شي). دا د وسیلې ټایپ "دستي" محرک ګڼل کیږي.

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

.tooltip('destroy')

د عنصر وسیله ټیپ پټوي او ویجاړوي. وسیلې چې د پلاوي څخه کار اخلي (کوم چې د selectorاختیار په کارولو سره رامینځته شوي ) نشي کولی په انفرادي ډول د نسل محرک عناصرو له مینځه ویسي.

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

پیښې

د پیښې ډول تفصیل
show.bs.tooltip دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
ښودل شوی.bs.tooltip دا پیښه له مینځه وړل کیږي کله چې د وسیلې ټایپ کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
hide.bs.tooltip دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
hidden.bs.tooltip دا پیښه له مینځه وړل کیږي کله چې د وسیلې ټایپ د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
inserted.bs.tooltip دا پیښه د show.bs.tooltipپیښې وروسته له مینځه وړل کیږي کله چې د اوزار ټایپ ټیمپلیټ DOM ته اضافه شوی وي.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

Popovers چې دواړه سرلیک او مینځپانګه صفر اوږدوالی لري هیڅکله نه ښودل کیږي.

د پلگ ان انحصار

Popovers د Tooltip پلگ ان ته اړتیا لري ترڅو ستاسو د بوټسټریپ نسخه کې شامل شي.

د غوره کولو فعالیت

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

په یوه پاڼه کې د ټولو پاپورونو پیل کولو یوه لاره به دا وي چې دوی د دوی د data-toggleځانګړتیاوو له مخې غوره کړي:

$(function () {
  $('[data-toggle="popover"]').popover()
})

د تڼۍ ګروپونو، ان پټ ګروپونو، او میزونو کې پاپورونه ځانګړي ترتیب ته اړتیا لري

کله چې په a .btn-groupیا an کې دننه عناصرو .input-groupباندې یا د میز پورې اړوند عناصرو ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>) کې د پاپورونو کارول، تاسو باید اختیار مشخص کړئ container: 'body'(لاندې مستند شوی) ترڅو د ناغوښتل شوي اړخیزو اغیزو څخه مخنیوی وشي (لکه عنصر پراخیږي او/ یا خپل ګردي کونجونه له لاسه ورکوي کله چې پاپ اوور پیل شي).

هڅه مه کوئ چې په پټو عناصرو کې پاپورونه وښایئ

غوښتنه $(...).popover('show')کول کله چې هدف عنصر وي د display: none;دې لامل کیږي چې پاپ اوور په غلط ډول ځای په ځای شي.

په معیوب عناصرو کې پاپور د ریپر عناصرو ته اړتیا لري

disabledپه یو یا .disabledعنصر کې د پاپ اوور اضافه کولو لپاره ، عنصر د a دننه <div>کېږدئ او د هغې پرځای پاپ اوور پلي کړئ <div>.

څو کرښې لینکونه

ځینې ​​​​وختونه تاسو غواړئ په هایپر لینک کې پاپ اوور اضافه کړئ چې ډیری لینونه پوښي. د پاپ اوور پلگ ان ډیفالټ چلند دا دی چې دا په افقی او عمودی توګه مرکز کړي. white-space: nowrap;د دې څخه مخنیوي لپاره خپلو لنگرونو ته اضافه کړئ .

مثالونه

جامد پاپور

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

د پاپور پورته

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپور حق

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

د پوپور لاندې

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپور پاتې شو

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ژوندۍ ډیمو

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

څلور لارې

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

په بل کلیک کې رد کړئ

focusپه بل کلیک کې چې کارن یې کوي د پاپورونو لرې کولو لپاره محرک وکاروئ .

ځانګړي مارک اپ د برطرف کولو لپاره په بل کلیک کې اړین دی

د مناسب کراس براوزر او کراس پلیټ فارم چلند لپاره، تاسو باید <a>ټاګ وکاروئ، نه<button> ټاګ، او تاسو باید دا او ځانګړتیاوې هم شامل role="button"کړئ tabindex.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

کارول

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

$('#example').popover(options)

اختیارونه

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

نوم ډول ډیفالټ تفصیل
حرکت بولین ریښتیا پاپ اوور ته د CSS فیډ لیږد پلي کړئ
کانتینر تار | دروغ دروغ

یو ځانګړي عنصر ته پاپ اوور ضمیمه کوي. بېلګه: container: 'body'. دا اختیار په ځانګړې توګه ګټور دی چې دا تاسو ته اجازه درکوي چې د محرک عنصر ته نږدې د سند په جریان کې پاپ اوور ځای په ځای کړئ - کوم چې به د کړکۍ د بیا اندازې پرمهال د محرک عنصر څخه د پاپ اوور د تیریدو مخه ونیسي.

منځپانګه تار | فعالیت ''

د اصلي منځپانګې ارزښت کهdata-content خاصیت موجود نه وي.

که یو فنکشن ورکړل شي، نو دا به د thisهغه عنصر ته د هغې د حوالې سره ویل کیږي چې پاپ اوور ورسره وصل دی.

ځنډ شمیره | اعتراض 0

د پاپ اوور (ms) ښودل او پټول ځنډول - د لارښود محرک ډول باندې نه پلي کیږي

که یوه شمیره ورکړل شي، ځنډ د پټولو / ښودلو لپاره کارول کیږي

د شیانو جوړښت دا دی:delay: { "show": 500, "hide": 100 }

html بولین دروغ په پاپ اوور کې HTML داخل کړئ. که غلط وي، د jQuery textمیتود به په DOM کې د مینځپانګې داخلولو لپاره وکارول شي. متن وکاروئ که تاسو د XSS بریدونو په اړه اندیښمن یاست.
ځای پرځای کول تار | فعالیت 'حق'

څنګه د پاپ اوور ځای ونیسئ - ټاپ | لاندې | پاتې | حق | اتومات
کله چې "آټو" مشخص شي، دا به په متحرک ډول پاپ اوور بیا تنظیم کړي. د مثال په توګه، که چیرې ځای پرځای کول "آتو کیڼ" وي، پاپ اوور به د امکان په صورت کې کیڼ اړخ ته ښکاره شي، که نه نو دا به ښیې ښکاره شي.

کله چې یو فنکشن د ځای پرځای کولو لپاره کارول کیږي، دا د پاپ اوور DOM نوډ سره د لومړي دلیل په توګه او د محرک عنصر DOM نوډ د دویم په توګه ویل کیږي. thisشرایط د پاپ اوور مثال ته ټاکل شوي .

انتخاب کونکی تار دروغ که یو انتخاب کونکی چمتو شي، د پاپ اوور توکي به ټاکل شوي اهدافو ته واستول شي. په عمل کې، دا د متحرک HTML مینځپانګې وړولو لپاره کارول کیږي ترڅو پاپورونه اضافه کړي. دا او یو معلوماتي مثال وګورئ .
کينډۍ تار '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

د پاپ اوور رامینځته کولو پرمهال د کارولو لپاره اساس HTML.

پاپ اوور titleبه په کې داخل شي .popover-title.

پاپ اوور contentبه په کې داخل شي .popover-content.

.arrowد پاپ اوور تیر به شي.

د بهر تر ټولو لفافه عنصر باید .popoverټولګي ولري.

عنوان تار | فعالیت ''

د اصلي سرلیک ارزښت که چیرې titleخاصیت موجود نه وي.

که یو فنکشن ورکړل شي، نو دا به د thisهغه عنصر ته د هغې د حوالې سره ویل کیږي چې پاپ اوور ورسره وصل دی.

محرک تار 'کلک' پاپ اوور څنګه پیل کیږي - کلیک | هور | تمرکز | لارښود تاسو ممکن ډیری محرکونه تیر کړئ؛ دوی د ځای سره جلا کړئ. manualد کوم بل محرک سره یوځای نشي.
viewport تار | څيز | فعالیت {ټاکونکی: 'بدن'، پیډینګ: 0 }

د دې عنصر په حدودو کې پاپ اوور ساتي. بېلګه: viewport: '#viewport'یا{ "selector": "#viewport", "padding": 0 }

که یو فنکشن ورکړل شي، دا د محرک عنصر DOM نوډ سره د یوازینۍ دلیل په توګه ویل کیږي. thisشرایط د پاپ اوور مثال ته ټاکل شوي .

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

د انفرادي پاپورونو اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي ، لکه څنګه چې پورته تشریح شوي.

میتودونه

$().popover(options)

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

.popover('show')

د عنصر پاپ اوور څرګندوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې پاپ اوور واقعیا وښودل شي (یعنې مخکې له دې چې shown.bs.popoverپیښه پیښ شي). دا د پاپ اوور "دستي" محرک ګڼل کیږي. Popovers چې دواړه سرلیک او مینځپانګه صفر اوږدوالی لري هیڅکله نه ښودل کیږي.

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

.popover('hide')

د عنصر پاپ اوور پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې پاپ اوور واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.popoverپیښه پیښ شي). دا د پاپ اوور "دستي" محرک ګڼل کیږي.

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

.popover('toggle')

د عنصر پاپ اوور ټګل کوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې پاپ اوور واقعیا ښودل شوي یا پټ شوي وي (د بیلګې په توګه مخکې لدې چې پیښه shown.bs.popoverیا hidden.bs.popoverپیښه پیښ شي). دا د پاپ اوور "دستي" محرک ګڼل کیږي.

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

.popover('destroy')

د عنصر پاپ اوور پټوي او له مینځه وړي. پوپوورونه چې د پلاوي څخه کار اخلي (کوم چې د selectorاختیار په کارولو سره رامینځته شوي ) نشي کولی په انفرادي ډول د نسل محرک عناصرو له مینځه ویسي.

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

پیښې

د پیښې ډول تفصیل
show.bs.popover دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
ښودل شوی.bs.popover دا پیښه له مینځه وړل کیږي کله چې پاپ اوور کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
hide.bs.popover دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
hidden.bs.popover دا پیښه له مینځه وړل کیږي کله چې پاپ اوور د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
inserted.bs.popover دا پیښه د show.bs.popoverپیښې وروسته له مینځه وړل کیږي کله چې د پاپ اوور ټیمپلیټ DOM ته اضافه شوی وي.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

د خبرتیا پیغامونه alert.js

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

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

کله چې .closeتڼۍ وکاروئ، دا باید د لومړي ماشوم وي .alert-dismissibleاو هیڅ متن منځپانګه په مارک اپ کې مخکې نه راځي.

کارول

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

میتودونه

$().alert()

د نسلي عناصرو په اړه د کلیک پیښو لپاره خبرتیا اوریدل کیږي کوم چې data-dismiss="alert"ځانګړتیا لري. (ضرورت نلري کله چې د ډیټا-اپي اتومات پیل کول وکاروئ.)

$().alert('close')

د DOM څخه د لرې کولو له لارې خبرتیا بندوي. که چیرې .fadeاو .inټولګي په عنصر کې شتون ولري، خبرتیا به مخکې له دې چې لیرې شي له منځه ځي.

پیښې

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

د پیښې ډول تفصیل
close.bs.alert دا پیښه سمدلاسه اوریږي کله چې د closeمثال میتود ویل کیږي.
تړل شوی بی بی خبرتیا دا پیښه له مینځه وړل کیږي کله چې خبرتیا تړل شوې وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

تڼۍ button.js

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

د کراس براوزر مطابقت

فایرفوکس د پاڼي بارونو په اوږدو کې د کنټرول حالتونو (معیوبیت او چک کیدو) ته دوام ورکوي . د دې لپاره د حل لاره کارول autocomplete="off"دي. د موزیلا بګ #654072 وګورئ .

دولتي

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

دا خصوصیت د v3.3.5 راهیسې له مینځه وړل شوی او په v4 کې لرې شوی.

هر هغه حالت وکاروئ چې تاسو یې خوښوئ!

د دې مظاهرې لپاره، موږ کاروو data-loading-textاو $().button('loading')، مګر دا یوازینی دولت نه دی چې تاسو یې کارولی شئ. په دې اړه نور په لاندې اسنادو کې وګورئ$().button(string) .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

واحد ټګول

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

مخکې toggled تڼۍ ته اړتيا لري .activeاوaria-pressed="true"

د پری ټګل شوي بټونو لپاره، تاسو باید .activeټولګي او ځان aria-pressed="true"ته ځانګړتیا اضافه buttonکړئ.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

چک بکس / راډیو

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

مخکې ټاکل شوي انتخابونو ته اړتیا ده.active

د انتخاب شوي انتخابونو لپاره، تاسو باید .activeټولګي د خپل ځان په داخل کې اضافه labelکړئ.

د لید لید حالت یوازې په کلیک کې تازه شوی

که چیرې د چک بکس تڼۍ چک شوي حالت په تڼۍ کې د clickپیښې له ډزو پرته تازه شي (د مثال په توګه د ان پټ ملکیت <input type="reset">تنظیم کولو له لارې یا له لارې checked)، تاسو به اړتیا ولرئ .activeټولګي په ان پټ کې پخپله بدل labelکړئ.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

میتودونه

$().button('toggle')

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

$().button('reset')

د تڼۍ حالت بیا تنظیموي - متن اصلي متن ته بدلوي. دا میتود غیر متناسب دی او بیرته راستنیږي مخکې لدې چې ری سیٹ کول واقعیا بشپړ شي.

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

سقوط کول collaps.js

انعطاف وړ پلگ ان چې د اسانه ټوګل چلند لپاره یو څو ټولګي کاروي.

د پلگ ان انحصار

سقوط د لیږد پلگ ان ته اړتیا لري ترڅو ستاسو د بوټسټریپ نسخه کې شامل شي.

بېلګه

د ټولګي بدلونونو له لارې د بل عنصر ښودلو او پټولو لپاره لاندې بټونو کلیک وکړئ:

  • .collapseمواد پټوي
  • .collapsingد لیږد پر مهال پلي کیږي
  • .collapse.inمنځپانګه ښيي

تاسو کولی شئ د ځانګړتیا سره یو لینک hrefوکاروئ، یا د ځانګړتیا سره تڼۍ data-target. په دواړو حالتونو کې، data-toggle="collapse"دا اړینه ده.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

د ډیفالټ سقوط چلند پراخ کړئ ترڅو د پینل برخې سره یو اکارډین رامینځته کړي.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. د خوړو لارۍ quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt تاسو شاید د دوی په اړه نه وي اوریدلي چې د دوامدار VHS په اړه کار کوي.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. د خوړو لارۍ quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt تاسو شاید د دوی په اړه نه وي اوریدلي چې د دوامدار VHS په اړه کار کوي.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. د خوړو لارۍ quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt تاسو شاید د دوی په اړه نه وي اوریدلي چې د دوامدار VHS په اړه کار کوي.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

دا هم ممکنه ده چې د .panel-bodys سره .list-groups بدل کړئ.

  • بوټپلی
  • یو ایټمس ac facilin
  • دوهم eros

د لاسرسۍ وړ کنټرول پراخول / ماتول

ډاډ ترلاسه کړئ aria-expandedچې د کنټرول عنصر ته اضافه کړئ. دا خاصیت د سکرین لوستونکو او ورته مرستندویه ټیکنالوژیو ته د سقوط وړ عنصر اوسنی حالت په واضح ډول تعریفوي. که د سقوط وړ عنصر د ډیفالټ په واسطه تړل شوی وي، دا باید د ارزښت ولري aria-expanded="false". که تاسو د inټولګي په کارولو سره د ډیفالټ په واسطه د خلاصیدو وړ عنصر تنظیم کړی وي ، aria-expanded="true"نو پرځای یې کنټرول تنظیم کړئ. پلگ ان به په اوتومات ډول دا خاصیت د دې پراساس بدل کړي چې ایا د سقوط وړ عنصر خلاص شوی یا بند شوی.

برسیره پردې، که ستاسو د کنټرول عنصر یو واحد مات کیدونکی عنصر په نښه کوي - د بیلګې په توګه data-targetځانګړتیا یو انتخاب کونکي ته اشاره کوي - تاسو ممکن د کنټرول عنصر ته idاضافي ځانګړتیا اضافه کړئ ، چې د سقوط وړ عنصر لري. عصري سکرین لوستونکي او ورته مرستندویه ټیکنالوژي د دې ځانګړتیا څخه کار اخلي ترڅو کاروونکو ته اضافي شارټ کټونه چمتو کړي ترڅو مستقیم د سقوط وړ عنصر ته لاړ شي.aria-controlsid

کارول

د سقوط پلگ ان د دروند پورته کولو اداره کولو لپاره څو ټولګي کاروي:

  • .collapseمواد پټوي
  • .collapse.inمنځپانګه ښيي
  • .collapsingاضافه کیږي کله چې لیږد پیل شي، او کله چې پای ته ورسیږي لرې کیږي

دا ټولګي په کې موندل کیدی شي component-animations.less.

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

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

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

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

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

$('.collapse').collapse()

اختیارونه

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

نوم ډول ډیفالټ توضیحات
مور او پلار انتخاب کونکی دروغ که یو ټاکونکی چمتو شوی وي، نو د ټاکل شوي پلار لاندې ټول تړل کیدونکي عناصر به وتړل شي کله چې دا د سقوط وړ توکي وښودل شي. (د دودیز اکارډین چلند سره ورته - دا په panelټولګي پورې اړه لري)
بدلول بولین ریښتیا په بلنه کې د سقوط وړ عنصر بدلوي

میتودونه

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

د ښودلو یا پټولو لپاره د سقوط وړ عنصر بدلوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د سقوط وړ عنصر واقعیا ښودل شوي یا پټ شوي وي (د بیلګې په توګه مخکې لدې چې shown.bs.collapseیا hidden.bs.collapseپیښه پیښ شي).

.collapse('show')

د سقوط وړ عنصر ښیې. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د سقوط وړ عنصر واقعیا ښودل شوی وي (یعنې مخکې له دې چې shown.bs.collapseپیښه پیښ شي).

.collapse('hide')

د سقوط وړ عنصر پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې د سقوط وړ عنصر واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.collapseپیښه پیښ شي).

پیښې

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

د پیښې ډول تفصیل
show.bs.collapse دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
ښودل شوی.bs.collaps دا پیښه له مینځه وړل کیږي کله چې د سقوط عنصر کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
hide.bs.collapse دا پیښه سمدلاسه له مینځه وړل کیږي کله چې hideمیتود ویل کیږي.
hidden.bs.collapse دا پیښه له مینځه وړل کیږي کله چې د سقوط عنصر د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

carousel carousel.js

د عناصرو له لارې د سایکل چلولو لپاره د سلاید شو اجزا، لکه د کیروسل. ځړول شوي carousels نه ملاتړ کیږي.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

.carousel-captionپه اسانۍ سره په هر یو کې د عنصر سره خپلو سلایډونو ته سرلیکونه اضافه کړئ .item. هلته دننه هر ډول اختیاري HTML ځای په ځای کړئ او دا به په اوتومات ډول تنظیم او فارمیټ شي.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

څو carousels

Carousels د کاروسیل کنټرولونو د سم فعالیت لپاره idپه بهر کې ترټولو بهر کانټینر (د ) کارولو ته اړتیا لري . .carouselکله چې ډیری کیروسلونه اضافه کړئ، یا کله چې د کاروسیل بدل idکړئ، ډاډ ترلاسه کړئ چې اړوند کنټرولونه تازه کړئ.

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

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

دا data-ride="carousel"خاصیت د کاروسیل په نښه کولو لپاره کارول کیږي لکه څنګه چې د مخ په بار کې پیل کیږي. دا د ورته کاروسیل د (بې ځایه او غیر ضروري) واضح جاواسکریپټ ابتکار سره په ترکیب کې نشي کارول کیدی.

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

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

$('.carousel').carousel()

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

نوم ډول ډیفالټ توضیحات
وقفه شمیره 5000 د یو توکي په اتوماتيک ډول سایکل چلولو تر منځ د ځنډولو وخت. که غلط وي، carousel به په اتوماتيک ډول سایکل نشي.
وقفه تار | null "هور" که ټاکل شوی وي "hover"، د کاروسیل سایکل چلول ودروي mouseenterاو د کاروسیل سایکل چلول بیا پیلوي mouseleave. که ټاکل شوی وي null، په کاروسل باندې ځړول به دا ودروي.
لپاسه بولین ریښتیا آیا کاروسیل باید په دوامداره توګه سایکل وکړي یا سخت تمځایونه ولري.
کیبورډ بولین ریښتیا آیا کاروسیل باید د کیبورډ پیښو ته عکس العمل ښکاره کړي.

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

$('.carousel').carousel({
  interval: 2000
})

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

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

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

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

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

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

دواړه پیښې لاندې اضافي ځانګړتیاوې لري:

  • direction: هغه لوري چې کیروسل په کې تیریږي (یا "left"یا "right").
  • relatedTarget: د DOM عنصر چې د فعال توکي په توګه ځای پرځای شوی.

د carousel ټولې پیښې پخپله په carousel کې ډزې کیږي (یعنې په <div class="carousel">).

د پیښې ډول تفصیل
slide.bs.carousel دا پیښه سمدلاسه اوریږي کله چې د slideمثال میتود غوښتنه کیږي.
slid.bs.carousel دا پیښه له مینځه وړل کیږي کله چې کیروسل خپل سلایډ لیږد بشپړ کړی وي.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js _

بېلګه

د affix پلگ ان فعال position: fixed;او غیر فعال کیږي، د اغیز سره موندل شوي انډول کوي position: sticky;. په ښي خوا کې فرعي نیویګیشن د انفیکس پلگ ان ژوندی ډیمو دی.


کارول

د ډیټا ځانګړتیاو له لارې یا په لاسي ډول د خپل جاواسکریپټ سره د affix پلگ ان وکاروئ. په دواړو حالتونو کې، تاسو باید د خپل تړل شوي مینځپانګې موقعیت او عرض لپاره CSS چمتو کړئ.

یادونه: د افیکس پلگ ان په هغه عنصر کې مه کاروئ چې په نسبتا موقعیت لرونکي عنصر کې شتون لري، لکه د سفاري رینډرینګ بګ له امله یو ایستل شوی یا فشار شوی کالم .

د CSS له لارې موقعیت ورکول

د انفیکس پلگ ان د دریو ټولګیو تر مینځ بدلیږي، هر یو د یو ځانګړي حالت استازیتوب کوي: .affix،، .affix-topاو .affix-bottom. تاسو باید سټایلونه چمتو کړئ ، پرته له استثنا سره position: fixed;، .affixد دې ټولګیو لپاره پخپله (د دې پلگ ان څخه خپلواک) د اصلي موقعیتونو اداره کولو لپاره.

دلته دا دی چې څنګه د افکس پلگ ان کار کوي:

  1. د پیل کولو لپاره، پلگ ان زیاتوي .affix-topچې دا په ګوته کوي چې عنصر په خپل ترټولو لوړ موقعیت کې دی. پدې مرحله کې د CSS موقعیت ته اړتیا نشته.
  2. د هغه عنصر تیریدل چې تاسو یې غواړئ وصل کړئ باید ریښتیني تړاو رامینځته کړي. دا هغه ځای دی چې .affixځای په ځای کوي .affix-topاو سیټ position: fixed;کوي (د Bootstrap د CSS لخوا چمتو شوی).
  3. که چیری لاندینی آفسیټ تعریف شوی وي، د تیر وخت سکرول کول باید د .affixسره بدل شي .affix-bottom. څرنګه چې آفسیټونه اختیاري دي، د یو ترتیب کول تاسو ته اړتیا لري چې مناسب CSS تنظیم کړئ. په دې حالت کې، د اړتیا په صورت کې اضافه کړئ position: absolute;. پلگ ان د ډیټا خاصیت یا جاواسکریپټ اختیار کاروي ترڅو معلومه کړي چې له هغه ځای څخه عنصر چیرته موقعیت لري.

د لاندې کارولو اختیارونو څخه د هر یو لپاره خپل CSS تنظیم کولو لپاره پورته ګامونه تعقیب کړئ.

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

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

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

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

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

اختیارونه

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

نوم ډول ډیفالټ توضیحات
بندول شمیره | فعالیت | اعتراض 10 د سکرول موقعیت محاسبه کولو پر مهال د سکرین څخه د خلاصولو لپاره پکسلونه. که یو واحد شمیره چمتو شي، آفسیټ به په پورتنۍ او ښکته دواړو لارښوونو کې پلي شي. د یو ځانګړي ، لاندې او پورتنۍ آفسیټ چمتو کولو لپاره یوازې یو څیز چمتو کړئ offset: { top: 10 }یا offset: { top: 10, bottom: 5 }. یو فنکشن وکاروئ کله چې تاسو اړتیا لرئ په متحرک ډول د آفسیټ محاسبه وکړئ.
هدف انتخاب کونکی | نوډ | jQuery عنصر windowڅيز _ د اتصال هدف عنصر مشخص کوي.

میتودونه

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

د اړونده عناصرو د ابعادو، موقعیت او سکرول موقعیت پراساس د اتصال حالت بیا محاسبه کوي. .affix، .affix-top، او ټولګي د .affix-bottomنوي حالت سره سم د ضمیمه شوي مینځپانګې څخه اضافه شوي یا لرې کیږي. دا میتود ته اړتیا ده کله چې د نښلول شوي مینځپانګې ابعاد یا هدف عنصر بدل شي ، ترڅو د نښل شوي مینځپانګې سم موقعیت یقیني شي.

$('#myAffix').affix('checkPosition')

پیښې

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

د پیښې ډول تفصیل
affix.bs.affix دا پیښه سمدلاسه مخکې له دې چې عنصر وصل شي ډزې کوي.
affixed.bs.affix دا پیښه د عنصر له مینځلو وروسته له مینځه وړل کیږي.
affix-top.bs.affix دا پیښه سمدلاسه مخکې له دې چې عنصر په سر کې ځای په ځای شي ډزې کوي.
affixed-top.bs.affix دا پیښه وروسته له هغه له مینځه وړل کیږي کله چې عنصر په سر کې ځای په ځای شوی وي.
affix-bottom.bs.affix دا پیښه سمدلاسه مخکې له دې چې عنصر له لاندې سره وصل شي ډزې کوي.
affixed-bottom.bs.affix دا پیښه وروسته له هغه له مینځه وړل کیږي کله چې عنصر لاندې وصل شوی وي.