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

پلگ ان انفرادي طور تي شامل ڪري سگھجن ٿيون (جيتوڻيڪ ڪجھ کي گهربل ضرورت آھي)، يا سڀ ھڪ ڀيرو. ٻئي bootstrap.js ۽ bootstrap.min.js هڪ ئي فائل ۾ سڀ پلگ ان تي مشتمل آهن.

ڊيٽا خاصيتون

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

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

$ ( 'جسم' ). بند ( '.data-api' )

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

$ ( 'جسم' ). بند ( '.alert.data-api' )

پروگراماتي API

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

$ ( ".btn.danger" ). بٽڻ ( "ٽگل" ). addClass ( "فٽ" )

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

$ ( "#myModal" ). ماڊل () // ڊفالٽ سان شروع ڪيو ويو                       
$ ( "#myModal" ). ماڊل ({ ڪيبورڊ : غلط }) // بغير ڪيبورڊ جي شروعات ڪئي وئي     
$ ( "#myModal" ). موڊل ( 'شو' ) // شروعات ڪري ٿو ۽ شو کي فوري طور تي دعوت ڏئي ٿو                

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

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

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

var bootstrapButton = $ . fn _ بٽڻ _ noConflict () // $.fn.button کي اڳئين مقرر ڪيل قدر ڏانھن موٽايو 
$ . fn _ bootstrapBtn = بوٽ             اسٽريپ بٽڻ // ڏيو $().bootstrapBtn بوٽ اسٽريپ ڪارڪردگي

واقعا

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

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

$ ( '#myModal' ). تي ( 'شو' ، فنڪشن ( اي ) {   
    جيڪڏهن (! ڊيٽا ) واپسي اي . preventDefault () // موڊل کي ڏيکارڻ کان روڪي ٿو   
})

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

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

ڪيس استعمال ڪريو

منتقلي پلگ ان جا ڪجھ مثال:

• ماڊلز ۾ سلائيڊنگ يا ڦٽي
• ٽيب ختم ٿيڻ
• خبردارين کي ختم ڪرڻ
• سلائيڊنگ ڪارسيل پينل

مثال

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

جامد مثال

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

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <بٽن جو قسم = "بٽن" ڪلاس = "بند ڪريو" ڊيٽا-برطرف = "ماڊل" آريا-لڪ = "سچو" > × </ بٽڻ>    
    <h3> ماڊل هيڊر </h3>
  </div>
  <div class = "modal-body" > 
    <p> ھڪڙو سٺو جسم… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > بند ڪريو </a>  
    <a href = "#" class = "btn btn-primary" > تبديليون محفوظ ڪريو </a>  
  </div>
</div>

لائيو ڊيمو

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

<!-- موڊل کي ٽاريندڙ بٽڻ -->
<a href = "#myModal" رول = "buton" class = "btn" data-toggle = "modal" > لانچ ڊيمو ماڊل </a>    
 
<!-- ماڊل -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" ڪردار = "dialog" aria-labelledby = "myModalLabel" aria -hidden = "سچو" >      
  <div class = "modal-header" > 
    <بٽن جو قسم = "بٽن" ڪلاس = "بند ڪريو" ڊيٽا-برطرف = "ماڊل" aria-hidden = "سچو" > × </ بٽڻ>    
    <h3 id = "myModalLabel" > ماڊل هيڊر </h3> 
  </div>
  <div class = "modal-body" > 
    <p> ھڪڙو سٺو جسم… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data- dismiss = "modal " aria-hidden = "true" > بند ڪريو </button>   
    <button class = "btn btn-primary" > تبديليون محفوظ ڪريو </buton> 
  </div>
</div>

استعمال

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

جاوا اسڪرپٽ لکڻ کان سواءِ موڊل چالو ڪريو. هڪ ڪنٽرولر عنصر تي سيٽ ڪريو data-toggle="modal"، هڪ بٽڻ وانگر، هڪ سان گڏ data-target="#foo"يا href="#foo"هڪ مخصوص ماڊل کي ٽارگيٽ ڪرڻ لاء.

<بٽن جو قسم = "بٽن" ڊيٽا-ٽگل = "ماڊل" ڊيٽا- ٽارگٽ = "#myModal" > لانچ موڊل </ بٽڻ>   

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

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

$ ( '#myModal' ). ماڊل ( اختيارن )

اختيارن

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

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

طريقا

ماڊل (اختيارن)

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

$ ( '#myModal' ). ماڊل ({
  ڪي بورڊ : غلط 
})

.modal('ٽگل')

دستي طور تي ماڊل کي ٽوگل ڪري ٿو.

$ ( '#myModal' ). ماڊل ( 'ٽگل' )

ماڊل ('شو')

دستي طور تي هڪ ماڊل کوليو.

$ ( '#myModal' ). ماڊل ( 'شو' )

ماڊل ('لڪايو')

دستي طور تي هڪ ماڊل لڪائي ٿو.

$ ( '#myModal' ). ماڊل ( 'لڪ' )

واقعا

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

$ ( '#myModal' ). تي ( 'لڪيل' ، فنڪشن () {   
  // ڪجھ ڪر…
})

مثال

شامل ڪريو ڊراپ ڊائون مينيو تقريبن ڪنهن به شيءِ ۾ هن سادي پلگ ان سان، بشمول نيوبار، ٽيب، ۽ گوليون.

هڪ navbar جي اندر

ٽيب اندر

استعمال

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

data-toggle="dropdown"ڊراپ ڊائون کي ٽوگل ڪرڻ لاءِ لنڪ يا بٽڻ شامل ڪريو .

<div class = "ڊراپ ڊائون" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > ڊراپ ڊائون ٽرگر </a>   
  <ul class = "ڊراپ ڊائون-مينيو" ڪردار = "مينيو" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URLs کي برقرار رکڻ لاءِ، data-targetصفت استعمال ڪريو بدران href="#".

<div class = "ڊراپ ڊائون" > 
  <a class = "dropdown-toggle" id = "dLabel" رول = "buton" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    ڊراپ ڊائون
    <b class = "caret" ></b> 
  </a>
  <ul class = "ڊراپ ڊائون-مينيو" ڪردار = "مينيو" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

جاوا اسڪرپٽ ذريعي ڊراپ ڊائونز کي ڪال ڪريو:

$ ( '. dropdown-toggle' ). ڊراپ ڊائون ()

اختيارن

ڪو به

طريقا

$().ڊراپ ڊائون('ٽگل')

ڏنل نيوبار يا ٽيب ٿيل نيويگيشن لاءِ مينيو ٽوگل ڪرڻ لاءِ هڪ پروگراماتي ايپ.

مثال navbar ۾

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

استعمال

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

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

<body data- spy = "اسڪرول" ڊيٽا- ٽارگٽ = ".navbar" > ... </body>  

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

ڪال ڪريو scrollspy ذريعي JavaScript:

$ ( '#navbar' ). scrollspy ()

طريقا

.scrollspy('ريفريش')

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

$ ( '[data-spy="scroll"]' ). هر ( فعل () {  
  var $spy = $ ( هي ). scrollspy ( 'ريفريش' )
})؛

اختيارن

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

واقعا

مثال ٽيب

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

استعمال

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

$ ( '#myTab a' ). ڪلڪ ڪريو ( فنڪشن ( e ) {  
  اي . روڪڻ ڊفالٽ ()؛
  $ ( هي ). ٽيب ( 'شو' )؛
})

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

$ ( '#myTab a[href="#profile"]' ). ٽيب ( 'شو' )؛ // نالي سان ٽيب چونڊيو 
$ ( '#myTab a:first' ). ٽيب ( 'شو' )؛ // پهريون ٽيب چونڊيو 
$ ( '#myTab a:last' ). ٽيب ( 'شو' )؛ // آخري ٽيب چونڊيو 
$ ( '#myTab li:eq(2) a' ). ٽيب ( 'شو' )؛ // ٽيون ٽيب چونڊيو (0-انڊيڪس ٿيل) 

مارڪ اپ

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

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > گھر </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > پروفائل </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > نياپا </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > سيٽنگون </a></li>  
</ul>

طريقا

$().tab

هڪ ٽيب عنصر ۽ مواد ڪنٽينر کي چالو ڪري ٿو. ٽئب ۾ هجڻ گهرجي يا ته هڪ data-targetيا هڪ hrefٽارگيٽ ڪنٽينر نوڊ DOM ۾.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > گھر </a></li>  
  <li><a href = "#profile" > پروفائل </a></li> 
  <li><a href = "#messages" > نياپا </a></li> 
  <li><a href = "#settings" > سيٽنگون </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( فنڪشن () {  
    $ ( '#myTab a:last' ). ٽيب ( 'شو' )؛
  })
</script>

واقعا

$ ( 'a[data-toggle="tab"]' ). تي ( 'ڏسو' ، فنڪشن ( اي ) {   
  اي . ٽارگيٽ // چالو ٿيل ٽيب
  اي . لاڳاپيل ٽارگيٽ // پوئين ٽيب
})

مثال

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

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

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

چار طرفا

ان پٽ گروپن ۾ اوزار

جڏهن بوٽ اسٽريپ انپٽ گروپن سان ٽول ٽائپس ۽ پاپ اوور استعمال ڪريو ٿا، توهان کي containerناپسنديده ضمني اثرات کان بچڻ لاءِ (هيٺ ڏنل دستاويز) اختيار مقرر ڪرڻو پوندو.

استعمال

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

$ ( '#مثال' ). ٽول ٽپ ( اختيارن )

اختيارن

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

مارڪ اپ

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > منهنجي مٿان هوور ڪريو </a>   

طريقا

$().ٽول ٽپ (اختيارن)

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

ٽول ٽپ ('شو')

هڪ عنصر جي ٽول ٽائپ کي ظاهر ڪري ٿو.

$ ( '# عنصر' ). ٽول ٽائپ ( 'ڏسو' )

ٽول ٽپ ('لڪايو')

هڪ عنصر جي ٽول ٽائپ کي لڪائيندو آهي.

$ ( '# عنصر' ). ٽول ٽپ ( 'لڪايو' )

ٽول ٽپ ('ٽگل')

هڪ عنصر جي ٽول ٽائپ کي ٽوگل ڪري ٿو.

$ ( '#عنصر' ). ٽول ٽپ ( 'ٽگل' )

ٽول ٽپ ('تباهي')

هڪ عنصر جي ٽول ٽائپ کي لڪايو ۽ تباهه ڪري ٿو.

$ ( '# عنصر' ). ٽول ٽپ ( 'تباهي' )

مثال

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

جامد پاپ اوور

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

ڪو به مارڪ اپ نه ڏيکاريو ويو آهي جيئن ته پاپ اوور جاوا اسڪرپٽ مان ٺاهيا ويا آهن ۽ هڪ اندر موجود موادdata خاصيت جي اندر مواد.

لائيو ڊيمو

چار طرفا

استعمال

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

$ ( '#مثال' ). پاپ اوور ( اختيارن )

اختيارن

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

مارڪ اپ

ڪارڪردگي جي سببن لاء، ٽول ٽائپ ۽ پاپ اوور ڊيٽا-ايپس آپٽ ان آهن. جيڪڏهن توهان انهن کي استعمال ڪرڻ چاهيو ٿا ته صرف هڪ چونڊيندڙ اختيار بيان ڪريو.

طريقا

$().popover(اختيارن)

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

.popover ('شو')

ظاهر ڪري ٿو هڪ عنصر پاپ اوور.

$ ( '# عنصر' ). پاپ اوور ( 'شو' )

.popover ('لڪايو')

هڪ عنصر پاپ اوور کي لڪائيندو آهي.

$ ( '# عنصر' ). پوپ اوور ( 'لڪ' )

.popover ('ٽگل')

هڪ عناصر پاپ اوور کي ٽوگل ڪري ٿو.

$ ( '# عنصر' ). پاپ اوور ( 'ٽگل' )

.popover ('تباهي')

هڪ عنصر جي پاپ اوور کي لڪايو ۽ تباهه ڪري ٿو.

$ ( '# عنصر' ). پاپ اوور ( 'تباهي' )

مثال جي خبرداري

ھن پلگ ان سان سڀني خبرداري پيغامن ۾ برطرف ڪارڪردگي شامل ڪريو.

استعمال

جاوا اسڪرپٽ ذريعي خبرداري جي برطرفي کي فعال ڪريو:

$ ( ". الرٽ" ). خبردار ()

مارڪ اپ

بس data-dismiss="alert"پنهنجي بند بٽڻ ۾ شامل ڪريو خودڪار طور تي الرٽ بند ڪارڪردگي ڏي.

<a class = "close" data- dismiss = "alert" href = "#" > × </a>   

طريقا

$(). الرٽ()

ويجھي ڪارڪردگي سان سڀني خبردارين کي لپي ٿو. بند ٿيڻ تي توهان جي خبردارين کي متحرڪ ڪرڻ لاءِ، پڪ ڪريو ته انهن وٽ .fade۽ .inڪلاس اڳ ۾ ئي انهن تي لاڳو آهي.

خبردار ('بند')

هڪ خبرداري بند ڪري ٿو.

$ ( ". الرٽ" ). خبردار ( 'بند' )

واقعا

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

$ ( '#my-alert' ). پابند ( 'بند' ، فنڪشن () {   
  // ڪجھ ڪر…
})

مثال استعمال

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

رياستي

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

<بٽن جو قسم = "بٽن " ڪلاس = "btn btn-primary" data-loading-text = "لوڊ ٿي رهيو آهي..." > لوڊ ٿيڻ واري حالت </button>   

اڪيلو ٽوگل

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

<بٽن جو قسم = "بٽن " ڪلاس = "btn btn-primary" data-toggle = "button" > Single Toggle </button>   

چيڪ باڪس

data-toggle="buttons-checkbox"btn-group تي چيڪ باڪس انداز ٽوگلنگ لاءِ شامل ڪريو .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <بٽن جو قسم = "بٽن" ڪلاس = "btn btn-primary" > کاٻي </ بٽڻ>  
  <بٽن جو قسم = "بٽن" ڪلاس = "btn btn-primary" > وچين </ بٽڻ>  
  <بٽن جو قسم = "بٽن" ڪلاس = "btn btn-primary" > ساڄو </ بٽڻ>  
</div>

ريڊيو

data-toggle="buttons-radio"btn-group تي ريڊيو اسٽائل ٽوگلنگ لاءِ شامل ڪريو .

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <بٽن جو قسم = "بٽن" ڪلاس = "btn btn-primary" > کاٻي </ بٽڻ>  
  <بٽن جو قسم = "بٽن" ڪلاس = "btn btn-primary" > وچين </ بٽڻ>  
  <بٽن جو قسم = "بٽن" ڪلاس = "btn btn-primary" > ساڄو </ بٽڻ>  
</div>

استعمال

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

$ ( '.nav-tabs' ). بٽڻ ()

مارڪ اپ

ڊيٽا خاصيتون بٽڻ پلگ ان لاء لازمي آهن. مختلف مارڪ اپ جي قسمن لاءِ هيٺ ڏنل مثال ڪوڊ چيڪ ڪريو.

اختيارن

ڪو به

طريقا

$().بٽن('ٽگل')

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

<بٽن جو قسم = "بٽن " ڪلاس = "btn" ڊيٽا-ٽگل = "بٽن" > … </ بٽڻ>    

$().بٽن('لوڊنگ')

بٽڻ جي حالت کي لوڊ ڪرڻ لاء سيٽ ڪري ٿو - بٽڻ کي غير فعال ڪري ٿو ۽ متن کي لوڊ ڪرڻ لاء متن کي تبديل ڪري ٿو. لوڊ ڪندي متن کي بيان ڪيو وڃي بٽڻ واري عنصر تي ڊيٽا خاصيت استعمال ڪندي data-loading-text.

<بٽن جو قسم = "بٽن " ڪلاس = "btn" data-loading-text = "لوڊنگ سامان..." > ... </ بٽڻ>    

$().بٽن('ري سيٽ')

بٽڻ واري حالت کي ري سيٽ ڪري ٿو - متن کي اصل متن ۾ تبديل ڪري ٿو.

$().بٽن(اسٽرنگ)

بٽڻ واري حالت کي ري سيٽ ڪري ٿو - متن کي ڪنهن به ڊيٽا جي وضاحت ڪيل ٽيڪسٽ اسٽيٽ ڏانهن تبديل ڪري ٿو.

<button type = "button" class = "btn" data-complete-text = "ختم!" > ... </ بٽڻ>    
<script>
  $ ( '.btn' ). بٽڻ ( 'مڪمل' )
</script>

بابت

بنيادي اسلوب ۽ لچڪدار سپورٽ حاصل ڪريو ٽوڙڻ واري اجزاء لاءِ جيئن accordions ۽ نيويگيشن.

* ٽرانزيڪشن پلگ ان کي شامل ڪرڻ جي ضرورت آهي.

مثال accordion

کولپس پلگ ان کي استعمال ڪندي، اسان هڪ سادي accordion اسٽائل ويجيٽ ٺاهيو آهي:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseOne" >    
        ٽوڙڻ جوڳو گروپ شئي #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body Collapse in" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        کولڻ لائق گروپ شئي #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

توھان پڻ استعمال ڪري سگھوٿا پلگ ان کان سواءِ accordion مارڪ اپ. هڪ بٽڻ ٺاهيو ٻئي عنصر جي توسيع ۽ ختم ٿيڻ کي ٽوگل ڪريو.

<بٽن جو قسم = "بٽڻ" ڪلاس = "btn btn-خطر" ڊيٽا-ٽگل = "گرڻ" ڊيٽا- ٽارگٽ = "# ڊيمو" >    
  سادو ٽوڙڻ وارو
</ بٽڻ>
 
<div id = "demo" class = "colapse in" > … </div>  

استعمال

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

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

شامل ڪرڻ لاءِ accordion-like گروپ مينيجمينٽ کي ٽوڙڻ واري ڪنٽرول ۾، ڊيٽا جي خاصيت شامل ڪريو data-parent="#selector". هن کي عمل ۾ ڏسڻ لاءِ ڊيم جو حوالو ڏيو.

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

دستي طور تي فعال ڪريو:

$ ( ". ٽوڙيو" ). ٽٽڻ ()

اختيارن

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

طريقا

کولڻ (اختيارن)

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

$ ( '#myCollapsible' ). ٽوڙڻ ({
  ٽوگل : ڪوڙو 
})

کولڻ ('ٽگل')

ڏيکاريل يا لڪائڻ لاءِ کولڻ لائق عنصر کي ٽوگل ڪري ٿو.

.collapse('ڏسو')

هڪ ٽوڙڻ وارو عنصر ڏيکاري ٿو.

کولڻ ('لڪايو')

لڪائڻ وارو عنصر لڪائي ٿو.

واقعا

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

$ ( '#myCollapsible' ). تي ( 'لڪيل' ، فنڪشن () {   
  // ڪجھ ڪر…
})

مثال ڪارسيل

هيٺ ڏنل سلائڊ شو ڏيکاري ٿو هڪ عام پلگ ان ۽ جزو جي ذريعي سائيڪل هلائڻ لاءِ ڪارسيل وانگر.

پهريون ٿامبنيل ليبل

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "carousel slide" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Carousel شيون -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

استعمال

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

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

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

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

$ ( '.carousel' ). ڪاروائيل ()

اختيارن

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

طريقا

.carousel(اختيارن)

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

$ ( '.carousel' ). ڪاروسل ({
  وقفو : 2000 
})

.carousel('سائيڪل')

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

.carousel('pause')

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

.carousel (نمبر)

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

.carousel('اڳوڻي')

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

.carousel('اڳيون')

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

واقعا

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

مثال

هڪ بنيادي، آساني سان وڌايل پلگ ان ڪنهن به فارم جي ٽيڪسٽ ان پٽ سان جلدي خوبصورت ٽائپ هيڊس ٺاهڻ لاءِ.

<انپٽ جو قسم = "ٽيڪسٽ" ڊيٽا مهيا ڪريو = "ٽائيپ هيڊ" >  

توھان چاھيو ٿا سيٽ autocomplete="off"ڪرڻ لاءِ ڊفالٽ برائوزر مينيو کي ظاهر ٿيڻ کان روڪڻ لاءِ Bootstrap ٽائيپ هيڊ ڊراپ ڊائون.

استعمال

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

هڪ عنصر کي رجسٽر ڪرڻ لاءِ ڊيٽا خاصيتون شامل ڪريو ٽائپ هيڊ ڪارڪردگي سان جيئن مٿي ڏنل مثال ۾ ڏيکاريل آهي.

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

ٽائيپ هيڊ کي دستي طور تي ڪال ڪريو:

$ ( '.typeahead' ). ٽائيپ هيڊ ()

اختيارن

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

طريقا

.typeahead (اختيارن)

ٽائيپ هيڊ سان هڪ ان پٽ کي شروع ڪري ٿو.

مثال

کاٻي پاسي سب نيويگيشن affix پلگ ان جو هڪ لائيو ڊيمو آهي.

استعمال

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

آسانيءَ سان شامل ڪرڻ لاءِ ڪنهن به عنصر سان affix رويي کي، صرف data-spy="affix"ان عنصر ۾ شامل ڪريو جنهن تي توهان جاسوسي ڪرڻ چاهيو ٿا. پوءِ بيان ڪرڻ لاءِ آف سيٽ استعمال ڪريو جڏھن ڪنھن عنصر جي پننگ کي آن ۽ آف ڪرڻ لاءِ.

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

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

ڪال ڪريو affix پلگ ان ذريعي JavaScript:

$ ( '#navbar' ). لڳڻ ()

اختيارن

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