اوسر

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

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

مرتب ڪيل جاوا اسڪرپٽ استعمال ڪندي

ٻئي bootstrap.js۽ bootstrap.min.jsھڪڙي فائل ۾ سڀ پلگ ان شامل آھن. صرف ھڪڙو شامل ڪريو.

پلگ ان انحصار

ڪجھ پلگ ان ۽ سي ايس ايس جزا ٻين پلگ ان تي ڀاڙين ٿا. جيڪڏهن توهان انفرادي طور تي پلگ ان شامل ڪريو ٿا، پڪ ڪريو ته انهن انحصارن لاءِ دستاويز ۾ چيڪ ڪريو. اهو پڻ نوٽ ڪريو ته سڀئي پلگ ان jQuery تي منحصر آهن (هن جو مطلب آهي jQuery پلگ ان فائلن کان اڳ شامل ٿيڻ گهرجي ). اسانbower.json سان صلاح ڪريو ته ڏسو jQuery جا ڪهڙا نسخا سپورٽ آهن.

ڊيٽا خاصيتون

توھان استعمال ڪري سگھوٿا سڀئي بوٽ اسٽريپ پلگ ان خالص طور تي مارڪ اپ API ذريعي جاوا اسڪرپٽ جي ھڪڙي لائن لکڻ کان سواءِ. هي بوٽ اسٽريپ جي فرسٽ ڪلاس API آهي ۽ پلگ ان استعمال ڪرڻ وقت توهان جو پهريون خيال هجڻ گهرجي.

اهو چيو ته، ڪجهه حالتن ۾ اهو ضروري آهي ته هن ڪارڪردگي کي بند ڪرڻ لاء. تنهن ڪري، اسان پڻ مهيا ڪندا آهيون ڊيٽا جي خاصيت API کي غير فعال ڪرڻ جي صلاحيت سان سڀني واقعن کي غير پابند ڪندي دستاويز جي نالي جي جاءِ تي data-api. هي هن طرح نظر اچي ٿو:

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

متبادل طور تي، هڪ مخصوص پلگ ان کي نشانو بڻائڻ لاءِ، صرف پلگ ان جو نالو شامل ڪريو نالي جي جاءِ سان گڏ ڊيٽا-api نالي جي جڳهه هن طرح:

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

صرف هڪ پلگ ان في عنصر ڊيٽا جي خاصيتن ذريعي

ساڳئي عنصر تي ڪيترن ئي پلگ ان مان ڊيٽا خاصيتون استعمال نه ڪريو. مثال طور، هڪ بٽڻ ٻنهي وٽ ٽول ٽائپ نه آهي ۽ ماڊل ٽوگل ڪري سگهي ٿو. هن کي مڪمل ڪرڻ لاء، هڪ لفافي عنصر استعمال ڪريو.

پروگراماتي API

اسان اهو پڻ سمجهون ٿا ته توهان کي جاوا اسڪرپٽ API ذريعي خالص طور تي سڀئي بوٽ اسٽريپ پلگ ان استعمال ڪرڻ جي قابل هوندا. سڀ عوامي APIs واحد، زنجير وارا طريقا آهن، ۽ جمع ڪيل ڪم کي واپس آڻيندا آهن.

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

سڀني طريقن کي اختياري اختياري اعتراض کي قبول ڪرڻ گهرجي، هڪ اسٽرنگ جيڪو هڪ خاص طريقي کي نشانو بڻائي ٿو، يا ڪجھ به نه (جيڪو ڊفالٽ رويي سان هڪ پلگ ان شروع ڪري ٿو):

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

هر پلگ ان پنهنجي خام تعمير ڪندڙ کي Constructorملڪيت تي ظاهر ڪري ٿو: $.fn.popover.Constructor. جيڪڏهن توهان چاهيو ٿا ته هڪ خاص پلگ ان مثال حاصل ڪريو، ان کي ٻيهر حاصل ڪريو هڪ عنصر مان: $('[rel="popover"]').data('popover').

ڊفالٽ سيٽنگون

توھان پلگ ان لاءِ ڊفالٽ سيٽنگ تبديل ڪري سگھو ٿا پلگ ان جي Constructor.DEFAULTSاعتراض کي تبديل ڪندي:

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

ڪوبه تڪرار ناهي

ڪڏهن ڪڏهن ٻين UI فريم ورڪ سان بوٽ اسٽريپ پلگ ان استعمال ڪرڻ ضروري آهي. انهن حالتن ۾، نالي جي جاء تي ٽڪراء ڪڏهن ڪڏهن ٿي سگهي ٿي. جيڪڏهن ائين ٿئي ٿو، ته توهان .noConflictپلگ ان تي ڪال ڪري سگهو ٿا جنهن جي قيمت توهان واپس ڪرڻ چاهيو ٿا.

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

واقعا

بوٽ اسٽراپ اڪثر پلگ ان جي منفرد ڪارناما لاءِ ڪسٽم واقعا مهيا ڪري ٿو. عام طور تي، اهي هڪ لاتعداد ۽ ماضي ۾ حصو وٺندڙ فارم ۾ ايندا آهن - جتي 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
})

نسخو نمبر

VERSIONبوٽ اسٽريپ جي jQuery پلگ ان مان هر هڪ جو نسخو پلگ ان جي تعمير ڪندڙ جي ملڪيت ذريعي رسائي سگهجي ٿو . مثال طور، ٽول ٽائپ پلگ ان لاءِ:

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

جڏهن جاوا اسڪرپٽ بند ٿيل هجي ته ڪو خاص ناڪام نه ٿيندو

بوٽ اسٽريپ جا پلگ ان واپس نه ٿا اچن خاص طور تي جڏهن جاوا اسڪرپٽ غير فعال آهي. جيڪڏهن توهان هن معاملي ۾ استعمال ڪندڙ جي تجربي جو خيال رکو ٿا، استعمال ڪريو <noscript>صورتحال کي بيان ڪرڻ لاءِ (۽ ڪيئن جاوا اسڪرپٽ کي ٻيهر فعال ڪجي) توهان جي استعمال ڪندڙن کي، ۽/يا پنهنجا پنهنجا ڪسٽم فال بيڪ شامل ڪريو.

ٽئين پارٽي لائبريريون

بوٽ اسٽراپ رسمي طور تي ٽئين پارٽي جاوا اسڪرپٽ لائبريرين کي سپورٽ نٿو ڪري جهڙوڪ پروٽوٽائپ يا jQuery UI. واقعن جي باوجود .noConflict۽ نالن جي جاءِ تي، ٿي سگهي ٿي مطابقت جا مسئلا جيڪي توهان کي پاڻ تي حل ڪرڻ گهرجن.

منتقلي 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

ماڊلز سٿري ٿيل آهن، پر لچڪدار، ڊائلاگ کي گهٽ ۾ گهٽ گهربل ڪارڪردگي ۽ سمارٽ ڊفالٽ سان پرامپ ڪري ٿو.

گھڻا کليل ماڊل سپورٽ نه آھن

پڪ ڪريو ته هڪ موڊل نه کوليو جڏهن ته ٻيو اڃا تائين نظر اچي رهيو آهي. هڪ وقت ۾ هڪ کان وڌيڪ ماڊل ڏيکارڻ لاءِ ڪسٽم ڪوڊ جي ضرورت آهي.

ماڊل مارڪ اپ لڳائڻ

هميشه ڪوشش ڪريو ماڊل جي HTML ڪوڊ کي پنهنجي دستاويز ۾ اعليٰ سطحي پوزيشن ۾ رکڻ جي لاءِ ٻين حصن کان بچڻ لاءِ جيڪو موڊل جي ظاهر ۽/يا ڪارڪردگي کي متاثر ڪري ٿو.

موبائل ڊوائيس جي خبرداري

موبائيل ڊوائيسز تي ماڊل استعمال ڪرڻ جي حوالي سان ڪجهه احتياط آهن. تفصيل لاءِ اسان جا برائوزر سپورٽ ڊاڪس ڏسو.

ان جي ڪري HTML5 ان جي سيمينٽڪس کي ڪيئن بيان ڪري ٿو، autofocusHTML وصف بوٽ اسٽريپ ماڊلز ۾ ڪو اثر ناهي. ساڳئي اثر حاصل ڪرڻ لاء، ڪجهه ڪسٽم جاوا اسڪرپٽ استعمال ڪريو:

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

مثال

جامد مثال

هيڊر، جسم، ۽ فوٽر ۾ ڪارناما جي سيٽ سان ٺهيل ماڊل.

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

لائيو ڊيمو

ھيٺ ڏنل بٽڻ تي ڪلڪ ڪري 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>

ماڊلز تائين رسائي حاصل ڪريو

شامل ڪرڻ جي پڪ ڪريو role="dialog"۽ aria-labelledby="..."، ماڊل عنوان جي حوالي سان، ڏانهن .modal، ۽ پاڻ role="document"ڏانهن ..modal-dialog

اضافي طور تي، توهان پنهنجي ماڊل ڊائلاگ جي وضاحت ڏئي سگهو ٿا aria-describedbyon سان .modal.

يوٽيوب وڊيوز شامل ڪرڻ

يوٽيوب وڊيوز کي ماڊلز ۾ شامل ڪرڻ لاءِ اضافي جاوا اسڪرپٽ جي ضرورت آھي نه بوٽ اسٽريپ ۾ خود بخود پلے بیک ۽ وڌيڪ بند ڪرڻ لاءِ. وڌيڪ معلومات لاءِ هي مددگار اسٽيڪ اوور فلو پوسٽ ڏسو .

اختياري سائيز

ماڊلز وٽ ٻه اختياري سائيز آهن، جيڪي ميڊيفائير ڪلاسز ذريعي دستياب آهن .modal-dialog.

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

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

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

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

انيميشن کي هٽايو

ماڊلز لاءِ جيڪي ڏسڻ لاءِ منجهيل ٿيڻ بجاءِ ظاهر ٿين ٿا، .fadeڪلاس کي پنهنجي ماڊل مارڪ اپ مان هٽايو.

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

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

بوٽ اسٽريپ گرڊ سسٽم جو فائدو وٺڻ لاءِ موڊل اندر، صرف نيسٽ .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>

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

myModalJavaScript جي ھڪڙي لائن سان id سان ھڪڙو ماڊل ڪال ڪريو :

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

اختيارن

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

نالو قسم ڊفالٽ وضاحت
پس منظر boolean يا تار'static' سچو هڪ ماڊل پس منظر عنصر شامل آهي. متبادل طور تي، staticھڪڙي پس منظر لاءِ وضاحت ڪريو جيڪو ڪلڪ ڪرڻ تي ماڊل کي بند نٿو ڪري.
ڪي بورڊ بولين سچو موڊل کي بند ڪري ٿو جڏهن فرار ڪيچ کي دٻايو ويندو آهي
ڏيکارڻ بولين سچو ماڊل ڏيکاري ٿو جڏهن شروعات ڪئي وئي.
ريموٽ رستو ڪوڙو

ھي اختيار ختم ڪيو ويو آھي v3.3.0 کان ۽ ختم ڪيو ويو آھي v4 ۾. اسان ان جي بدران ڪلائنٽ سائڊ ٽيمپليٽنگ يا ڊيٽا بائنڊنگ فريم ورڪ استعمال ڪرڻ جي صلاح ڏيو ٿا، يا jQuery.load پاڻ کي ڪال ڪريو.

جيڪڏهن هڪ ريموٽ URL مهيا ڪيو ويو آهي، مواد هڪ ڀيرو jQuery جي طريقي سان لوڊ ڪيو ويندو ۽ div ۾ داخل ڪيو ويندو. جيڪڏھن توھان استعمال ڪري رھيا آھيو data-api، توھان متبادل طور استعمال ڪري سگھوٿا وصف ريموٽ ماخذ کي بيان ڪرڻ لاءِ. ان جو هڪ مثال هيٺ ڏجي ٿو:load.modal-contenthref

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

طريقا

توهان جي مواد کي ماڊل طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object.

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

دستي طور تي ماڊل کي ٽوگل ڪري ٿو. موڊل اصل ۾ ڏيکاريل يا لڪايو ويو آهي (يعني واقعي کان اڳ يا واقع ٿيڻ کان اڳ) ڪالر ڏانهن واپسي .shown.bs.modalhidden.bs.modal

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

دستي طور تي هڪ ماڊل کوليو. موڊل اصل ۾ ڏيکاريو ويو کان اڳ ڪالر ڏانهن واپسي (يعني shown.bs.modalواقعي ٿيڻ کان اڳ).

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

دستي طور تي هڪ ماڊل لڪائي ٿو. ڪالر ڏانهن موٽڻ کان اڳ ماڊل اصل ۾ لڪايو ويو آهي (يعني hidden.bs.modalواقعي ٿيڻ کان اڳ).

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

ماڊل جي پوزيشن کي ترتيب ڏئي ٿو ته هڪ اسڪرول بار کي منهن ڏيڻ جي صورت ۾ هڪ ظاهر ٿيڻ جي صورت ۾، جيڪو موڊل جمپ کي کاٻي طرف ڪندو.

صرف ضرورت آهي جڏهن ماڊل جي اوچائي تبديل ٿي وڃي جڏهن اهو کليل آهي.

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

واقعا

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

سڀئي ماڊل واقعا پاڻ موڊل تي فائر ڪيا ويا آهن (يعني تي <div class="modal">).

واقعي جو قسم وصف
show.bs.modal اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي. جيڪڏهن هڪ ڪلڪ جي ڪري، ڪلڪ ٿيل عنصر relatedTargetواقعي جي ملڪيت جي طور تي موجود آهي.
ڏيکاريو ويو.bs.modal هي واقعو فائر ڪيو ويو آهي جڏهن ماڊل استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). جيڪڏهن هڪ ڪلڪ جي ڪري، ڪلڪ ٿيل عنصر relatedTargetواقعي جي ملڪيت جي طور تي موجود آهي.
hide.bs.modal اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
hidden.bs.modal اهو واقعو فائر ڪيو ويندو آهي جڏهن ماڊل ختم ٿي چڪو آهي صارف کان لڪيل آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
لوڊ ٿيل.bs.modal اهو واقعو فائر ڪيو ويو آهي جڏهن ماڊل remoteاختيار کي استعمال ڪندي مواد لوڊ ڪيو آهي.
$('#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()

data-toggle="dropdown"اڃا به گهربل

ان کان سواءِ ته توهان پنهنجي ڊراپ ڊائون کي JavaScript ذريعي ڪال ڪريو يا ان جي بدران data-api استعمال ڪريو، data-toggle="dropdown"هميشه لاءِ ضروري آهي ته ڊراپ ڊائون جي ٽرگر عنصر تي موجود هجي.

ڪو به

ڏنل نيوبار يا ٽيب ٿيل نيويگيشن جي ڊراپ ڊائون مينيو کي ٽوگل ڪري ٿو.

سڀئي ڊراپ ڊائون واقعا .dropdown-menu'پيرنٽي عنصر تي فائر ڪيا ويا آهن.

سڀني ڊراپ ڊائون واقعن ۾ ھڪڙي relatedTargetملڪيت آھي، جنھن جي قيمت ٽوگلنگ اينڪر عنصر آھي.

واقعي جو قسم وصف
show.bs.dropdown اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن شو مثال جو طريقو سڏيو ويندو آهي.
ڏيکاريو ويو.bs.ڊراپ ڊائون هي واقعو فائر ڪيو ويو آهي جڏهن ڊراپ ڊائون صارف کي ڏيکاريو ويو آهي (سي ايس ايس جي منتقلي جو انتظار ڪندو، مڪمل ٿيڻ لاء).
hide.bs.dropdown اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن لڪائڻ جو طريقو سڏيو ويندو آهي.
hidden.bs.dropdown هي واقعو فائر ڪيو ويندو آهي جڏهن ڊراپ ڊائون ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي جو انتظار ڪندو، مڪمل ٿيڻ لاء).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

مثال navbar ۾

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

@ٿلهو

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ان کان اڳ جو اهي وڪرو ڪيا ويا qui. Tumblr فارم کان ٽيبل سائيڪل جا حق جيڪي به. Anim keffiyeh Carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui توهان شايد انهن جي باري ۾ نه ٻڌو آهي et cardigan Trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat چار loko nisi، ea helvetica nulla carles. Tattooed cosby sweater Food Truck, mcsweeney's quis non freegan vinyl. لو-فائي ويس اينڊرسن +1 سرٽوريل. ڪارليس غير جمالياتي مشق quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

هڪ

Occaecat commodo aliqua delectus. فاپ ڪرافٽ بيئر ڊيزرنٽ اسڪيٽ بورڊ اي. Lomo bicycle right adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. هاء زندگي id vinyl، echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. DIY minim ميسينجر بيگ کي ترتيب ڏيو. Cred ex in, sustainable delectus consectetur fanny pack iphone.

ٻه

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

three

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

ڪيٽار ٽوئي بلاگ، ڪلپا ميسينجر بيگ مارفا جيڪو به ڊيليڪٽس فوڊ ٽرڪ. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats توهان شايد انهن جي باري ۾ نه ٻڌو هوندو جنهن جي نتيجي ۾ هودي گلوٽين فري لو فائي فيپ aliquip. Labore elit placeat before they sell out, Terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan ڪرافٽ بيئر سيٽن تيار ٿيل ويليٽ. VHS چيمبري ليبرس عارضي وينيم. Anim mollit minim commodo ullamco thundercats.

استعمال

Bootstrap nav جي ضرورت آهي

Scrollspy في الحال استعمال ڪرڻ جي ضرورت آهي بوٽ اسٽريپ نيوي جزو کي فعال لنڪ جي مناسب نمايان ڪرڻ لاء.

حل ڪرڻ جي قابل ID ٽارگيٽ گهربل

نيوبار لنڪس کي حل ڪرڻ جي قابل id هدفن جو هجڻ لازمي آهي. مثال طور، هڪ <a href="#home">home</a>لازمي طور تي DOM ۾ ڪنهن شيءِ سان ملندڙ جلندڙ آهي جهڙوڪ <div id="home"></div>.

غير :visibleٽارگيٽ عنصرن کي نظرانداز ڪيو ويو

ھدف وارا عنصر جيڪي :visiblejQuery جي مطابق نه آھن نظرانداز ڪيا ويندا ۽ انھن سان لاڳاپيل نيوي شيون ڪڏھن به نمايان نه ٿينديون.

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

ڪابه معاملي تي عمل درآمد جو طريقو، 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="".

نالو قسم ڊفالٽ وضاحت
بند ڪرڻ نمبر 10 اسڪرول جي پوزيشن کي ڳڻڻ دوران مٿي کان آفسيٽ ڪرڻ لاءِ پکسلز.

واقعا

واقعي جو قسم وصف
activate.bs.scrollspy هي واقعو باهه لڳندو آهي جڏهن به هڪ نئين شيءِ اسڪرول اسپي پاران چالو ٿئي ٿي.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

مثال ٽيب

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

Raw denim توهان شايد انهن بابت نه ٻڌو آهي جين شارٽس آسٽن. Nesciunt tofu stumptown aliqua، retro synth master cleanse. Mustache cliche tempor، Williamsburg Carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi، qui irure Terry richardson ex squid. ايليڪيپ جڳه تي سالويا سيلم آئي فون. Seitan aliquip quis cardigan آمريڪي لباس، butcher voluptate nisi qui.

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

ٽيب ٿيل نيويگيشن کي وڌايو

هي پلگ ان ٽيب ٿيل علائقن کي شامل ڪرڻ لاءِ ٽيب ٿيل نيويگيشن جزو کي وڌايو.

استعمال

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

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

توھان ڪيترن ئي طريقن سان انفرادي ٽيب کي چالو ڪري سگھو ٿا:

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

مارڪ اپ

توھان چالو ڪري سگھو ٿا ٽئب يا پِل نيويگيشن بغير ڪنھن جاوا اسڪرپٽ لکڻ کان سواءِ صرف بيان ڪندي data-toggle="tab"يا data-toggle="pill"ھڪڙي عنصر تي. navٽيب ۾ ۽ nav-tabsڪلاس شامل ڪرڻ ulسان بوٽ اسٽريپ ٽئب اسٽائل لاڳو ٿيندو ، جڏهن ته nav۽ nav-pillsڪلاس شامل ڪرڻ سان پلي اسٽائلنگ لاڳو ٿيندي .

<div>

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

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

</div>

ٻرندڙ اثر

ٽيب کي ڦهلائڻ لاء، .fadeهر هڪ ۾ شامل ڪريو .tab-pane. پهرين ٽئب پين کي پڻ لازمي آهي .inته شروعاتي مواد کي ڏسڻ ۾ اچي.

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

طريقا

$().tab

هڪ ٽيب عنصر ۽ مواد ڪنٽينر کي چالو ڪري ٿو. ٽئب ۾ هجڻ گهرجي يا ته هڪ 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واقعا فائر نه ڪيا ويندا.

واقعي جو قسم وصف
ڏيکاريو.bs.tab هي واقعو ٽيب شو تي فائر ڪري ٿو، پر ان کان اڳ جو نئون ٽيب ڏيکاريو ويو آهي. استعمال ڪريو event.target۽ event.relatedTargetھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي).
ڏيکاريو ويو.bs.tab هي واقعو ٽيب شو تي فائر ٿئي ٿو جڏهن هڪ ٽيب ڏيکاريو ويو آهي. استعمال ڪريو event.target۽ event.relatedTargetھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي).
hide.bs.tab هي واقعو فائر ٿئي ٿو جڏهن هڪ نئين ٽيب کي ڏيکاريو وڃي (۽ اهڙيء طرح پوئين فعال ٽيب کي لڪايو وڃي). استعمال ڪريو event.target۽ event.relatedTargetھدف ڪرڻ لاءِ ھدف ڪرڻ لاءِ موجوده فعال ٽيب ۽ نئين جلد فعال ٿيڻ واري ٽيب، ترتيب سان.
hidden.bs.tab هي واقعو نئين ٽيب جي ظاهر ٿيڻ کان پوءِ فائر ٿئي ٿو (۽ اهڙيءَ طرح پوئين فعال ٽيب لڪيل آهي). استعمال ڪريو event.target۽ event.relatedTargetھدف ڪرڻ لاء اڳئين فعال ٽيب ۽ نئين فعال ٽيب، ترتيب سان.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

ٽول ٽائيپ tooltip.js

جيسن فريم پاران لکيل شاندار jQuery.tipsy پلگ ان کان متاثر ٿي؛ ٽول ٽائپس هڪ اپڊيٽ ورجن آهي، جيڪو تصويرن تي ڀروسو نٿو ڪري، اينيميشنز لاءِ CSS3 استعمال ڪريو، ۽ مقامي ٽائيٽل اسٽوريج لاءِ ڊيٽا-صفات.

زيرو ڊگھائي عنوانن سان ٽول ٽائپس ڪڏھن به نه ڏيکاريا ويندا آھن.

مثال

ٽول ٽائپس ڏسڻ لاءِ هيٺ ڏنل لنڪ تي هور ڪريو:

تنگ پتلون ايندڙ ليول ڪيفيه توهان شايد انهن بابت نه ٻڌو هوندو. فوٽو بوٿ بيئر خام ڊينم ليٽرپريس ويگن ميسينجر بيگ اسٽمپ ٽائون. فارم-ٽو-ٽيبل سيٽن، ميڪسويني جي فڪسي پائيدار quinoa 8-bit آمريڪن ڪپڙا هڪ ٽيري رچرڊسن ونائل چيمبري آهي. Beard stumptown, cardigans banh mi lomo Thundercats. ٽوفو بايو ڊيزل وليمسبرگ مارفا، چار لوڪو ميڪسويني جي صاف ويگن چيمبري. هڪ واقعي لوهي ڪاريگر جيڪو به ڪيٽار، سينسٽر فارم کان ٽيبل بئنڪسي آسٽن ٽوئيٽر هينڊل فريگن ڪريڊ را ڊينم سنگل اصل ڪافي وائرل.

جامد ٽول ٽائپ

چار آپشن موجود آھن: مٿي، ساڄي، ھيٺ، ۽ کاٻي سان ترتيب ڏنل.

چار طرفا

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

آپٽ ان ڪارڪردگي

ڪارڪردگي جي سببن لاء، ٽول ٽائپ ۽ پاپ اوور ڊيٽا-ايپس آپٽ-ان آهن، مطلب ته توهان کي انهن کي پنهنجو پاڻ شروع ڪرڻ گهرجي .

ھڪڙي صفحي تي سڀني ٽول ٽائپس کي شروع ڪرڻ جو ھڪڙو طريقو انھن کي انھن جي data-toggleخاصيت سان چونڊيو ويندو:

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

گھڻن لائين لنڪس

ڪڏهن ڪڏهن توهان هڪ ٽول ٽپ شامل ڪرڻ چاهيو ٿا هڪ هائپر لنڪ تي جيڪو ڪيترن ئي لائينن کي لپي ٿو. ٽول ٽائپ پلگ ان جو ڊفالٽ رويو اهو آهي ته ان کي افقي ۽ عمودي طور تي مرڪز ۾. white-space: nowrap;ھن کان بچڻ لاء پنھنجي لنگر ۾ شامل ڪريو .

ٽول ٽائپس ۾ بٽڻ گروپن، ان پٽ گروپن، ۽ جدولن کي خاص سيٽنگ جي ضرورت آھي

.btn-groupجڏهن a يا an .input-group، يا ٽيبل سان لاڳاپيل عناصر ( <td>, <th>, <tr>, , <thead>, <tbody>, ) جي اندر عناصر تي ٽول ٽائپس استعمال ڪندي <tfoot>، توهان کي اختيار بيان ڪرڻو پوندو container: 'body'(هيٺ ڏنل دستاويز) ناپسنديده ضمني اثرات کان بچڻ لاءِ (جهڙوڪ عنصر وسيع ٿيڻ ۽/ يا ان جي گول ڪنڊن کي وڃائڻ جڏهن ٽول ٽائپ شروع ٿئي ٿي).

لڪايل عناصر تي ٽول ٽائپ ڏيکارڻ جي ڪوشش نه ڪريو

جڏهن ٽارگيٽ $(...).tooltip('show')عنصر display: none;کي سڏڻ سبب ٿيندو ته ٽول ٽائپ کي غلط پوزيشن ۾ رکيو ويندو.

ڪي بورڊ ۽ مددگار ٽيڪنالاجي استعمال ڪندڙن لاءِ پهچ جا اوزار

ڪيبورڊ سان نيويگيٽ ڪرڻ وارن صارفين لاءِ، ۽ خاص طور تي مددگار ٽيڪنالاجيز جي استعمال ڪندڙن لاءِ، توھان کي صرف ڪيبورڊ تي ڌيان ڏيڻ واري عنصرن ۾ ٽول ٽِپس شامل ڪرڻ گھرجي، جھڙوڪ لنڪس، فارم ڪنٽرولز، يا ڪنھن به صوابديدي عنصر سان tabindex="0".

ٽول ٽائپس تي معذور عناصر جي ضرورت آهي لفافي عناصر

disabledهڪ يا عنصر ۾ ٽول ٽائپ شامل ڪرڻ لاءِ .disabled، عنصر کي a جي اندر رکو ۽ ان جي بدران <div>ٽول ٽائپ کي لاڳو ڪريو .<div>

اختيارن

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

نالو قسم ڊفالٽ وصف
اينيميشن بولين سچو ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
ڪنٽينر تار | ڪوڙو ڪوڙو

ٽول ٽائپ کي مخصوص عنصر ۾ شامل ڪري ٿو. مثال: container: 'body'. هي اختيار خاص طور تي مفيد آهي ته اهو توهان کي اجازت ڏئي ٿو ٽول ٽائپ کي دستاويز جي وهڪري ۾ ٽريگرنگ عنصر جي ويجهو - جيڪو ٽول ٽائپ کي ونڊو ريسائز ڪرڻ دوران ٽريگرنگ عنصر کان پري ٿيڻ کان روڪيندو.

دير ڪرڻ نمبر | اعتراض 0

ٽول ٽائپ (ms) ڏيکارڻ ۽ لڪائڻ ۾ دير - دستي ٽرگر جي قسم تي لاڳو نٿو ٿئي

جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لاڳو ٿئي ٿي ٻنهي کي لڪائڻ / ڏيکاريو

اعتراض جي جوڙجڪ آهي:delay: { "show": 500, "hide": 100 }

html بولين ڪوڙو ٽول ٽائپ ۾ HTML داخل ڪريو. جيڪڏهن غلط آهي، jQuery جو textطريقو استعمال ڪيو ويندو مواد کي DOM ۾ داخل ڪرڻ لاء. متن استعمال ڪريو جيڪڏھن توھان پريشان آھيو XSS حملن بابت.
لڳائڻ تار | فنڪشن 'مٿي'

ٽول ٽائيپ جي پوزيشن ڪيئن ڪجي - مٿي | هيٺان | کاٻي | حق | خودڪار
جڏهن "خودڪار" بيان ڪيو ويو آهي، اهو متحرڪ طور تي ٽول ٽائپ کي ٻيهر ترتيب ڏيندو. مثال طور، جيڪڏهن جڳهه "خودڪار کاٻي" آهي، ٽول ٽائپ جڏهن ممڪن هجي ته کاٻي پاسي ڏيکاريندو، ٻي صورت ۾ اهو ساڄي طرف ڏيکاريندو.

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي جڳهه کي طئي ڪرڻ لاء، ان کي سڏيو ويندو آهي ٽول ٽائپ DOM نوڊ ان جي پهرين دليل جي طور تي ۽ محرڪ عنصر DOM نوڊ ان جي سيڪنڊ طور. thisحوالو ٽول ٽائپ مثال تي مقرر ڪيو ويو آهي .

چونڊيندڙ تار ڪوڙو جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ٽول ٽائپ شيون مقرر ڪيل هدفن ڏانهن موڪليا ويندا. عملي طور تي، اهو استعمال ڪيو ويندو آهي متحرڪ HTML مواد کي فعال ڪرڻ لاءِ ٽول ٽائپس شامل ڪرڻ لاءِ. هي ڏسو ۽ هڪ معلوماتي مثال .
ٽيمپليٽ تار '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ٽول ٽائپ ٺاهڻ وقت استعمال ڪرڻ لاءِ بنيادي HTML.

ٽول ٽائپ کي انجيڪشن title۾ داخل ڪيو ويندو .tooltip-inner.

.tooltip-arrowٽول ٽائپ جو تير بڻجي ويندو.

ٻاهرين لفافي عنصر کي .tooltipطبقو هجڻ گهرجي.

عنوان تار | فنڪشن ''

ڊفالٽ عنوان جي قيمت جيڪڏهن titleخاصيت موجود نه آهي.

جيڪڏهن ڪو فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي thisحوالي سان ان عنصر ڏانهن سيٽ جنهن سان ٽول ٽائپ ڳنڍيل آهي.

محرڪ تار 'هور فوڪس' ٽول ٽائپ ڪيئن شروع ٿئي ٿو - ڪلڪ ڪريو | هور | ڌيان | دستور. توھان ڪيترائي محرڪ پاس ڪري سگھو ٿا؛ انھن کي ھڪڙي جڳھ سان الڳ ڪريو. manualڪنهن ٻئي ٽرڪ سان گڏ نه ٿو ڪري سگھجي.
ڏيک بندر تار | اعتراض | فنڪشن { چونڊيندڙ: 'جسم'، پيڊنگ: 0 }

هن عنصر جي حدن اندر ٽول ٽائپ رکي ٿو. مثال: viewport: '#viewport'يا{ "selector": "#viewport", "padding": 0 }

جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو آهي محرڪ عنصر DOM نوڊ ان جي واحد دليل طور. thisحوالو ٽول ٽائپ مثال تي مقرر ڪيو ويو آهي .

انفرادي ٽول ٽائپس لاءِ ڊيٽا جون خاصيتون

انفرادي ٽول ٽائپس جا اختيار متبادل طور تي بيان ڪري سگھجن ٿا ڊيٽا خاصيتن جي استعمال ذريعي، جيئن مٿي بيان ڪيو ويو آهي.

طريقا

$().tooltip(options)

هڪ ٽول ٽائپ هينڊلر کي هڪ عنصر گڏ ڪرڻ سان ڳنڍي ٿو.

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

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

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

.tooltip('destroy')

هڪ عنصر جي ٽول ٽائپ کي لڪايو ۽ تباهه ڪري ٿو. ٽول ٽائپس جيڪي استعمال ڪندا آهن وفد (جيڪي اختيار استعمال ڪندي ٺاهيا ويا آهن ) selectorانفرادي طور تي نسلي ٽرگر عناصر تي تباهه نه ٿي سگهن.

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

واقعا

واقعي جو قسم وصف
show.bs.tooltip اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
ڏيکاريو ويو.bs.tooltip هي واقعو فائر ڪيو ويو آهي جڏهن ٽول ٽائپ استعمال ڪندڙ کي ڏيکاريو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
hide.bs.tooltip اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
hidden.bs.tooltip هي واقعو فائر ڪيو ويندو آهي جڏهن ٽول ٽائپ ختم ٿي وئي آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
inserted.bs.tooltip هي واقعو ان واقعي کان پوءِ فائر ڪيو ويو آهي show.bs.tooltipجڏهن ٽول ٽائپ ٽيمپليٽ DOM ۾ شامل ڪيو ويو آهي.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

مواد جا ننڍا اوورليز شامل ڪريو، جهڙوڪ iPad تي، ھاؤسنگ ثانوي معلومات لاءِ ڪنھن به عنصر ۾.

Popovers جن جا عنوان ۽ مواد ٻئي صفر ڊگھائي آهن ڪڏهن به ڏيکاريل نه آهن.

پلگ ان انحصار

Popovers توهان جي بوٽ اسٽريپ جي نسخي ۾ شامل ٿيڻ لاء ٽول ٽائپ پلگ ان جي ضرورت آهي.

آپٽ ان ڪارڪردگي

ڪارڪردگي جي سببن لاء، ٽول ٽائپ ۽ پاپ اوور ڊيٽا-ايپس آپٽ-ان آهن، مطلب ته توهان کي انهن کي پنهنجو پاڻ شروع ڪرڻ گهرجي .

ھڪڙي صفحي تي سڀني پاپورز کي شروع ڪرڻ جو ھڪڙو طريقو انھن کي انھن جي data-toggleخاصيت سان چونڊيو ويندو:

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

بٽڻ گروپن، ان پٽ گروپن، ۽ جدولن ۾ پاپور خاص سيٽنگ جي ضرورت آھي

.btn-groupجڏهن a يا an .input-group، يا ٽيبل سان لاڳاپيل عناصر ( <td>, <th>, <tr>, , <thead>, <tbody>, ) جي اندر عناصر تي پاپ اوور استعمال ڪندي <tfoot>، توهان کي اختيار بيان ڪرڻو پوندو container: 'body'(هيٺ ڏنل دستاويز) ناپسنديده ضمني اثرات کان بچڻ لاءِ (جهڙوڪ عنصر وڌندو رهيو ۽/ يا ان جي گول ڪنڊن کي وڃائڻ جڏهن پاپ اوور شروع ٿئي ٿي).

پوپٽ عناصر تي پوپ اوور ڏيکارڻ جي ڪوشش نه ڪريو

جڏهن ٽارگيٽ $(...).popover('show')عنصر آهي display: none;ته پوپ اوور کي غلط پوزيشن ۾ آڻڻ جو سبب بڻجندو.

معذور عناصر تي پوپور کي ڍڪڻ واري عناصر جي ضرورت هوندي آهي

disabledهڪ يا عنصر ۾ هڪ پاپ اوور شامل ڪرڻ لاءِ .disabled، عنصر کي a جي اندر رکو ۽ ان جي بدران <div>پاپ اوور لاڳو ڪريو .<div>

گھڻن لائين لنڪس

ڪڏهن ڪڏهن توهان هڪ پاپ اوور کي هائپر لنڪ ۾ شامل ڪرڻ چاهيو ٿا جيڪو ڪيترن ئي لائينن کي لپي ٿو. پاپ اوور پلگ ان جو ڊفالٽ رويي ان کي افقي ۽ عمودي طور تي مرڪز ڪرڻ آهي. white-space: nowrap;ھن کان بچڻ لاء پنھنجي لنگر ۾ شامل ڪريو .

مثال

جامد پاپ اوور

چار آپشن موجود آھن: مٿي، ساڄي، ھيٺ، ۽ کاٻي سان ترتيب ڏنل.

پاپ اوور مٿي

Sed posuere consectetur est at lobortis. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپ اوور حق

Sed posuere consectetur est at lobortis. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پوپ اوور هيٺان

Sed posuere consectetur est at lobortis. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپ اوور ڇڏي ويو

Sed posuere consectetur est at lobortis. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum.

لائيو ڊيمو

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

چار طرفا

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

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

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

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

ايندڙ ڪلڪ تي رد ڪريو

focusايندڙ ڪلڪ تي پاپ اوور کي برطرف ڪرڻ لاءِ ٽرگر استعمال ڪريو جيڪو صارف ٺاهي ٿو .

ڊسمس-آن-ايئن-ڪلڪ لاءِ مخصوص مارڪ اپ گھربل آھي

مناسب ڪراس-براؤزر ۽ ڪراس-پليٽ فارم جي رويي لاءِ، توھان کي لازمي طور استعمال ڪرڻ گھرجي <a>ٽيگ، نه<button> ٽيگ، ۽ توھان کي پڻ شامل ڪرڻ گھرجي ۽ role="button"خاصيتون tabindex.

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

استعمال

جاوا اسڪرپٽ ذريعي پاپ اوور کي فعال ڪريو:

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

اختيارن

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

نالو قسم ڊفالٽ وصف
اينيميشن بولين سچو پاپ اوور تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
ڪنٽينر تار | ڪوڙو ڪوڙو

پوپ اوور کي خاص عنصر ۾ شامل ڪري ٿو. مثال: container: 'body'. هي اختيار خاص طور تي ڪارائتو آهي ته اهو توهان کي اجازت ڏئي ٿو ته پاپ اوور کي دستاويز جي وهڪري ۾ ٽريگرنگ عنصر جي ويجهو - جيڪو پاپ اوور کي ونڊو ريزائز ڪرڻ دوران ٽريگرنگ عنصر کان پري ٿيڻ کان روڪيندو.

مواد تار | فنڪشن ''

ڊفالٽ مواد جي قيمت جيڪڏهن data-contentخاصيت موجود نه آهي.

جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي thisحوالي سان ان عنصر جي سيٽ سان جيڪو پاپ اوور سان ڳنڍيل آهي.

دير ڪرڻ نمبر | اعتراض 0

پوپ اوور (ms) ڏيکارڻ ۽ لڪائڻ ۾ دير - دستي ٽرگر جي قسم تي لاڳو نٿو ٿئي

جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لاڳو ٿئي ٿي ٻنهي کي لڪائڻ / ڏيکاريو

اعتراض جي جوڙجڪ آهي:delay: { "show": 500, "hide": 100 }

html بولين ڪوڙو پاپ اوور ۾ HTML داخل ڪريو. جيڪڏهن غلط آهي، jQuery جو textطريقو استعمال ڪيو ويندو مواد کي DOM ۾ داخل ڪرڻ لاء. متن استعمال ڪريو جيڪڏھن توھان پريشان آھيو XSS حملن بابت.
لڳائڻ تار | فنڪشن 'ساڄو'

پوپ اوور جي پوزيشن ڪيئن ڪجي - ٽاپ | هيٺان | کاٻي | حق | خودڪار.
جڏهن "خودڪار" بيان ڪيو ويو آهي، اهو متحرڪ طور تي پاپ اوور کي ٻيهر ترتيب ڏيندو. مثال طور، جيڪڏهن جڳهه "خودڪار کاٻي" آهي، پاپ اوور جڏهن ممڪن هجي ته کاٻي پاسي ڏيکاريندو، ٻي صورت ۾ اهو ساڄي طرف ڏيکاريندو.

جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي جڳهه جو تعين ڪرڻ لاء، ان کي سڏيو ويندو آهي پاپ اوور DOM نوڊ سان ان جي پهرين دليل طور ۽ محرڪ عنصر DOM نوڊ ان جي سيڪنڊ طور. thisحوالو پاپ اوور مثال تي مقرر ڪيو ويو آهي .

چونڊيندڙ تار ڪوڙو جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، پاپ اوور شين کي مقرر ڪيل هدفن ڏانهن نمائندو ڪيو ويندو. عملي طور تي، اهو استعمال ڪيو ويندو آهي متحرڪ HTML مواد کي فعال ڪرڻ لاءِ پاپ اوور شامل ڪرڻ لاءِ. هي ڏسو ۽ هڪ معلوماتي مثال .
ٽيمپليٽ تار '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

پاپ اوور ٺاهڻ وقت استعمال ڪرڻ لاءِ بنيادي HTML.

پاپ اوور کي انجيڪشن title۾ داخل ڪيو ويندو .popover-title.

پاپ اوور کي انجيڪشن content۾ داخل ڪيو ويندو .popover-content.

.arrowپاپ اوور جو تير بڻجي ويندو.

ٻاهرين لفافي عنصر کي .popoverطبقو هجڻ گهرجي.

عنوان تار | فنڪشن ''

ڊفالٽ عنوان جي قيمت جيڪڏهن titleخاصيت موجود نه آهي.

جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي thisحوالي سان ان عنصر جي سيٽ سان جيڪو پاپ اوور سان ڳنڍيل آهي.

محرڪ تار 'ڪلڪ' پاپ اوور ڪيئن شروع ٿئي ٿو - ڪلڪ ڪريو | هور | ڌيان | دستور. توھان ڪيترائي محرڪ پاس ڪري سگھو ٿا؛ انھن کي ھڪڙي جڳھ سان الڳ ڪريو. manualڪنهن ٻئي ٽرگر سان گڏ نه ٿو ڪري سگھجي.
ڏيک بندر تار | اعتراض | فنڪشن { چونڊيندڙ: 'جسم'، پيڊنگ: 0 }

هن عنصر جي حدن اندر پاپ اوور رکي ٿو. مثال: viewport: '#viewport'يا{ "selector": "#viewport", "padding": 0 }

جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو آهي محرڪ عنصر DOM نوڊ ان جي واحد دليل طور. thisحوالو پاپ اوور مثال تي مقرر ڪيو ويو آهي .

انفرادي پاپورز لاءِ ڊيٽا جون خاصيتون

انفرادي popovers لاء اختيارن کي متبادل طور تي بيان ڪري سگهجي ٿو ڊيٽا جي خاصيتن جي استعمال ذريعي، جيئن مٿي بيان ڪيو ويو آهي.

طريقا

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

واقعا

واقعي جو قسم وصف
show.bs.popover اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
ڏيکاريو ويو.bs.popover اهو واقعو فائر ڪيو ويو آهي جڏهن پاپ اوور کي صارف لاءِ ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
hide.bs.popover اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
hidden.bs.popover هي واقعو فائر ڪيو ويندو آهي جڏهن پاپ اوور ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
inserted.bs.popover اهو واقعو ان واقعي کان پوءِ فائر ڪيو ويو آهي show.bs.popoverجڏهن پاپ اوور ٽيمپليٽ ڊوم ۾ شامل ڪيو ويو آهي.
$('#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طبقن عنصر تي موجود آهن، خبردار ٿيڻ کان اڳ ختم ٿي ويندو.

واقعا

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

واقعي جو قسم وصف
بند ڪريو بي بي خبر اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن closeمثال جو طريقو سڏيو ويندو آهي.
بند.bs.alert هي واقعو فائر ڪيو ويو آهي جڏهن الرٽ بند ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

بٽڻ button.js

بٽڻ سان وڌيڪ ڪريو. ڪنٽرول بٽڻ بيان ڪري ٿو يا ٽول بار وانگر وڌيڪ اجزاء لاءِ بٽڻن جا گروپ ٺاھيو.

ڪراس برائوزر مطابقت

فائر فاکس جاري رهي فارم ڪنٽرول اسٽيٽس (معذوريت ۽ چڪاس) سڄي صفحي جي لوڊ تي . ھن لاء ھڪڙو حل استعمال ڪرڻ آھي autocomplete="off". ڏسو Mozilla بگ #654072 .

رياستي

data-loading-text="Loading..."بٽڻ تي لوڊ ڪرڻ واري حالت کي استعمال ڪرڻ لاء شامل ڪريو .

ھن خصوصيت کي ختم ڪيو ويو آھي v3.3.5 کان ۽ ختم ڪيو ويو آھي v4 ۾.

جيڪو به رياست توهان چاهيو استعمال ڪريو!

هن مظاهري جي خاطر، اسان استعمال ڪري رهيا آهيون data-loading-text۽ $().button('loading')، پر اهو واحد رياست ناهي جيڪو توهان استعمال ڪري سگهو ٿا. ھن تي وڌيڪ ڏسو ھيٺ ڏنل $().button(string)دستاويز ۾ .

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

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

اڪيلو ٽوگل

data-toggle="button"ھڪڙي بٽڻ تي ٽوگلنگ کي چالو ڪرڻ لاء شامل ڪريو .

پري ٽوگل ٿيل بٽڻ جي ضرورت آهي .active۽aria-pressed="true"

اڳي ٽوگل ٿيل بٽڻن لاءِ، توھان کي لازمي طور شامل ڪرڻ گھرجي .activeڪلاس ۽ aria-pressed="true"وصف buttonپاڻ ڏانھن.

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

چيڪ بڪس / ريڊيو

شامل ڪريو چيڪ بڪس يا ريڊيو انپٽس data-toggle="buttons"تي .btn-groupمشتمل چيڪ بڪس کي انهن جي لاڳاپيل اندازن ۾ ٽوگلنگ کي فعال ڪرڻ لاءِ.

چونڊيل اختيارن جي ضرورت آهي.active

اڳواٽ چونڊيل اختيارن لاءِ، توھان کي لازمي طور تي .activeڪلاس کي پنھنجي ان پٽ ۾ شامل ڪرڻ گھرجي label.

بصري چيڪ ٿيل حالت صرف ڪلڪ تي اپڊيٽ ڪئي وئي

جيڪڏهن چيڪ بڪس بٽڻ جي چيڪ ٿيل حالت کي اپڊيٽ ڪيو ويندو آهي بغير ڪنهن clickواقعي کي بٽڻ تي فائرنگ ڪرڻ جي (مثال طور ان پٽ <input type="reset">جي ملڪيت کي ترتيب ڏيڻ يا ذريعي )، توهان کي ان پٽ جي پاڻ تي ڪلاس checkedکي ٽوگل ڪرڻ جي ضرورت پوندي ..activelabel

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

طريقا

$().button('toggle')

ٽوگلز پش اسٽيٽ. بٽڻ کي ظاهر ڪري ٿو ته اهو چالو ڪيو ويو آهي.

$().button('reset')

بٽڻ واري حالت کي ري سيٽ ڪري ٿو - متن کي اصل متن ۾ تبديل ڪري ٿو. اهو طريقو غير مطابقت رکندڙ آهي ۽ ريٽنگ اصل ۾ مڪمل ٿيڻ کان اڳ واپس اچي ٿو.

$().button(string)

متن کي ڪنهن به ڊيٽا بيان ڪيل ٽيڪسٽ اسٽيٽ ڏانهن تبديل ڪري ٿو.

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

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

کولڻ collapse.js

لچڪدار پلگ ان جيڪو استعمال ڪري ٿو مٿئين طبقن کي آسان ٽوگل رويي لاءِ.

پلگ ان انحصار

کولڻ جي ضرورت آهي منتقلي پلگ ان کي توهان جي بوٽ اسٽريپ جي ورزن ۾ شامل ڪيو وڃي.

مثال

ڪلاس تبديلين ذريعي ٻيو عنصر ڏيکارڻ ۽ لڪائڻ لاءِ ھيٺ ڏنل بٽڻن تي ڪلڪ ڪريو:

  • .collapseمواد لڪائي ٿو
  • .collapsingمنتقلي دوران لاڳو ٿئي ٿو
  • .collapse.inمواد ڏيکاري ٿو

توھان استعمال ڪري سگھوٿا ھڪڙي لنڪ سان hrefوصف سان، يا ھڪڙي بٽڻ سان data-targetوصف سان. ٻنهي صورتن ۾، data-toggle="collapse"ضروري آهي.

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

Accordion مثال

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

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

اهو پڻ ممڪن آهي ته .panel-bodys کي s سان .list-groupمٽايو.

  • بوٽپلي
  • هڪ آساني سان
  • ٻيو ايروس

وڌاءُ / ٽوڙڻ ڪنٽرولن کي رسائي لائق بڻايو

aria-expandedڪنٽرول عنصر ۾ شامل ڪرڻ جي پڪ ڪريو . هي وصف واضح طور تي اسڪرين ريڊرز ۽ ساڳئي مددگار ٽيڪنالاجيز کي کولڻ واري عنصر جي موجوده حالت کي واضح ڪري ٿو. جيڪڏهن ٽوڙڻ وارو عنصر ڊفالٽ طور بند ڪيو ويو آهي، ان جي قيمت هجڻ گهرجي aria-expanded="false". inجيڪڏهن توهان ڪلاس استعمال ڪندي ڊفالٽ طور کولڻ واري عنصر کي سيٽ aria-expanded="true"ڪيو آهي، ان جي بدران ڪنٽرول تي سيٽ ڪريو. پلگ ان خود بخود هن خاصيت کي ٽوگل ڪري ڇڏيندو ان جي بنياد تي ته ختم ٿيڻ وارو عنصر کوليو ويو آهي يا بند ڪيو ويو آهي.

اضافي طور تي، جيڪڏهن توهان جو ڪنٽرول عنصر هڪ واحد ختم ٿيڻ واري عنصر کي نشانو بڻائيندو آهي - يعني data-targetوصف هڪ idچونڊيندڙ ڏانهن اشارو ڪري رهيو آهي - توهان ڪنٽرول عنصر ۾ اضافي aria-controlsخاصيت شامل ڪري سگهو ٿا، جنهن ۾ idختم ٿيڻ واري عنصر شامل آهي. جديد اسڪرين ريڊرز ۽ ساڳيا مددگار ٽيڪنالاجيون استعمال ڪن ٿيون هن وصف کي استعمال ڪندڙن کي اضافي شارٽ ڪٽ مهيا ڪرڻ لاءِ ته جيئن پاڻ سڌو سنئون ڪلپسيبل عنصر ڏانهن وڃو.

استعمال

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

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

نالو قسم ڊفالٽ وضاحت
والدين چونڊيندڙ ڪوڙو جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ته پوءِ بيان ڪيل والدين جي تحت سڀ ختم ٿيڻ وارا عنصر بند ڪيا ويندا جڏهن هي ٽوڙڻ واري شيءِ ڏيکاري ويندي. panel(روايتي accordion رويي سان ملندڙ جلندڙ - اهو طبقن تي منحصر آهي )
ٽوگل ڪرڻ بولين سچو ٽوگل ڪرڻ واري عنصر کي دعوت ڏيڻ تي

طريقا

.collapse(options)

توهان جي مواد کي کولڻ واري عنصر طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object.

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

.collapse('toggle')

ڏيکاريل يا لڪائڻ لاءِ کولڻ لائق عنصر کي ٽوگل ڪري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ڪلپسيبل عنصر اصل ۾ ڏيکاريو ويو هجي يا لڪيل هجي (يعني ان کان اڳ جو shown.bs.collapseيا hidden.bs.collapseواقعو ٿئي).

.collapse('show')

هڪ ٽوڙڻ وارو عنصر ڏيکاري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ختم ٿيڻ وارو عنصر اصل ۾ ڏيکاريو ويو آهي (يعني shown.bs.collapseواقعي ٿيڻ کان اڳ).

.collapse('hide')

لڪائڻ وارو عنصر لڪائي ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ختم ٿيڻ وارو عنصر اصل ۾ لڪيل هجي (يعني hidden.bs.collapseواقعي ٿيڻ کان اڳ).

واقعا

بوٽ اسٽريپ جي تباهي واري طبقي کي ختم ڪرڻ جي ڪارڪردگي ۾ ڇڪڻ لاء ڪجھ واقعن کي ظاهر ڪري ٿو.

واقعي جو قسم وصف
show.bs.collapse اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
ڏيکاريو ويو.bs.collapse هي واقعو فائر ڪيو ويندو آهي جڏهن هڪ ختم ٿيڻ واري عنصر کي استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
hide.bs.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 جي باري ۾ رکو ۽ اهو خودڪار طريقي سان ترتيب ڏنو ويندو ۽ فارميٽ ڪيو ويندو.

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

نالو قسم ڊفالٽ وضاحت
وقفو نمبر 5000 ڪنهن شئي کي پاڻمرادو سائيڪل هلائڻ جي وچ ۾ دير ڪرڻ جو وقت. جيڪڏهن غلط، ڪارسيل خودڪار طريقي سان نه هلندو.
روڪ تار | null "هور" جيڪڏهن سيٽ ڪيو ويو "hover"آهي ته، ڪارسيل جي سائيڪلنگ کي روڪي ٿو آن mouseenter۽ ڪارسيل جي سائيڪل کي ٻيهر شروع ڪري ٿو mouseleave. جيڪڏهن سيٽ ڪيو ويو ته null، ڪارسيل مٿان هوور ڪرڻ ان کي روڪي نه سگهندو.
لپيٽڻ بولين سچو ڇا ڪارسيل کي مسلسل سائيڪل هلائڻ گهرجي يا سخت اسٽاپ آهن.
ڪي بورڊ بولين سچو ڇا ڪارسيل کي ڪي بورڊ جي واقعن تي رد عمل ڏيڻ گهرجي.

ڪارسيل کي اختياري اختيارن سان objectشروع ڪري ٿو ۽ شيون ذريعي سائيڪل کي شروع ڪري ٿو.

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

کاٻي کان ساڄي تائين ڪارسيل شيون ذريعي سائيڪل.

ڪارسيل کي شيون ذريعي سائيڪل هلائڻ کان روڪي ٿو.

ڪارسيل کي ھڪڙي خاص فريم ڏانھن (0 جي بنياد تي، ھڪڙي صف سان ملندڙ جلندڙ).

پوئين شيءِ ڏانهن چڪر.

ايندڙ شيون ڏانهن سائيڪل.

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

ٻنهي واقعن ۾ هيٺيان اضافي خاصيتون آهن:

  • direction: اهو رخ جنهن ۾ ڪارسيل سلائيڊنگ آهي (يا "left"يا "right").
  • relatedTarget: DOM عنصر جيڪو فعال شيءِ جي طور تي جاءِ تي سلائيڊ ڪيو پيو وڃي.

سڀ ڪارسيل واقعا ڪارسيل تي فائر ڪيا ويا آهن (يعني تي <div class="carousel">).

واقعي جو قسم وصف
slide.bs.carousel اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن slideمثال جو طريقو سڏيو ويندو آهي.
slid.bs.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".

نالو قسم ڊفالٽ وضاحت
بند ڪرڻ نمبر | فنڪشن | اعتراض 10 اسڪرول جي پوزيشن کي ڳڻڻ دوران اسڪرين مان آفسٽ ڪرڻ لاءِ پکسلز. جيڪڏهن هڪ واحد نمبر مهيا ڪيو ويو آهي، آفسيٽ ٻنهي مٿين ۽ هيٺئين طرفن ۾ لاڳو ڪيو ويندو. هڪ منفرد، هيٺيون ۽ مٿانهون آفسيٽ مهيا ڪرڻ لاءِ صرف هڪ اعتراض offset: { top: 10 }يا offset: { top: 10, bottom: 5 }. هڪ فنڪشن استعمال ڪريو جڏهن توهان کي متحرڪ طور تي هڪ آفسيٽ ڳڻڻ جي ضرورت آهي.
ٽارگيٽ چونڊيندڙ | نوڊ | jQuery عنصر windowاعتراض _ affix جي ٽارگيٽ عنصر کي بيان ڪري ٿو.

طريقا

.affix(options)

توھان جي مواد کي چالو ڪري ٿو جئين مواد سان ڳنڍيل آھي. اختياري اختيارن کي قبول ڪري ٿو object.

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

.affix('checkPosition')

لاڳاپيل عناصر جي طول و عرض، پوزيشن، ۽ اسڪرول پوزيشن جي بنياد تي لاڳاپو جي حالت کي ٻيهر ڳڻيو. ،، ۽ طبقن .affixکي نئين رياست جي مطابق شامل ڪيل مواد مان شامل يا ختم ڪيو ويو آھي. هن طريقي کي سڏڻ جي ضرورت آهي جڏهن به لڳل مواد جا طول و عرض يا ٽارگيٽ عنصر تبديل ڪيا وڃن، انهي سان لاڳاپيل مواد جي صحيح پوزيشن کي يقيني بڻائڻ لاء..affix-top.affix-bottom

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

واقعا

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

واقعي جو قسم وصف
affix.bs.affix اهو واقعو فوري طور تي باهه لڳندو آهي ان کان اڳ جو عنصر لڳايو ويو آهي.
affixed.bs.affix اهو واقعو فائر ڪيو ويو آهي ان کان پوءِ عنصر لڳايو ويو آهي.
affix-top.bs.affix اهو واقعو فوري طور تي باهه لڳندو آهي ان کان اڳ جو عنصر چسپجي ويو آهي-مٿي.
affixed-top.bs.affix هي واقعو فائر ڪيو ويو آهي ان کان پوءِ عنصر چسپجي ويو-مٿي.
affix-bottom.bs.affix اهو واقعو فوري طور تي باهه لڳندو آهي ان کان اڳ جو عنصر لڳايو ويو آهي-هيٺيان.
affixed-bottom.bs.affix ھي واقعو فائر ڪيو ويو آھي ان کان پوءِ عنصر کي چسپو ڪيو ويو آھي ھيٺان.