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

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

موډلونه

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

ښکته کول

د دې ساده پلگ ان سره په بوټسټریپ کې نږدې هرڅه ته د ډراپ ډاون مینو اضافه کړئ. بوټسټریپ په نیوبار، ټبونو او ګولیو کې د بشپړ ډراپ ډاون مینو ملاتړ کوي.

scrollspy

scrollspy وکاروئ ترڅو په اتوماتيک ډول ستاسو په نیوبار کې لینکونه تازه کړئ ترڅو د سکرول موقعیت پراساس اوسنی فعال لینک وښیې.

د بدلون وړ ټبونه

دا پلگ ان وکاروئ چې ټبونه او ګولۍ ډیر ګټور کړي ترڅو دوی ته اجازه ورکړي چې د ځایی مینځپانګو د میز وړ پینونو له لارې تیر شي.

وسیلې

د jQuery ټیپسي پلگ ان ته یو نوی اخیستل، اوزار په عکسونو تکیه نه کوي — دوی د ځایی سرلیک ذخیره کولو لپاره د متحرکاتو او ډیټا ځانګړتیاو لپاره CSS3 کاروي.

پاپورز *

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

* د شاملولو لپاره وسیلې ته اړتیا لري

د خبرتیا پیغامونه

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

تڼۍ

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

سقوط

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

کاروسل

د هر هغه مینځپانګې یو خوندور پړاو رامینځته کړئ چې تاسو یې غواړئ د مینځپانګې متقابل سلایډ شو چمتو کړئ.

ټایپ هیډ

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

لیږدونه *

د ساده لیږد اغیزو لپاره، یوځل 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. })

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

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

  1. $ ( '#myModal' ). موډل ( 'ټوګل' )

موډل('شو')

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

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

موډل('پټ')

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

  1. $ ( '#myModal' ). موډل ( پټول )

پیښې

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

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

د 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. ټاټو شوي کاسبي سویټر خوراکي لارۍ ، د میکسویني کویس غیر فریګن وینیل. Lo-fi Wes Anderson +1 sartorial. کارلس غیر جمالیاتی تمرین 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 لږترلږه میسینجر کڅوړه جوړه کړئ. کریډ ایکس ان، دوامداره ډیلکټس کنسکټټور فینی پیک آی فون.

دوه

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.

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 کارول

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

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

مارک اپ

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

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

میتودونه

scrollspy('ریفریش')

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

  1. $ ( '[data-spy="scroll"]' ). هر ( فعل () {
  2. var $ جاسوس = $ ( دا ). scrollspy ( 'ریفریش' )
  3. });

اختیارونه

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

پیښې

پیښه تفصیل
فعالول دا پیښه هغه وخت اوریږي کله چې یو نوی توکي د سکرول سپي لخوا فعال شي.

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

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

د بېلګې ټبونه

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

خام ډینم تاسو شاید د جین شارټس آسټین په اړه نه وي اوریدلی. 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.

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. e . مخنیوی ډیفالټ ();
  3. ډالر ( دا ). tab ( 'شو' );
  4. })

تاسو کولی شئ انفرادي ټبونه په څو لارو فعال کړئ:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'شو' ); // د نوم په واسطه ټب غوره کړئ
  2. $ ( '#myTab a:first' ). tab ( 'شو' ); // لومړی ټب غوره کړئ
  3. $ ( '#myTab a:last' ). tab ( 'شو' ); // وروستی ټب غوره کړئ
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'شو' ); // دریم ټب غوره کړئ (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

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

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "فعال" ><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 = "پیغامونه" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( فعالیت () {
  17. $ ( '#myTab a:last' ). tab ( 'شو' );
  18. })
  19. </script>

پیښې

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

د وسیلو په اړه

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

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

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

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

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


د bootstrap-tooltip.js کارول

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

  1. $ ( '#مثال' ). وسیلې ( اختیارونه )

اختیارونه

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

د وسیلې ټایپ (ms) ښودل او پټول ځنډول - د لارښود محرک ډول باندې نه پلي کیږي

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

د شیانو جوړښت دا دی:delay: { show: 500, hide: 100 }

پورته شه! د انفرادي وسیلو لپاره اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي.

مارک اپ

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

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

میتودونه

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

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

.tooltip('شو')

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

  1. $ ( '# عنصر' ). وسیلې ( 'شو' )

.tooltip('پټ')

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

  1. $ ( '# عنصر' ). وسیلې ټپ ( پټول )

.tooltip('ټوګل')

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

  1. $ ( '# عنصر' ). وسیلې ټپ ( ' ټوګل ' )

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

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

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

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

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

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


د bootstrap-popover.js کارول

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

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

اختیارونه

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

د پاپ اوور (ms) په ښودلو او پټولو کې ځنډ - د لارښود محرک ډول باندې نه پلي کیږي

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

د شیانو جوړښت دا دی:delay: { show: 500, hide: 100 }

پورته شه! د انفرادي پاپورونو لپاره اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي.

مارک اپ

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

میتودونه

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

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

.popover('شو')

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

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

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

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

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

.popover('ټوګل')

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

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

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

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

ډاونلوډ کړئ

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

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

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

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

دا او هغه بدل کړئ او بیا هڅه وکړئ. 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' ). bind ( 'تړل' ، فنکشن () {
  2. // یو څه وکړه…
  3. })

په اړه

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

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

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

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

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

د bootstrap-button.js کارول

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

  1. $ ( '.nav-tabs' ). تڼۍ ()

مارک اپ

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

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

میتودونه

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

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

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

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

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

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

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

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

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

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

  1. <button class = "btn" data-complete-text = "بشپړ شوی!" ... </ تڼۍ >
  2. <script>
  3. $ ( '.btn' ). تڼۍ ( 'بشپړ' )
  4. </script>

په اړه

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

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

* د شاملولو لپاره د لیږد پلگ ان ته اړتیا لري.

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

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

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

میتودونه

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

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

  1. $ ( '#myCollapsible' ). سقوط ({
  2. تورول : دروغ
  3. })

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

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

سقوط ('شو')

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

سقوط ('پټ')

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

پیښې

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

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

په اړه

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

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

بېلګه

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


د bootstrap-typeahead.js کارول

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

  1. $ ( '.typeahead' ). ټایپ مخکښ ()

اختیارونه

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

مارک اپ

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

  1. <د انپټ ډول = "متن" ډاټا - چمتو کول = "ټایپ هیډ" >

میتودونه

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

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