بوټسټپ

جاوا سکرپٹ د بوټسټریپ لپاره

د بوټسټریپ اجزا ژوند ته راوړئ — اوس د 12 دودیز jQuery پلگ انونو سره.

jQuery پلگ ان ستاسو د پیل کولو لپاره یو درجن بوټسټریپ پلگ ان

پورته شه! ټول جاواسکریپټ پلگ ان د jQuery وروستۍ نسخه ته اړتیا لري.

موډلونه bootstrap-modal.js

د ماډلونو په اړه

یو منظم، مګر انعطاف منونکی، د دودیز جاواسکریپټ ماډل پلگ ان ته یوازې د لږترلږه اړین فعالیت او سمارټ ډیفالټ سره واخلئ.

فایل ډاونلوډ کړئ

جامد مثال

لاندې په جامد ډول وړاندې شوی ماډل دی.

×

د موډل سرلیک

یو ښه بدن…

د بدلونونو خوندي کول بند کړئ

ژوندۍ ډیمو

د لاندې تڼۍ په کلیک کولو سره د جاوا سکریپټ له لارې موډل بدل کړئ. دا به د پاڼې له پورتنۍ برخې څخه ښکته او تیاره شي.

د ډیمو ماډل پیل کړئ

د بوټسټریپ ماډل کارول

موډل ته د جاوا سکرپٹ له لارې زنګ ووهئ:

  1. $('#myModal').modal(اختیارونه)

اختیارونه

نوم ډول ډیفالټ توضیحات
پس منظر بولین ریښتیا د موډل - شالید عنصر شامل دی. په بدیل سره، staticد شالید لپاره مشخص کړئ کوم چې په کلیک کولو موډل بند نه کوي.
کیبورډ بولین ریښتیا موډل بندوي کله چې د فرار کیلي فشار راوړل شي
ښودل بولین ریښتیا موډل ښیې کله چې پیل شي.

مارک اپ

تاسو کولی شئ په اسانۍ سره په خپله پاڼه کې موډلونه فعال کړئ پرته لدې چې د جاوا سکرپٹ یوه کرښه ولیکئ. یوازې data-toggle="modal"د کنټرولر عنصر سره تنظیم کړئ data-target="#foo"یا href="#foo"کوم چې د ماډل عنصر ID سره ورته وي ، او کله چې کلیک وکړئ ، دا به ستاسو ماډل پیل کړي.

همچنان ، ستاسو موډل مثال کې اختیارونه اضافه کولو لپاره ، یوازې دا د کنټرول عنصر یا پخپله موډل مارک اپ کې د اضافي ډیټا ځانګړتیاو په توګه شامل کړئ.

  1. <a class="btn" data-toggle="modal" href="#myModal" >موډل پیل کړئ</a>
  1. <div class="modal" id="myModal">
  2.   <div class="modal-header">
  3.     <a class="close" data-dismiss="modal">×</a>
  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">بند</a>
  11.     <a href="#" class="btn btn-primary">بدلونونه خوندي کړئ</a>
  12.   </div>
  13. </div>
پورته شه! که تاسو غواړئ خپل ماډل دننه او بهر متحرک کړئ، یوازې عنصر ته یو .fadeټولګي اضافه کړئ .modal(ډیمو ته مراجعه وکړئ ترڅو دا په عمل کې وګورئ) او bootstrap-transition.js پکې شامل کړئ.

میتودونه

موډل (اختیارونه)

ستاسو محتويات د موډل په توګه فعالوي. یو اختیاري اختیارونه مني object.

  1. $('#myModal').modal({
  2.   کیبورډ: غلط
  3. })

موډل('ټوګل')

په لاسي ډول موډل بدلوي.

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

موډل('شو')

په لاسي ډول موډل خلاصوي.

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

موډل('پټ')

په لاسي ډول یو موډل پټوي.

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

پیښې

د بوټسټریپ موډل کلاس د موډل فعالیت کې د ځړولو لپاره یو څو پیښې افشا کوي.

پیښه تفصیل
ښودل دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
ښودل شوی دا پیښه له مینځه وړل کیږي کله چې موډل کارونکي ته ښکاره شوی وي (د سی ایس ایس لیږد بشپړیدو ته به انتظار وکړي).
پټول دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hideمثال میتود ویل کیږي.
پټ دا پیښه له مینځه وړل کیږي کله چې موډل د کارونکي څخه پټ شوی وي (د بشپړیدو لپاره به د سی ایس ایس لیږد انتظار وکړي). 
  1. $('#myModal').on('hidden', function () {
  2.   // یو څه وکړه…
  3. })

ScrollSpy bootstrap-scrollspy.js

د ScrollSpy پلگ ان د سکرول موقعیت پراساس د نوي هدفونو په اتوماتيک ډول تازه کولو لپاره دی.

فایل ډاونلوډ کړئ

د scrollspy سره navbar بېلګه

لاندې ساحه سکرول کړئ او د نیویګیشن تازه معلومات وګورئ. د ښکته کولو فرعي توکي به هم روښانه شي. هڅه وکړئ!

@ غوړ

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi مخکې له دې چې دوی وپلورل شي qui. د ټمبلر فارم څخه تر میز پورې د بایسکل حق هر څه. 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

وینیم مارفا مستې سکیټبورډ، adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat څلور loko nisi، ea helvetica nulla carles. ټاټو شوي کاسبي سویټر خوراکي لارۍ ، د میکسویني کویس غیر فریګن وینیل. لو فای ویس انډرسن +1 سارټوریل. کارلس غیر جمالیاتی تمرین quis gentrify. د بروکلین adipisicing craft beer vice keytar deserunt.

یو

Occaecat commodo aliqua delectus. د فاپ کرافټ بیر ډیزرنټ سکیټ بورډ ea. د لومو بایسکل حقونه ایډپیسیکینګ 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 لږترلږه د میسینجر کڅوړه تنظیم کړئ. کریډ ایکس ان، دوامداره ډیلکټس کنسکټټور فینی پیک آی فون.

دوه

په incididunt اکو پارک کې، د آفیشیا ډیزرنټ مکسویني پروډینټ ماسټر کلینز تندرکیټس ساپینټ وینیم. د VHS ایلیټ پرته، پروډینټ شورډیچ +1 بایوډیزل لیبرم کرافټ بیر. د واحد-اصلي کافي لارویان irure څلور لوکو، کپیداتات ټیری ریچارډسن ماسټر کلینز. فرض کړئ تاسو شاید د دوی په اړه نه وي اوریدلي د آرټ پارټي فیني پیک، ټاټو شوي نولا کارډیګن tempor اعلان. Proident wolf nesciunt sartorial keffiyeh eu banh mi دوامدار. ایلیټ ولف ولپټیټ، لو فای ای پورټلینډ مخکې له دې چې دوی څلور لوکو وپلورل شي. Locavore enim nostrud mlkshk brooklyn nesciunt.

درې

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi مخکې له دې چې دوی وپلورل شي qui. د ټمبلر فارم څخه تر میز پورې د بایسکل حق هر څه. 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.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats تاسو شاید د دوی په اړه نه وي اوریدلي چې پایله یې د هوډي ګلوټین فری لو فای فاپ الیکیپ. Labore elit placeat مخکې له دې چې دوی وپلورل شي، د ټیری ریچارډسن پروډینټ برانچ نیسسیونټ کویس کاسبی سویټر پیریټور کیفیه او هیلویټیکا هنرمند. د کارډیګن کرافټ بیر سیتان چمتو شوي ویلیټ. د VHS چیمبری لیبریس لنډمهاله وینیم. Anim mollit minim commodo ullamco thundercats.

د bootstrap-scrollspy.js کارول

د جاوا سکرپٹ له لارې سکرولسپي ته زنګ ووهئ:

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

مارک اپ

ستاسو د ټاپ بار نیویګیشن کې په اسانۍ سره د سکرول سپي چلند اضافه کولو لپاره ، یوازې data-spy="scroll"هغه عنصر ته اضافه کړئ چې تاسو یې غواړئ جاسوسي وکړئ (په عموم کې دا به بدن وي).

  1. <body data-spy="scroll">...</body>
پورته شه! د Navbar لینکونه باید د حل وړ ID اهداف ولري. د مثال په توګه، یو <a href="#home">home</a>باید په ډوم کې د یو څه سره مطابقت ولري لکه <div id="home"></div>.

اختیارونه

نوم ډول ډیفالټ توضیحات
بندول شمیره 10 د سکرول موقعیت محاسبه کولو پر مهال له پورتنۍ برخې څخه د خلاصولو لپاره پکسلونه.

د بدلولو وړ ټبونه bootstrap-tab.js

دا پلگ ان د محلي منځپانګې له لارې د لیږد لپاره چټک، متحرک ټب او د ګولۍ فعالیت زیاتوي.

فایل ډاونلوډ کړئ

د بېلګې ټبونه

د پټو پینونو تر منځ د بدلولو لپاره لاندې ټبونو باندې کلیک وکړئ، حتی د ډراپ ډاون مینو له لارې.

خام ډینم تاسو شاید د جین شارټس آسټین په اړه نه وي اوریدلی. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor، Williamsburg Carles Vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. کاسبي سویټر eu banh mi, qui irure Terry Richardson ex squid. ایلیکیپ پلیسیټ سالویا سیلم آی فون. Seitan aliquip quis cardigan American apparel, butcher voluptate nisi qui.

د فوډ ټرک فکسي لوکاوور، اکوسیمس مکسویني مارفا نولا واحد اصلي کافي اسکویډ. تمرین +1 لیبر ویلیټ، بلاګ سارټوریل PBR لیګینګز راتلونکی لیول ویس اینڈرسن هنرمند څلور لوکو فارم-ټو-ټیبل کرافټ بیئر ټویټ. د Qui عکس بوت لیټرپریس، کوموډو اینیم کرافټ بییر ملکشک الیکیپ جین شارټس 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، دوامدار جین شارټس ږیره او د DIY اخلاقي کلپا ټیري ریچارډسن بایوډیزل. د آرټ پارټي سینسټر سټمپټاون ، ټمبلر بوچر ویرو سینټ کو سیپینټ اکوسیمس ټاټو ایکو پارک.

د bootstrap-tab.js کارول

د جاوا سکرپٹ له لارې د ټب وړ وړ ټبونه فعال کړئ:

  1. $('#myTab').tab('show')

مارک اپ

data-toggle="tab"تاسو کولی شئ په ساده ډول د مشخص کولو یا data-toggle="pill"یو عنصر په واسطه د جاوا سکریپټ لیکلو پرته د ټب یا ګولۍ نیویګیشن فعال کړئ .

  1. <ul class="nav nav-tabs">
  2.   <li><a href="#home" data-toggle="tab">کور</a></li>
  3.   <li><a href="#profile" data-toggle="tab">Profile</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

د ټب عنصر او د مینځپانګې کانټینر فعالوي. ټب باید یا د ډیټا هدف ولري یا یو "href" په ډوم کې د کانټینر نوډ په نښه کړي.

  1. <ul class="nav nav-tabs">
  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.     $('.tabs a:last').tab('show')
  18.   })
  19. </script>

پیښې

پیښه تفصیل
ښودل دا پیښه د ټب شو باندې ډزې کوي، مګر مخکې له دې چې نوی ټب ښودل شوی وي. په ترتیب سره د فعال ټب او پخوانی فعال ټب (که شتون ولري) وکاروئ event.targetاو په نښه کړئ.event.relatedTarget
ښودل شوی دا پیښه د ټب ښودلو وروسته د ټب ښودلو وروسته خپریږي. په ترتیب سره د فعال ټب او پخوانی فعال ټب (که شتون ولري) وکاروئ event.targetاو په نښه کړئ.event.relatedTarget 
  1. $('a[data-toggle="tab"]').on('sshow', function (e) {
  2.   e.target // فعال شوی ټب
  3.   e.relatedTarget // پخوانی ټب
  4. })

Tooltips bootstrap-tooltip.js

د وسیلو په اړه

د جیسن فریم لخوا لیکل شوي د عالي jQuery.tipsy پلگ ان څخه الهام اخیستل؛ Tooltips یوه تازه نسخه ده، کوم چې په انځورونو تکیه نه کوي، د انیمیشنونو لپاره css3 کاروي، او د ځایی سرلیک ذخیره کولو لپاره د ډاټا ځانګړتیاوې.

فایل ډاونلوډ کړئ

د Tooltips کارولو بېلګه

د وسیلې لارښوونو لیدو لپاره لاندې لینکونو ته ځیر شئ:

تنګ پتلون د بلې کچې کیفیه تاسو شاید د دوی په اړه نه وي اوریدلي. د عکس بوټ ږیره خام ډینم لیټرپریس ویگن میسنجر کڅوړه سټمپټاون. د فارم څخه میز سیتان، د میکسویني فکسي پایښت وړ quinoa 8-bit امریکایی پوښاک د ټیری ریچارډسن وینیل چیمبری لري . بیرډ سټمپټاون، کارډیګینس بنه می لومو تندر کیټس. توفو بایوډیزل ویلیامسبرګ مارفا، څلور لوکو مکسوینی کلینز ویګن چیمبری. یو ریښتیني اوسپنیز هنرمند هر څه چې کیتار ، سینسټر فارم څخه تر میز بانکي آسټین ټویټر هینډل فریګن کریډ خام ډینم واحد اصلي کافي ویروس.

د bootstrap-tooltip.js کارول

د جاواسکریپټ له لارې د وسیلې ټایپ پیل کړئ:

  1. $('#example').tooltip(اختیارونه)

اختیارونه

نوم ډول ډیفالټ توضیحات
حرکت بولین ریښتیا وسیلې ته د سی ایس ایس فیډ لیږد پلي کړئ
ځای پرځای کول string|فنکشن 'پورته' څنګه د وسیلې ټاپ ځای په ځای کړئ - ټاپ | لاندې | پاتې | حق
انتخاب کونکی تار دروغ که یو انتخاب کونکی چمتو شي، د اوزار ټایپ توکي به ټاکل شوي هدفونو ته واستول شي.
عنوان تار | فعالیت '' د اصلي سرلیک ارزښت که د سرلیک ټګ موجود نه وي
محرک تار 'هور' څنګه وسیلې ټایپ رامینځته کیږي - هوور | تمرکز | لارښود
ځنډ شمیره | اعتراض 0

د وسیلې په ښودلو او پټولو کې ځنډ (ms)

که یوه شمیره ورکړل شي، ځنډ د پټولو / ښودلو لپاره کارول کیږي

د شیانو جوړښت دا دی:delay: { show: 500, hide: 100 }
پورته شه! د انفرادي وسیلو لپاره اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي.

مارک اپ

د فعالیت دلایلو لپاره، Tooltip او Popover data-apis غوره شوي دي. که تاسو غواړئ دوی وکاروئ یوازې د انتخاب کونکي اختیار مشخص کړئ.

  1. <a href="#" rel="tooltip" title="first tooltip">په ما باندې ځړول</a>

میتودونه

$().تولیپ(اختیارونه)

د عناصرو ټولګه ته د اوزار ټایپ هینډلر ضمیمه کوي.

.tooltip('شو')

د عنصر وسیله ټیپ څرګندوي.

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

.tooltip('پټ')

د یو عنصر وسیله ټیپ پټوي.

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

.tooltip('ټوګل')

د یو عنصر د وسیلې ټاپ ټګل کوي.

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

Popovers bootstrap-popover.js

د پاپورز په اړه

د منځپانګې کوچنۍ پوښښ اضافه کړئ، لکه په iPad کې، د کور ثانوي معلوماتو لپاره هر عنصر ته.

* Tooltip ته اړتیا لري چې پکې شامل شي

فایل ډاونلوډ کړئ

د هور پاپ اوور مثال

د پاپ اوور د پیل کولو لپاره تڼۍ باندې ځړول.

د پاپ اوور لپاره ځړول

د bootstrap-popover.js کارول

د جاوا سکرپٹ له لارې پاپور فعال کړئ:

  1. $('#example').popover(اختیارونه)

اختیارونه

نوم ډول ډیفالټ توضیحات
حرکت بولین ریښتیا وسیلې ته د سی ایس ایس فیډ لیږد پلي کړئ
ځای پرځای کول string|فنکشن 'حق' څنګه د پاپ اوور ځای ونیسئ - ټاپ | لاندې | پاتې | حق
انتخاب کونکی تار دروغ که چیرې یو انتخاب کونکی چمتو شي، د اوزار ټایپ توکي به ټاکل شوي هدفونو ته واستول شي
محرک تار 'هور' څنګه وسیلې ټایپ رامینځته کیږي - هوور | تمرکز | لارښود
عنوان تار | فعالیت '' د اصلي سرلیک ارزښت که چیرې د سرلیک خاصیت شتون ونلري
منځپانګه تار | فعالیت '' د ډیفالټ مینځپانګې ارزښت که چیرې د ډیټا مینځپانګې خاصیت شتون ونلري
ځنډ شمیره | اعتراض 0

د پاپ اوور ښودل او پټول ځنډول (ms)

که یوه شمیره ورکړل شي، ځنډ د پټولو / ښودلو لپاره کارول کیږي

د شیانو جوړښت دا دی:delay: { show: 500, hide: 100 }
پورته شه! د انفرادي پاپورونو اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي.

مارک اپ

د فعالیت دلایلو لپاره، Tooltip او Popover data-apis غوره شوي دي. که تاسو غواړئ دوی وکاروئ یوازې د انتخاب کونکي اختیار مشخص کړئ.

میتودونه

$(.popover(اختیارونه)

د عنصر راټولولو لپاره پاپور پیل کوي.

.popover('شو')

د پاپ اوور عناصر څرګندوي.

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

پاپ اوور('پټ')

د پاپ اوور عناصر پټوي.

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

.popover('ټوګل')

د عناصرو پاپ اوور ټګل کوي.

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

د خبرتیا پیغامونه bootstrap-alert.js

د خبرتیاو په اړه

د خبرتیا پلگ ان خبرتیاو ته د نږدې فعالیت اضافه کولو لپاره یو کوچنی ټولګی دی.

ډاونلوډ کړئ

بېلګې خبرتیاوې

د خبرتیا پلگ ان په منظم خبرتیا پیغامونو کار کوي، او پیغامونه بلاک کوي.

× مقدس ګواکامول! خپل ځان ته غوره وګورئ، تاسو ډیر ښه نه ښکاري.
×

اوه ټویټ! تاسو یوه تېروتنه وکړه!

دا او هغه بدل کړئ او بیا هڅه وکړئ. 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. $(.alert").alert()

مارک اپ

یوازې data-dismiss="alert"خپل نږدې تڼۍ ته اضافه کړئ ترڅو په اتوماتيک ډول د خبرتیا نږدې فعالیت ورکړئ.

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

میتودونه

$().خبرتیا()

د نږدې فعالیت سره ټول خبرتیاوې وپلټئ. د دې لپاره چې ستاسو خبرتیاوې د تړلو پر مهال متحرک شي، ډاډ ترلاسه کړئ چې دوی لا دمخه په دوی باندې پلي شوي .fadeاو .inټولګي لري.

خبرتیا('نږدې')

یو خبرتیا بندوي.

  1. $(.alert").alert('close')

پیښې

د بوټسټریپ د خبرتیا ټولګي د خبرتیا فعالیت ته د رسیدو لپاره یو څو پیښې افشا کوي.

پیښه تفصیل
تړل دا پیښه سمدلاسه اوریږي کله چې د closeمثال میتود ویل کیږي.
تړل شوی دا پیښه له مینځه وړل کیږي کله چې خبرتیا بنده شوې وي (د بشپړیدو لپاره به د سی ایس ایس لیږد انتظار وکړي). 
  1. $('#my-alert').bind('closed', function () {
  2.   // یو څه وکړه…
  3. })

بټن bootstrap-button.js

په اړه

د بټونو سره ډیر څه وکړئ. د کنټرول تڼۍ حالتونه یا د نورو برخو لکه اوزار بارونو لپاره د بټونو ګروپونه رامینځته کړئ.

فایل ډاونلوډ کړئ

د کارولو مثالونه

د ریاستونو او ټګلونو لپاره د بټونو پلگ ان وکاروئ.

دولتي
واحد ټګول
چک بکس
راډیو

د bootstrap-button.js کارول

د جاوا سکرپٹ له لارې تڼۍ فعال کړئ:

  1. $('.tabs').button()

مارک اپ

د ډیټا ځانګړتیاوې د تڼۍ پلگ ان لپاره لازمي دي. د مختلف مارک اپ ډولونو لپاره لاندې مثال کوډ وګورئ.

  1. <!-- ډیټا-toggle="button" اضافه کړئ ترڅو په یوه تڼۍ کې ټګلینګ فعال کړئ -->
  2. <button class="btn" data-toggle="button">واحد توګل</button>
  3.  
  4. <!-- په btn-group کې د چک بکس سټایل ټوګل کولو لپاره data-toggle="buttons-checkbox" اضافه کړئ -->
  5. <div class="btn-group" data-toggle="buttons-checkbox">
  6.   <button class="btn">کیڼ</button>
  7.   <button class="btn">منځنی</button>
  8.   <button class="btn">ښي</button>
  9. </div>
  10.  
  11. <!-- په btn-group کې د راډیو سټایل ټوګل کولو لپاره data-toggle="buttons-radio" اضافه کړئ -->
  12. <div class="btn-group" data-toggle="buttons-radio">
  13.   <button class="btn">کیڼ</button>
  14.   <button class="btn">منځنی</button>
  15.   <button class="btn">ښي</button>
  16. </div>

میتودونه

$().بټن('ټوګل')

د فشار حالت ټوګل کوي. تڼۍ ته داسې بڼه ورکوي چې دا فعاله شوې ده.

پورته شه! تاسو کولی شئ د ځانګړتیا په کارولو سره د تڼۍ اتومات ټګلینګ فعال کړئ data-toggle. 
  1. <button class="btn" data-toggle="button" >…</button>

$().بټن('لوډ کول')

د تڼۍ حالت د بارولو لپاره تنظیموي - تڼۍ غیر فعالوي او متن د بارولو متن ته بدلوي. د متن پورته کول باید د ډاټا ځانګړتیا په کارولو سره د تڼۍ په عنصر کې تعریف شي data-loading-text.

  1. <button class="btn" data-loading-text="loading stuff..." >...</button>
پورته شه! فایرفوکس د مخ په ډیریدو کې غیر فعال حالت ته دوام ورکوي. د دې لپاره د حل لاره کارول autocomplete="off"دي.

$().بټن('ری سیٹ')

د تڼۍ حالت بیا تنظیموي - متن اصلي متن ته بدلوي.

$(). تڼۍ( تار)

د تڼۍ حالت بیا تنظیموي - متن هرډول ډیټا تعریف شوي متن حالت ته بدلوي.

  1. <button class="btn" data-complete-text="ختم!" >...</buton>
  2. <script>
  3.   $('.btn').بټن('بشپړ')
  4. </script>

bootstrap -collapse.js مات کړئ

په اړه

بیس سټایلونه او انعطاف وړ ملاتړ د سقوط وړ برخو لکه اکارډینز او نیویګیشن لپاره ترلاسه کړئ.

فایل ډاونلوډ کړئ

د اکارډین بیلګه

د سقوط پلگ ان په کارولو سره، موږ یو ساده اکارډین سټایل ویجټ جوړ کړ:

د ماتیدو وړ ګروپ توکي #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 تاسو شاید د دوی په اړه نه وي اوریدلي چې د دوامدار VHS په اړه کار کوي.
د ماتیدو وړ ګروپ توکي #2
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 تاسو شاید د دوی په اړه نه وي اوریدلي چې د دوامدار VHS په اړه کار کوي.
د سقوط وړ ګروپ توکي #3
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 تاسو شاید د دوی په اړه نه وي اوریدلي چې د دوامدار VHS په اړه کار کوي.

د bootstrap-collapse.js کارول

د جاوا سکرپٹ له لارې فعال کړئ:

  1. $(. سقوط"). سقوط()

اختیارونه

نوم ډول ډیفالټ توضیحات
مور او پلار انتخاب کونکی دروغ که انتخاب کونکی وي نو د ټاکل شوي پیرنټ لاندې ټول ماتونکي عناصر به وتړل شي کله چې دا د سقوط وړ توکي وښودل شي. (د دودیز اکارډ چلند سره ورته)
بدلول بولین ریښتیا په بلنه کې د سقوط وړ عنصر بدلوي

مارک اپ

یوازې عنصر ته اضافه کړئ data-toggle="collapse"او a data-targetپه اتوماتيک ډول د سقوط وړ عنصر کنټرول وټاکئ. خاصیت د data-targetسی ایس ایس انتخاب کونکی مني ترڅو د سقوط پلي کړي. ډاډ ترلاسه کړئ چې ټولګي collapseد سقوط وړ عنصر ته اضافه کړئ. که تاسو غواړئ چې دا په ډیفالټ خلاص شي، اضافي ټولګي اضافه کړئ in.

  1. <بټن کلاس="btn btn-خطر" data-toggle="collapse" data-target="#demo">
  2.   ساده د سقوط وړ
  3. </ تڼۍ>
  4.  
  5. <div id="demo" class="collapse in"> … </div>
پورته شه! د تړل کیدو وړ کنټرول ته د اکارډین په څیر ګروپ مدیریت اضافه کولو لپاره ، د ډیټا خاصیت اضافه کړئ data-parent="#selector". ډیمو ته مراجعه وکړئ ترڅو دا په عمل کې وګورئ.

میتودونه

سقوط (اختیارونه)

ستاسو مینځپانګه د سقوط وړ عنصر په توګه فعالوي. یو اختیاري اختیارونه مني object.

  1. $('#myCollapsible').کول
  2.   toggle: دروغ
  3. })

سقوط ('ټوګل')

د ښودلو یا پټولو لپاره د سقوط وړ عنصر بدلوي.

سقوط ('شو')

د سقوط وړ عنصر ښیې.

سقوط ('پټ')

د سقوط وړ عنصر پټوي.

پیښې

د بوټسټریپ سقوط ټولګي د سقوط فعالیت ته د رسیدو لپاره یو څو پیښې افشا کوي.

پیښه تفصیل
ښودل دا پیښه سمدلاسه اوریږي کله چې د showمثال میتود ویل کیږي.
ښودل شوی دا پیښه له مینځه وړل کیږي کله چې د سقوط عنصر کارونکي ته ښکاره شي (د سی ایس ایس لیږد بشپړیدو ته به انتظار وکړي).
پټول دا پیښه سمدلاسه له مینځه وړل کیږي کله چې hideمیتود ویل کیږي.
پټ دا پیښه له مینځه وړل کیږي کله چې د سقوط عنصر د کارونکي څخه پټ شوی وي (د سی ایس ایس لیږد بشپړیدو ته به انتظار وکړي). 
  1. $('#myCollapsible').on('hidden', function () {
  2.   // یو څه وکړه…
  3. })

Typeahead bootstrap-typeahead.js

په اړه

یو بنسټیز، په اسانۍ سره پراخ شوی پلگ ان د هر ډول متن ان پټ سره په چټکۍ سره د ښکلي ټایپ هیډونو جوړولو لپاره.

فایل ډاونلوډ کړئ

بېلګه

د ټایپ سر پایلې ښودلو لپاره لاندې ساحه کې ټایپ کول پیل کړئ.

د bootstrap-typeahead.js کارول

د جاوا سکرپٹ له لارې ټایپ هیډ ته زنګ ووهئ:

  1. $('.typeahead').typeahead()

اختیارونه

نوم ډول ډیفالټ توضیحات
سرچینه صف [ ] د معلوماتو سرچینه د پوښتنې لپاره.
توکي شمیره ۸ په ډراپ ډاون کې د ښودلو لپاره د توکو اعظمي شمیر.
میچر فعالیت قضیه غیر حساس هغه میتود چې د دې معلومولو لپاره کارول کیږي چې ایا پوښتنه د یو توکي سره سمون لري. یو واحد دلیل مني، د کوم په itemمقابل کې چې د پوښتنې ازموینه وکړي. سره اوسنۍ پوښتنې ته لاسرسی ومومئ this.query. یو بولین بیرته راوګرځوئ trueکه چیرې پوښتنه یوه لوبه وي.
ترتیب کوونکی فعالیت دقیق میچ،
قضیه حساس،
قضیه غیر حساس		 هغه طریقه چې د اتوماتیک پایلو د ترتیب کولو لپاره کارول کیږي. یو واحد دلیل itemsمني او د ټایپ هیډ مثال ساحه لري. اوسنۍ پوښتنې ته مراجعه وکړئ this.query.
روښانه کوونکی فعالیت ټول ډیفالټ میچونه روښانه کوي هغه طریقه چې د اتوماتیک بشپړ پایلو روښانه کولو لپاره کارول کیږي. یو واحد دلیل itemمني او د ټایپ هیډ مثال ساحه لري. html باید بیرته راشي.

مارک اپ

د ټایپ هیډ فعالیت سره د عنصر راجستر کولو لپاره د ډیټا ځانګړتیاوې اضافه کړئ.

  1. <input type="text" data-provide="typeahead">

میتودونه

.typeahead(اختیارونه)

د ټایپ هیډ سره ان پټ پیل کوي.