بووتستراپ، لە تویتەرەوە بە کوردی (سۆرانی)

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

دابەزاندن

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

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

بژاردەکان

ناو	جۆر	بنەڕەتی	وەسف
باکگراوند	boolean	هەڵە	توخمێکی مۆداڵی-باکگراوند لەخۆدەگرێت
کیبۆرد	boolean	هەڵە	مۆداڵی دادەخات کاتێک کلیلی escape دەکرێت
نیشاندان	boolean	هەڵە	مۆداڵی لەسەر دەستپێکردنی پۆل دەکاتەوە

مارکاپ

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

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "ڕاست" > مۆداڵی دەستپێکردن </a>

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

شێوازەکان

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

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

$ ( '#مۆداڵی من' ). مۆداڵی ({
  closeOnEscape : ڕاستە 
})

.modal('گۆڕین')

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

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

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

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

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

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

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

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

.مۆداڵی(ڕاست)

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

$ ( '#مۆداڵی من' ). مۆداڵی ( ڕاست )

تێبینی یان دەتوانرێت ئەمە بە $().data('modal').

ڕووداوەکان

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

پێشهات	وەسف
نیشاندان	ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک `show`شێوازی نموونە بانگ دەکرێت.
نیشان دراوە	ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی css دەکات).
شاردنەوە	ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک `hide`شێوازی نموونە بانگ کراوە.
شاراوە	ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێ دەکات بۆ تەواوبوونی گواستنەوەکانی css).

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

دیمۆ

ئەم پێوەکراوە بۆ زیادکردنی کارلێکی scrollspy (auto updating nav) بۆ سەرەوەی bootstrap.

دابەزاندن

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

$ ( '#سەرەوە' ). دابەزین ()

مارکاپ

بۆ ئەوەی بە ئاسانی هەڵسوکەوتی scrollspy زیاد بکەیت بۆ nav ـەکەت، تەنها data-scrollspyتایبەتمەندییەکە زیاد بکە بۆ .topbar.

<div class = "سەرەوە" data-scrollspy = "scrollspy" > ... </div>

شێوازەکان

$().scrollspy()

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

$ ( 'جەستە > .سەرەوە' ). scrollSpy ()

ئاگاداری تاگەکانی ئەنکۆری Topbar دەبێت ئامانجی id چارەسەرکراویان هەبێت. بۆ نموونە، a <a href="#home">home</a>دەبێت لەگەڵ شتێکدا بگونجێت لە دۆمەکەدا وەک <div id="home"></div>.

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

scrollspy دوگمەکانی nav و کۆئۆردینیاتی بەشەکان بۆ کارایی کاش دەکات. ئەگەر پێویستت بە نوێکردنەوەی ئەم کاشەیە (بە ئەگەرێکی زۆرەوە ئەگەر ناوەڕۆکی داینامیکیت هەبێت) تەنها بانگی ئەم شێوازە نوێکردنەوە بکە. ئەگەر تایبەتمەندی داتات بەکارهێنا بۆ پێناسەکردنی scrollspy ـەکەت، تەنها بانگی refresh بکە لەسەر جەستە.

$ ( 'جەستە' ). scrollspy ( 'نوێکردنەوە' )

دیمۆ

لەم لاپەڕەیەدا سەیری گەشتی سەرەوە بکە.

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

دابەزاندن

بەکارهێنانی boostrap-tabs.js

$ ( '.tabs' ). تابەکان ()

مارکاپ

دەتوانیت گەشتێکی تاب یان حەب چالاک بکەیت بەبێ ئەوەی هیچ جاڤاسکڕێپتێک بنووسیت بە تەنها پێدانی تایبەتمەندی data-tabsیان data-pillsتایبەتمەندییان.

 <ul class = "تابەکان" داتا-تابەکان = "تابەکان" > ... </ul>

شێوازەکان

$().tabs یان $().حەب

کارایی تاب و حەب بۆ دەفرێکی دیاریکراو چالاک دەکات. بەستەرەکانی تابەکان پێویستە ئاماژە بە id's بکەن لە بەڵگەنامەکەدا.

<ul class = "تابەکان" > 
  <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 = "چالاك" id = "ماڵەوە" > ... </div>  
  <div id = "پڕۆفایلی" > ... </div> 
  <div id = "پەیامەکان" > ... </div> 
  <div id = "ڕێکخستنەکان" > ... </div> 
</ul>
 
<سکریپت>
  $ ( فەنکشن () {  
    $ ( '.tabs' ). تابەکان ()
  })
</script>

دیمۆ

جینز خاو ڕەنگە نەتبیستبێت لەوان شۆرت جین ئۆستین. Nesciunt تۆفۆ stumptown aliqua، پاککردنەوەی وەستای ڕیترۆ سینت. سمێڵ کلیشە کاتی، ویلیامسبێرگ کارلێس ڤیگن هێلڤێتیکا. Reprehenderit قەساب ڕیترۆ keffiyeh خەون گیر synth. بلوزێکی کۆسبی eu banh mi، qui irure تێری ڕیچاردسۆن ex squid. Aliquip placeat سەلڤیا سیلوم ئایفۆن. Seitan aliquip quis کاردیگان جل و بەرگی ئەمریکی، قەساب 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.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

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

دابەزاندن

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

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

بژاردەکان

ناو	جۆر	بنەڕەتی	وەسف
ئەنیمەیشن	boolean	ڕاست	گواستنەوەیەکی css fade بەکاربهێنە بۆ ئامرازەکان
delayIn	ژماره‌	0. 0	دواکەوتن پێش پیشاندانی ئامۆژگاری ئامرازەکان (ms)
delayOut	ژماره‌	0. 0	دواکەوتن پێش شاردنەوەی ئامرازەکان (ms)
کشانەوە	ڕستە	''	دەقێک بۆ بەکارهێنان کاتێک هیچ ناونیشانێکی ئامرازەکان ئامادە نییە
جێگیرکردن	ڕستە	'لەسەر'	چۆنێتی جێگیرکردنی ئامرازەکان - لە سەرەوە \| لە خوارەوە \| چەپ \| ڕاست
html	boolean	هەڵە	ڕێگە بە ناوەڕۆکی html دەدات لە ناو tooltip
ژیان	boolean	هەڵە	نوێنەرایەتی ڕووداو بەکاربهێنە لەبری مامەڵەکارانی ڕووداوی تاکەکەسی
ئۆفسێت	ژماره‌	0. 0	ئۆفسێتی پێکسڵی ئامۆژگاری ئامراز لە توخمێکی ئامانجەوە
ناونیشان	ڕستە \| کردار	'ناونیشان'	تایبەتمەندی یان شێواز بۆ وەرگرتنەوەی دەقی ناونیشان
وورژاندن	ڕستە	'hover'	چۆن tooltip دەستپێدەکات - hover \| فۆکەس \| بەدەستی

شێوازەکان

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

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

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

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

$ ( '#توخم' ). twipsy ( 'نیشاندان' )

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

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

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

.twipsy(ڕاستە)

نموونەیەکی پۆلی elements twipsy دەگەڕێنێتەوە.

$ ( '#توخم' ). twipsy ( ڕاستە )

تێبینی یان دەتوانرێت ئەمە بە $().data('twipsy').

دیمۆ

پانتۆڵی توند ئاستی داهاتوو keffiyeh ڕەنگە نەتبیستبێت. کۆشکی وێنە سمێڵ خام جینز لێتەرپرێس جانتای نامەبەری ڤیگن stumptown. کێڵگە بۆ مێز seitan، mcsweeney's fixie بەردەوام quinoa 8-bit جل و بەرگی ئەمریکی خاوەنی تێری ڕیچاردسۆن ڤینێل chambray. سمێڵ ستۆمپتاون، کاردیگانەکان بانه می لۆمۆ ڕەشەبا پشیلە. تۆفۆ بایۆدیزەل ویلیامزبێرگ مارفا، چوار loko mcsweeney's پاککردنەوەی ڤیگن chambray. بەڕاستی پیشەسازێکی ئیرۆنی هەرچییەک بێت keytar، scenester کێڵگە بۆ مێز banksy ئۆستن تویتەر دەست freegan cred خام جینز تاکە سەرچاوە قاوە ڤایرۆس.

پێوەکراوەکەی popover ڕووکارێکی سادە بۆ زیادکردنی popovers بۆ بەرنامەکەت دابین دەکات. پێوەکراوەکەی boostrap-twipsy.js درێژ دەکاتەوە ، بۆیە دڵنیابە کە ئەو فایلە بە هەمان شێوە بگرە کاتێک popovers لە پرۆژەکەتدا دەخەیتە ناوەوە!

دابەزاندن

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

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

بژاردەکان

ناو	جۆر	بنەڕەتی	وەسف
ئەنیمەیشن	boolean	ڕاست	گواستنەوەیەکی css fade بەکاربهێنە بۆ ئامرازەکان
delayIn	ژماره‌	0. 0	دواکەوتن پێش پیشاندانی ئامۆژگاری ئامرازەکان (ms)
delayOut	ژماره‌	0. 0	دواکەوتن پێش شاردنەوەی ئامرازەکان (ms)
کشانەوە	ڕستە	''	دەقێک بۆ بەکارهێنان کاتێک هیچ ناونیشانێکی ئامرازەکان ئامادە نییە
جێگیرکردن	ڕستە	'ڕاست'	چۆنێتی جێگیرکردنی ئامرازەکان - لە سەرەوە \| لە خوارەوە \| چەپ \| ڕاست
html	boolean	هەڵە	ڕێگە بە ناوەڕۆکی html دەدات لە ناو tooltip
ژیان	boolean	هەڵە	نوێنەرایەتی ڕووداو بەکاربهێنە لەبری مامەڵەکارانی ڕووداوی تاکەکەسی
ئۆفسێت	ژماره‌	0. 0	ئۆفسێتی پێکسڵی ئامۆژگاری ئامراز لە توخمێکی ئامانجەوە
ناونیشان	ڕستە \| کردار	'ناونیشان'	تایبەتمەندی یان شێواز بۆ وەرگرتنەوەی دەقی ناونیشان
ناوەڕۆک	ڕستە \| کردار	'ناوەڕۆکی داتا'	تایبەتمەندی یان شێوازێک بۆ وەرگرتنەوەی دەقی ناوەڕۆک
وورژاندن	ڕستە	'hover'	چۆن tooltip دەستپێدەکات - hover \| فۆکەس \| بەدەستی

شێوازەکان

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

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

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

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

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

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

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

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

دیمۆ

hover بۆ popover

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

دابەزاندن

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

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

مارکاپ

تەنها data-alertتایبەتمەندییەک زیاد بکە بۆ پەیامەکانی ئاگادارکردنەوەت بۆ ئەوەی بە شێوەیەکی ئۆتۆماتیکی کارایی نزیکیان پێبدەیت.

شێوازەکان

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

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

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

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

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

دیمۆ

گواکامۆلی پیرۆز! Best check yo self، تۆ زۆر باش دەرناکەویت.

ئای سناپ! هەڵەیەکت دەست کەوت! ئەم و ئەو بگۆڕە و دووبارە هەوڵبدەرەوە. دویس مۆلیس، ئیست نۆن کۆمۆدۆ لوکتوس، نیسی ئێرات پۆرتیتۆر لیگولا، ئیگێت لاسینیا ئۆدیۆ سێم ئێلیت. کراس ماتیس کۆنسێکتێتور پوروس دانیشتن amet fermentum.

ئەم کردارە ئەنجام بدە یان ئەمە بکەن

بووتستراپ JS

جاڤاسکڕێپت بۆ بووتستراپ

ناوی پرۆژە

سکڕۆڵسپای bootstrap-scrollspy.js

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

مارکاپ

شێوازەکان

$().scrollspy()

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

دیمۆ

تابەکان bootstrap-tabs.js

بەکارهێنانی boostrap-tabs.js

مارکاپ

شێوازەکان

$().tabs یان $().حەب

دیمۆ

تویپسی بۆتستراپ-twipsy.js

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

بژاردەکان

شێوازەکان

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

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

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

.twipsy(ڕاستە)

دیمۆ

پۆپۆڤەرز bootstrap-popover.js

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

بژاردەکان

شێوازەکان

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

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

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

دیمۆ

ئاگادارکردنەوە لە bootstrap-alerts.js

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

مارکاپ

شێوازەکان

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

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

دیمۆ

بووتستراپ JS

مۆداڵەکان bootstrap-modal.js

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

بژاردەکان

مارکاپ

شێوازەکان

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

.modal('گۆڕین')

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

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

.مۆداڵی(ڕاست)

ڕووداوەکان

دیمۆ

سەردێڕی مۆداڵی

دابەزین bootstrap- dropdown.js

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

مارکاپ

شێوازەکان

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

دیمۆ

ناوی پرۆژە

سکڕۆڵسپای bootstrap-scrollspy.js

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

مارکاپ

شێوازەکان

$().scrollspy()

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

دیمۆ

تابەکان bootstrap-tabs.js

بەکارهێنانی boostrap-tabs.js

مارکاپ

شێوازەکان

$().tabs یان $().حەب

دیمۆ

تویپسی بۆتستراپ-twipsy.js

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

بژاردەکان

شێوازەکان

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

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

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

.twipsy(ڕاستە)

دیمۆ

پۆپۆڤەرز bootstrap-popover.js

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

بژاردەکان

شێوازەکان

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

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

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

دیمۆ

ئاگادارکردنەوە لە bootstrap-alerts.js

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

مارکاپ

شێوازەکان

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

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

دیمۆ