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

دەتوانرێت پێوەکراوەکان بە تاک جێگیر بکرێن (هەرچەندە هەندێکیان پێویستیان بە وابەستەیی هەبووە)، یان هەموویان بە یەکجار. هەردوو 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').

بێ ململانێ

هەندێک جار پێویستە پێوەکراوەکانی Bootstrap لەگەڵ چوارچێوەی UI ی تر بەکاربهێنرێت. لەم بارودۆخانەدا، ناوبەناو دەتوانێت پێکدادانی ناوچەی ناوەکان ڕووبدات. ئەگەر ئەمە ڕوویدا، دەتوانیت بانگی .noConflictئەو پێوەکراوە بکەیت کە دەتەوێت بەهاکەی بگەڕێنیتەوە.

var دوگمەی bootstrap = $ . fn . دوگمەی . noConflict () // گەڕانەوەی $.fn.button بۆ بەهای پێشتر دیاریکراو 
$ . fn . bootstrapBtn = bootstrapButton             // کارایی bootstrap بدە بە $().bootstrapBtn

ڕووداوەکان

بووتستراپ ڕووداوە تایبەتەکان بۆ زۆربەی کردارە ناوازەکانی پێوەکراوەکان دابین دەکات. بەگشتی ئەمانە بە شێوەی بێکۆتایی و بەشێکی ڕابردوو دێن - کە بێکۆتایی (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 id = "myModal" class = "مۆداڵی شاردنەوەی کاڵبوونەوە" 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" data-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>

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

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

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

بژاردەکان

هیچ

شێوازەکان

$().dropdown('گۆڕین')

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

نموونە لە 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 بۆ ئەنیمەیشنەکان بەکاردەهێنێت، و تایبەتمەندی داتا بۆ هەڵگرتنی ناونیشانی ناوخۆیی.

لەبەر هۆکاری کارایی، ئامرازەکان و popover data-apis هەڵبژێردراون، واتە دەبێت خۆت دەستپێیان بکەیت .

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

چوار ئاراستە

ئامۆژگاری ئامرازەکان لە گروپەکانی چوونەژوورەوە

لە کاتی بەکارهێنانی ئامرازەکان و پۆپۆڤەرەکان لەگەڵ گروپەکانی چوونەژوورەوەی Bootstrap، دەبێت هەڵبژاردەی container(لە خوارەوە بەڵگەدار کراوە) دابنێیت بۆ ئەوەی کاریگەری لاوەکی نەخوازراو نەبێت.

بەکارهێنان

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

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

بژاردەکان

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

مارکاپ

<a href = "#" data-toggle = "ئامۆژگاری ئامراز" 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 btn-primary" data-toggle = "دوگمە" > تاکە گۆڕانکاری </button>   

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

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

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

ڕادیۆ

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

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

بەکارهێنان

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

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

مارکاپ

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

بژاردەکان

هیچ

شێوازەکان

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

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

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

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

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

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

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

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

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

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

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

دەربارەی

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

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

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

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

<div class = "ئەکۆردیۆن" id = "ئەکۆردیۆن2" >  
  <div class = "گرووپی ئەکۆردیۆن" > 
    <div class = "سەردێڕی ئەکۆردیۆن" > 
      <a class = "accordion-toggle" data-toggle = "داڕمان" داتا-دایک و باوک = "#ئەکۆردیۆن2" href = "#collapseOne" >    
        بابەتی #1ی گروپی داخراو
      </a>
    </div>
    <div id = "collapseOne" class = "داڕمانی جەستەی ئەکۆردیۆن لە" >  
      <div class = "ناوەوەی ئەکۆردیۆن" > 
        Anim pariatur کلیشە...
      </div>
    </div>
  </div>
  <div class = "گرووپی ئەکۆردیۆن" > 
    <div class = "سەردێڕی ئەکۆردیۆن" > 
      <a class = "accordion-toggle" data-toggle = "داڕمان" data-parent = "#ئەکۆردیۆن2" href = "#داڕماندوو" >    
        بابەتی #2ی گروپی داخراو
      </a>
    </div>
    <div id = "collapseTwo" class = "داڕمانی جەستەی ئەکۆردیۆن" >  
      <div class = "ناوەوەی ئەکۆردیۆن" > 
        Anim pariatur کلیشە...
      </div>
    </div>
  </div>
</div>
...

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

< جۆری دوگمە = "دوگمە" پۆل = "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 = "سلایدی کارۆسێل" >  
  <ol class = "پێشاندەری کارۆسێل" > 
    <li data-target = "#myCarousel" data-slide-to = "0" پۆل = "چالاك" ></li>   
    <li data-target = "#myCarousel" داتا-سلاید-بۆ = "1" ></li>  
    <li data-target = "#myCarousel" داتا-سلاید-بۆ = "2" ></li>  
  </ol>
  <!-- شتەکانی کارۆسێل -->
  <div class = "ناوەوەی کارۆسێل" > 
    <div class = "بابەتی چالاک" > ... </div> 
    <div پۆل = "بابەتی" > ... </div> 
    <div پۆل = "بابەتی" > ... </div> 
  </div>
  <!-- کارۆسێل ناو -->
  <a class = "کۆنترۆڵی کارۆسێل چەپ" href = "#کارۆسێلەکەم" data-slide = "پێشوو" > ‹ </a>   
  <a class = "ڕاستی کۆنترۆڵکردنی کارۆسێل" href = "#کارۆسێلەکەم" data-slide = "دواتر" > › </a>   
</div>

بەکارهێنان

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

تایبەتمەندی داتا بەکاربهێنە بۆ ئەوەی بە ئاسانی شوێنی کارۆسێلەکە کۆنتڕۆڵ بکەیت. data-slideوشە سەرەکییەکان prevیان قبوڵ دەکات next، کە شوێنی سلایدەکە دەگۆڕێت بە بەراورد بە شوێنی ئێستای. یانیش، بەکاریبهێنە data-slide-toبۆ گواستنەوەی ئیندێکسی خام سلاید بۆ کارۆسێل data-slide-to="2", کە بازدان's شوێنی خلیسکاندن بۆ ئیندێکسێکی دیاریکراو کە بە 0.

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

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

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

بژاردەکان

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

شێوازەکان

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

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

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

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

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

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

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

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

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

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

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

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

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

ڕووداوەکان

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

نموونە

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

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

تۆ دەتەوێت ڕێکبخەیت autocomplete="off"بۆ ئەوەی ڕێگری بکەیت لە دەرکەوتنی مینیوەکانی وێبگەڕی پێشوەختە لەسەر دابەزینی Bootstrap typeahead.

بەکارهێنان

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

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

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

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

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

بژاردەکان

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

شێوازەکان

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

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

نموونە

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

بەکارهێنان

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

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

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

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

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

$ ( '#navbar' ). affix ()

بژاردەکان

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