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

پێکهاتەکانی Bootstrap بە ژیان بهێنە- ئێستا بە 12 پێوەکراوەکانی تایبەت بە jQuery .

مۆداڵەکان

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

دابەزینەکان

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

سکڕۆڵسپی

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

تابەکان کە دەتوانرێت بگۆڕدرێن

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

ئامۆژگاری ئامرازەکان

وەرگرتنی نوێ لە پێوەکراوەکەی jQuery Tipsy، Tooltips پشت بە وێنە نابەستێت-ئەوان CSS3 بۆ ئەنیمەیشن و تایبەتمەندی داتا بۆ هەڵگرتنی ناونیشانی ناوخۆیی بەکاردەهێنن.

پۆپۆڤەرز *

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

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

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

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

دوگمەکان

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

شکست هێنان

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

کارۆسێل

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

تایپ ئاهێد

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

گواستنەوەکان *

بۆ کاریگەرییە سادەکانی گواستنەوە، جارێک bootstrap-transition.js لەخۆ بگرە بۆ ئەوەی لە مۆدالەکاندا بخلیسکێت یان ئاگادارکردنەوەکان کاڵ بکەیتەوە.

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

سەرەکان بەرز دەکەنەوە! هەموو پێوەکراوەکانی جاڤاسکڕێپت پێویستیان بە نوێترین وەشانی jQuery هەیە.

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

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

دابەزاندنی فایل

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

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

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

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

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

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

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

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

بژاردەکان

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

مارکاپ

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

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > مۆداڵی دەستپێکردن </a>
  1. <div class = "شاردنەوەی مۆداڵی" id = "myModal" >
  2. <div class = "سەردێڕی مۆداڵی" >
  3. < جۆری دوگمە = "دوگمە" پۆل = "داخستنی" data-dismiss = "مۆداڵی" > × </دوگمە>
  4. <h3> سەردێڕی مۆداڵی </h3>
  5. </div>
  6. <div class = "جەستەی مۆداڵی" >
  7. <p> یەک جەستەی ورد... </p>
  8. </div>
  9. <div class = "پێی مۆداڵی" >
  10. <a href = "#" class = "btn" data-dismiss = "مۆداڵی" > داخستنی </a>
  11. <a href = "#" class = "btn btn-primary" > گۆڕانکارییەکان هەڵبگرە </a>
  12. </div>
  13. </div>
سەرەکان بەرز دەکەنەوە! ئەگەر دەتەوێت مۆداڵەکەت ئەنیمەیشن بکات بۆ ناوەوە و دەرەوە، تەنها .fadeپۆلێک زیاد بکە بۆ .modalتوخمەکە (بۆ بینینی ئەمە بە کردار سەردانی دیمۆکە بکە) و bootstrap-transition.js لەخۆ بگرێت.

شێوازەکان

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

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

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

.modal('گۆڕین')

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

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

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

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

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

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

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

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

ڕووداوەکان

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

پێشهات وەسف
نیشاندان ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی css دەکات).
شاردنەوە ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideشێوازی نموونە بانگ کراوە.
شاراوە ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە مۆداڵەکە تەواو بوو لە شاردنەوە لە بەکارهێنەر (چاوەڕێ دەکات بۆ تەواوبوونی گواستنەوەکانی css).
  1. $ ( '#مۆداڵی من' ). لەسەر ( 'شاراوە' , فەنکشن () {
  2. // شتێک بکە…
  3. })

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

دابەزاندنی فایل

نموونەی navbar بە scrollspy

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

@قەڵەو

ڕیکلام قیاس keytar، brunch id هونەر ئاهەنگ dolor labore. Pitchfork yr enim lo-fi پێش ئەوەی qui بفرۆشرێن. Tumblr مافی پاسکیل لە کێڵگە بۆ مێز هەرچییەک بێت. Anim keffiyeh کارلێس کاردیگان. کۆشکی وێنەی Velit seitan mcsweeney 3 گورگ مانگ irure. کۆسبی بلوز لۆمۆ جین شۆرت، ویلیامسبێرگ هودی مینیم qui ڕەنگە نەتبیستبێت لەوان et سندوقی متمانە کاردیگان culpa biodiesel wes anderson جوانکاری. Nihil تاتۆی accusamus، cred ئیرۆنی بایۆدیزەل keffiyeh پیشەسازی ullamco consequat.

@mdo

سکەیتبۆرد سمێڵ ڤێنیام مارفا، سمێڵی چەقۆی ڤێلیت ڤێلیت. سمێڵی فریگان ئەلیکوا کوپیداتات ڤێرۆی mcsweeney. کوپیداتات چوار لۆکۆ نیسی، ئیا هێلڤێتیکا نولا کارلێس. بارهەڵگرێکی خۆراکی بلوزێکی کۆسبی تاتۆی لەسەر کراوە، ڤینێلی mcsweeney's quis non freegan. لۆ-فای وێس ئەندەرسۆن +1 سەرتۆریال. کارلێس ڕاهێنانی نا جوانکاری quis gentrify. بروکلن adipisicing بیرەی دەستی جێگری keytar deserunt.

یەک

ئۆکایکات کۆمۆدۆ ئەلیکوا دیلێکتوس. Fap کرافت بیرە deserunt سکەیتبۆرد ea. مافی پاسکیل لۆمۆ adipisicing banh mi, velit ea sunt ئاستی داهاتوو locavore تاکە سەرچاوە قاوە لە magna veniam. ژیانی بەرز id ڤینێل، ئیکۆ پارک consequat quis aliquip banh mi pitchfork. ڤێرۆ ڤی ئێچ ئێس est adipisicing. جانتای نامەبەری کەمترین DIY Consectetur nisi. Cred ex لە، بەردەوام delectus consectetur فەنی پاکەت ئایفۆن.

دوو

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 جانتای نامەبەر مارفا هەرچییەک بێت بارهەڵگری خۆراکی دیلێکتوس. Sapiente synth id گریمانە. Locavore sed helvetica cliche irony, ڕەشەبا پشیلە کە ڕەنگە نەتبیستبێت لەوان consequat hoodie گلوتین-بێ گلوتین lo-fi fap aliquip. Labore elit placeat پێش ئەوەی بفرۆشرێن، تێری ڕیچاردسۆن proident brunch nesciunt quis cosby بلوز pariatur keffiyeh ut helvetica پیشەسازی. کاردیگان بیرەی دەستی سێتان ڤێلیتی ئامادەکراو. ڤی ئێچ ئێس چامبرای لابۆریس پۆپۆڕ ڤینیام. ئەنیم مۆلیت مینی کۆمۆدۆ ئولامکۆ ڕەشەبا پشیلە.


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

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

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

مارکاپ

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

  1. <body data-spy = "سکڕۆڵکردن" > ... </body>
سەرەکان بەرز دەکەنەوە! بەستەرەکانی ناوبار دەبێت ئامانجی id چارەسەرکراویان هەبێت. بۆ نموونە، a <a href="#home">home</a>دەبێت لەگەڵ شتێکدا بگونجێت لە دۆمەکەدا وەک <div id="home"></div>.

شێوازەکان

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

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

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

بژاردەکان

ناو جۆر بنەڕەتی وەسف
ئۆفسێت ژماره‌ 10. 10 پێکسڵەکان بۆ ئۆفسێت لە سەرەوە لەکاتی حیسابکردنی شوێنی سکڕۆڵ.

ڕووداوەکان

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

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

دابەزاندنی فایل

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

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

جینز خاو ڕەنگە نەتبیستبێت لەوان شۆرت جین ئۆستین. 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.


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

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

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

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

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

مارکاپ

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

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

شێوازەکان

$().tab

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

  1. <ul class = "nav nav-tabs" id = "تابەکەم" >
  2. <li class = "چالاك" ><a href = "#ماڵەوە" > ماڵەوە </a></li>
  3. <li><a href = "#profile" > پڕۆفایلی </a></li>
  4. <li><a href = "#messages" > پەیامەکان </a></li>
  5. <li><a href = "#ڕێکخستنەکان" > ڕێکخستنەکان </a></li>
  6. </ul>
  7.  
  8. <div class = "ناوەڕۆکی تاب" >
  9. <div class = "tab-pane چالاکە" id = "ماڵەوە" > ... </div>
  10. <div class = "tab-pane" id = "پڕۆفایلی" > ... </div>
  11. <div class = "tab-pane" id = "پەیامەکان" > ... </div>
  12. <div class = "tab-pane" id = "ڕێکخستنەکان" > ... </div>
  13. </div>
  14.  
  15. <سکریپت>
  16. $ ( فەنکشن () {
  17. $ ( '#تابەکەم a:کۆتا' ). tab ( 'نیشاندان' );
  18. })
  19. </script>

ڕووداوەکان

پێشهات وەسف
نیشاندان ئەم ڕووداوە لە تاب نمایشدا ئاگر دەکاتەوە، بەڵام پێش ئەوەی تابە نوێیەکە پیشان بدرێت. event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
نیشان دراوە ئەم ڕووداوە لە نمایشی تابدا ئاگر دەبێتەوە دوای ئەوەی تابێک پیشان دەدرێت. event.targetو بەکاربهێنە event.relatedTargetبۆ ئامانجکردنی تابی چالاک و تابی چالاک پێشوو (ئەگەر بەردەست بێت) بە رێککەوت.
  1. $ ( 'a[data-toggle="تاب"]' ). لەسەر ( 'نیشاندراوە' , فەنکشن ( e ) {
  2. هـ . ئامانج // تاب چالاک کراوە
  3. هـ . relatedTarget // تابی پێشوو
  4. })

دەربارەی Tooltips

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

دابەزاندنی فایل

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

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

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


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

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

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

بژاردەکان

ناو جۆر بنەڕەتی وەسف
ئەنیمەیشن boolean ڕاست گواستنەوەیەکی css fade بەکاربهێنە بۆ ئامرازەکان
جێگیرکردن string|کارکرد 'سەروو' چۆنێتی جێگیرکردنی ئامرازەکان - سەرەوە | خوارەوە | چەپ | ڕاست
هەڵبژێرەر ڕستە هەڵە ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی ئامۆژگاری ئامرازەکان دەدرێنە ئامانجە دیاریکراوەکان.
ناونیشان ڕستە | کردار '' بەهای ناونیشانی پێشوەختە ئەگەر تاگی `title` ئامادە نەبێت
وورژاندن ڕستە 'hover' چۆن tooltip دەستپێدەکات - hover | فۆکەس | بەدەستی
دواخستن ژمارە | شت 0. 0

دواکەوتنی پیشاندانی و شاردنەوەی ئامۆژگاری ئامرازەکان (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە

ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نیشاندان جێبەجێ دەکرێت

پێکهاتەی شت بریتییە لە:delay: { show: 500, hide: 100 }

سەرەکان بەرز دەکەنەوە! دەتوانرێت هەڵبژاردەکان بۆ ئامۆژگارییە تاکەکەسییەکان بە شێوەیەکی جێگرەوە لە ڕێگەی بەکارهێنانی تایبەتمەندییەکانی داتاوە دیاری بکرێت.

مارکاپ

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

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

شێوازەکان

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

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

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

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

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

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

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

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

.tooltip('گۆڕین')

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

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

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

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

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

دابەزاندنی فایل

نموونە hover popover

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


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

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

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

بژاردەکان

ناو جۆر بنەڕەتی وەسف
ئەنیمەیشن boolean ڕاست گواستنەوەیەکی css fade بەکاربهێنە بۆ ئامرازەکان
جێگیرکردن string|کارکرد 'ڕاست' چۆنێتی جێگیرکردنی پۆپۆڤەر - سەرەوە | خوارەوە | چەپ | ڕاست
هەڵبژێرەر ڕستە هەڵە ئەگەر هەڵبژێرەرێک دابین بکرێت، شتەکانی ئامۆژگاری ئامرازەکان ڕادەسپێردرێن بۆ ئامانجە دیاریکراوەکان
وورژاندن ڕستە 'hover' چۆن tooltip دەستپێدەکات - hover | فۆکەس | بەدەستی
ناونیشان ڕستە | کردار '' بەهای ناونیشانی پێشوەختە ئەگەر تایبەتمەندی `title` ئامادە نەبێت
ناوەڕۆک ڕستە | کردار '' بەهای ناوەڕۆکی پێشوەختە ئەگەر تایبەتمەندی `data-content` ئامادە نەبێت
دواخستن ژمارە | شت 0. 0

دواکەوتنی پیشاندانی و شاردنەوەی popover (ms) - جۆری دەستپێکەری دەستی ناگرێتەوە

ئەگەر ژمارەیەک دابین کرا، دواکەوتن بۆ هەردوو شاردنەوە/نیشاندان جێبەجێ دەکرێت

پێکهاتەی شت بریتییە لە:delay: { show: 500, hide: 100 }

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

مارکاپ

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

شێوازەکان

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

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

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

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

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

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

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

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

.popover('گۆڕین')

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

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

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

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

دابەزاندن

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

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

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

ئای سناپ! هەڵەیەکت دەست کەوت!

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

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


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

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

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

مارکاپ

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

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

شێوازەکان

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

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

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

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

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

ڕووداوەکان

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

پێشهات وەسف
داخستن ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک closeشێوازی نموونە بانگ دەکرێت.
داخراوە ئەم ڕووداوە کاتێک ئاگادار دەکرێتەوە کە ئاگادارکردنەوەکە داخراوە (چاوەڕێ دەکات تا گواستنەوەکانی css تەواو دەبن).
  1. $ ( '#ئاگادارکردنەوە-من' ). bind ( 'داخراو' , فەنکشن () {
  2. // شتێک بکە…
  3. })

دەربارەی

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

دابەزاندنی فایل

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

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

دەوڵەتدار
تاکە گۆڕانکاری
بۆکسی هەڵبژاردن
ڕادیۆ

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

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

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

مارکاپ

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

  1. <!-- زیادکردنی data-toggle="button" بۆ چالاککردنی toggling لەسەر یەک دوگمە -->
  2. <button class = "btn" data-toggle = "دوگمە" > تاکە گۆڕین </button>
  3.  
  4. <!-- زیادکردنی data-toggle="buttons-checkbox" بۆ گۆڕینی شێوازی سندوقی هەڵبژاردن لەسەر btn-group -->
  5. <div class = "btn-group" data-toggle = "بۆکسی پشکنینی دوگمەکان" >
  6. <button class = "btn" > چەپ </button>
  7. <button class = "btn" > ناوەڕاست </button>
  8. <button class = "btn" > ڕاست </button>
  9. </div>
  10.  
  11. <!-- زیادکردنی data-toggle="buttons-radio" بۆ گۆڕینی شێوازی ڕادیۆیی لەسەر btn-group -->
  12. <div class = "btn-group" داتا-تۆگڵ = "دوگمەکان-ڕادیۆ" >
  13. <button class = "btn" > چەپ </button>
  14. <button class = "btn" > ناوەڕاست </button>
  15. <button class = "btn" > ڕاست </button>
  16. </div>

شێوازەکان

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

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

سەرەکان بەرز دەکەنەوە! data-toggleدەتوانیت بە بەکارهێنانی تایبەتمەندییەکە گۆڕینی ئۆتۆماتیکی دوگمەیەک چالاک بکەیت .
  1. <دوگمە پۆل = "btn" data-toggle = "دوگمە" > ... </دوگمە>

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

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

  1. <button class = "btn" data-loading-text = "بارکردنی شتەکان..." > ... </button>
سەرەکان بەرز دەکەنەوە! فایەرفۆکس دۆخی لەکارخراو لە سەرانسەری بارکردنی لاپەڕەکاندا بەردەوام دەکات . چارەسەرێک بۆ ئەمە بەکارهێنانی autocomplete="off".

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

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

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

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

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

دەربارەی

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

دابەزاندنی فایل

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

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

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

Anim pariatur cliche reprehenderit، enim eiusmod ژیانی بەرز accusamus تێری ڕیچاردسۆن ad squid. 3 گورگ مانگ officia aute، نا کوپیداتات سکەیتبۆرد dolor brunch. بارهەڵگری خۆراک quinoa nesciunt laborum eiusmod. برنچ 3 گورگ مانگ tempo, sunt aliqua باڵندەیەکی لەسەر دابنێ کالم تاکە سەرچاوە قاوە nulla assumenda shoreditch et. نیهیل ئەنیم کەفییە هێلڤێتیکا، بیرەی دەستی کاری وێس ئەندەرسۆن کرێد نێشوێنت ساپیێنت ئیا پرۆیێنت. ڕیکلام ڤیگن excepteur قەساب جێگری lomo. قیاسەکان occaecat بیرەی دەستی کێڵگە-بۆ-مێز، خام جینز جوانکاری synth nesciunt ڕەنگە نەتبیستبێت لەوان accusamus labore بەردەوام VHS.
Anim pariatur cliche reprehenderit، enim eiusmod ژیانی بەرز accusamus تێری ڕیچاردسۆن ad squid. 3 گورگ مانگ officia aute، نا کوپیداتات سکەیتبۆرد dolor brunch. بارهەڵگری خۆراک quinoa nesciunt laborum eiusmod. برنچ 3 گورگ مانگ tempo, sunt aliqua باڵندەیەکی لەسەر دابنێ کالم تاکە سەرچاوە قاوە nulla assumenda shoreditch et. نیهیل ئەنیم کەفییە هێلڤێتیکا، بیرەی دەستی کاری وێس ئەندەرسۆن کرێد نێشوێنت ساپیێنت ئیا پرۆیێنت. ڕیکلام ڤیگن excepteur قەساب جێگری lomo. قیاسەکان occaecat بیرەی دەستی کێڵگە-بۆ-مێز، خام جینز جوانکاری synth nesciunt ڕەنگە نەتبیستبێت لەوان accusamus labore بەردەوام VHS.
Anim pariatur cliche reprehenderit، enim eiusmod ژیانی بەرز accusamus تێری ڕیچاردسۆن ad squid. 3 گورگ مانگ officia aute، نا کوپیداتات سکەیتبۆرد dolor brunch. بارهەڵگری خۆراک quinoa nesciunt laborum eiusmod. برنچ 3 گورگ مانگ tempo, sunt aliqua باڵندەیەکی لەسەر دابنێ کالم تاکە سەرچاوە قاوە nulla assumenda shoreditch et. نیهیل ئەنیم کەفییە هێلڤێتیکا، بیرەی دەستی کاری وێس ئەندەرسۆن کرێد نێشوێنت ساپیێنت ئیا پرۆیێنت. ڕیکلام ڤیگن excepteur قەساب جێگری lomo. قیاسەکان occaecat بیرەی دەستی کێڵگە-بۆ-مێز، خام جینز جوانکاری synth nesciunt ڕەنگە نەتبیستبێت لەوان accusamus labore بەردەوام VHS.

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

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

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

بژاردەکان

ناو جۆر بنەڕەتی وەسف
دایک و باوک هەڵبژێرەر هەڵە ئەگەر هەڵبژێرە ئەوا هەموو توخمە داخراوەکان لە ژێر دایک و باوکی دیاریکراو دادەخرێن کاتێک ئەم بابەتە داخراوە پیشان دەدرێت. (هاوشێوەی ڕەفتاری تەقلیدی ئەکۆردیۆن)
toggle بکە boolean ڕاست توخمە داخراوەکە لە کاتی بانگکردندا دەگۆڕێت

مارکاپ

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

  1. <button class = "btn btn-danger" data-toggle = "داڕمان" داتا-ئامانج = "#دیمۆ" >
  2. سادە دەڕووخێت
  3. </دوگمەی>
  4.  
  5. <div id = "demo" class = "داڕمان لە" > ... </div>
سەرەکان بەرز دەکەنەوە! بۆ زیادکردنی بەڕێوەبردنی گروپی هاوشێوەی ئەکۆردیۆن بۆ کۆنتڕۆڵێکی داخراو، تایبەتمەندی داتا زیاد بکە data-parent="#selector". بۆ بینینی ئەمە بە کردار ئاماژە بە دیمۆکە بکە.

شێوازەکان

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

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

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

.collapse('گۆڕین')

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

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

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

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

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

ڕووداوەکان

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

پێشهات وەسف
نیشاندان ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک showشێوازی نموونە بانگ دەکرێت.
نیشان دراوە ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان بۆ بەکارهێنەر دیار کراوە (چاوەڕێی تەواوبوونی گواستنەوەکانی css دەکات).
شاردنەوە ئەم ڕووداوە دەستبەجێ ئاگر دەکرێتەوە کاتێک hideمیتۆدەکە بانگ کراوە.
شاراوە ئەم ڕووداوە کاتێک ئاگر دەکرێتەوە کە توخمێکی داڕمان لە بەکارهێنەر شاراوەتەوە (چاوەڕوان دەکات بۆ تەواوبوونی گواستنەوەکانی css).
  1. $ ( '#داشکێنراوی من' ). لەسەر ( 'شاراوە' , فەنکشن () {
  2. // شتێک بکە…
  3. })

دەربارەی

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

دابەزاندنی فایل

نموونە

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


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

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

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

بژاردەکان

ناو جۆر بنەڕەتی وەسف
سەرچاوە ڕیزبەندی [ ] سەرچاوەی داتا بۆ پرسیارکردن لە دژی.
کەرەستەکان ژماره‌ 8. 8 زۆرترین ژمارەی ئەو شتانەی کە لە درۆپ داونەکەدا پیشان دەدرێن.
matcher کردار بێ هەستیاری کەیس ئەو شێوازەی کە بەکاردێت بۆ دیاریکردنی ئەوەی کە ئایا پرسیارێک لەگەڵ شتێکدا دەگونجێت یان نا. یەک ئارگومێنت قبوڵ دەکات، ئەو ئارگیومێنتە itemکە لە بەرامبەردا پرسیارەکە تاقی بکرێتەوە. بە this.query. trueئەگەر پرسیارەکە یەکسان بێت، بولینێک بگەڕێنەرەوە .
ڕیزکەر کردار یەکسانکردنی ورد،
هەستیاری گەورە و بچووک،
بێ هەست بە گەورە و بچووک
شێوازێک کە بەکاردێت بۆ ڕیزکردنی ئەنجامەکانی تەواوکردنی ئۆتۆماتیکی. یەک ئارگومێنت قبوڵ دەکات itemsو مەودای نموونەی typeahead ی هەیە. ئاماژە بە پرسیاری ئێستا بکە بە this.query.
هایلایتەر کردار هەموو یەکسانە پێشوەختەکان تیشک دەخاتە سەر شێوازێک کە بەکاردێت بۆ تیشک خستنە سەر ئەنجامەکانی تەواوکردنی ئۆتۆماتیکی. یەک ئارگومێنت قبوڵ دەکات itemو مەودای نموونەی typeahead ی هەیە. پێویستە html بگەڕێنێتەوە.

مارکاپ

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

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

شێوازەکان

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

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