دەربارەی مۆداڵەکان

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

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

لە خوارەوە مۆداڵێکی ئیستاتیکی ڕەندەر کراوە.

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

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

بەکارهێنانی bootstrap-modal

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

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

بژاردەکان

مارکاپ

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

هەروەها، بۆ زیادکردنی هەڵبژاردنەکان بۆ نموونەی مۆداڵی خۆت، تەنها وەک تایبەتمەندی داتا زیادەکان لەسەر یان توخمە کۆنترۆڵەکە یان خودی نیشانەکردنی مۆداڵیەکە بیانخەرە ناوەوە.

<a class = "btn" data-toggle = "modal" href = "#myModal" > مۆداڵی دەستپێکردن </a>    

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

شێوازەکان

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

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

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

.modal('گۆڕین')

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

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

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

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

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

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

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

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

ڕووداوەکان

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

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

دەربارەی درۆپداونەکان

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

نموونە

بۆ تاقیکردنەوەی درۆپداونەکان کلیک لەسەر لینکی nav ی دابەزین بکە لە navbar و حەبەکانی خوارەوە.

• لینکی ئاسایی
• فرێدان
  • Action
  • Another action
  • Something else here
  • Separated link
• دابەزین 2
  • Action
  • Another action
  • Something else here
  • Separated link
• دابەزین 3
  • Action
  • Another action
  • Something else here
  • Separated link

بەکارهێنانی bootstrap-dropdown.js

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

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

مارکاپ

بۆ زیادکردنی خێرا کارایی دابەزین بۆ هەر توخمێک تەنها زیاد بکە data-toggle="dropdown"و هەر دابەزینێکی bootstrap دروست بە شێوەیەکی ئۆتۆماتیکی چالاک دەبێت.

<ul class = "nav nav-حەب" > 
  <li class = "چالاك" ><a href = "#" > بەستەری ئاسایی </a></li>  
  <li class = "دابەزاندن" id = "مێنۆ1" >  
    <a class = "دابەزاندن-گۆڕین" data-toggle = "دابەزاندن" href = "#مێنۆ1" >   
      فرێدان
      <b class = "کارێت" ></b> 
    </a>
    <ul class = "مێنۆی دابەزین" > 
      <li><a href = "#" > کردار </a></li> 
      <li><a href = "#" > کردارێکی تر </a></li> 
      <li><a href = "#" > شتێکی تر لێرە </a></li> 
      <li class = "دابەشکەر" </li> 
      <li><a href = "#" > بەستەری جیاکراوە </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-حەب" > 
  <li class = "دابەزاندن" > 
    <a class = "گۆڕینی دابەزین" data-toggle = "دابەزاندن" data-target = "#" href = "ڕێڕەو/بۆ/لاپەڕە.html" >    
      فرێدان
      <b class = "کارێت" ></b> 
    </a>
    <ul class = "مێنۆی دابەزین" > 
      ...
    </ul>
  </li>
</ul>

شێوازەکان

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

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

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

نموونەی navbar بە scrollspy

ناوچەی خوارەوە بچۆ و سەیری نوێکردنەوەی گەشتکردن بکە. هەروەها بابەتە لاوەکییەکانی دابەزین تیشک دەخرێنە سەر. تاقی بکەوە!

بەکارهێنانی bootstrap-scrollspy.js

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

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

مارکاپ

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

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

شێوازەکان

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

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

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

بژاردەکان

ڕووداوەکان

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

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

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

• ماڵەوە
• پرۆفایل
• فرێدان
  • @fat
  • @mdo

بەکارهێنانی bootstrap-tab.js

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

$ ( '#تابەکەم a' ). کلیک لە ( فەنکشن ( ه ) {  
  هـ . ڕێگریکردن لە پێشوەختە ();
  $ ( ئەمە ). 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 // تابی پێشوو
})

دەربارەی Tooltips

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

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

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

بەکارهێنانی bootstrap-tooltip.js

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

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

بژاردەکان

مارکاپ

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

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

شێوازەکان

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

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

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

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

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

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

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

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

.tooltip('گۆڕین')

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

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

دەربارەی پۆپۆڤەرەکان

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

* پێویستی بە Tooltip هەیە کە لەگەڵیدا بێت

نموونە hover popover

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

بەکارهێنانی bootstrap-popover.js

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

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

بژاردەکان

مارکاپ

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

شێوازەکان

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

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

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

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

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

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

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

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

.popover('گۆڕین')

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

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

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

پێوەکراوەکەی ئاگادارکردنەوە پۆلێکی بچووکە بۆ زیادکردنی کارایی نزیک بۆ ئاگادارکردنەوەکان.

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

پێوەکراوەکەی ئاگادارکردنەوەکان لەسەر نامەی ئاگادارکردنەوە ئاساییەکان کاردەکات، و نامەکانی بلۆککردن.

بەکارهێنانی bootstrap-alert.js

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

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

مارکاپ

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

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

شێوازەکان

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

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

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

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

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

ڕووداوەکان

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

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

دەربارەی

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

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

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

بەکارهێنانی bootstrap-button.js

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

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

مارکاپ

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

<!-- زیادکردنی data-toggle="button" بۆ چالاککردنی toggling لەسەر یەک دوگمە -->
<button class = "btn" data-toggle = "دوگمە" > تاکە گۆڕین </button>  
 
<!-- زیادکردنی data-toggle="buttons-checkbox" بۆ گۆڕینی شێوازی سندوقی هەڵبژاردن لەسەر btn-group -->
<div class = "btn-group" data-toggle = "بۆکسی پشکنینی دوگمەکان" >  
  <button class = "btn" > چەپ </button> 
  <button class = "btn" > ناوەڕاست </button> 
  <button class = "btn" > ڕاست </button> 
</div>
 
<!-- زیادکردنی data-toggle="buttons-radio" بۆ گۆڕینی شێوازی ڕادیۆیی لەسەر btn-group -->
<div class = "btn-group" داتا-تۆگڵ = "دوگمەکان-ڕادیۆ" >  
  <button class = "btn" > چەپ </button> 
  <button class = "btn" > ناوەڕاست </button> 
  <button class = "btn" > ڕاست </button> 
</div>

شێوازەکان

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

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

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

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

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

<button class = "btn" data-loading-text = "بارکردنی شتەکان..." > ... </button>   

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

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

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

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

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

دەربارەی

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

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

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

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

بەکارهێنانی bootstrap-collapse.js

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

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

بژاردەکان

مارکاپ

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

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

شێوازەکان

.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.

‹ ›

بەکارهێنانی bootstrap-carousel.js

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

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

بژاردەکان

مارکاپ

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

<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>

شێوازەکان

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

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

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

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

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

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

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

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

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

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

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

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

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

ڕووداوەکان

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

دەربارەی

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

نموونە

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

بەکارهێنانی bootstrap-typeahead.js

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

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

بژاردەکان

مارکاپ

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

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

شێوازەکان

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

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