تێڕوانینێکی گشتی

تاکەکەسی یان کۆکراوە

دەتوانرێت پێوەکراوەکان بە تاک (بە بەکارهێنانی *.jsفایلە تاکەکەسییەکانی Bootstrap)، یان هەموویان بە یەکجار (بە بەکارهێنانی bootstrap.jsیان بچووککراو bootstrap.min.js) جێگیر بکرێن.

تایبەتمەندیەکانی داتا

دەتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی API ی مارکاپەوە بەبێ ئەوەی یەک دێڕی جاڤاسکڕێپت بنووسیت. ئەمە API ی پلە یەکە لە Bootstrap ە و دەبێت یەکەم شت بێت کە لەبەرچاو بگیرێت لەکاتی بەکارهێنانی پێوەکراوێکدا.

کە ووتمان، لە هەندێک بارودۆخدا ڕەنگە خواستراو بێت ئەم کاراییە بکوژێنرێتەوە. بۆیە ئێمە توانای لەکارخستنی API تایبەتمەندی داتاش دەدەین بە هەڵوەشاندنەوەی هەموو ڕووداوەکان لەسەر بەڵگەنامەکە کە بە data-api. ئەمەش بەم شێوەیە دەردەکەوێت:

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

یان بۆ بە ئامانجگرتنی پێوەکراوێکی دیاریکراو، تەنها ناوی پێوەکراوەکە وەک ناوچەی ناو لەگەڵ شوێنی ناوی data-api بەم شێوەیە دابنێ:

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

API بەرنامەیی

هەروەها ئێمە پێمان وایە پێویستە بتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی JavaScript API ەوە. هەموو API گشتیەکان شێوازی تاک و زنجیرن و ئەو کۆکردنەوە دەگەڕێننەوە کە کاریان لەسەر کراوە.

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

هیچ ململانێیەک نییە

هەندێک جار پێویستە پێوەکراوەکانی Bootstrap لەگەڵ چوارچێوەی UI ی تر بەکاربهێنرێت. لەم بارودۆخانەدا، ناوبەناو دەتوانێت پێکدادانی ناوچەی ناوەکان ڕووبدات. ئەگەر ئەمە ڕوویدا، دەتوانیت بانگی .noConflictئەو پێوەکراوە بکەیت کە دەتەوێت بەهاکەی بگەڕێنیتەوە.

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

ڕووداوەکان

بووتستراپ ڕووداوە تایبەتەکان بۆ زۆربەی کردارە ناوازەکانی پێوەکراوەکان دابین دەکات. بەگشتی ئەمانە بە شێوەی بێکۆتایی و بەشێکی ڕابردوو دێن - کە بێکۆتایی (ex. show) لە سەرەتای ڕووداوێکدا دەستپێدەکات، و فۆڕمی بەشە ڕابردووەکەی (ex. shown) لە کاتی تەواوبوونی کردارێکدا دەستپێدەکات.

لە 3.0.0ەوە، هەموو ڕووداوەکانی Bootstrap ناویان بۆ دانراوە.

هەموو ڕووداوە بێکۆتاییەکان 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 ی Bootstrap بگات. بۆ نموونە بۆ پێوەکراوەکەی tooltip:

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

هیچ فۆڵباکێکی تایبەت نییە کاتێک جاڤاسکڕێپت لەکارخراوە

پێوەکراوەکانی Bootstrap بە تایبەتی بە ڕەوشتەوە ناگەڕێنەوە کاتێک جاڤاسکڕێپت لەکاردەخرێت. ئەگەر لەم حاڵەتەدا گرنگی بە ئەزموونی بەکارهێنەر دەدەیت، بەکاری بهێنە <noscript>بۆ ڕوونکردنەوەی دۆخەکە (و چۆن جاڤاسکڕێپت چالاک بکەیتەوە) بۆ بەکارهێنەرانت، و/یان زیادکردنی پاشەکشەی تایبەت بە خۆت.

گواستنەوەکان transition.js

دەربارەی گواستنەوەکان

بۆ کاریگەرییە سادەکانی گواستنەوە، transition.jsجارێک شانبەشانی فایلەکانی تری JS دابنێ. ئەگەر تۆ کۆمپایڵکراو (یان بچووککراو) بەکاردەهێنیت bootstrap.js، پێویست ناکات ئەمە بخەیتە ناوەوە- پێشتر لەوێیە.

چی لە ناوەوەدا هەیە

Transition.js یارمەتیدەرێکی بنەڕەتییە بۆ transitionEndڕووداوەکان هەروەها ئیمۆلیتەرێکی گواستنەوەی CSS. لەلایەن پێوەکراوەکانی ترەوە بەکاردێت بۆ پشکنینی پشتگیری گواستنەوەی CSS و بۆ گرتنی گواستنەوە هەڵواسراوەکان.

لەکارخستنی گواستنەوەکان

دەتوانرێت گواستنەوەکان بە شێوەیەکی جیهانی لەکاربخرێن بە بەکارهێنانی ئەم پارچە جاڤاسکڕێپتەی خوارەوە، کە دەبێت دوای بارکردنی transition.js(یان bootstrap.jsیان bootstrap.min.js, بەپێی حاڵەتەکە) بێت:

$.support.transition = false

مۆداڵەکان modal.js

مۆداڵەکان ڕێکخراون، بەڵام نەرم و نیان، دیالۆگ ئامۆژگاری بە کەمترین کارایی پێویست و پێشوەختە زیرەکەکان.

بەهۆی چۆنێتی پێناسەکردنی HTML5 ماناکانی، autofocusتایبەتمەندی HTML هیچ کاریگەرییەکی نییە لە مۆداڵی Bootstrap. بۆ بەدەستهێنانی هەمان کاریگەری، هەندێک جاڤاسکڕێپتی تایبەت بەکاربهێنە:

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

بەکارهێنانی سیستەمی تۆڕ

بۆ ئەوەی سوود لە سیستەمی تۆڕی Bootstrap وەربگریت لەناو مۆداڵێکدا، تەنها .rows لەناو مۆداڵێکدا هێلانە بکە .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 -->

گۆڕینی ناوەڕۆکی مۆداڵی لەسەر بنەمای دوگمەی دەستپێکەر

کۆمەڵێک دوگمەت هەیە کە هەموویان هەمان مۆداڵی دەستپێدەکەن، تەنها بە ناوەڕۆکێکی کەمێک جیاواز؟ تایبەتمەندیەکانی بەکارهێنان event.relatedTargetو HTMLdata-* (ڕەنگە لە ڕێگەی jQuery ) بۆ گۆڕینی ناوەڕۆکی مۆداڵەکە بەپێی ئەوەی کام دوگمە کرتە کراوە. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی ڕووداوە مۆداڵییەکان بکە لەسەر 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>

لە ڕێگەی جاڤاسکڕێپتەوە

بانگی مۆداڵێک بکە بە id myModalبە یەک دێڕی جاڤاسکڕێپت:

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

نموونە

زیادکردنی مینیوی دابەزین بۆ نزیکەی هەر شتێک بەم پێوەکراوە سادەیە، لەوانەش navbar، تابەکان و حەبەکان.

لەناو ناوبارێکدا

لەناو حەبدا

بەکارهێنان

لە ڕێگەی تایبەتمەندیەکانی داتا یان جاڤاسکڕێپتەوە، پێوەکراوەکە ناوەڕۆکی شاراوە (مینیوەکانی دابەزین) دەگۆڕێت بە گۆڕینی .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>

بۆ ئەوەی URLەکان بە دوگمەکانی بەستەرەکان وەک خۆیان بمێننەوە، 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توخمە باوکەکەی 's تەقە دەکرێن.

هەموو ڕووداوە دابەزینەکان relatedTargetتایبەتمەندییەکیان هەیە، کە بەهاکەی توخمە ئەنکرەکەی دەگۆڕێت.

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

سکڕۆڵسپای scrollspy.js

نموونە لە navbar

پێوەکراوەکەی ScrollSpy بۆ نوێکردنەوەی ئۆتۆماتیکی ئامانجەکانی nav بە پشتبەستن بە شوێنی سکڕۆڵکردنە. ناوچەی خوارەوەی navbar سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە. هەروەها بابەتە لاوەکییەکانی دابەزین تیشک دەخرێنە سەر.

بەکارهێنان

پێویستی بە جێگیرکردنی ڕێژەیی هەیە

گرنگ نییە شێوازی جێبەجێکردنەکە، scrollspy پێویستی بە بەکارهێنانی position: relative;لەسەر ئەو توخمە هەیە کە سیخوڕی لەسەر دەکەیت. لە زۆربەی حاڵەتەکاندا ئەمە <body>. لەکاتی سکڕۆڵسپیکردن لەسەر توخمەکانی تر جگە لە <body>, دڵنیابە کە heightکۆمەڵەیەکت هەیە و overflow-y: scroll;جێبەجێی دەکەیت.

لە ڕێگەی تایبەتمەندییەکانی داتا

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی scrollspy زیاد بکەیت بۆ گەشتکردن لە سەرەوە، زیاد بکە data-spy="scroll"بۆ ئەو توخمەی کە دەتەوێت سیخوڕی لەسەر بکەیت (بە شێوەیەکی ئاسایی ئەمە دەبێتە <body>). پاشان data-targetتایبەتمەندییەکە زیاد بکە لەگەڵ ID یان پۆلی توخمە باوکەکەی هەر .navپێکهاتەیەکی Bootstrap.

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;لە CSS ـەکەتدا، لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە scrollspy بکە:

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

شێوازەکان

.scrollspy('refresh')

لەکاتی بەکارهێنانی scrollspy لەگەڵ زیادکردن یان لابردنی توخمەکان لە 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و بۆ تابەکە ستایلکردنی تابی Bootstrap جێبەجێ دەکات ، لە کاتێکدا زیادکردنی پۆلەکانی و ستایلکردنی حەب جێبەجێ دەکات .nav-tabsulnavnav-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
})

ئامرازەکان tooltip.js

ئیلهام لە پێوەکراوێکی نایابی jQuery.tipsy وەرگیراوە کە لەلایەن Jason Frame نووسراوە؛ ئامرازەکان وەشانێکی نوێکراوە، کە پشت بە وێنە نابەستێت، 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…
})

پۆپۆڤەرز popover.js

زیادکردنی سەرپۆشی بچووکی ناوەڕۆک، وەک ئەوانەی لە ئایپاددان، بۆ هەر توخمێک بۆ نیشتەجێکردنی زانیارییە لاوەکییەکان.

ئەو پۆپۆڤەرانەی کە هەردوو ناونیشان و ناوەڕۆکیان درێژی سفرە هەرگیز پیشان نادرێن.

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

بەکارهێنان

چالاککردنی popovers لە ڕێگەی جاڤاسکڕێپتەوە:

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-animation="".

شێوازەکان

$().popover(options)

پۆپۆڤەرەکان بۆ کۆکردنەوەی توخمەکان دەستپێدەکات.

.popover('show')

پۆپۆڤەری توخمێک ئاشکرا دەکات. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە پیشان بدرێت (واتە پێش ئەوەی shown.bs.popoverڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە "دەستی" دەستپێکردنی پۆپۆڤەر دادەنرێت. ئەو پۆپۆڤەرانەی کە هەردوو ناونیشان و ناوەڕۆکیان درێژی سفرە هەرگیز پیشان نادرێن.

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

.popover('hide')

پۆپۆڤەری توخمێک دەشارێتەوە. پێش ئەوەی لە ڕاستیدا پۆپۆڤەرەکە بشاردرێتەوە (واتە پێش ئەوەی hidden.bs.popoverڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر. ئەمەش بە "دەستی" دەستپێکردنی پۆپۆڤەر دادەنرێت.

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

.popover('toggle')

پۆپۆڤەری توخمێک دەگۆڕێت. دەگەڕێتەوە بۆ پەیوەندیکەر پێش ئەوەی لە ڕاستیدا popover پیشان بدرێت یان بشاردرێتەوە (واتە پێش ئەوەی ڕووداوی 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"تایبەتمەندیەکەیان هەیە. (پێویست نییە لە کاتی بەکارهێنانی دەستپێکردنی ئۆتۆماتیکی data-api.)

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

داڕشتنی collapse.js

پێوەکراوێکی نەرم و نیان کە مشتێک پۆل بەکاردەهێنێت بۆ هەڵسوکەوتی ئاسانی گۆڕینی.

نموونە

بۆ پیشاندانی و شاردنەوەی توخمێکی تر لە ڕێگەی گۆڕینی پۆلەکانەوە کلیک لە دوگمەکانی خوارەوە بکە:

• .collapseناوەڕۆک دەشارێتەوە
• .collapsingلە کاتی گواستنەوەکاندا بەکاردەهێنرێت
• .collapse.inناوەڕۆک نیشان دەدات

دەتوانیت بەستەرێک بەکاربهێنیت کە hrefتایبەتمەندییەکەی تێدایە، یان دوگمەیەک بە data-targetتایبەتمەندییەکە. لە هەردوو حاڵەتەکەدا، the data-toggle="collapse"is required.

<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-targetهەڵبژێرەری CSS قبوڵ دەکات بۆ جێبەجێکردنی داڕمانەکە. دڵنیابە پۆلەکە زیاد بکە 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ڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ بانگکەر.

ڕووداوەکان

پۆلی داڕمانی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی داڕمانەوە.

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

کارۆسێل کارۆسێل .js

پێکهاتەیەکی سلایدشۆ بۆ پاسکیلسواری بەناو توخمەکاندا، وەکو کارۆسێل. کارۆسێلەکانی هێلانەکراو پشتگیری ناکرێت.

نموونە

پێشووتر دواتر

<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، یەکێکە لە فارێترا ئاوگ مۆلیس ئینتەردوم.

دووەم ناوی سلاید

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە.

سێیەم ناوی سلاید

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

پێشووتر دواتر

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

بەکارهێنان

چەندین کارۆسێل

کارۆسێلەکان پێویستیان بە بەکارهێنانی ئامێرێک هەیە idلەسەر دەرەوەترین دەفر (the .carousel) بۆ ئەوەی کۆنتڕۆڵەکانی کارۆسێلەکان بە باشی کاربکەن. لە کاتی زیادکردنی چەندین کارۆسێل، یان لە کاتی گۆڕینی کارۆسێلێک id، دڵنیابە لە نوێکردنەوەی کۆنتڕۆڵە پەیوەندیدارەکان.

لە ڕێگەی تایبەتمەندییەکانی داتا

تایبەتمەندی داتا بەکاربهێنە بۆ ئەوەی بە ئاسانی شوێنی کارۆسێلەکە کۆنتڕۆڵ بکەیت. data-slideوشە سەرەکییەکان prevیان قبوڵ دەکات next، کە شوێنی سلایدەکە دەگۆڕێت بە بەراورد بە شوێنی ئێستای. یانیش، بەکاربهێنە data-slide-toبۆ گواستنەوەی ئیندێکسی خام سلاید بۆ کارۆسێلەکە data-slide-to="2"، کە شوێنی سلایدەکە دەگۆڕێت بۆ ئیندێکسێکی تایبەت کە بە 0.

تایبەتمەندییەکە data-ride="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 کە وەک بابەتی چالاک دەخلیسکێتە شوێنی خۆی.

هەموو ڕووداوەکانی کارۆسێلەکە لە خودی کارۆسێلەکە تەقە دەکرێن (واتە لە <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

پەیوەست بکە بە affix.js

نموونە

پێوەکراوەکانی پەیوەستکردنەکە دەگۆڕێت position: fixed;و دەکوژێتەوە، ئەو کاریگەرییەی کە بە دۆزراوەتەوە وەرئەگرێت position: sticky;. ژێرناوچەی لای ڕاست دیمۆیەکی ڕاستەوخۆی پێوەکراوەکەی ئافیکسە.

بەکارهێنان

پێوەکراوەکە لە ڕێگەی تایبەتمەندییەکانی داتا یان بە دەستی بە جاڤاسکڕێپتی تایبەت بە خۆت بەکاربهێنە. لە هەردوو بارودۆخەکەدا، پێویستە CSS بۆ شوێن و پانایی ناوەڕۆکی لێدراوەکەت دابین بکەیت.

تێبینی: پێوەکراوەکەی پەیوەستکردن لەسەر توخمێک بەکارمەهێنە کە لە توخمێکی تاڕادەیەک جێگیردا هەیە، وەک ستوونی ڕاکێشراو یان پاڵنراو، بەهۆی هەڵەی ڕەندەری سەفاری .

جێگیرکردن لە ڕێگەی CSS

پێوەکراوەکە لە نێوان سێ پۆلدا دەگۆڕێت، هەریەکەیان نوێنەرایەتی دۆخێکی تایبەت دەکەن: .affix, .affix-top, و .affix-bottom. پێویستە ستایلەکان دابین بکەیت، جگە لە position: fixed;on .affix, بۆ ئەم پۆلانە خۆت (سەربەخۆ لەم پێوەکراوە) بۆ مامەڵەکردن لەگەڵ شوێنە ڕاستەقینەکان.

لێرەدا چۆنێتی کارکردنی پێوەکراوەکانی affix دەبینین:

1. بۆ دەستپێکردن، پێوەکراوەکە زیاد دەکات .affix-topبۆ ئەوەی ئاماژە بەوە بکات کە توخمەکە لە سەرەوەترین شوێنی خۆیدایە. لەم خاڵەدا پێویست بە جێگیرکردنی CSS ناکات.
2. سکڕۆڵکردن بەسەر ئەو توخمەدا کە دەتەوێت لێبدرێتەوە دەبێت لکاندنی ڕاستەقینە دەستپێبکات. لێرەدایە کە .affixجێگرەوە .affix-topو سێت دەکات position: fixed;(لەلایەن CSS ی Bootstrap دابینکراوە).
3. ئەگەر ئۆفسێتی خوارەوە پێناسە کرا، بە تێپەڕبوونی پێویستە .affixبە .affix-bottom. بەو پێیەی ئۆفسێتەکان هەڵبژاردەن، ڕێکخستنی یەکێکیان پێویستە CSS ی گونجاو دابنێیت. لەم حاڵەتەدا position: absolute;لەکاتی پێویستدا زیاد بکە. پێوەکراوەکە تایبەتمەندی داتا یان هەڵبژاردەی جاڤاسکڕێپت بەکاردەهێنێت بۆ دیاریکردنی ئەوەی کە توخمەکە لەوێوە لە کوێ دابنێت.

بۆ ڕێکخستنی CSS ـەکەت بۆ هەریەکێک لە هەڵبژاردەکانی بەکارهێنان لە خوارەوە هەنگاوەکانی سەرەوە پەیڕەو بکە.

لە ڕێگەی تایبەتمەندییەکانی داتا

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی affix زیاد بکەیت بۆ هەر توخمێک، تەنها زیاد بکە data-spy="affix"بۆ ئەو توخمە کە دەتەوێت سیخوڕی لەسەر بکەیت. ئۆفسێتەکان بەکاربهێنە بۆ پێناسەکردنی کەی پینکردنی توخمێک بگۆڕیت.

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

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە پێوەکراوەکانی affix بکە:

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

ڕووداوەکان

پێوەکراوەکەی affix ی Bootstrap چەند ڕووداوێک بۆ پەیوەستکردن بە کارایی affix ئاشکرا دەکات.