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

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

ماڊلز

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

ڊراپ ڊائونز

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

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

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

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

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

ٽول ٽِپ

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

پوپورس *

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

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

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

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

بٽڻ

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

ٽٽڻ

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

ڪارونجهر

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

ٽائيپ هيڊ

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

منتقلي *

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

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

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

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

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

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

جامد مثال

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

لائيو ڊيمو

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

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

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

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

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

اختيارن

نالو	قسم	ڊفالٽ	وضاحت
پس منظر	بولين	سچو	هڪ ماڊل پس منظر عنصر شامل آهي
ڪي بورڊ	بولين	سچو	ماڊل کي بند ڪري ٿو جڏهن فرار ڪيچ کي دٻايو ويندو آهي

مارڪ اپ

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > لانچ موڊل </a>

<div class = "modal" > 
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> ماڊل هيڊر </h3>
  </div>
  <div class = "modal-body" > 
    <p> ھڪڙو سٺو جسم… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn btn-primary" > تبديليون محفوظ ڪريو </a>  
    <a href = "#" class = "btn" > بند ڪريو </a>  
  </div>
</div>

اٿو! جيڪڏهن توهان چاهيو ٿا ته توهان جو ماڊل اندر ۽ ٻاهر متحرڪ ٿئي، صرف عنصر .fade۾ هڪ ڪلاس شامل ڪريو .modal(هي عمل ۾ ڏسڻ لاءِ ڊيمو جو حوالو ڏيو) ۽ bootstrap-transition.js شامل ڪريو.

طريقا

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

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

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

.modal('ٽگل')

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

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

ماڊل ('شو')

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

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

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

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

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

واقعا

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

واقعو	وصف
ڏيکارڻ	اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن `show`مثال جو طريقو سڏيو ويندو آهي.
ڏيکاريل	اهو واقعو فائر ڪيو ويو آهي جڏهن ماڊل استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
لڪائڻ	اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن `hide`مثال جو طريقو سڏيو ويو آهي.
لڪيل	اهو واقعو فائر ڪيو ويو آهي جڏهن ماڊل ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).

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

ڊراپ ڊائون بابت

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

مثال

ڊراپ ڊائونز کي جانچڻ لاءِ نيوبار ۽ هيٺ ڏنل گولن ۾ ڊراپ ڊائون نيو لنڪس تي ڪلڪ ڪريو.

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

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

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

مارڪ اپ

جلدي شامل ڪرڻ لاءِ ڊراپ ڊائون ڪارڪردگي ڪنهن به عنصر ۾ صرف شامل ڪريو data-toggle="dropdown"۽ ڪو به صحيح بوٽ اسٽريپ ڊراپ ڊائون خودڪار ٿي ويندو.

اٿو! توھان اختياري طور تي استعمال ڪندي ھڪڙي مخصوص ڊراپ ڊائون کي ھدف ڪري سگھو ٿا data-target="#fat"يا href="#fat".

<ul class = "nav pills" > 
  <li class = "active" ><a href = "#" > باقاعده لنڪ </a></li>  
  <li class = "dropdown " id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      ڊراپ ڊائون
      <b class = "caret" ></b> 
    </a>
    <ul class = "ڊراپ ڊائون مينيو" > 
      <li><a href = "#" > عمل </a></li> 
      <li><a href = "#" > ٻيو عمل </a></li> 
      <li><a href="#" > هتي ڪجھ ٻيو </a> </li> 
      <li class = "divider" ></li> 
      <li><a href="#" > الڳ ٿيل لنڪ </a> </li> 
    </ul>
  </li>
  ...
</ul>

طريقا

$().ڊراپ ڊائون()

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

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 کي جاوا اسڪرپٽ ذريعي ڪال ڪريو:

$ ( '#navbar' ). scrollspy ()

مارڪ اپ

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

<body data-spy = "اسڪرول" > ... </body>

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

اختيارن

نالو	قسم	ڊفالٽ	وضاحت
بند ڪرڻ	نمبر	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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

ٽرسٽ فنڊ سيٽن ليٽرپريس، ڪيٽار را ڊينم ڪيفيه ايٽسي آرٽ پارٽي اڳ ۾ وڪرو ڪيو ويو ماسٽر ڪلينز گلوٽين فري اسڪواڊ سينسٽر فريگن ڪوسبي سوئيٽر. Fanny pack portland seitan DIY, art Party locavore wolf cliche high life echo park آسٽن. Cred vinyl keffiyeh DIY salvia PBR, banh mi کان پهريان اهي وڪرو ڪري رهيا هئا فارم کان ٽيبل VHS وائرل لوڪاور cosby sweater. Lomo wolf وائرل، mustache readymade thundercats keffiyeh craft beer marfa ethical. ولف سالويا فريگن، سارٽوريل ڪيفيه ايڪو پارڪ ويگن.

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

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

$ ( '#myTab' ). ٽيب ( 'ڏسو' )

مارڪ اپ

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

<ul class = "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 = "#ettings" data-toggle = "tab" > سيٽنگون </a></li>  
</ul>

طريقا

$().tab

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

<ul class = "tabs" > 
  <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>
  $ ( فنڪشن () {  
    $ ( '.tabs a:last' ). ٽيب ( 'ڏسو' )
  })
</script>

واقعا

واقعو	وصف
ڏيکارڻ	هي واقعو ٽيب شو تي فائر ڪري ٿو، پر ان کان اڳ جو نئون ٽيب ڏيکاريو ويو آهي. استعمال ڪريو `event.target`۽ `event.relatedTarget`ھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي).
ڏيکاريل	هي واقعو ٽيب شو تي فائر ٿئي ٿو جڏهن هڪ ٽيب ڏيکاريو ويو آهي. استعمال ڪريو `event.target`۽`event.relatedTarget` ھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي).

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

Tooltips بابت

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

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

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

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

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

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

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

اختيارن

نالو	قسم	ڊفالٽ	وضاحت
انيميشن	بولين	سچو	ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
لڳائڻ	تار	'مٿي'	ٽول ٽائپ کي ڪيئن رکڻو آهي - مٿي \| هيٺان \| کاٻي \| ساڄو
چونڊيندڙ	تار	ڪوڙو	جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ٽول ٽائپ شيون مقرر ڪيل هدفن ڏانهن موڪليا ويندا.
عنوان	تار \| فنڪشن	''	ڊفالٽ عنوان جي قيمت جيڪڏهن `عنوان` ٽيگ موجود نه آهي
محرڪ	تار	'هور'	ٽول ٽِپ ڪيئن شروع ٿئي ٿي - هور \| ڌيان \| دستور
دير ڪرڻ	نمبر \| اعتراض	0	ٽول ٽِپ ڏيکارڻ ۽ لڪائڻ ۾ دير (ms) جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لڪايو / ڏيکاريو ٻنهي تي لاڳو ٿئي ٿو اعتراض جي جوڙجڪ آهي:`delay: { show: 500, hide: 100 }`

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

مارڪ اپ

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

طريقا

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

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

ٽول ٽپ ('شو')

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

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

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

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

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

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

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

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

پوپ جي باري ۾

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

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

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

مثال hover popover

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

پاپ اوور لاءِ هور ڪريو

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

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

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

اختيارن

نالو	قسم	ڊفالٽ	وضاحت
انيميشن	بولين	سچو	ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو
لڳائڻ	تار	'ساڄو'	پوپ اوور جي پوزيشن ڪيئن ڪجي - ٽاپ \| هيٺان \| کاٻي \| ساڄو
چونڊيندڙ	تار	ڪوڙو	جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ٽول ٽائپ شيون مقرر ڪيل هدفن ڏانهن موڪليا ويندا
محرڪ	تار	'هور'	ٽول ٽِپ ڪيئن شروع ٿئي ٿي - هور \| ڌيان \| دستور
عنوان	تار \| فنڪشن	''	ڊفالٽ عنوان جي قيمت جيڪڏهن `عنوان` خاصيت موجود نه آهي
مواد	تار \| فنڪشن	''	ڊفالٽ مواد جي قيمت جيڪڏھن `data-content` خاصيت موجود نه آھي
دير ڪرڻ	نمبر \| اعتراض	0	پوپ اوور ڏيکارڻ ۽ لڪائڻ ۾ دير (ايم ايس) جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لڪايو / ڏيکاريو ٻنهي تي لاڳو ٿئي ٿو اعتراض جي جوڙجڪ آهي:`delay: { show: 500, hide: 100 }`

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

مارڪ اپ

طريقا

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

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

.popover ('شو')

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

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

.popover ('لڪايو')

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

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

.popover ('ٽگل')

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

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

خبرداري بابت

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

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

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

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

× پاڪ 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-alerts.js استعمال ڪندي

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

$ ( ". alert-message" ). خبردار ()

مارڪ اپ

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

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

طريقا

$(). الرٽ()

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

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

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

$ ( ". alert-message" ). خبردار ( 'بند' )

واقعا

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

واقعو	وصف
بند ڪرڻ	اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن `close`مثال جو طريقو سڏيو ويندو آهي.
بند ٿيل	هي واقعو فائر ڪيو ويو آهي جڏهن خبرداري بند ڪئي وئي آهي (سي ايس ايس جي منتقلي جي مڪمل ٿيڻ جو انتظار ڪندو).

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

بابت

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

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

مثال استعمال

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

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

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

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

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

مارڪ اپ

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

<!-- شامل ڪريو data-toggle="button" هڪ بٽڻ تي ٽوگلنگ کي چالو ڪرڻ لاءِ -->
<button class = "btn" data-toggle = "buton " > Single Toggle </button>  
 
<!-- btn-group تي چيڪ باڪس انداز ٽوگلنگ لاءِ data-toggle="buttons-checkbox" شامل ڪريو -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > کاٻي </ بٽڻ> 
  < بٽن ڪلاس = "btn" > وچين </ بٽڻ> 
  <button class = "btn" > ساڄي </ بٽڻ> 
</div>
 
<!-- btn-group تي ريڊيو اسٽائل ٽوگلنگ لاءِ data-toggle="buttons-radio" شامل ڪريو -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > کاٻي </ بٽڻ> 
  < بٽن ڪلاس = "btn" > وچين </ بٽڻ> 
  <button class = "btn" > ساڄي </ بٽڻ> 
</div>

طريقا

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

ٽوگلز پش اسٽيٽ. ڏيکاري ٿو btn ته اهو چالو ڪيو ويو آهي.

اٿو! توهان خصوصيت استعمال ڪندي هڪ بٽڻ جي خودڪار ٽوگلنگ کي فعال ڪري سگهو ٿا data-toggle.

<button class = "btn" data-toggle = "buton " > … </buton>

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

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

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

اٿو! فائر فاڪس صفحو لوڊ ڪرڻ تي غير فعال حالت برقرار رکي ٿو . ھن لاء ھڪڙو حل استعمال ڪرڻ آھي autocomplete="off".

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

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

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

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

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

بابت

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

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

مثال accordion

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

ٽوڙڻ جوڳو گروپ شئي #1

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.

کولڻ لائق گروپ شئي #2

ٽوڙڻ جوڳو گروپ شئي #3

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

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

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

اختيارن

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

مارڪ اپ

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

< بٽن ڪلاس = " btn btn-danger" data - toggle = "colapse " data-target = "#demo" >   
  سادو ٽوڙڻ وارو
</ بٽڻ>
 
<div id = "demo" class = "colapse in" > … </div>

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

طريقا

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

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

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

کولڻ ('ٽگل')

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

.collapse('ڏسو')

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

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

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

واقعا

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

واقعو	وصف
ڏيکارڻ	اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن `show`مثال جو طريقو سڏيو ويندو آهي.
ڏيکاريل	اهو واقعو فائر ڪيو ويو آهي جڏهن هڪ ختم ٿيڻ واري عنصر کي صارف کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
لڪائڻ	اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن `hide`طريقي کي سڏيو ويو آهي.
لڪيل	هي واقعو فائر ڪيو ويو آهي جڏهن هڪ ٽوڙڻ واري عنصر صارف کان لڪيل آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).

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

ٻيو ٿمبنيل ليبل

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.

ٽيون ٿامبنيل ليبل

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.

‹ ›

اٿو! جڏهن هن ڪارسيل تي عمل ڪيو وڃي، انهن تصويرن کي هٽايو جيڪي اسان مهيا ڪيون آهن ۽ انهن کي پنهنجي تصوير سان تبديل ڪريو.

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

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

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

اختيارن

نالو	قسم	ڊفالٽ	وضاحت
وقفو	نمبر	5000	وقت جو مقدار پاڻمرادو سائيڪل هلائڻ جي وچ ۾ دير ڪرڻ لاءِ.

مارڪ اپ

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

<div class = "carousel" > 
  <!-- Carousel شيون -->
  <div class = "carousel-inner" > 
    ...
  </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(اختيارن)

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

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

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

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

.carousel('pause')

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

.carousel (نمبر)

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

.carousel('اڳوڻي')

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

.carousel('اڳيون')

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

واقعا

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

واقعو	وصف
سلائيڊ	اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن `slide`مثال جو طريقو سڏيو ويندو آهي.
slid	اهو واقعو فائر ڪيو ويو آهي جڏهن ڪارسيل مڪمل ڪيو آهي ان جي سلائڊ منتقلي.

بابت

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

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

مثال

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

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

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

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

اختيارن

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

مارڪ اپ

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

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

طريقا

.typeahead (اختيارن)

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

jQuery پلگ ان توهان کي شروع ڪرڻ لاءِ هڪ درجن بوٽ اسٽريپ پلگ ان

پوپورس *

منتقلي *

Modals bootstrap-modal.js

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

جامد مثال

ماڊل هيڊر

لائيو ڊيمو

ماڊل عنوان

ماڊل ۾ متن

هڪ موڊل ۾ پاپ اوور

هڪ موڊل ۾ اوزار

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

اختيارن

مارڪ اپ

طريقا

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

.modal('ٽگل')

ماڊل ('شو')

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

واقعا

ڊراپ ڊائونز bootstrap- dropdown.js

ڊراپ ڊائون بابت

مثال

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

مارڪ اپ

طريقا

$().ڊراپ ڊائون()

ScrollSpy bootstrap-scrollspy.js

مثال navbar scrollspy سان

@ٿلهو

@mdo

هڪ

ٻه

three

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

مارڪ اپ

اختيارن

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

مثال ٽيب

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

مارڪ اپ

طريقا

$().tab

واقعا

ٽول ٽِپٽول ٽائپس bootstrap-

Tooltips بابت

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

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

اختيارن

مارڪ اپ

طريقا

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

ٽول ٽپ ('شو')

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

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

Popovers bootstrap-popover.js

پوپ جي باري ۾

مثال hover popover

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

اختيارن

مارڪ اپ

طريقا

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

.popover ('شو')

.popover ('لڪايو')

.popover ('ٽگل')

خبرداري پيغام bootstrap-alert.js

خبرداري بابت

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

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

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

مارڪ اپ

طريقا

$(). الرٽ()

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

واقعا

بٽڻ bootstrap-button.js

بابت

مثال استعمال