اوسر

انفرادي يا مرتب ڪيل

پلگ انز انفرادي طور تي شامل ڪري سگھجن ٿيون (بوٽ اسٽريپ جي انفرادي *.jsفائلن کي استعمال ڪندي)، يا سڀ ھڪ ئي وقت (استعمال ڪندي bootstrap.jsيا minified bootstrap.min.js).

ڊيٽا خاصيتون

توھان استعمال ڪري سگھوٿا سڀئي بوٽ اسٽريپ پلگ ان خالص طور تي مارڪ اپ API ذريعي جاوا اسڪرپٽ جي ھڪڙي لائن لکڻ کان سواءِ. هي Bootstrap جي فرسٽ ڪلاس 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

واقعا

بوٽ اسٽراپ اڪثر پلگ ان جي منفرد ڪارناما لاءِ ڪسٽم واقعا مهيا ڪري ٿو. عام طور تي، اهي هڪ لاتعداد ۽ ماضي حصو وٺندڙ فارم ۾ ايندا آهن - جتي infinitive (ex. show) ڪنهن واقعي جي شروعات تي شروع ڪيو ويندو آهي، ۽ ان جو ماضي حصو وٺندڙ فارم (مثال طور shown) هڪ عمل جي مڪمل ٿيڻ تي شروع ڪيو ويندو آهي.

3.0.0 جي طور تي، سڀئي بوٽ اسٽريپ واقعا نالا رکيل آهن.

سڀ لاتعداد واقعا preventDefaultڪارڪردگي مهيا ڪن ٿا. هي هڪ عمل کي شروع ڪرڻ کان پهريان ان جي عمل کي روڪڻ جي صلاحيت فراهم ڪري ٿو.

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

صفائي ڪندڙ

ٽول ٽائپس ۽ پاپورز اسان جي بلٽ ان سينٽيزر کي استعمال ڪن ٿا انهن اختيارن کي صاف ڪرڻ لاءِ جيڪي 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>صورتحال کي بيان ڪرڻ لاءِ (۽ ڪيئن جاوا اسڪرپٽ کي ٻيهر فعال ڪجي) توهان جي استعمال ڪندڙن کي، ۽/يا پنهنجا پنهنجا ڪسٽم فال بيڪ شامل ڪريو.

منتقلي transition.js

منتقلي جي باري ۾

سادي منتقلي اثرات لاء، transition.jsهڪ ڀيرو ٻين JS فائلن سان گڏ شامل ڪريو. جيڪڏھن توھان استعمال ڪري رھيا آھيو مرتب ڪيل (يا minified) bootstrap.js، ھن کي شامل ڪرڻ جي ڪا ضرورت ناھي- اھو اڳ ۾ ئي موجود آھي.

اندر ڇا آهي

Transition.js هڪ بنيادي مددگار آهي transitionEndواقعن لاءِ ۽ گڏوگڏ هڪ CSS منتقلي ايموليٽر. اهو استعمال ڪيو ويو آهي ٻين پلگ انز کي چيڪ ڪرڻ لاءِ CSS منتقلي جي مدد لاءِ ۽ پھانسي واري منتقلي کي پڪڙڻ لاءِ.

منتقلي کي بند ڪرڻ

هيٺ ڏنل JavaScript snippet استعمال ڪندي ٽرانسشنز کي عالمي سطح تي غير فعال ڪري سگھجي ٿو، جيڪو لازمي طور تي اچڻو پوندو 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 -->

لائيو ڊيمو

ھيٺ ڏنل بٽڻ تي ڪلڪ ڪري JavaScript ذريعي ماڊل کي ٽوگل ڪريو. اھو ھيٺ لھي ويندو ۽ صفحي جي چوٽيءَ کان اندر ٿي ويندو.

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

گرڊ سسٽم استعمال ڪندي

بوٽ اسٽريپ گرڊ سسٽم جو فائدو وٺڻ لاءِ موڊل جي اندر، صرف نيسٽ .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۽ HTML data-*خاصيتون (ممڪن طور تي 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>

جاوا اسڪرپٽ ذريعي

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

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 پلگ ان اسڪرول پوزيشن جي بنياد تي نيوي هدفن کي خودڪار طور تي اپڊيٽ ڪرڻ لاءِ آهي. نيوبار جي هيٺان علائقي کي اسڪرول ڪريو ۽ فعال طبقي جي تبديلي کي ڏسو. ڊراپ ڊائون ذيلي شيون پڻ نمايان ٿي وينديون.

استعمال

تعلقي پوزيشن جي ضرورت آهي

ڪابه معاملي تي عمل درآمد جو طريقو، scrollspy position: relative;ان عنصر جي استعمال جي ضرورت آهي جنهن تي توهان جاسوسي ڪري رهيا آهيو. اڪثر ڪيسن ۾ هي آهي <body>. جڏهن کان سواءِ ٻين عناصر تي اسڪرول اسپائي ڪري <body>، پڪ ڪريو ته هڪ heightسيٽ ۽ overflow-y: scroll;لاڳو ڪيو وڃي.

ڊيٽا خاصيتن جي ذريعي

آساني سان شامل ڪرڻ لاءِ scrollspy رويي کي پنھنجي ٽاپبار نيويگيشن ۾، data-spy="scroll"ان عنصر ۾ شامل ڪريو جنھن تي توھان جاسوسي ڪرڻ چاھيو ٿا (اڪثر عام طور تي اھو ھوندو <body>). پوءِ ڪنهن به بوٽ اسٽريپ جزو data-targetجي والدين عنصر جي ID يا ڪلاس سان وصف شامل ڪريو..nav

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;، ڪال ڪريو scrollspy ذريعي JavaScript:

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

طريقا

.scrollspy('refresh')

جڏهن ڊوم مان عناصر کي شامل ڪرڻ يا ختم ڪرڻ سان گڏ scrollspy استعمال ڪندي، توهان کي ريفريش طريقي کي ڪال ڪرڻ جي ضرورت پوندي جيئن ته:

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

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-، جيئن data-offset="".

واقعا

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

ٽوگل ڪرڻ جي قابل ٽيب tab.js

مثال ٽيب

شامل ڪريو تڪڙو، متحرڪ ٽيب ڪارڪردگي کي مقامي مواد جي پين ذريعي منتقل ڪرڻ لاء، جيتوڻيڪ ڊراپ ڊائون مينيو ذريعي. Nested tabs معاون نه آهن.

استعمال

جاوا اسڪرپٽ ذريعي ٽيبلبل ٽيب کي فعال ڪريو (هر ٽيب کي انفرادي طور تي چالو ڪرڻ جي ضرورت آهي):

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

هڪ ٽيب عنصر ۽ مواد ڪنٽينر کي چالو ڪري ٿو. ٽئب ۾ هجڻ گهرجي يا ته هڪ data-targetيا هڪ hrefٽارگيٽ ڪنٽينر نوڊ DOM ۾. مٿين مثالن ۾، ٽيب خاصيتون آهن <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 پلگ ان کان متاثر ٿي؛ ٽول ٽائپس هڪ اپڊيٽ ورجن آهي، جيڪو تصويرن تي ڀروسو نٿو ڪري، اينيميشنز لاءِ 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خاصيت آهي ۽ titleHTML عنصر تي توهان چاهيو ٿا ته هڪ ٽول ٽائپ. ٽول ٽائپ جو ٺاهيل مارڪ اپ بلڪل سادو آهي، جيتوڻيڪ ان کي پوزيشن جي ضرورت آهي (ڊفالٽ طور، 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)

هڪ عنصر گڏ ڪرڻ لاء popovers جي شروعات.

.popover('show')

هڪ عنصر جي پاپ اوور کي ظاهر ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . shown.bs.popoverاهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽنگ. Popovers جن جا عنوان ۽ مواد ٻئي صفر ڊگھائي آهن ڪڏهن به ڏيکاريل نه آهن.

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

.popover('hide')

هڪ عنصر جي پاپ اوور کي لڪائيندو آهي. پوپ اوور اصل ۾ لڪايو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . hidden.bs.popoverاهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽنگ.

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

.popover('toggle')

هڪ عنصر جي پاپ اوور کي ٽوگل ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو يا لڪايو ويو (يعني واقعي يا واقعو ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . اهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽنگ.shown.bs.popoverhidden.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"پنهنجي بند بٽڻ ۾ شامل ڪريو خودڪار طور تي الرٽ بند ڪارڪردگي ڏي. هڪ خبرداري کي بند ڪرڻ ان کي ڊوم مان هٽائي ٿو.

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

کولڻ collapse.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>

Accordion مثال

ڊفالٽ ختم ٿيڻ واري رويي کي وڌايو پينل جي اجزاء سان گڏ ٺاھڻ لاء.

<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 کي s سان .list-groupمٽايو.

استعمال

کولڻ وارو پلگ ان ڳري کڻڻ کي سنڀالڻ لاءِ ڪجھ طبقن کي استعمال ڪري ٿو:

• .collapseمواد کي لڪائي ٿو
• .collapse.inمواد ڏيکاري ٿو
• .collapsingشامل ڪيو ويندو آهي جڏهن منتقلي شروع ٿئي ٿي، ۽ هٽايو ويندو آهي جڏهن اهو ختم ٿئي ٿو

اهي ڪلاس ۾ ڳولي سگهجن ٿا component-animations.less.

ڊيٽا خاصيتن جي ذريعي

بس شامل ڪريو data-toggle="collapse"۽ هڪ data-targetعنصر کي خودڪار طور تي ختم ڪرڻ واري عنصر جي ڪنٽرول کي تفويض ڪرڻ لاء. وصف قبول ڪري data-targetٿو CSS چونڊيندڙ کي لاڳو ڪرڻ لاءِ. پڪ ڪريو ته ڪلاس collapseکي ٽوڙڻ واري عنصر ۾ شامل ڪريو. جيڪڏھن توھان چاھيو ٿا ته ان کي ڊفالٽ کوليو وڃي، اضافي ڪلاس شامل ڪريو in.

شامل ڪرڻ لاءِ accordion-like گروپ مينيجمينٽ کي ٽوڙڻ واري ڪنٽرول ۾، ڊيٽا جي خاصيت شامل ڪريو 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

عناصرن ذريعي سائيڪل هلائڻ لاءِ سلائيڊ شو جو جزو، ڪارسيل وانگر. Nested 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 کي استعمال ڪرڻ جي ضرورت هوندي آهي هڪ idتي ٻاهرين ڪنٽينر (The .carousel) لاءِ carousel ڪنٽرول صحيح طريقي سان ڪم ڪرڻ لاءِ. جڏهن گھڻا carousel شامل ڪريو، يا جڏھن ھڪ carousel's تبديل ڪريو id، لاڳاپيل ڪنٽرولن کي اپڊيٽ ڪرڻ جي پڪ ڪريو.

ڊيٽا خاصيتن جي ذريعي

آساني سان carousel جي پوزيشن کي ڪنٽرول ڪرڻ لاء ڊيٽا خاصيتون استعمال ڪريو. data-slideلفظن کي قبول ڪري ٿو prevيا next، جيڪو سلائڊ پوزيشن کي ان جي موجوده پوزيشن جي نسبت سان تبديل ڪري ٿو. متبادل طور تي، استعمال ڪريو data-slide-toخام سلائڊ انڊيڪس ڪارسيل ڏانھن منتقل ڪرڻ لاء data-slide-to="2"، جيڪو سلائڊ پوزيشن کي ھڪڙي خاص انڊيڪس ڏانھن منتقل ڪري ٿو0 .

data-ride="carousel"صفحو لوڊ تي شروع ٿيندڙ متحرڪ طور تي ڪارسيل کي نشان لڳائڻ لاءِ استعمال ڪيو ويندو آهي . اهو استعمال نه ٿو ڪري سگھجي (بيڪار ۽ غير ضروري) واضح JavaScript جي شروعات سان گڏ ساڳي ڪارسيل جي.

جاوا اسڪرپٽ ذريعي

ڪاريسل کي هٿ سان ڪال ڪريو:

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

مثال

affix پلگ ان کي ٽگل position: fixed;ڪري آن ۽ آف ڪري ٿو، ان سان مليل اثر کي نقل ڪندي position: sticky;. ساڄي پاسي سب نيويگيشن affix پلگ ان جو لائيو ڊيمو آهي.

استعمال

affix پلگ ان استعمال ڪريو ڊيٽا جي خاصيتن ذريعي يا دستي طور تي پنھنجي جاوا اسڪرپٽ سان. ٻنهي حالتن ۾، توهان کي لازمي طور تي CSS مهيا ڪرڻ گهرجي توهان جي لڳل مواد جي پوزيشن ۽ چوٽي لاءِ.

نوٽ: affix پلگ ان کي استعمال نه ڪريو هڪ عنصر تي جيڪو نسبتا پوزيشن واري عنصر ۾ شامل آهي، جهڙوڪ ڇڪيل يا ڇڪيل ڪالمن، سفاري رينڊنگ بگ جي ڪري .

CSS ذريعي پوزيشن

affix پلگ ان ٽن طبقن جي وچ ۾ ٽوگل ڪري ٿو، هر هڪ خاص رياست جي نمائندگي ڪري ٿو: .affix, .affix-top, and .affix-bottom. توھان کي لازمي طور تي اسٽائل مهيا ڪرڻ گهرجن، استثنا سان position: fixed;، .affixانھن طبقن لاءِ (ھن پلگ ان کان آزاد) حقيقي پوزيشن کي سنڀالڻ لاءِ.

هتي ڪيئن آهي affix پلگ ان ڪم ڪري ٿو:

1. شروع ڪرڻ لاء، پلگ ان شامل ڪندو.affix-top اشارو ڪرڻ لاءِ ته عنصر ان جي اعليٰ ترين پوزيشن ۾ آهي. هن نقطي تي ڪا به CSS پوزيشن جي ضرورت ناهي.
2. ماضيءَ ۾ اسڪرول ڪرڻ واري عنصر کي جيڪو توهان چسپڻ چاهيو ٿا ان کي حقيقي لڳڻ کي ٽڪرائڻ گهرجي. اھو اھو آھي جتي .affixمتبادل .affix-top۽ سيٽ position: fixed;(بوٽ اسٽراپ جي سي ايس ايس پاران مهيا ڪيل).
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 پلگ ان ذريعي JavaScript:

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

واقعا

بوٽ اسٽريپ جو لاڳاپو پلگ ان لاڳاپو ڪارڪردگي ۾ ڇڪڻ لاءِ ڪجھ واقعن کي بي نقاب ڪري ٿو.