بوٽ اسٽريپ لاءِ جاوا اسڪرپٽ

Bootstrap جي اجزاء کي زندگي ۾ آڻيو- ھاڻي 12 ڪسٽم jQuery پلگ ان سان.

ماڊلز

هڪ منظم، پر لچڪدار، روايتي جاوا اسڪرپٽ ماڊل پلگ ان تي وٺي وٺو صرف گهٽ ۾ گهٽ گهربل ڪارڪردگي ۽ سمارٽ ڊفالٽ سان.

ڊراپ ڊائونز

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

اسڪراول اسپيس

استعمال ڪريو scrollspy خودڪار طريقي سان توهان جي نيوبار ۾ لنڪس تازه ڪاري ڪرڻ لاء موجوده فعال لنڪ ڏيکارڻ لاء اسڪول جي پوزيشن جي بنياد تي.

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

ھن پلگ ان کي استعمال ڪريو ٽيب ۽ گوليون وڌيڪ ڪارائتو بڻائڻ لاءِ انھن کي اجازت ڏيڻ جي ذريعي انھن کي ٽوگل ڪرڻ لاءِ مقامي مواد جي ٽيبلبل پينز.

ٽول ٽِپ

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

پوپورس *

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

* ٽول ٽائپس کي شامل ڪرڻ جي ضرورت آھي

خبرداري پيغام

الرٽ پلگ ان هڪ ننڍڙو طبقو آهي جيڪو الرٽ کي ويجهي ڪارڪردگي شامل ڪرڻ لاء.

بٽڻ

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

ٽٽڻ

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

ڪارونجهر

ڪنهن به مواد جو هڪ مزيدار دور ٺاهيو جيڪو توهان مواد جو هڪ انٽرويو سلائيڊ شو مهيا ڪرڻ چاهيو ٿا.

ٽائيپ هيڊ

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

منتقلي *

سادي منتقلي جي اثرن لاءِ، شامل ڪريو bootstrap-transition.js هڪ ڀيرو ماڊلز ۾ سلائڊ ڪرڻ يا فئڊ آئوٽ الرٽس.

* پلگ ان ۾ اينيميشن لاءِ گهربل

اٿو! سڀ جاوا اسڪرپٽ پلگ ان کي jQuery جي جديد ورزن جي ضرورت آهي.

ماڊلز جي باري ۾

هڪ منظم، پر لچڪدار، روايتي جاوا اسڪرپٽ ماڊل پلگ ان تي وٺي وٺو صرف گهٽ ۾ گهٽ گهربل ڪارڪردگي ۽ سمارٽ ڊفالٽ سان.

فائل ڊائون لوڊ ڪريو

جامد مثال

هيٺ ڏنل هڪ مستحڪم طور تي پيش ڪيل ماڊل آهي.

لائيو ڊيمو

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

ڊيمو ماڊل لانچ ڪريو

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

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

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

اختيارن

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

مارڪ اپ

توھان پنھنجي صفحي تي ماڊلز کي آساني سان چالو ڪري سگھو ٿا بغير جاوا اسڪرپٽ جي ھڪڙي لائن لکڻ جي. بس data-toggle="modal"هڪ ڪنٽرولر عنصر تي سيٽ ڪريو data-target="#foo"يا href="#foo"جيڪو هڪ ماڊل عنصر id سان ملندو آهي، ۽ جڏهن ڪلڪ ڪيو ويندو، اهو توهان جي ماڊل کي لانچ ڪندو.

انهي سان گڏ، توهان جي ماڊل مثال ۾ اختيارن کي شامل ڪرڻ لاء، صرف انهن کي شامل ڪريو اضافي ڊيٽا خاصيتن جي طور تي يا ته ڪنٽرول عنصر يا ماڊل مارڪ اپ پاڻ تي.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > لانچ موڊل </a>
  1. <div class = "modal hide " id = "myModal" >
  2. <div class = "modal-header" >
  3. <بٽن جو قسم = "بٽڻ" ڪلاس = "بند ڪريو" ڊيٽا-ڊسمس = "موڊل" > × </ بٽڻ>
  4. <h3> ماڊل هيڊر </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> ھڪڙو سٺو جسم… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > بند ڪريو </a>
  11. <a href = "#" class = "btn btn-primary" > تبديليون محفوظ ڪريو </a>
  12. </div>
  13. </div>
اٿو! جيڪڏهن توهان چاهيو ٿا ته توهان جو ماڊل اندر ۽ ٻاهر متحرڪ ٿئي، صرف عنصر .fade۾ هڪ ڪلاس شامل ڪريو .modal(هي عمل ۾ ڏسڻ لاءِ ڊيمو جو حوالو ڏيو) ۽ bootstrap-transition.js شامل ڪريو.

طريقا

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

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

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

.modal('ٽگل')

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

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

ماڊل ('شو')

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

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

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

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

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

واقعا

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

واقعو وصف
ڏيکارڻ اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
ڏيکاريل اهو واقعو فائر ڪيو ويو آهي جڏهن ماڊل استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
لڪائڻ اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
لڪيل اهو واقعو فائر ڪيو ويو آهي جڏهن ماڊل ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
  1. $ ( '#myModal' ). تي ( 'لڪيل' ، فنڪشن () {
  2. // ڪجھ ڪر…
  3. })

ScrollSpy پلگ ان اسڪرول پوزيشن جي بنياد تي نيوي هدفن کي خودڪار طور تي اپڊيٽ ڪرڻ لاءِ آهي.

فائل ڊائون لوڊ ڪريو

مثال 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 minimin ميسينجر بيگ کي ترتيب ڏيو. 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-scrollspy.js استعمال ڪندي

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

  1. $ ( '#navbar' ). scrollspy ()

مارڪ اپ

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

  1. <body data-spy = "اسڪرول" > ... </body>
اٿو! نيوبار لنڪس کي حل ڪرڻ جي قابل id هدفن جو هجڻ لازمي آهي. مثال طور، <a href="#home">home</a>ڊوم ۾ ڪنهن شيءِ سان ملندڙ جلندڙ هجڻ گهرجي جهڙوڪ <div id="home"></div>.

طريقا

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

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

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

اختيارن

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

واقعا

واقعو وصف
چالو ڪرڻ هي واقعو باهه لڳندو آهي جڏهن به هڪ نئين شيءِ اسڪرال اسپي طرفان چالو ٿئي ٿي.

هي پلگ ان مقامي مواد ذريعي منتقلي لاءِ جلدي، متحرڪ ٽيب ۽ گولي جي ڪارڪردگي شامل ڪري ٿو.

فائل ڊائون لوڊ ڪريو

مثال ٽيب

پوشیدہ پينز جي وچ ۾ ٽگل ڪرڻ لاءِ هيٺ ڏنل ٽيب تي ڪلڪ ڪريو، جيتوڻيڪ ڊراپ ڊائون مينيو ذريعي.

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.


bootstrap-tab.js استعمال ڪندي

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

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

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

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

مارڪ اپ

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

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

طريقا

$().tab

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

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > گھر </a></li>
  3. <li><a href = "#profile" > پروفائل </a></li>
  4. <li><a href = "#messages" > نياپا </a></li>
  5. <li><a href = "#settings" > سيٽنگون </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( فنڪشن () {
  17. $ ( '#myTab a:last' ). ٽيب ( 'شو'
  18. })
  19. </script>

واقعا

واقعو وصف
ڏيکارڻ هي واقعو ٽيب شو تي فائر ڪري ٿو، پر ان کان اڳ جو نئون ٽيب ڏيکاريو ويو آهي. استعمال ڪريو event.target۽ event.relatedTargetھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي).
ڏيکاريل هي واقعو ٽيب شو تي فائر ٿئي ٿو جڏهن هڪ ٽيب ڏيکاريو ويو آهي. استعمال ڪريو event.target۽ event.relatedTargetھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي).
  1. $ ( 'a[data-toggle="tab"]' ). تي ( 'ڏسو' ، فنڪشن ( اي ) {
  2. اي . ٽارگيٽ // چالو ٿيل ٽيب
  3. اي . لاڳاپيل ٽارگيٽ // پوئين ٽيب
  4. })

Tooltips بابت

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

فائل ڊائون لوڊ ڪريو

اوزار ٽائپس جو مثال استعمال ڪريو

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

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


bootstrap-tooltip.js استعمال ڪندي

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

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

اختيارن

نالو قسم ڊفالٽ وضاحت
انيميشن بولين سچو ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
لڳائڻ string|فنڪشن 'مٿي' ٽول ٽائپ کي ڪيئن رکڻو آهي - مٿي | هيٺان | کاٻي | ساڄو
چونڊيندڙ تار ڪوڙو جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ٽول ٽائپ شيون مقرر ڪيل هدفن ڏانهن موڪليا ويندا.
عنوان تار | فنڪشن '' ڊفالٽ عنوان جي قيمت جيڪڏهن `عنوان` ٽيگ موجود نه آهي
محرڪ تار 'هور' ٽول ٽِپ ڪيئن شروع ٿئي ٿي - هور | ڌيان | دستور
دير ڪرڻ نمبر | اعتراض 0

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

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

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

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

مارڪ اپ

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

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > منهنجي مٿان هوور ڪريو </a>

طريقا

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

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

ٽول ٽپ ('شو')

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

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

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

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

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

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

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

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

پوپ جي باري ۾

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

* ٽول ٽائپ کي شامل ڪرڻ جي ضرورت آهي

فائل ڊائون لوڊ ڪريو

مثال hover popover

پاپ اوور کي ٽوڙڻ لاءِ بٽڻ تي هور ڪريو.


bootstrap-popover.js استعمال ڪندي

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

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

اختيارن

نالو قسم ڊفالٽ وضاحت
انيميشن بولين سچو ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
لڳائڻ string|فنڪشن 'ساڄو' پوپ اوور جي پوزيشن ڪيئن ڪجي - ٽاپ | هيٺان | کاٻي | ساڄو
چونڊيندڙ تار ڪوڙو جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ٽول ٽائپ شيون مقرر ڪيل هدفن ڏانهن موڪليا ويندا
محرڪ تار 'هور' ٽول ٽِپ ڪيئن شروع ٿئي ٿي - هور | ڌيان | دستور
عنوان تار | فنڪشن '' ڊفالٽ عنوان جي قيمت جيڪڏهن `عنوان` خاصيت موجود نه آهي
مواد تار | فنڪشن '' ڊفالٽ مواد جي قيمت جيڪڏھن `data-content` خاصيت موجود نه آھي
دير ڪرڻ نمبر | اعتراض 0

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

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

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

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

مارڪ اپ

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

طريقا

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

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

.popover ('شو')

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

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

.popover ('لڪايو')

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

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

.popover ('ٽگل')

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

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

خبرداري بابت

الرٽ پلگ ان هڪ ننڍڙو طبقو آهي جيڪو الرٽ کي ويجهي ڪارڪردگي شامل ڪرڻ لاء.

ڊائون لوڊ ڪريو

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

الرٽ پلگ ان باقاعده خبرداري پيغامن تي ڪم ڪري ٿو، ۽ پيغامن کي بلاڪ ڪريو.

پاڪ guacamole! چڱو پاڻ کي چيڪ ڪريو، توهان تمام سٺو نه ڏسي رهيا آهيو.

اي ڦوٽو! توهان کي هڪ غلطي ملي آهي!

ھن ۽ اھو تبديل ڪريو ۽ ٻيهر ڪوشش ڪريو. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

هي عمل وٺو يا ائين ڪريو


bootstrap-alert.js استعمال ڪندي

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

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

مارڪ اپ

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

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

طريقا

$(). الرٽ()

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

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

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

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

واقعا

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

واقعو وصف
بند ڪرڻ اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن closeمثال جو طريقو سڏيو ويندو آهي.
بند ٿيل هي واقعو فائر ڪيو ويو آهي جڏهن خبرداري بند ڪئي وئي آهي (سي ايس ايس جي منتقلي جي مڪمل ٿيڻ جو انتظار ڪندو).
  1. $ ( '#my-alert' ). پابند ( 'بند' ، فنڪشن () {
  2. // ڪجھ ڪر…
  3. })

بابت

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

فائل ڊائون لوڊ ڪريو

مثال استعمال

رياستن ۽ ٽوگلز لاءِ بٽڻ پلگ ان استعمال ڪريو.

رياستي
اڪيلو ٽوگل
چيڪ باڪس
ريڊيو

bootstrap-button.js استعمال ڪندي

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

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

مارڪ اپ

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

  1. <!-- شامل ڪريو data-toggle="button" هڪ بٽڻ تي ٽوگلنگ کي چالو ڪرڻ لاءِ -->
  2. <button class = "btn" data-toggle = "buton " > Single Toggle </button>
  3.  
  4. <!-- btn-group تي چيڪ باڪس انداز ٽوگلنگ لاءِ data-toggle="buttons-checkbox" شامل ڪريو -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > کاٻي </ بٽڻ>
  7. < بٽن ڪلاس = "btn" > وچين </ بٽڻ>
  8. <button class = "btn" > ساڄي </ بٽڻ>
  9. </div>
  10.  
  11. <!-- btn-group تي ريڊيو اسٽائل ٽوگلنگ لاءِ data-toggle="buttons-radio" شامل ڪريو -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > کاٻي </ بٽڻ>
  14. < بٽن ڪلاس = "btn" > وچين </ بٽڻ>
  15. <button class = "btn" > ساڄي </ بٽڻ>
  16. </div>

طريقا

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

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

اٿو! توهان خصوصيت استعمال ڪندي هڪ بٽڻ جي خودڪار ٽوگلنگ کي فعال ڪري سگهو ٿا data-toggle.
  1. <button class = "btn" data-toggle = "buton " > </buton>

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

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

  1. <button class = "btn" data-loading-text = "لوڊنگ سامان..." > ... </ بٽڻ>
اٿو! فائر فاڪس صفحو لوڊ ڪرڻ تي غير فعال حالت برقرار رکي ٿو . ھن لاء ھڪڙو حل استعمال ڪرڻ آھي autocomplete="off".

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

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

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

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

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

بابت

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

فائل ڊائون لوڊ ڪريو

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

مثال accordion

کولپس پلگ ان کي استعمال ڪندي، اسان هڪ سادي 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.

bootstrap-collapse.js استعمال ڪندي

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

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

اختيارن

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

مارڪ اپ

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

  1. < بٽن ڪلاس = " btn btn-danger" data - toggle = "colapse " data-target = "#demo" >
  2. سادو ٽوڙڻ وارو
  3. </ بٽڻ>
  4.  
  5. <div id = "demo" class = "colapse in" > </div>
اٿو! شامل ڪرڻ لاءِ accordion-like گروپ مينيجمينٽ کي ٽوڙڻ واري ڪنٽرول ۾، ڊيٽا جي خاصيت شامل ڪريو data-parent="#selector". هن کي عمل ۾ ڏسڻ لاءِ ڊيم جو حوالو ڏيو.

طريقا

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

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

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

کولڻ ('ٽگل')

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

.collapse('ڏسو')

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

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

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

واقعا

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

واقعو وصف
ڏيکارڻ اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي.
ڏيکاريل اهو واقعو فائر ڪيو ويو آهي جڏهن هڪ ختم ٿيڻ واري عنصر کي صارف کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
لڪائڻ اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideطريقي کي سڏيو ويو آهي.
لڪيل هي واقعو فائر ڪيو ويو آهي جڏهن هڪ ٽوڙڻ واري عنصر صارف کان لڪيل آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
  1. $ ( '#myCollapsible' ). تي ( 'لڪيل' ، فنڪشن () {
  2. // ڪجھ ڪر…
  3. })

بابت

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

فائل ڊائون لوڊ ڪريو

مثال

ٽائيپ هيڊ نتيجا ڏيکارڻ لاءِ ھيٺ ڏنل فيلڊ ۾ ٽائپنگ شروع ڪريو.


bootstrap-typeahead.js استعمال ڪندي

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

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

اختيارن

نالو قسم ڊفالٽ وضاحت
ذريعو صف [ ] ڊيٽا جو ذريعو سوال ڪرڻ لاءِ.
شيون نمبر 8 ڊراپ ڊائون ۾ ڏيکارڻ لاءِ شيون جو وڌ ۾ وڌ تعداد.
ملائيندڙ فنڪشن غير حساس ڪيس طريقو اهو طئي ڪرڻ لاءِ استعمال ڪيو ويو ته ڇا هڪ سوال ڪنهن شئي سان ملندو آهي. ھڪڙي دليل کي قبول ڪري ٿو، جنھن جي itemخلاف سوال کي جانچڻ لاء. موجوده سوال تائين رسائي حاصل ڪريو this.query. trueجيڪڏهن سوال هڪ ميچ آهي ته بولين واپس ڪريو.
ترتيب ڏيڻ وارو فنڪشن صحيح ميلاپ،
ڪيس حساس،
ڪيس غير حساس
خودڪار مڪمل نتيجن کي ترتيب ڏيڻ لاء استعمال ٿيل طريقو. ھڪڙي دليل کي قبول ڪري ٿو items۽ ٽائيپ ھيڊ مثال جو دائرو آھي. موجوده سوال جو حوالو ڏيو this.query.
اجاگر ڪندڙ فنڪشن سڀني ڊفالٽ ميچز کي نمايان ڪري ٿو خودڪار مڪمل نتيجن کي اجاگر ڪرڻ لاء استعمال ٿيل طريقو. ھڪڙي دليل کي قبول ڪري ٿو item۽ ٽائيپ ھيڊ مثال جو دائرو آھي. html واپس ڪرڻ گهرجي.

مارڪ اپ

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

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

طريقا

.typeahead (اختيارن)

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