کتنه

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

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

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

تاسو کولی شئ د جاواسکریپټ یوه کرښه لیکلو پرته د مارک اپ 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
})

سینیټایزر

Tooltips او Popovers زموږ جوړ شوي سینیټایزر د انتخابونو پاکولو لپاره کاروي کوم چې HTML مني.

اصلي whiteListارزښت په لاندې ډول دی:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

که تاسو غواړئ پدې ډیفالټ کې نوي ارزښتونه اضافه کړئ نو whiteListتاسو کولی شئ لاندې کار وکړئ:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

که تاسو غواړئ زموږ د سینیټیزر څخه ډډه وکړئ ځکه چې تاسو د وقف شوي کتابتون څخه کار اخلئ، د بیلګې په توګه DOMpurify ، تاسو باید لاندې کارونه وکړئ:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

د نسخې شمیرې

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

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

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

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

د لیږد لیږد .js

د لیږد په اړه

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

دننه څه دي

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

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

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

$.support.transition = false

موډلونه modal.js

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

د دې له امله چې څنګه 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>

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

موډلونه دوه اختیاري اندازې لري، د بدلون کونکي ټولګیو له لارې شتون لري چې په .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" 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" 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="".

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

میتودونه

.modal(options)

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

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

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

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

پیښې

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

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

$('#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()

اختیارونه

هیڅ نه

میتودونه

$().dropdown('toggle')

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

پیښې

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

په navbar کې مثال

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

کارول

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

مهمه نده چې د پلي کولو میتود وي ، سکرول سپي د 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="".

پیښې

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

د بېلګې ټبونه

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

کارول

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

$('#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پیښې به نه ویستل کیږي.

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

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

مثالونه

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

جامد وسیلې

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

څلور لارې

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

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

اختیارونه

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

میتودونه

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

پیښې

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

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

مثالونه

جامد پاپور

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

ژوندۍ ډیمو

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

میتودونه

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

پیښې

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

پیښې

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

تڼۍ button.js

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

دولتي

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

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

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

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

واحد ټګول

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

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

چک بکس / راډیو

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

میتودونه

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</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"دا اړینه ده.

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

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

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

<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 بدل کړئ.

کارول

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

• .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="".

میتودونه

.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پیښه پیښ شي).

پیښې

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

$('#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 ځای په ځای کړئ او دا به په اوتومات ډول تنظیم او فارمیټ شي.

لومړی سلایډ لیبل

Nulla vitae elit libero, a pharetra augue mollis interdum.

دوهم سلایډ لیبل

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

دریم سلایډ لیبل

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

مخکینی بل

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

میتودونه

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

پیښې

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

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

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

د carousel ټولې پیښې پخپله په carousel کې ډزې کیږي (یعنې په <div class="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".

میتودونه

.affix(options)

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

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

.affix('checkPosition')

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

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

پیښې

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