تاکەکەسی یان کۆکراوە

ئەگەر نوێترین وەشانی Bootstrapت دابەزاندووە، هەردوو bootstrap.js و bootstrap.min.js هەموو ئەو پێوەکراوەکانی تێدایە کە لەم لاپەڕەیەدا هاتووە.

تایبەتمەندیەکانی داتا

دەتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی API ی مارکاپەوە بەبێ ئەوەی یەک دێڕی جاڤاسکڕێپت بنووسیت. ئەمە API ی پلە یەکەمی Bootstrap ە و دەبێت یەکەم ڕەچاوکردنت بێت لە کاتی بەکارهێنانی پێوەکراوێکدا.

کە ووتمان، لە هەندێک بارودۆخدا ڕەنگە خواستراو بێت ئەم کاراییە بکوژێنرێتەوە. بۆیە، ئێمە توانای لەکارخستنی API تایبەتمەندی داتاش دەدەین بە هەڵوەشاندنەوەی هەموو ڕووداوەکان لەسەر ناوی جەستە کە بە `'data-api'` جیاکراوەتەوە. ئەمەش بەم شێوەیە دەردەکەوێت:

$ ( 'جەستە' ). کوژاوەتەوە ( '.data-api' )

یان بۆ بە ئامانجگرتنی پێوەکراوێکی دیاریکراو، تەنها ناوی پێوەکراوەکان وەک ناوچەی ناو لەگەڵ شوێنی ناوی data-api بەم شێوەیە دابنێ:

$ ( 'جەستە' ). کوژاوەتەوە ( '.alert.data-api' )

API بەرنامەیی

هەروەها ئێمە پێمان وایە پێویستە بتوانیت هەموو پێوەکراوەکانی Bootstrap بەکاربهێنیت تەنها لە ڕێگەی JavaScript API ەوە. هەموو API گشتیەکان شێوازی تاک و زنجیرن و ئەو کۆکردنەوە دەگەڕێننەوە کە کاریان لەسەر کراوە.

$ ( ".btn.مەترسی" ). دوگمەی ( "toggle" ). addClass ( "چەوری" )

هەموو شێوازەکان دەبێ شتێکی هەڵبژاردەی هەڵبژاردە قبوڵ بکەن، ڕستەیەک کە شێوازێکی دیاریکراو دەکاتە ئامانج، یان هیچ (کە پێوەکراوێک بە هەڵسوکەوتی پێشوەختە دەستپێدەکات):

$ ( "#مۆداڵی من" ). modal () // بە پێشوەختە سەرەتایی کراوە                       
$ ( "#مۆداڵی من" ). modal ({ keyboard : false }) // دەستپێکراوە بەبێ کیبۆرد     
$ ( "#مۆداڵی من" ). modal ( 'show' ) // دەستبەجێ دەستپێدەکات و بانگهێشتی show دەکات                

هەروەها هەر پێوەکراوێک بنیاتنەرە خاوەکەی لەسەر تایبەتمەندییەکی `Constructor` ئاشکرا دەکات: $.fn.popover.Constructor. ئەگەر دەتەوێت نموونەیەکی پێوەکراوێکی تایبەت بەدەست بهێنیت، ڕاستەوخۆ لە توخمێکەوە وەریبگرەوە: $('[rel=popover]').data('popover').

ڕووداوەکان

بووتستراپ ڕووداوە تایبەتەکان بۆ زۆربەی کردارە ناوازەکانی پێوەکراوەکان دابین دەکات. بەگشتی، ئەمانە بە شێوەی بێکۆتایی و بەشێکی ڕابردوو دێن - کە بێکۆتایی (ex. show) لە سەرەتای ڕووداوێکدا دەستپێدەکات، و فۆڕمی بەشە ڕابردووەکەی (ex. shown) لە کاتی تەواوبوونی کردارێکدا دەستپێدەکات.

هەموو ڕووداوە بێکۆتاییەکان کارایی preventDefault دابین دەکەن. ئەمەش توانای وەستاندنی جێبەجێکردنی کردارێک پێش دەستپێکردنی دابین دەکات.

$ ( '#مۆداڵی من' ). on ( 'نیشاندان' , فەنکشن ( e ) {   
    ئەگەر (! داتا ) بگەڕێنەرەوە e . preventDefault () // مۆدال لە پیشاندانی ڕادەگرێت   
})

دەربارەی گواستنەوەکان

بۆ کاریگەرییە سادەکانی گواستنەوە، جارێک bootstrap-transition.js لە پاڵ پەڕگەکانی تری JS دابنێ. ئەگەر تۆ bootstrap.js ی کۆکراوە (یان بچووککراو) بەکاردەهێنیت، پێویست ناکات ئەمە بخەیتە ناوەوە- پێشتر لەوێیە.

کەیسەکانی بەکارهێنان

چەند نموونەیەک لە پێوەکراوەکەی گواستنەوە:

• خلیسکان یان کاڵبوونەوە لە مۆداڵەکاندا
• کاڵبوونەوەی تابەکان
• کاڵبوونەوەی ئاگادارکردنەوەکان
• پەنجەرەی کارۆسێلی خلیسکێنە

نموونە

مۆداڵەکان ڕێکخراون، بەڵام نەرم و نیان، دیالۆگ ئامۆژگاری بە کەمترین کارایی پێویست و پێشوەختە زیرەکەکان.

نموونەی ئیستاتیک

مۆداڵی ڕەندەرکراو بە سەردێڕ و جەستە و کۆمەڵێک کردار لە ژێرەوەدا.

<div class = "کاڵبوونەوەی شاردنەوەی مۆداڵی" > 
  <div class = "سەردێڕی مۆداڵی" > 
    < جۆری دوگمە = "دوگمە" پۆل = "داخستنی" data-dismiss = "مۆداڵی" aria-hidden = "ڕاست" > × </دوگمەی>    
    <h3> سەردێڕی مۆداڵی </h3>
  </div>
  <div class = "جەستەی مۆداڵی" > 
    <p> یەک جەستەی ورد... </p>
  </div>
  <div class = "پێی مۆداڵی" > 
    <a href = "#" class = "btn" > داخستنی </a>  
    <a href = "#" class = "btn btn-primary" > گۆڕانکارییەکان هەڵبگرە </a>  
  </div>
</div>

دیمۆی ڕاستەوخۆ

مۆداڵێک لە ڕێگەی جاڤاسکڕێپتەوە بگۆڕە بە کرتەکردن لەسەر دوگمەی خوارەوە. لە سەرەوەی لاپەڕەکەوە دەخلیسکێتە خوارەوە و کاڵ دەبێتەوە.

<-- دوگمەی دەستپێکردنی مۆداڵی -->
<a href = "#myModal" ڕۆڵ = "دوگمە" پۆل = "btn" data-toggle = "مۆداڵی" > مۆداڵی دیمۆ دەستپێبکە </a>    
 
<-- مۆداڵی -->
<div class = "modal" id = "myModal" tabindex = "-1" ڕۆڵ = "دیالۆگ" aria-labelledby = "myModalLabel" aria -hidden = "ڕاست" >      
  <div class = "سەردێڕی مۆداڵی" > 
    < جۆری دوگمە = "دوگمە" پۆل = "داخستنی" data-dismiss = "مۆداڵی" aria-hidden = "ڕاست" > × </button>    
    <h3 id = "myModalLabel" > سەردێڕی مۆداڵی </h3> 
  </div>
  <div class = "جەستەی مۆداڵی" > 
    <p> یەک جەستەی ورد... </p>
  </div>
  <div class = "پێی مۆداڵی" > 
    <button class = "btn" data-dismiss = "مۆداڵی" aria-hidden = "ڕاست" > داخستنی </button>   
    <button class = "btn btn-primary" > گۆڕانکارییەکان هەڵبگرە </button> 
  </div>
</div>

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

مۆداڵێک چالاک بکە بەبێ نووسینی جاڤاسکڕێپت. لەسەر توخمێکی کۆنترۆڵکەر دابنێ data-toggle="modal"، وەک دوگمەیەک، لەگەڵ data-target="#foo"یان href="#foo"بۆ بە ئامانجگرتنی مۆداڵێکی دیاریکراو بۆ گۆڕینی.

< جۆری دوگمە = "دوگمە" data-toggle = "modal" data-target = "#myModal" > مۆداڵی دەستپێبکە </button>   

لە ڕێگەی جاڤاسکڕێپتەوە

بانگی مۆداڵێک بکە بە id myModalبە یەک دێڕی جاڤاسکڕێپت:

$ ( '#مۆداڵی من' ). modal ( هەڵبژاردەکان )

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-backdrop="".

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

شێوازەکان

.modal(بژاردەکان)

ناوەڕۆکەکەت وەک مۆداڵ چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

$ ( '#مۆداڵی من' ). مۆداڵی ({
  کیبۆرد : درۆ 
})

.modal('گۆڕین')

بە دەست مۆداڵێک دەگۆڕێت.

$ ( '#مۆداڵی من' ). مۆداڵ ( 'toggle' )

.modal('پێشاندان')

بە دەستی مۆداڵێک دەکاتەوە.

$ ( '#مۆداڵی من' ). modal ( 'نیشاندان' )

.modal('شاردنەوە')

بە دەستی مۆداڵێک دەشارێتەوە.

$ ( '#مۆداڵی من' ). modal ( 'شاردنەوە' )

ڕووداوەکان

پۆلی مۆداڵی بووتستراپ چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی مۆداڵی.

$ ( '#مۆداڵی من' ). لەسەر ( 'شاراوە' , فەنکشن () {   
  // شتێک بکە…
})

نموونە

زیادکردنی مینیوی دابەزین بۆ نزیکەی هەر شتێک بەم پێوەکراوە سادەیە، لەوانەش navbar، تابەکان و حەبەکان.

لەناو ناوبارێکدا

لەناو تابەکاندا

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

زیادکردن data-toggle="dropdown"بۆ بەستەرێک یان دوگمەیەک بۆ گۆڕینی دابەزینێک.

<div class = "دابەزاندن" > 
  <a class = "dropdown-toggle" href = "#" > دەستپێکەری دابەزین </a>  
  <ul class = "مێنۆی دابەزین" ڕۆڵ = "مێنۆ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

بۆ ئەوەی URLەکان وەک خۆیان بمێننەوە، data-targetتایبەتمەندییەکە بەکاربهێنە لەبری href="#".

<div class = "دابەزاندن" > 
  <a class = "دابەزاندن-گۆڕین" id = "dLabel" ڕۆڵ = "دوگمە" داتا-گۆڕین = "دابەزاندن" داتا-ئامانج = "#" href = "/لاپەڕە.html" >      
    فرێدان
    <b class = "کارێت" ></b> 
  </a>
  <ul class = "مێنۆی دابەزین" ڕۆڵ = "مێنۆ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە درۆپداونەکانەوە بکە:

$ ( '.دابەزاندن-گۆڕین' ). دابەزین ()

بژاردەکان

هیچ

شێوازەکان

$().دابەزاندن()

api ێکی بەرنامەیی بۆ چالاککردنی مینیوەکان بۆ ناوبارێکی دیاریکراو یان گەشتکردنێکی تابکراو.

نموونە لە navbar

پێوەکراوەکەی ScrollSpy بۆ نوێکردنەوەی ئۆتۆماتیکی ئامانجەکانی nav بە پشتبەستن بە شوێنی سکڕۆڵکردنە. ناوچەی خوارەوەی navbar سکڕۆڵ بکە و سەیری گۆڕانی پۆلی چالاک بکە. هەروەها بابەتە لاوەکییەکانی دابەزین تیشک دەخرێنە سەر.

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی scrollspy زیاد بکەیت بۆ گەشتکردن لە سەرەوەی بارەکەت، تەنها زیاد بکە data-spy="scroll"بۆ ئەو توخمەی کە دەتەوێت سیخوڕی لەسەر بکەیت (بە شێوەیەکی ئاسایی ئەمە دەبێتە جەستە) و data-target=".navbar"بۆ ئەوەی هەڵبژێریت کە کام nav بەکاربهێنیت. دەتەوێت scrollspy بەکاربهێنیت لەگەڵ .navپێکهاتەیەک.

<body data-spy = "سکڕۆڵکردن" data-target = ".navbar" > ... </body>  

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە scrollspy بکە:

$ ( '#navbar' ). سکڕۆڵسپی ()

شێوازەکان

.scrollspy('نوێکردنەوە')

لەکاتی بەکارهێنانی scrollspy لەگەڵ زیادکردن یان لابردنی توخمەکان لە DOM، پێویستە بەم شێوەیە بانگی شێوازی نوێکردنەوە بکەیت:

$ ( '[data-spy="سکڕۆڵکردن"]' ). هەر ( فەنکشن () {  
  var $spy = $ ( ئەمە ). scrollspy ( 'نوێکردنەوە' )
});

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-offset="".

ڕووداوەکان

نموونەی تابەکان

زیادکردنی کارایی تابی خێرا و داینامیکی بۆ ترانزتۆن لە ڕێگەی پەنجەرەی ناوەڕۆکی ناوخۆییەوە، تەنانەت لە ڕێگەی مینیوەکانی دابەزینەوە.

بەکارهێنان

تابەکانی تابەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە (هەر تابێک پێویستە بە تاک چالاک بکرێت):

$ ( '#تابەکەم a' ). کلیک لە ( فەنکشن ( e ) {  
  هـ . ڕێگریکردن لە پێشوەختە ();
  $ ( ئەمە ). tab ( 'نیشاندان' );
})

دەتوانیت بە چەند ڕێگەیەک تابەکانی تاک چالاک بکەیت:

$ ( '#تابەکەم a[href="#profile"]' ). tab ( 'نیشاندان' ); // تاب بە ناو هەڵبژێرە 
$ ( '#تابەکەم a:یەکەم' ). tab ( 'نیشاندان' ); // تابی یەکەم هەڵبژێرە 
$ ( '#تابەکەم a:کۆتا' ). tab ( 'نیشاندان' ); // دوا تاب هەڵبژێرە 
$ ( '#تابەکەم li:eq(2) a' ). tab ( 'نیشاندان' ); // تابی سێیەم هەڵبژێرە (0-indexed) 

مارکاپ

دەتوانیت گەشتکردنێکی تاب یان حەب چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها دیاریکردن data-toggle="tab"یان data-toggle="pill"لەسەر توخمێک. زیادکردنی پۆلەکانی navو بۆ تابەکە ستایلکردنی تابی Bootstrap جێبەجێ دەکات.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "تاب" > ماڵەوە </a></li>  
  <li><a href = "#profile" data-toggle = "تاب" > پڕۆفایلی </a></li>  
  <li><a href = "#messages" data-toggle = "تاب" > پەیامەکان </a></li>  
  <li><a href = "#ڕێکخستنەکان" data-toggle = "تاب" > ڕێکخستنەکان </a></li>  
</ul>

شێوازەکان

$().tab

توخمێکی تاب و کۆنتێنەری ناوەڕۆک چالاک دەکات. تاب دەبێت یان گرێیەکی کۆنتێنەر لە DOM دا data-targetیان گرێیەکی ئامانجدار بکات.href

<ul class = "nav nav-tabs" id = "تابەکەم" >  
  <li class = "چالاك" ><a href = "#ماڵەوە" > ماڵەوە </a></li>  
  <li><a href = "#profile" > پڕۆفایلی </a></li> 
  <li><a href = "#messages" > پەیامەکان </a></li> 
  <li><a href = "#ڕێکخستنەکان" > ڕێکخستنەکان </a></li> 
</ul>
 
<div class = "ناوەڕۆکی تاب" > 
  <div class = "tab-pane چالاکە" id = "ماڵەوە" > ... </div>  
  <div class = "tab-pane" id = "پڕۆفایلی" > ... </div>  
  <div class = "tab-pane" id = "پەیامەکان" > ... </div>  
  <div class = "tab-pane" id = "ڕێکخستنەکان" > ... </div>  
</div>
 
<سکریپت>
  $ ( فەنکشن () {  
    $ ( '#تابەکەم a:کۆتا' ). tab ( 'نیشاندان' );
  })
</script>

ڕووداوەکان

$ ( 'a[data-toggle="تاب"]' ). لەسەر ( 'نیشاندراوە' , فەنکشن ( e ) {   
  هـ . ئامانج // تاب چالاک کراوە
  هـ . relatedTarget // تابی پێشوو
})

نموونە

ئیلهام لە پێوەکراوێکی نایابی jQuery.tipsy وەرگیراوە کە لەلایەن Jason Frame نووسراوە؛ ئامرازەکان وەشانێکی نوێکراوە، کە پشت بە وێنە نابەستێت، CSS3 بۆ ئەنیمەیشنەکان بەکاردەهێنێت، و تایبەتمەندی داتا بۆ هەڵگرتنی ناونیشانی ناوخۆیی.

بۆ بینینی ئامۆژگاری ئامرازەکان، ماوسەکەت لەسەر ئەم بەستەرانەی خوارەوە دابنێ:

چوار ئاراستە

بەکارهێنان

ئامرازەکە لە ڕێگەی جاڤاسکڕێپتەوە دەستپێبکە:

$ ( '#نموونە' ). ئامرازی ئامۆژگاری ( هەڵبژاردەکان )

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-animation="".

مارکاپ

لەبەر هۆکاری کارایی، Tooltip و Popover data-apis opt in. ئەگەر دەتەوێت بەکاریان بهێنیت تەنها بژاردەیەکی هەڵبژێرەر دیاری بکە.

<a href = "#" rel = "ئامۆژگاری ئامراز" title = "یەکەم ئامۆژگاری" > بەسەرمدا بهێڵەرەوە </a>   

شێوازەکان

$().ئامۆژگاری ئامرازەکان(هەڵبژاردەکان)

مامەڵەکارێکی ئامۆژگاری بە کۆمەڵە توخمێکەوە دەبەستێتەوە.

.tooltip('پێشاندان')

ئامۆژگاری ئامرازی توخمێک ئاشکرا دەکات.

$ ( '#توخم' ). ئامرازی ئامۆژگاری ( 'نیشاندان' )

.tooltip('شاردنەوە')

ئامۆژگاری ئامرازی توخمێک دەشارێتەوە.

$ ( '#توخم' ). tooltip ( 'شاردنەوە' )

.tooltip('گۆڕین')

ئامۆژگاری ئامرازی توخمێک دەگۆڕێت.

$ ( '#توخم' ). ئامرازی ئامۆژگاری ( 'toggle' )

.tooltip('لەناوبردنی')

ئامرازی توولتیپێک دەشارێتەوە و لەناو دەبات.

$ ( '#توخم' ). tooltip ( 'لەناوبردن' )

نموونە

زیادکردنی سەرپۆشی بچووکی ناوەڕۆک، وەک ئەوانەی لە ئایپاددان، بۆ هەر توخمێک بۆ نیشتەجێکردنی زانیارییە لاوەکییەکان. ماوسەکەت لەسەر دوگمەکە دابنێ بۆ ئەوەی پۆپۆڤەرەکە دەستپێبکات. پێویستی بە Tooltip هەیە کە لەگەڵیدا بێت.

پۆپۆڤەری ئیستاتیک

چوار بژاردە بەردەستە: سەرەوە، ڕاست، خوارەوە و چەپ ڕێکخراو.

هیچ نیشانەیەک وەک popovers نیشان نادرێت لە جاڤاسکڕێپت و ناوەڕۆک لە ناو dataتایبەتمەندییەکدا دروست ناکرێت.

دیمۆی ڕاستەوخۆ

بەکارهێنان

چالاککردنی popovers لە ڕێگەی جاڤاسکڕێپتەوە:

$ ( '#نموونە' ). popover ( هەڵبژاردەکان )

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-animation="".

مارکاپ

لەبەر هۆکاری کارایی، Tooltip و Popover data-apis opt in. ئەگەر دەتەوێت بەکاریان بهێنیت تەنها بژاردەیەکی هەڵبژێرەر دیاری بکە.

شێوازەکان

$().popover(بژاردەکان)

پۆپۆڤەرەکان بۆ کۆکردنەوەی توخمەکان دەستپێدەکات.

.popover('پێشاندان')

ئاشکرا دەکات کە توخمەکان popover.

$ ( '#توخم' ). popover ( 'پێشاندان' )

.popover('شاردنەوە')

پەپۆڤەرێکی توخمەکان دەشارێتەوە.

$ ( '#توخم' ). popover ( 'شاردنەوە' )

.popover('گۆڕین')

توگڵێک توخمەکان popover دەگۆڕێت.

$ ( '#توخم' ). popover ( 'تۆگڵ' )

.popover('لەناوبردن')

پۆپۆڤەری توخمێک دەشارێتەوە و لەناو دەبات.

$ ( '#توخم' ). popover ( 'لەناوبردن' )

نموونەی ئاگادارکردنەوەکان

زیادکردنی کارایی ڕەتکردنەوە بۆ هەموو نامەکانی ئاگادارکردنەوە بەم پێوەکراوە.

بەکارهێنان

ڕەتکردنەوەی ئاگادارکردنەوەیەک لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە:

$ ( ".ئاگادارکردنەوە" ). ئاگادارکردنەوە ()

مارکاپ

تەنها زیاد بکە data-dismiss="alert"بۆ دوگمەی داخستنی خۆت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کارایی داخستنی ئاگادارکردنەوە بدەیت.

<a class = "داخستنی" data-dismiss = "ئاگادارکردنەوە" href = "#" > × </a>   

شێوازەکان

$().ئاگادارکردنەوە()

هەموو ئاگادارکردنەوەکان بە کارایی نزیک دەپێچێتەوە. بۆ ئەوەی ئاگادارکردنەوەکانت کاتێک دادەخرێن ئەنیمەیشن بن، دڵنیابە کە پێشتر پۆلی .fadeویان .inبۆ بەکارهێناوە.

.alert('داخستنی')

ئاگادارکردنەوەیەک دادەخات.

$ ( ".ئاگادارکردنەوە" ). ئاگادارکردنەوە ( 'داخستنی' )

ڕووداوەکان

پۆلی ئاگادارکردنەوەی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی ئاگادارکردنەوە.

$ ( '#ئاگادارکردنەوە-من' ). bind ( 'داخراو' , فەنکشن () {   
  // شتێک بکە…
})

نموونە بەکارهێنانەکان

بە دوگمەکان زیاتر بکە. دوگمەی کۆنترۆڵکردن دەڵێت یان گروپێک لە دوگمە دروست بکە بۆ پێکهاتەی زیاتر وەک توولبارەکان.

دەوڵەتدار

زیادکردنی data-loading-text="Loading..." بۆ بەکارهێنانی دۆخی بارکردن لەسەر دوگمەیەک.

< جۆری دوگمە = "دوگمە" پۆل = "btn btn-primary" data-loading-text = "بارکردن..." > دۆخی بارکردن </button>   

تاکە گۆڕانکاری

زیادکردنی data-toggle="button" بۆ چالاککردنی گۆڕانکاری لەسەر یەک دوگمە.

< جۆری دوگمە = "دوگمە" پۆل = "btn" data-toggle = "دوگمە" > تاکە گۆڕانکاری </button>   

بۆکسی هەڵبژاردن

زیادکردنی data-toggle="buttons-checkbox" بۆ گۆڕینی شێوازی سندوقی هەڵبژاردن لەسەر btn-group.

<div class = "btn-group" data-toggle = "بۆکسی پشکنینی دوگمەکان" >  
  < جۆری دوگمە = "دوگمە" پۆل = "btn" > چەپ </دوگمە>  
  < جۆری دوگمە = "دوگمە" پۆل = "btn" > ناوەڕاست </دوگمە>  
  < جۆری دوگمە = "دوگمە" پۆل = "btn" > ڕاست </دوگمە>  
</div>

ڕادیۆ

زیادکردنی data-toggle="buttons-radio" بۆ گۆڕینی شێوازی ڕادیۆ لەسەر btn-group.

<div class = "btn-group" داتا-تۆگڵ = "دوگمەکان-رادیۆ" >  
  < جۆری دوگمە = "دوگمە" پۆل = "btn" > چەپ </دوگمە>  
  < جۆری دوگمە = "دوگمە" پۆل = "btn" > ناوەڕاست </دوگمە>  
  < جۆری دوگمە = "دوگمە" پۆل = "btn" > ڕاست </دوگمە>  
</div>

بەکارهێنان

دوگمەکان لە ڕێگەی جاڤاسکڕێپتەوە چالاک بکە:

$ ( '.nav-tabs' ). دوگمەی ()

مارکاپ

تایبەتمەندیەکانی داتا بەشێکی دانەبڕاون لە پێوەکراوەکەی دوگمەکە. سەیری کۆدی نموونەیی خوارەوە بکە بۆ جۆرە جیاوازەکانی مارکاپ.

بژاردەکان

هیچ

شێوازەکان

$().دوگمەی('toggle')

دۆخی پاڵنەر دەگۆڕێت. ئەو ڕواڵەتە دەدات بە دوگمەکە کە چالاک کراوە.

< جۆری دوگمە = "دوگمە" پۆل = "btn" data-toggle = "دوگمە" > ... </دوگمە>    

$().button('بارکردن')

دۆخی دوگمەکان بۆ بارکردن دادەنێت - دوگمە لەکاردەخات و دەق دەگۆڕێت بۆ بارکردنی دەق. بارکردنی دەق پێویستە لەسەر توخمەکەی دوگمەکە بە بەکارهێنانی تایبەتمەندی داتا پێناسە بکرێت data-loading-text.

< جۆری دوگمە = "دوگمە" پۆل = "btn" data-loading-text = "بارکردنی شتەکان..." > ... </button>    

$().دوگمەی('ڕێکخستنەوە')

دۆخی دوگمە دەگەڕێنێتەوە - دەق دەگۆڕێت بۆ دەقی ئەسڵی.

$().دوگمەی(ڕیز)

دۆخی دوگمە دەگەڕێنێتەوە - دەق دەگۆڕێت بۆ هەر دۆخێکی دەقی پێناسەکراوی داتا.

< جۆری دوگمە = "دوگمە" پۆل = "btn" data-complete-text = "تەواو بوو!" > ... </دوگمەی>    
<سکریپت>
  $ ( '.btn' ). دوگمەی ( 'تەواو' )
</script>

دەربارەی

ستایلە بنەڕەتییەکان و پشتگیری نەرم و نیان بۆ پێکهاتە داڕووخاوەکانی وەک ئەکۆردیۆن و گەشتکردن بەدەستبهێنە.

* پێویستە پێوەکراوەکەی Transitions لەخۆبگرێت.

نموونەی ئەکۆردیۆن

بە بەکارهێنانی پێوەکراوەکەی collapse، ویجتێکی سادەی شێوازی ئەکۆردیۆنمان دروست کرد:

< جۆری دوگمە = "دوگمە" پۆل = "btn btn-مەترسی" data-toggle = "داڕمان" data-target = "#دیمۆ" >    
  سادە دەڕووخێت
</دوگمەی>
 
<div id = "demo" class = "داڕمان لە" > ... </div>  

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

تەنها زیادکردن data-toggle="collapse"و data-targetتوخمێک بۆ توخمێک زیاد بکە بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کۆنترۆڵی توخمێکی داڕووخاو دیاری بکەیت. تایبەتمەندییەکە data-targetهەڵبژێرەری css قبوڵ دەکات بۆ جێبەجێکردنی داڕمانەکە. دڵنیابە پۆلەکە زیاد بکە collapseبۆ توخمە داخراوەکە. ئەگەر دەتەوێت بە پێشوەختە بکرێتەوە، پۆلی زیادە زیاد بکە in.

بۆ زیادکردنی بەڕێوەبردنی گروپی هاوشێوەی ئەکۆردیۆن بۆ کۆنتڕۆڵێکی داخراو، تایبەتمەندی داتا زیاد بکە data-parent="#selector". بۆ بینینی ئەمە بە کردار ئاماژە بە دیمۆکە بکە.

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەست چالاک بکە لەگەڵ:

$ ( ".داڕمان" ). داڕمان ()

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-parent="".

شێوازەکان

.collapse(بژاردەکان)

ناوەڕۆکەکەت وەک توخمێکی داخراو چالاک دەکات. بژاردەیەکی ئیختیاری قبوڵ دەکات object.

$ ( '#داشکێنراوی من' ). داڕمان ({
  toggle : درۆیە 
})

.collapse('گۆڕین')

توخمێکی داڕووخاو دەگۆڕێت بۆ پیشاندانی یان شاراوە.

.collapse('پێشاندان')

توخمێکی داڕووخاو نیشان دەدات.

.collapse('شاردنەوە')

توخمێکی داڕووخاو دەشارێتەوە.

ڕووداوەکان

پۆلی داڕمانی Bootstrap چەند ڕووداوێک ئاشکرا دەکات بۆ پەیوەستکردن بە کارایی داڕمانەوە.

$ ( '#داشکێنراوی من' ). لەسەر ( 'شاراوە' , فەنکشن () {   
  // شتێک بکە…
})

نموونەی کارۆسێل

پێشاندانی سلاید لە خوارەوە پێوەکراو و پێکهاتەیەکی گشتی نیشان دەدات بۆ سوڕانەوە لە ڕێگەی توخمەکانی وەک کارۆسێل.

یەکەم ناوی وێنە بچووکەکان

کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

دووەم ناوی وێنە بچووکەکان

کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

سێیەم ناوی وێنە بچووکەکان

کراس جوستۆ ئۆدیۆ، داپیبوس فاسیلیسیس لە، ئێگێستاس ئێگێت کوام. Donec id elit non mi porta gravida لە ئیگێت مێتۆس. نولم id dolor id nibh ultricies ئۆتۆمبێلەکان ut id elit.

‹ ›

<div id = "myCarousel" class = "سلایدی کارۆسێل" >  
  <!-- شتەکانی کارۆسێل -->
  <div class = "ناوەوەی کارۆسێل" > 
    <div class = "بابەتی چالاک" > ... </div> 
    <div پۆل = "بابەتی" > ... </div> 
    <div پۆل = "بابەتی" > ... </div> 
  </div>
  <!-- کارۆسێل ناو -->
  <a class = "کۆنترۆڵی کارۆسێل چەپ" href = "#کارۆسێلەکەم" data-slide = "پێشوو" > ‹ </a>   
  <a class = "ڕاستی کۆنترۆڵکردنی کارۆسێل" href = "#کارۆسێلەکەم" data-slide = "دواتر" > › </a>   
</div>

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

...

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەستی پەیوەندی بە کارۆسێلەوە بکە بەم شێوەیە:

$ ( '.کارۆسێل' ). کارۆسێل ()

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-interval="".

شێوازەکان

.کارۆسێل(بژاردەکان)

کارۆسێلەکە بە بژاردەیەکی ئیختیاری objectدەستپێدەکات و دەست دەکات بە پاسکیلسواری لە ڕێگەی شتەکانەوە.

$ ( '.کارۆسێل' ). کارۆسێل ({
  نێوان : 2000 
})

.کارۆسێل('سوڕ')

لە چەپەوە بۆ ڕاست بەناو شتەکانی کارۆسێلدا دەسوڕێتەوە.

.کارۆسێل('وەستان')

کارۆسێلەکە لە پاسکیلسواری لە ڕێگەی شتەکانەوە ڕادەگرێت.

.کارۆسێل(ژمارە)

کارۆسێلەکە دەخولێنێتەوە بۆ چوارچێوەیەکی دیاریکراو (بە بنەمای 0، هاوشێوەی ڕیزبەندییەک).

.کارۆسێل('پێشوو')

خولگە دەکات بۆ بابەتی پێشوو.

.کارۆسێل('دواتر')

خولگە دەکات بۆ بابەتی داهاتوو.

ڕووداوەکان

پۆلی کارۆسێلی بووتستراپ دوو ڕووداو بۆ پەیوەستکردن بە کارایی کارۆسێلەوە ئاشکرا دەکات.

نموونە

پێوەکراوێکی بنەڕەتی و بە ئاسانی درێژکراوە بۆ دروستکردنی خێرای تایپی هێدەکانی ڕەسەن بە هەر نووسینێکی دەقی فۆرم.

< جۆری چوونەژوورەوە = "دەق" data-provide = "پێش تایپکردن" >  

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

تایبەتمەندی داتا زیاد بکە بۆ تۆمارکردنی توخمێک بە کارایی typeahead وەک لە نموونەی سەرەوەدا نیشان دراوە.

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەستی پەیوەندی بە typeahead بکە بەم شێوەیە:

$ ( '.پێش تایپکردن' ). تایپ هێد ()

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-source="".

شێوازەکان

.typeahead(بژاردەکان)

ئینپوتێک بە تایپئەهێد دەستپێدەکات.

نموونە

ژێرناوچەی لای چەپ دیمۆیەکی ڕاستەوخۆی پێوەکراوەکەی ئافیکسە.

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی affix زیاد بکەیت بۆ هەر توخمێک، تەنها زیاد بکە data-spy="affix"بۆ ئەو توخمە کە دەتەوێت سیخوڕی لەسەر بکەیت. پاشان ئۆفسێتەکان بەکاربهێنە بۆ پێناسەکردنی کەی پینکردنی توخمێک بگۆڕیت و بکوژێنیتەوە.

<div data-spy = "affix" داتا-ئۆفسێت-سەرەوە = "200" > ... </body>  

لە ڕێگەی جاڤاسکڕێپتەوە

لە ڕێگەی جاڤاسکڕێپتەوە پەیوەندی بە پێوەکراوەکانی affix بکە:

$ ( '#navbar' ). affix ()

شێوازەکان

.affix('نوێکردنەوە')

لە کاتی بەکارهێنانی affix لەگەڵ زیادکردن یان لابردنی توخمەکان لە DOM، دەتەوێت بانگی شێوازی نوێکردنەوە بکەیت:

$ ( '[data-spy="هاوگر"]' ). هەر ( فەنکشن () {  
  $ ( ئەمە ). affix ( 'نوێکردنەوە' )
});

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-, وەک لە data-offset-top="200".