جائزہ

انفرادی یا مرتب شدہ

پلگ انز کو انفرادی طور پر شامل کیا جا سکتا ہے (بوٹسٹریپ کی انفرادی *.jsفائلوں کا استعمال کرتے ہوئے)، یا سبھی ایک ساتھ (استعمال کرتے ہوئے bootstrap.jsیا minified bootstrap.min.js)۔

ڈیٹا کی خصوصیات

آپ جاوا اسکرپٹ کی ایک لائن لکھے بغیر تمام بوٹسٹریپ پلگ ان کو خالصتاً مارک اپ API کے ذریعے استعمال کر سکتے ہیں۔ یہ بوٹسٹریپ کا فرسٹ کلاس API ہے اور پلگ ان استعمال کرتے وقت آپ کا پہلا خیال ہونا چاہیے۔

اس نے کہا، کچھ حالات میں اس فعالیت کو بند کرنا ضروری ہو سکتا ہے۔ لہذا، ہم دستاویز کے نام کی جگہ پر موجود تمام واقعات کو غیر پابند کرکے ڈیٹا وصف API کو غیر فعال کرنے کی صلاحیت بھی فراہم کرتے ہیں data-api۔ یہ اس طرح لگتا ہے:

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

متبادل طور پر، کسی مخصوص پلگ ان کو نشانہ بنانے کے لیے، صرف اس طرح کے ڈیٹا-api نام کی جگہ کے ساتھ پلگ ان کا نام بطور نام شامل کریں:

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

پروگرامیٹک API

ہم یہ بھی مانتے ہیں کہ آپ کو تمام بوٹسٹریپ پلگ ان کو خالصتاً JavaScript 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) کو متحرک کیا جاتا ہے، اور اس کی ماضی کی شریک شکل (ex. shown) کسی عمل کی تکمیل پر متحرک ہوتی ہے۔

3.0.0 تک، تمام بوٹسٹریپ ایونٹس نام کی جگہ پر ہیں۔

تمام غیرمعمولی واقعات preventDefaultفعالیت فراہم کرتے ہیں۔ یہ کسی کارروائی کے شروع ہونے سے پہلے اس پر عمل درآمد کو روکنے کی صلاحیت فراہم کرتا ہے۔

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

ورژن نمبرز

بوٹسٹریپ کے jQuery پلگ ان میں سے ہر ایک کے ورژن تک پلگ ان کے کنسٹرکٹر کی VERSIONپراپرٹی کے ذریعے رسائی حاصل کی جا سکتی ہے۔ مثال کے طور پر، ٹول ٹپ پلگ ان کے لیے:

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

جاوا اسکرپٹ کے غیر فعال ہونے پر کوئی خاص فال بیک نہیں۔

بوٹسٹریپ کے پلگ ان خاص طور پر جب جاوا اسکرپٹ کو غیر فعال کر دیا جاتا ہے تو واپس نہیں آتے۔ اگر آپ اس معاملے میں صارف کے تجربے کی پرواہ کرتے ہیں تو، <noscript>اپنے صارفین کو صورتحال (اور جاوا اسکرپٹ کو دوبارہ فعال کرنے کا طریقہ) کی وضاحت کرنے کے لیے استعمال کریں، اور/یا اپنی مرضی کے مطابق فال بیکس شامل کریں۔

ٹرانزیشن transition.js

منتقلی کے بارے میں

منتقلی کے آسان اثرات کے لیے، transition.jsدوسری JS فائلوں کے ساتھ ایک بار شامل کریں۔ اگر آپ مرتب شدہ (یا minified) استعمال کر رہے ہیں bootstrap.js، تو اسے شامل کرنے کی ضرورت نہیں ہے—یہ پہلے سے موجود ہے۔

اندر کیاہے

transitionEndTransition.js واقعات کے لیے ایک بنیادی مددگار کے ساتھ ساتھ CSS ٹرانزیشن ایمولیٹر ہے۔ اس کا استعمال دوسرے پلگ انز CSS ٹرانزیشن سپورٹ کو چیک کرنے اور ہینگ ٹرانزیشن کو پکڑنے کے لیے کرتے ہیں۔

ٹرانزیشن کو غیر فعال کرنا

مندرجہ ذیل JavaScript کے ٹکڑوں کا استعمال کرتے ہوئے ٹرانزیشن کو عالمی سطح پر غیر فعال کیا جا سکتا ہے، جو لوڈ ہونے کے بعد 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 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 -->

ٹرگر بٹن کی بنیاد پر مختلف موڈل مواد

بٹنوں کا ایک گروپ ہے جو سب ایک ہی موڈل کو متحرک کرتے ہیں، صرف تھوڑا سا مختلف مواد کے ساتھ؟ موڈل کے مواد کو مختلف کرنے کے لیے HTML اوصاف (ممکنہ طور پر jQuery کے ذریعے ) استعمال کریں event.relatedTargetاور اس پر منحصر ہے کہ کس بٹن پر کلک کیا گیا تھا۔ تفصیلات کے لیے موڈل ایونٹس کی دستاویزات دیکھیں ،data-*relatedTarget

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

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

استعمال

موڈل پلگ ان ڈیٹا کی خصوصیات یا جاوا اسکرپٹ کے ذریعے آپ کے پوشیدہ مواد کو ڈیمانڈ پر ٹوگل کرتا ہے۔ یہ پہلے سے طے شدہ اسکرولنگ رویے کو اوور رائڈ .modal-openکرنے میں بھی اضافہ کرتا ہے اور موڈل سے باہر کلک کرنے پر دکھائے گئے ماڈلز کو مسترد کرنے کے لیے ایک کلک ایریا فراہم کرتا ہے۔<body>.modal-backdrop

ڈیٹا اوصاف کے ذریعے

جاوا اسکرپٹ لکھے بغیر موڈل کو چالو کریں۔ ایک کنٹرولر عنصر پر سیٹ کریں data-toggle="modal"، جیسے بٹن، ایک کے ساتھ data-target="#foo"یا href="#foo"کسی مخصوص موڈل کو ٹوگل کرنے کے لیے ہدف بنانا۔

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

جاوا اسکرپٹ کے ذریعے

myModalJavaScript کی ایک لائن کے ساتھ id کے ساتھ ایک موڈل کو کال کریں :

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

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-backdrop=""۔

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

طریقے

.modal(options)

آپ کے مواد کو ایک ماڈل کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

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

.modal('toggle')

دستی طور پر ایک موڈل ٹوگل کرتا ہے۔ موڈل کے حقیقت میں دکھائے جانے یا چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی واقعہ shown.bs.modalیا hidden.bs.modalواقعہ ہونے سے پہلے)۔

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

.modal('show')

دستی طور پر ایک موڈل کھولتا ہے۔ موڈل کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.modalواقعہ پیش آنے سے پہلے)۔

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

.modal('hide')

دستی طور پر ایک موڈل چھپاتا ہے۔ موڈل کے حقیقت میں پوشیدہ ہونے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی hidden.bs.modalواقعہ پیش آنے سے پہلے)۔

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

.modal('handleUpdate')

اسکرول بار کے ظاہر ہونے کی صورت میں موڈل کی پوزیشننگ کو ایڈجسٹ کرتا ہے، جس سے موڈل بائیں طرف چھلانگ لگا دے گا۔

صرف اس وقت ضرورت ہوتی ہے جب موڈل کی اونچائی کھلی ہونے کے دوران تبدیل ہوتی ہے۔

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

تقریبات

بوٹسٹریپ کی موڈل کلاس موڈل فنکشنلٹی میں شامل ہونے کے لیے چند واقعات کو بے نقاب کرتی ہے۔

تمام موڈل واقعات خود موڈل پر فائر کیے جاتے ہیں (یعنی پر <div class="modal">)۔

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ڈراپ ڈاؤن ڈراپ ڈاؤن ڈاٹ جے ایس

مثالیں

اس سادہ پلگ ان کے ساتھ تقریبا کسی بھی چیز میں ڈراپ ڈاؤن مینیو شامل کریں، بشمول navbar، ٹیبز، اور گولیاں۔

ایک نوبار کے اندر

گولیوں کے اندر

استعمال

.openڈیٹا انتساب یا JavaScript کے ذریعے، ڈراپ ڈاؤن پلگ ان پیرنٹ لسٹ آئٹم پر کلاس کو ٹوگل کرکے پوشیدہ مواد (ڈراپ ڈاؤن مینوز) کو ٹوگل کرتا ہے ۔

موبائل ڈیوائسز پر، ڈراپ ڈاؤن کھولنے .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 میں مثال

اسکرول اسپی پلگ ان اسکرول پوزیشن کی بنیاد پر نیوی اہداف کو خود بخود اپ ڈیٹ کرنے کے لیے ہے۔ navbar کے نیچے کے علاقے کو اسکرول کریں اور فعال کلاس کی تبدیلی دیکھیں۔ ڈراپ ڈاؤن ذیلی آئٹمز کو بھی نمایاں کیا جائے گا۔

استعمال

رشتہ دار پوزیشننگ کی ضرورت ہے۔

عمل درآمد کے طریقہ سے کوئی فرق نہیں پڑتا، اسکرول اسپی position: relative;کو اس عنصر پر استعمال کی ضرورت ہوتی ہے جس کی آپ جاسوسی کر رہے ہیں۔ زیادہ تر معاملات میں یہ ہے <body>۔ کے علاوہ دیگر عناصر پر اسکرول اسپائی کرتے وقت <body>، اس بات کو یقینی بنائیں کہ ایک heightسیٹ ہو اور overflow-y: scroll;لاگو ہو۔

ڈیٹا اوصاف کے ذریعے

اپنی ٹاپ بار نیویگیشن میں آسانی سے اسکرول اسپی رویہ شامل 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;، جاوا اسکرپٹ کے ذریعے اسکرول اسپی کو کال کریں:

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

طریقے

.scrollspy('refresh')

DOM سے عناصر کو شامل کرنے یا ہٹانے کے ساتھ مل کر scrollspy کا استعمال کرتے وقت، آپ کو ریفریش طریقہ کو اس طرح کال کرنے کی ضرورت ہوگی:

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

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-offset=""۔

تقریبات

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

ٹوگل ایبل ٹیبز tab.js

مثال کے ٹیبز

مقامی مواد کے پین کے ذریعے منتقلی کے لیے فوری، متحرک ٹیب کی فعالیت شامل کریں، یہاں تک کہ ڈراپ ڈاؤن مینو کے ذریعے۔ نیسٹڈ ٹیبز تعاون یافتہ نہیں ہیں۔

استعمال

جاوا اسکرپٹ کے ذریعے قابل ٹیب ٹیبز کو فعال کریں (ہر ٹیب کو انفرادی طور پر چالو کرنے کی ضرورت ہے):

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

آپ انفرادی ٹیبز کو کئی طریقوں سے چالو کر سکتے ہیں:

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

مارک اپ

آپ کسی بھی جاوا اسکرپٹ کو لکھے بغیر data-toggle="tab"یا data-toggle="pill"کسی عنصر کی وضاحت کرکے ٹیب یا گولی نیویگیشن کو چالو کرسکتے ہیں۔ navٹیب میں اور nav-tabsکلاسز کو شامل ulکرنے سے بوٹسٹریپ ٹیب کی اسٹائلنگ لاگو ہوگی ، جبکہ navاور nav-pillsکلاسز کو شامل کرنے سے گولی اسٹائلنگ لاگو ہوگی۔

<div>

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

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

</div>

دھندلا اثر

ٹیبز کو دھندلا بنانے کے لیے، .fadeہر ایک میں شامل کریں .tab-pane۔ پہلے ٹیب پین کو بھی .inابتدائی مواد کو مرئی بنانا ہوگا۔

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

طریقے

$().tab

ایک ٹیب عنصر اور مواد کے کنٹینر کو چالو کرتا ہے۔ ٹیب میں DOM میں کنٹینر نوڈ کو ٹارگٹ کرنے والا data-targetیا تو ہونا چاہیے۔ hrefمندرجہ بالا مثالوں میں، ٹیبز صفات <a>کے ساتھ s ہیں۔data-toggle="tab"

.tab('show')

دیئے گئے ٹیب کو منتخب کرتا ہے اور اس سے وابستہ مواد دکھاتا ہے۔ کوئی دوسرا ٹیب جو پہلے منتخب کیا گیا تھا وہ غیر منتخب ہو جاتا ہے اور اس سے منسلک مواد چھپا جاتا ہے۔ ٹیب پین کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.tabواقعہ پیش آنے سے پہلے)۔

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

تقریبات

نیا ٹیب دکھاتے وقت، واقعات درج ذیل ترتیب میں فائر ہوتے ہیں:

1. hide.bs.tab(موجودہ فعال ٹیب پر)
2. show.bs.tab(دکھائے جانے والے ٹیب پر)
3. hidden.bs.tabhide.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…
})

پاپورز popover.js

ہاؤسنگ ثانوی معلومات کے لیے کسی بھی عنصر میں مواد کے چھوٹے اوورلیز شامل کریں، جیسے کہ آئی پیڈ پر۔

Popovers جن کا عنوان اور مواد دونوں زیرو لینتھ ہیں کبھی ظاہر نہیں ہوتے ہیں۔

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

مثالیں

جامد پاپ اوور

چار اختیارات دستیاب ہیں: اوپر، دائیں، نیچے، اور بائیں سیدھ میں۔

لائیو ڈیمو

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

چار سمتیں۔

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

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

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

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

اگلے کلک پر برخاست کریں۔

focusصارف کے اگلے کلک پر پاپ اوور کو مسترد کرنے کے لیے ٹرگر کا استعمال کریں ۔

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

استعمال

جاوا اسکرپٹ کے ذریعے پاپ اوور کو فعال کریں:

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

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-animation=""۔

طریقے

$().popover(options)

عنصر کے مجموعہ کے لیے پاپ اوور شروع کرتا ہے۔

.popover('show')

ایک عنصر کے پاپ اوور کو ظاہر کرتا ہے۔ پوپ اوور کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.popoverواقعہ پیش آنے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔ Popovers جن کا عنوان اور مواد دونوں زیرو لینتھ ہیں کبھی ظاہر نہیں ہوتے ہیں۔

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

.popover('hide')

ایک عنصر کے پاپ اوور کو چھپاتا ہے۔ پوپ اوور کے حقیقت میں چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی hidden.bs.popoverواقعہ ہونے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔

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

.popover('toggle')

ایک عنصر کے پاپ اوور کو ٹوگل کرتا ہے۔ پاپ اوور کے حقیقت میں دکھائے جانے یا چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی واقعہ shown.bs.popoverیا hidden.bs.popoverواقعہ ہونے سے پہلے)۔ اسے پاپ اوور کا "دستی" محرک سمجھا جاتا ہے۔

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

.popover('destroy')

ایک عنصر کے پاپ اوور کو چھپاتا اور تباہ کرتا ہے۔ ڈیلیگیشن کا استعمال کرنے والے پاپ اوور (جو آپشن کا استعمال کرتے ہوئے بنائے گئےselector ہیں ) کو نسلی محرک عناصر پر انفرادی طور پر تباہ نہیں کیا جا سکتا۔

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

تقریبات

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

الرٹ پیغامات alert.js

مثال کے انتباہات

اس پلگ ان کے ساتھ تمام انتباہی پیغامات میں برخاست کی فعالیت شامل کریں۔

بٹن استعمال کرتے وقت .close، یہ اس کا پہلا بچہ ہونا چاہیے .alert-dismissibleاور مارک اپ میں اس سے پہلے کوئی متنی مواد نہیں آ سکتا۔

استعمال

data-dismiss="alert"خود بخود الرٹ قریبی فعالیت دینے کے لیے بس اپنے کلوز بٹن میں شامل کریں ۔ انتباہ کو بند کرنا اسے DOM سے ہٹا دیتا ہے۔

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

اپنے انتباہات کو بند کرتے وقت اینیمیشن کا استعمال کرنے کے لیے، یقینی بنائیں کہ ان کے پاس .fadeاور ہے۔.in پہلے سے ہی لاگو کردہ

طریقے

$().alert()

انتباہی سننے والے عناصر پر کلک ایونٹس کے لیے جو data-dismiss="alert"انتساب رکھتے ہیں۔ (ڈیٹا-اے پی آئی کی خودکار ابتداء کا استعمال کرتے وقت ضروری نہیں ہے۔)

$().alert('close')

ایک الرٹ کو DOM سے ہٹا کر بند کرتا ہے۔ اگر عنصر پر .fadeاور .inکلاسز موجود ہیں تو، الرٹ ہٹانے سے پہلے ختم ہو جائے گا۔

تقریبات

بوٹسٹریپ کا الرٹ پلگ ان انتباہی فعالیت میں شامل ہونے کے لیے چند واقعات کو بے نقاب کرتا ہے۔

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

بٹن button.js

بٹنوں کے ساتھ مزید کام کریں۔ کنٹرول بٹن بیان کرتا ہے یا ٹول بار جیسے مزید اجزاء کے لیے بٹنوں کے گروپ بناتا ہے۔

ریاستی

data-loading-text="Loading..."بٹن پر لوڈنگ حالت استعمال کرنے کے لیے شامل کریں ۔

یہ خصوصیت v3.3.5 سے فرسودہ ہے اور v4 میں ہٹا دی گئی ہے۔

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  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" autocomplete="off">
  Single toggle
</button>

چیک باکس / ریڈیو

ان کے متعلقہ انداز میں ٹوگلنگ کو فعال data-toggle="buttons"کرنے کے لیے ایک پر مشتمل چیک باکس یا ریڈیو ان پٹس میں شامل کریں ۔.btn-group

<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"ضروری ہے.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

ایکارڈین کی مثال

پینل کے اجزاء کے ساتھ ایکارڈین بنانے کے لیے پہلے سے طے شدہ کولپس رویے کو بڑھائیں۔

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

.panel-bodys کو s کے ساتھ تبدیل کرنا بھی ممکن ہے .list-group۔

استعمال

کولپس پلگ ان ہیوی لفٹنگ کو سنبھالنے کے لیے چند کلاسز کا استعمال کرتا ہے:

• .collapseمواد کو چھپاتا ہے
• .collapse.inمواد دکھاتا ہے۔
• .collapsingمنتقلی شروع ہونے پر شامل کیا جاتا ہے، اور ختم ہونے پر ہٹا دیا جاتا ہے۔

یہ کلاسز میں مل سکتی ہیں component-animations.less۔

ڈیٹا اوصاف کے ذریعے

خودکار طور پر ٹوٹنے والے عنصر کا کنٹرول تفویض کرنے کے لیے عنصر میں صرف data-toggle="collapse"اور a شامل کریں ۔ انتساب ایک CSS سلیکٹر کو قبول کرتا ہے جس پر کولپس کا اطلاق ہوتا ہے data-target۔ data-targetکلاس collapseکو ٹوٹنے والے عنصر میں شامل کرنا یقینی بنائیں۔ اگر آپ اسے ڈیفالٹ کھولنا چاہتے ہیں تو اضافی کلاس شامل کریں in۔

اکارڈیئن نما گروپ مینجمنٹ کو کولیپس ایبل کنٹرول میں شامل کرنے کے لیے، ڈیٹا انتساب شامل کریں data-parent="#selector"۔ اس کو عملی شکل میں دیکھنے کے لیے ڈیمو سے رجوع کریں۔

جاوا اسکرپٹ کے ذریعے

اس کے ساتھ دستی طور پر فعال کریں:

$('.collapse').collapse()

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-parent=""۔

طریقے

.collapse(options)

آپ کے مواد کو ایک ٹوٹنے کے قابل عنصر کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

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

.collapse('toggle')

دکھائے جانے یا چھپنے کے لیے ٹوٹنے کے قابل عنصر کو ٹوگل کرتا ہے۔ کالپس ایبل عنصر کے حقیقت میں دکھائے یا چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی واقعہ shown.bs.collapseیا hidden.bs.collapseواقعہ ہونے سے پہلے)۔

.collapse('show')

ایک ٹوٹنے والا عنصر دکھاتا ہے۔ کالپس ایبل عنصر کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی shown.bs.collapseواقعہ پیش آنے سے پہلے)۔

.collapse('hide')

ایک ٹوٹنے والا عنصر چھپاتا ہے۔ کالپس ایبل عنصر کے حقیقت میں پوشیدہ ہونے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی hidden.bs.collapseواقعہ کے رونما ہونے سے پہلے)۔

تقریبات

بوٹسٹریپ کی گرنے والی کلاس گرنے کی فعالیت کو جوڑنے کے لیے چند واقعات کو بے نقاب کرتی ہے۔

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

carousel carousel.js

عناصر کے ذریعے سائیکل چلانے کے لیے سلائیڈ شو کا جزو، جیسے کیروسل۔ 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.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

پچھلا اگلے

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

استعمال

ایک سے زیادہ carousels

carousels کے لیے کیروسل کنٹرولز کو صحیح طریقے سے کام کرنے کے لیے idسب سے باہر کے کنٹینر پر ایک استعمال کرنے کی ضرورت ہوتی ہے ۔ .carouselمتعدد carousel کو شامل کرتے وقت، یا carousel's کو تبدیل کرتے وقت id، متعلقہ کنٹرولز کو اپ ڈیٹ کرنا یقینی بنائیں۔

ڈیٹا اوصاف کے ذریعے

carousel کی پوزیشن کو آسانی سے کنٹرول کرنے کے لیے ڈیٹا کی خصوصیات کا استعمال کریں۔ data-slideمطلوبہ الفاظ کو قبول کرتا ہے prevیا next، جو سلائیڈ کی پوزیشن کو اس کی موجودہ پوزیشن کے نسبت تبدیل کرتا ہے۔ متبادل طور پر، data-slide-toایک خام سلائیڈ انڈیکس کو carousel میں منتقل کرنے کے لیے استعمال کریں data-slide-to="2"، جو سلائیڈ کی پوزیشن کو ایک خاص انڈیکس میں منتقل کرتا ہے جس سے شروع ہوتا ہے 0۔

انتساب کا data-ride="carousel"استعمال ایک carousel کو صفحہ لوڈ سے شروع ہونے والے متحرک کے بطور نشان زد کرنے کے لیے کیا جاتا ہے۔ اسے ایک ہی carousel کے (فالتو اور غیر ضروری) واضح JavaScript ابتدا کے ساتھ استعمال نہیں کیا جا سکتا۔

جاوا اسکرپٹ کے ذریعے

carousel کو دستی طور پر اس کے ساتھ کال کریں:

$('.carousel').carousel()

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-interval=""۔

طریقے

.carousel(options)

ایک اختیاری اختیارات کے ساتھ carousel objectکو شروع کرتا ہے اور آئٹمز کے ذریعے سائیکل چلانا شروع کرتا ہے۔

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

.carousel('cycle')

بائیں سے دائیں تک carousel آئٹمز کے ذریعے سائیکل۔

.carousel('pause')

carousel کو آئٹمز کے ذریعے سائیکل چلانے سے روکتا ہے۔

.carousel(number)

carousel کو کسی خاص فریم پر چکر لگاتا ہے (0 پر مبنی، ایک صف کی طرح)۔

.carousel('prev')

پچھلی آئٹم پر سائیکل۔

.carousel('next')

اگلی آئٹم پر سائیکل۔

تقریبات

بوٹسٹریپ کی carousel کلاس carousel کی فعالیت میں جڑنے کے لیے دو واقعات کو بے نقاب کرتی ہے۔

دونوں واقعات میں درج ذیل اضافی خصوصیات ہیں:

• direction: وہ سمت جس میں carousel پھسل رہا ہے (یا تو "left") "right"۔
• relatedTarget: DOM عنصر جو ایکٹو آئٹم کے طور پر جگہ پر سلائیڈ کیا جا رہا ہے۔

تمام carousel واقعات carousel پر ہی فائر کیے جاتے ہیں (یعنی at the <div class="carousel">).

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

affix.js _

مثال

affix پلگ ان position: fixed;کے ساتھ پائے جانے والے اثر کی تقلید کرتے ہوئے، آن اور آف ٹوگل کرتا position: sticky;ہے۔ دائیں طرف سب نیویگیشن affix پلگ ان کا لائیو ڈیمو ہے۔

استعمال

affix پلگ ان کو ڈیٹا کے انتساب کے ذریعے یا اپنی جاوا اسکرپٹ کے ساتھ دستی طور پر استعمال کریں۔ دونوں صورتوں میں، آپ کو اپنے چسپاں مواد کی پوزیشننگ اور چوڑائی کے لیے CSS فراہم کرنا چاہیے۔

نوٹ: سفاری رینڈرنگ بگ کی وجہ سے نسبتاً پوزیشن والے عنصر، جیسے کھینچا ہوا یا دھکا دیا ہوا کالم، میں موجود عنصر پر افکس پلگ ان کا استعمال نہ کریں ۔

سی ایس ایس کے ذریعے پوزیشننگ

افکس پلگ ان تین کلاسوں کے درمیان ٹوگل کرتا ہے، ہر ایک ایک خاص حالت کی نمائندگی کرتا ہے: .affix, .affix-topاور .affix-bottom. آپ کو اصل پوزیشنوں کو سنبھالنے کے لیے خود ان کلاسز کے لیے (اس پلگ ان سے آزاد) position: fixed;on کی رعایت کے ساتھ اسٹائل فراہم کرنا چاہیے ۔.affix

یہاں یہ ہے کہ افکس پلگ ان کیسے کام کرتا ہے:

1. شروع کرنے کے لیے، پلگ ان اس .affix-topبات کی نشاندہی کرنے کے لیے شامل کرتا ہے کہ عنصر اپنی اعلی ترین پوزیشن میں ہے۔ اس وقت کسی سی ایس ایس پوزیشننگ کی ضرورت نہیں ہے۔
2. جس عنصر کو آپ چسپاں کرنا چاہتے ہیں اس کے پیچھے سکرول کرنے سے اصل چسپاں ہونا شروع ہوجائے گا۔ یہ وہ جگہ ہے جہاں .affixبدلتا ہے .affix-topاور سیٹ کرتا ہے position: fixed;(بوٹسٹریپ کے سی ایس ایس کے ذریعہ فراہم کردہ)۔
3. .affixاگر نیچے آفسیٹ کی وضاحت کی گئی ہے، تو ماضی میں سکرول کرتے ہوئے اسے سے بدلنا چاہیے .affix-bottom۔ چونکہ آفسیٹس اختیاری ہیں، اس لیے ایک سیٹ کرنے کے لیے آپ کو مناسب CSS سیٹ کرنے کی ضرورت ہے۔ اس صورت میں، position: absolute;جب ضروری ہو تو شامل کریں. پلگ ان ڈیٹا انتساب یا JavaScript آپشن کا استعمال کرتا ہے تاکہ یہ تعین کیا جا سکے کہ عنصر کو وہاں سے کہاں رکھنا ہے۔

ذیل میں استعمال کے اختیارات میں سے کسی ایک کے لیے اپنا CSS سیٹ کرنے کے لیے مندرجہ بالا مراحل پر عمل کریں۔

ڈیٹا اوصاف کے ذریعے

کسی بھی عنصر میں آسانی سے affix برتاؤ شامل data-spy="affix"کرنے کے لیے، صرف اس عنصر میں شامل کریں جس کی آپ جاسوسی کرنا چاہتے ہیں۔ کسی عنصر کی پننگ کو کب ٹوگل کرنا ہے اس کی وضاحت کرنے کے لیے آفسیٹس کا استعمال کریں۔

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

جاوا اسکرپٹ کے ذریعے

جاوا اسکرپٹ کے ذریعے affix پلگ ان کو کال کریں:

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

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-offset-top="200"۔

طریقے

.affix(options)

آپ کے مواد کو چسپاں مواد کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

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

.affix('checkPosition')

متعلقہ عناصر کے طول و عرض، پوزیشن اور اسکرول پوزیشن کی بنیاد پر ملحقہ کی حالت کا دوبارہ حساب لگاتا ہے۔ , اور کلاسز .affixکو نئی حالت کے مطابق چسپاں مواد میں شامل یا ہٹا دیا جاتا ہے۔ جب بھی چسپاں مواد کے طول و عرض یا ہدف کے عنصر کو تبدیل کیا جاتا ہے تو اس طریقہ کو کال کرنے کی ضرورت ہوتی ہے، تاکہ چسپاں مواد کی صحیح پوزیشننگ کو یقینی بنایا جا سکے۔.affix-top.affix-bottom

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

تقریبات

بوٹسٹریپ کا افکس پلگ ان افکس کی فعالیت کو جوڑنے کے لیے چند واقعات کو بے نقاب کرتا ہے۔