جاوا اسڪرپٽ
Bootstrap جي اجزاء کي هڪ درجن کان وڌيڪ ڪسٽم jQuery پلگ ان سان زنده ڪريو. آساني سان انهن سڀني کي شامل ڪريو، يا هڪ هڪ ڪري.
Bootstrap جي اجزاء کي هڪ درجن کان وڌيڪ ڪسٽم jQuery پلگ ان سان زنده ڪريو. آساني سان انهن سڀني کي شامل ڪريو، يا هڪ هڪ ڪري.
پلگ انز انفرادي طور تي شامل ڪري سگھجن ٿيون (بوٽ اسٽريپ جي انفرادي *.js
فائلن کي استعمال ڪندي)، يا سڀ ھڪ ئي وقت (استعمال ڪندي bootstrap.js
يا minified bootstrap.min.js
).
ٻئي bootstrap.js
۽ bootstrap.min.js
ھڪڙي فائل ۾ سڀ پلگ ان شامل آھن. صرف ھڪڙو شامل ڪريو.
ڪجھ پلگ ان ۽ سي ايس ايس جزا ٻين پلگ ان تي ڀاڙين ٿا. جيڪڏهن توهان انفرادي طور تي پلگ ان شامل ڪريو ٿا، پڪ ڪريو ته انهن انحصارن لاءِ دستاويز ۾ چيڪ ڪريو. اهو پڻ نوٽ ڪريو ته سڀئي پلگ ان jQuery تي منحصر آهن (هن جو مطلب آهي jQuery پلگ ان فائلن کان اڳ شامل ٿيڻ گهرجي ). اسانbower.json
سان صلاح ڪريو ته ڏسو jQuery جا ڪهڙا نسخا سپورٽ آهن.
توھان استعمال ڪري سگھوٿا سڀئي بوٽ اسٽريپ پلگ ان خالص طور تي مارڪ اپ API ذريعي جاوا اسڪرپٽ جي ھڪڙي لائن لکڻ کان سواءِ. هي بوٽ اسٽريپ جي فرسٽ ڪلاس API آهي ۽ پلگ ان استعمال ڪرڻ وقت توهان جو پهريون خيال هجڻ گهرجي.
اهو چيو ته، ڪجهه حالتن ۾ اهو ضروري آهي ته هن ڪارڪردگي کي بند ڪرڻ لاء. تنهن ڪري، اسان پڻ مهيا ڪندا آهيون ڊيٽا جي خاصيت API کي غير فعال ڪرڻ جي صلاحيت سان سڀني واقعن کي غير پابند ڪندي دستاويز جي نالي جي جاءِ تي data-api
. هي هن طرح نظر اچي ٿو:
متبادل طور تي، هڪ مخصوص پلگ ان کي نشانو بڻائڻ لاءِ، صرف پلگ ان جو نالو شامل ڪريو نالي جي جاءِ سان گڏ ڊيٽا-api نالي جي جڳهه هن طرح:
ساڳئي عنصر تي ڪيترن ئي پلگ ان مان ڊيٽا خاصيتون استعمال نه ڪريو. مثال طور، هڪ بٽڻ ٻنهي وٽ ٽول ٽائپ نه آهي ۽ ماڊل ٽوگل ڪري سگهي ٿو. هن کي مڪمل ڪرڻ لاء، هڪ لفافي عنصر استعمال ڪريو.
اسان اهو پڻ سمجهون ٿا ته توهان کي جاوا اسڪرپٽ API ذريعي خالص طور تي سڀئي بوٽ اسٽريپ پلگ ان استعمال ڪرڻ جي قابل هوندا. سڀ عوامي APIs واحد، زنجير وارا طريقا آهن، ۽ جمع ڪيل ڪم کي واپس آڻيندا آهن.
سڀني طريقن کي اختياري اختياري اعتراض کي قبول ڪرڻ گهرجي، هڪ اسٽرنگ جيڪو هڪ خاص طريقي کي نشانو بڻائي ٿو، يا ڪجھ به نه (جيڪو ڊفالٽ رويي سان هڪ پلگ ان شروع ڪري ٿو):
هر پلگ ان پنهنجي خام تعمير ڪندڙ کي Constructor
ملڪيت تي ظاهر ڪري ٿو: $.fn.popover.Constructor
. جيڪڏهن توهان چاهيو ٿا ته هڪ خاص پلگ ان مثال حاصل ڪريو، ان کي ٻيهر حاصل ڪريو هڪ عنصر مان: $('[rel="popover"]').data('popover')
.
توھان پلگ ان لاءِ ڊفالٽ سيٽنگ تبديل ڪري سگھو ٿا پلگ ان جي Constructor.DEFAULTS
اعتراض کي تبديل ڪندي:
ڪڏهن ڪڏهن ٻين UI فريم ورڪ سان بوٽ اسٽريپ پلگ ان استعمال ڪرڻ ضروري آهي. انهن حالتن ۾، نالي جي جاء تي ٽڪراء ڪڏهن ڪڏهن ٿي سگهي ٿي. جيڪڏهن ائين ٿئي ٿو، ته توهان .noConflict
پلگ ان تي ڪال ڪري سگهو ٿا جنهن جي قيمت توهان واپس ڪرڻ چاهيو ٿا.
بوٽ اسٽراپ اڪثر پلگ ان جي منفرد ڪارناما لاءِ ڪسٽم واقعا مهيا ڪري ٿو. عام طور تي، اهي هڪ لاتعداد ۽ ماضي ۾ حصو وٺندڙ فارم ۾ ايندا آهن - جتي infinitive (ex. show
) ڪنهن واقعي جي شروعات تي شروع ڪيو ويندو آهي، ۽ ان جو ماضي حصو وٺندڙ فارم (مثال طور shown
) هڪ عمل جي مڪمل ٿيڻ تي شروع ڪيو ويندو آهي.
3.0.0 جي طور تي، سڀئي بوٽ اسٽريپ واقعا نالا رکيل آهن.
سڀ لاتعداد واقعا preventDefault
ڪارڪردگي مهيا ڪن ٿا. هي هڪ عمل جي عمل کي شروع ڪرڻ کان پهريان ان کي روڪڻ جي صلاحيت ڏئي ٿو.
VERSION
بوٽ اسٽريپ جي jQuery پلگ ان مان هر هڪ جو نسخو پلگ ان جي تعمير ڪندڙ جي ملڪيت ذريعي رسائي سگهجي ٿو . مثال طور، ٽول ٽائپ پلگ ان لاءِ:
بوٽ اسٽريپ جا پلگ ان واپس نه ٿا اچن خاص طور تي جڏهن جاوا اسڪرپٽ غير فعال آهي. جيڪڏهن توهان هن معاملي ۾ استعمال ڪندڙ جي تجربي جو خيال رکو ٿا، استعمال ڪريو <noscript>
صورتحال کي بيان ڪرڻ لاءِ (۽ ڪيئن جاوا اسڪرپٽ کي ٻيهر فعال ڪجي) توهان جي استعمال ڪندڙن کي، ۽/يا پنهنجا پنهنجا ڪسٽم فال بيڪ شامل ڪريو.
بوٽ اسٽراپ رسمي طور تي ٽئين پارٽي جاوا اسڪرپٽ لائبريرين کي سپورٽ نٿو ڪري جهڙوڪ پروٽوٽائپ يا jQuery UI. واقعن جي باوجود .noConflict
۽ نالن جي جاءِ تي، ٿي سگهي ٿي مطابقت جا مسئلا جيڪي توهان کي پاڻ تي حل ڪرڻ گهرجن.
سادي منتقلي اثرات لاء، transition.js
هڪ ڀيرو ٻين JS فائلن سان گڏ شامل ڪريو. جيڪڏھن توھان استعمال ڪري رھيا آھيو مرتب ڪيل (يا minified) bootstrap.js
، ھن کي شامل ڪرڻ جي ڪا ضرورت ناھي- اھو اڳ ۾ ئي موجود آھي.
Transition.js هڪ بنيادي مددگار آهي transitionEnd
واقعن لاءِ ۽ گڏوگڏ هڪ CSS منتقلي ايموليٽر. اهو استعمال ڪيو ويو آهي ٻين پلگ انز کي چيڪ ڪرڻ لاءِ CSS منتقلي جي مدد لاءِ ۽ پھانسي واري منتقلي کي پڪڙڻ لاءِ.
هيٺ ڏنل JavaScript snippet استعمال ڪندي ٽرانسشنز کي عالمي سطح تي غير فعال ڪري سگھجي ٿو، جيڪو لازمي طور تي اچڻو پوندو transition.js
(يا bootstrap.js
، bootstrap.min.js
جيئن ته صورت هجي) لوڊ ٿيڻ کان پوءِ:
ماڊلز سٿري ٿيل آهن، پر لچڪدار، ڊائلاگ کي گهٽ ۾ گهٽ گهربل ڪارڪردگي ۽ سمارٽ ڊفالٽ سان پرامپ ڪري ٿو.
پڪ ڪريو ته هڪ موڊل نه کوليو جڏهن ته ٻيو اڃا تائين نظر اچي رهيو آهي. هڪ وقت ۾ هڪ کان وڌيڪ ماڊل ڏيکارڻ لاءِ ڪسٽم ڪوڊ جي ضرورت آهي.
هميشه ڪوشش ڪريو ماڊل جي HTML ڪوڊ کي پنهنجي دستاويز ۾ اعليٰ سطحي پوزيشن ۾ رکڻ جي لاءِ ٻين حصن کان بچڻ لاءِ جيڪو موڊل جي ظاهر ۽/يا ڪارڪردگي کي متاثر ڪري ٿو.
موبائيل ڊوائيسز تي ماڊل استعمال ڪرڻ جي حوالي سان ڪجهه احتياط آهن. تفصيل لاءِ اسان جا برائوزر سپورٽ ڊاڪس ڏسو.
ان جي ڪري HTML5 ان جي سيمينٽڪس کي ڪيئن بيان ڪري ٿو، autofocus
HTML وصف بوٽ اسٽريپ ماڊلز ۾ ڪو اثر ناهي. ساڳئي اثر حاصل ڪرڻ لاء، ڪجهه ڪسٽم جاوا اسڪرپٽ استعمال ڪريو:
هيڊر، جسم، ۽ فوٽر ۾ ڪارناما جي سيٽ سان ٺهيل ماڊل.
ھيٺ ڏنل بٽڻ تي ڪلڪ ڪري JavaScript ذريعي ماڊل کي ٽوگل ڪريو. اھو ھيٺ لھي ويندو ۽ صفحو جي چوٽيءَ کان اندر ٿي ويندو.
شامل ڪرڻ جي پڪ ڪريو role="dialog"
۽ aria-labelledby="..."
، ماڊل عنوان جي حوالي سان، ڏانهن .modal
، ۽ پاڻ role="document"
ڏانهن ..modal-dialog
اضافي طور تي، توهان پنهنجي ماڊل ڊائلاگ جي وضاحت ڏئي سگهو ٿا aria-describedby
on سان .modal
.
يوٽيوب وڊيوز کي ماڊلز ۾ شامل ڪرڻ لاءِ اضافي جاوا اسڪرپٽ جي ضرورت آھي نه بوٽ اسٽريپ ۾ خود بخود پلے بیک ۽ وڌيڪ بند ڪرڻ لاءِ. وڌيڪ معلومات لاءِ هي مددگار اسٽيڪ اوور فلو پوسٽ ڏسو .
ماڊلز وٽ ٻه اختياري سائيز آهن، جيڪي ميڊيفائير ڪلاسز ذريعي دستياب آهن .modal-dialog
.
ماڊلز لاءِ جيڪي ڏسڻ لاءِ منجهيل ٿيڻ بجاءِ ظاهر ٿين ٿا، .fade
ڪلاس کي پنهنجي ماڊل مارڪ اپ مان هٽايو.
بوٽ اسٽريپ گرڊ سسٽم جو فائدو وٺڻ لاءِ موڊل اندر، صرف نيسٽ .row
s اندر اندر .modal-body
۽ پوءِ عام گرڊ سسٽم ڪلاس استعمال ڪريو.
ڇا توھان وٽ بٽڻن جو ھڪڙو گروپ آھي جيڪي سڀ ھڪڙي ئي ماڊل کي ٽاريندا آھن، صرف ٿوري مختلف مواد سان؟ استعمال ڪريو event.relatedTarget
۽ HTML data-*
خاصيتون (ممڪن طور تي jQuery ذريعي ) ماڊل جي مواد کي مختلف ڪرڻ لاءِ ان تي منحصر آهي ته ڪهڙي بٽڻ تي ڪلڪ ڪيو ويو. ڏسو موڊل واقعن جا دستاويز تفصيل لاءِ relatedTarget
،
موڊل پلگ ان توهان جي پوشیدہ مواد کي مطالبن تي، ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي ٽوگل ڪري ٿو. اهو پڻ شامل .modal-open
ڪري <body>
ٿو ڊفالٽ اسڪرولنگ رويي کي اوور رائڊ ڪرڻ لاءِ ۽ ٺاهي ٿو .modal-backdrop
هڪ ڪلڪ ايريا مهيا ڪرڻ لاءِ ڏيکاريل ماڊل کي رد ڪرڻ لاءِ جڏهن ماڊل کان ٻاهر ڪلڪ ڪيو وڃي.
جاوا اسڪرپٽ لکڻ کان سواءِ موڊل چالو ڪريو. هڪ ڪنٽرولر عنصر تي سيٽ ڪريو data-toggle="modal"
، هڪ بٽڻ وانگر، هڪ سان گڏ data-target="#foo"
يا href="#foo"
هڪ مخصوص ماڊل کي ٽارگيٽ ڪرڻ لاء.
myModal
JavaScript جي ھڪڙي لائن سان id سان ھڪڙو ماڊل ڪال ڪريو :
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-backdrop=""
.
نالو | قسم | ڊفالٽ | وضاحت |
---|---|---|---|
پس منظر | boolean يا تار'static' |
سچو | هڪ ماڊل پس منظر عنصر شامل آهي. متبادل طور تي، static ھڪڙي پس منظر لاءِ وضاحت ڪريو جيڪو ڪلڪ ڪرڻ تي ماڊل کي بند نٿو ڪري. |
ڪي بورڊ | بولين | سچو | موڊل کي بند ڪري ٿو جڏهن فرار ڪيچ کي دٻايو ويندو آهي |
ڏيکارڻ | بولين | سچو | ماڊل ڏيکاري ٿو جڏهن شروعات ڪئي وئي. |
ريموٽ | رستو | ڪوڙو | ھي اختيار ختم ڪيو ويو آھي v3.3.0 کان ۽ ختم ڪيو ويو آھي v4 ۾. اسان ان جي بدران ڪلائنٽ سائڊ ٽيمپليٽنگ يا ڊيٽا بائنڊنگ فريم ورڪ استعمال ڪرڻ جي صلاح ڏيو ٿا، يا jQuery.load پاڻ کي ڪال ڪريو. جيڪڏهن هڪ ريموٽ URL مهيا ڪيو ويو آهي، مواد هڪ ڀيرو jQuery جي طريقي سان لوڊ ڪيو ويندو ۽ div ۾ داخل ڪيو ويندو. جيڪڏھن توھان استعمال ڪري رھيا آھيو data-api، توھان متبادل طور استعمال ڪري سگھوٿا وصف ريموٽ ماخذ کي بيان ڪرڻ لاءِ. ان جو هڪ مثال هيٺ ڏجي ٿو: |
.modal(options)
توهان جي مواد کي ماڊل طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object
.
.modal('toggle')
دستي طور تي ماڊل کي ٽوگل ڪري ٿو. موڊل اصل ۾ ڏيکاريل يا لڪايو ويو آهي (يعني واقعي کان اڳ يا واقع ٿيڻ کان اڳ) ڪالر ڏانهن واپسي .shown.bs.modal
hidden.bs.modal
.modal('show')
دستي طور تي هڪ ماڊل کوليو. موڊل اصل ۾ ڏيکاريو ويو کان اڳ ڪالر ڏانهن واپسي (يعني shown.bs.modal
واقعي ٿيڻ کان اڳ).
.modal('hide')
دستي طور تي هڪ ماڊل لڪائي ٿو. ڪالر ڏانهن موٽڻ کان اڳ ماڊل اصل ۾ لڪايو ويو آهي (يعني hidden.bs.modal
واقعي ٿيڻ کان اڳ).
.modal('handleUpdate')
ماڊل جي پوزيشن کي ترتيب ڏئي ٿو ته هڪ اسڪرول بار کي منهن ڏيڻ جي صورت ۾ هڪ ظاهر ٿيڻ جي صورت ۾، جيڪو موڊل جمپ کي کاٻي طرف ڪندو.
صرف ضرورت آهي جڏهن ماڊل جي اوچائي تبديل ٿي وڃي جڏهن اهو کليل آهي.
بوٽ اسٽريپ جو ماڊل ڪلاس ڪجھ واقعن کي ظاهر ڪري ٿو ماڊل ڪارڪردگي ۾ ڇڪڻ لاءِ.
سڀئي ماڊل واقعا پاڻ موڊل تي فائر ڪيا ويا آهن (يعني تي <div class="modal">
).
واقعي جو قسم | وصف |
---|---|
show.bs.modal | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن show مثال جو طريقو سڏيو ويندو آهي. جيڪڏهن هڪ ڪلڪ جي ڪري، ڪلڪ ٿيل عنصر relatedTarget واقعي جي ملڪيت جي طور تي موجود آهي. |
ڏيکاريو ويو.bs.modal | هي واقعو فائر ڪيو ويو آهي جڏهن ماڊل استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). جيڪڏهن هڪ ڪلڪ جي ڪري، ڪلڪ ٿيل عنصر relatedTarget واقعي جي ملڪيت جي طور تي موجود آهي. |
hide.bs.modal | اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hide مثال جو طريقو سڏيو ويو آهي. |
hidden.bs.modal | اهو واقعو فائر ڪيو ويندو آهي جڏهن ماڊل ختم ٿي چڪو آهي صارف کان لڪيل آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
لوڊ ٿيل.bs.modal | اهو واقعو فائر ڪيو ويو آهي جڏهن ماڊل remote اختيار کي استعمال ڪندي مواد لوڊ ڪيو آهي. |
شامل ڪريو ڊراپ ڊائون مينيو تقريبن ڪنهن به شيءِ ۾ هن سادي پلگ ان سان، بشمول نيوبار، ٽيب، ۽ گوليون.
ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي، ڊراپ ڊائون پلگ ان پوشیدہ مواد (ڊراپ ڊائون مينيو) کي ٽوگل ڪري .open
ڪلاس کي ٽوگل ڪندي والدين جي فهرست جي شين تي.
موبائيل ڊيوائسز تي، ڊراپ ڊائون کولڻ .dropdown-backdrop
سان ڊاپ ڊائون مينيو کي بند ڪرڻ لاءِ ٽيپ ايريا شامل ڪري ٿو جڏهن مينيو کان ٻاهر ٽيپ ڪريو، مناسب iOS سپورٽ جي گهرج. ان جو مطلب اهو آهي ته هڪ کليل ڊراپ ڊائون مينيو مان هڪ مختلف ڊراپ ڊائون مينيو ڏانهن سوئچ ڪرڻ لاءِ موبائل تي اضافي ٽيپ جي ضرورت آهي.
نوٽ: data-toggle="dropdown"
وصف هڪ ايپليڪيشن سطح تي ڊراپ ڊائون مينيو کي بند ڪرڻ لاءِ انحصار ڪيو ويو آهي، تنهنڪري اهو هميشه استعمال ڪرڻ سٺو خيال آهي.
data-toggle="dropdown"
ڊراپ ڊائون کي ٽوگل ڪرڻ لاءِ لنڪ يا بٽڻ شامل ڪريو .
URLs کي ڳنڍڻ واري بٽڻن سان برقرار رکڻ لاءِ، data-target
صفت جي بدران استعمال ڪريو href="#"
.
جاوا اسڪرپٽ ذريعي ڊراپ ڊائونز کي ڪال ڪريو:
data-toggle="dropdown"
اڃا به گهربلان کان سواءِ ته توهان پنهنجي ڊراپ ڊائون کي JavaScript ذريعي ڪال ڪريو يا ان جي بدران data-api استعمال ڪريو، data-toggle="dropdown"
هميشه لاءِ ضروري آهي ته ڊراپ ڊائون جي ٽرگر عنصر تي موجود هجي.
ڪو به
$().dropdown('toggle')
ڏنل نيوبار يا ٽيب ٿيل نيويگيشن جي ڊراپ ڊائون مينيو کي ٽوگل ڪري ٿو.
سڀئي ڊراپ ڊائون واقعا .dropdown-menu
'پيرنٽي عنصر تي فائر ڪيا ويا آهن.
سڀني ڊراپ ڊائون واقعن ۾ ھڪڙي relatedTarget
ملڪيت آھي، جنھن جي قيمت ٽوگلنگ اينڪر عنصر آھي.
واقعي جو قسم | وصف |
---|---|
show.bs.dropdown | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن شو مثال جو طريقو سڏيو ويندو آهي. |
ڏيکاريو ويو.bs.ڊراپ ڊائون | هي واقعو فائر ڪيو ويو آهي جڏهن ڊراپ ڊائون صارف کي ڏيکاريو ويو آهي (سي ايس ايس جي منتقلي جو انتظار ڪندو، مڪمل ٿيڻ لاء). |
hide.bs.dropdown | اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن لڪائڻ جو طريقو سڏيو ويندو آهي. |
hidden.bs.dropdown | هي واقعو فائر ڪيو ويندو آهي جڏهن ڊراپ ڊائون ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي جو انتظار ڪندو، مڪمل ٿيڻ لاء). |
ScrollSpy پلگ ان اسڪرول پوزيشن جي بنياد تي نيوي هدفن کي خودڪار طور تي اپڊيٽ ڪرڻ لاءِ آهي. نيوبار جي هيٺان علائقي کي اسڪرول ڪريو ۽ فعال طبقي جي تبديلي کي ڏسو. ڊراپ ڊائون ذيلي شيون پڻ نمايان ٿي وينديون.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ان کان اڳ جو اهي وڪرو ڪيا ويا qui. Tumblr فارم کان ٽيبل سائيڪل جا حق جيڪي به. Anim keffiyeh Carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui توهان شايد انهن جي باري ۾ نه ٻڌو آهي et cardigan Trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat چار loko nisi، ea helvetica nulla carles. Tattooed cosby sweater Food Truck, mcsweeney's quis non freegan vinyl. لو-فائي ويس اينڊرسن +1 سرٽوريل. ڪارليس غير جمالياتي مشق quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. فاپ ڪرافٽ بيئر ڊيزرنٽ اسڪيٽ بورڊ اي. Lomo bicycle right adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. هاء زندگي id vinyl، echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. DIY minim ميسينجر بيگ کي ترتيب ڏيو. Cred ex in, sustainable delectus consectetur fanny pack iphone.
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.
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.
ڪيٽار ٽوئي بلاگ، ڪلپا ميسينجر بيگ مارفا جيڪو به ڊيليڪٽس فوڊ ٽرڪ. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats توهان شايد انهن جي باري ۾ نه ٻڌو هوندو جنهن جي نتيجي ۾ هودي گلوٽين فري لو فائي فيپ aliquip. Labore elit placeat before they sell out, Terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan ڪرافٽ بيئر سيٽن تيار ٿيل ويليٽ. VHS چيمبري ليبرس عارضي وينيم. Anim mollit minim commodo ullamco thundercats.
نيوبار لنڪس کي حل ڪرڻ جي قابل id هدفن جو هجڻ لازمي آهي. مثال طور، هڪ <a href="#home">home</a>
لازمي طور تي DOM ۾ ڪنهن شيءِ سان ملندڙ جلندڙ آهي جهڙوڪ <div id="home"></div>
.
:visible
ٽارگيٽ عنصرن کي نظرانداز ڪيو ويوھدف وارا عنصر جيڪي :visible
jQuery جي مطابق نه آھن نظرانداز ڪيا ويندا ۽ انھن سان لاڳاپيل نيوي شيون ڪڏھن به نمايان نه ٿينديون.
ڪابه معاملي تي عمل درآمد جو طريقو، scrollspy position: relative;
ان عنصر جي استعمال جي ضرورت آهي جنهن تي توهان جاسوسي ڪري رهيا آهيو. اڪثر ڪيسن ۾ هي آهي <body>
. جڏهن کان سواءِ ٻين عناصر تي اسڪرول اسپائي ڪري <body>
، پڪ ڪريو ته هڪ height
سيٽ ۽ overflow-y: scroll;
لاڳو ڪيو وڃي.
آساني سان شامل ڪرڻ لاءِ scrollspy رويي کي پنھنجي ٽاپبار نيويگيشن ۾، data-spy="scroll"
ان عنصر ۾ شامل ڪريو جنھن تي توھان جاسوسي ڪرڻ چاھيو ٿا (اڪثر عام طور تي اھو ھوندو <body>
). پوءِ ڪنهن به بوٽ اسٽريپ جزو data-target
جي والدين عنصر جي ID يا ڪلاس سان وصف شامل ڪريو..nav
توهان جي سي ايس ايس ۾ شامل ڪرڻ کان پوء position: relative;
، ڪال ڪريو scrollspy ذريعي JavaScript:
.scrollspy('refresh')
جڏهن ڊوم مان عناصر کي شامل ڪرڻ يا ختم ڪرڻ سان گڏ scrollspy استعمال ڪندي، توهان کي ريفريش طريقي کي ڪال ڪرڻ جي ضرورت پوندي جيئن ته:
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-offset=""
.
نالو | قسم | ڊفالٽ | وضاحت |
---|---|---|---|
بند ڪرڻ | نمبر | 10 | اسڪرول جي پوزيشن کي ڳڻڻ دوران مٿي کان آفسيٽ ڪرڻ لاءِ پکسلز. |
واقعي جو قسم | وصف |
---|---|
activate.bs.scrollspy | هي واقعو باهه لڳندو آهي جڏهن به هڪ نئين شيءِ اسڪرول اسپي پاران چالو ٿئي ٿي. |
شامل ڪريو تڪڙو، متحرڪ ٽيب ڪارڪردگي کي مقامي مواد جي پين ذريعي منتقل ڪرڻ لاء، جيتوڻيڪ ڊراپ ڊائون مينيو ذريعي. Nested tabs معاون نه آهن.
Raw denim توهان شايد انهن بابت نه ٻڌو آهي جين شارٽس آسٽن. Nesciunt tofu stumptown aliqua، retro synth master cleanse. Mustache cliche tempor، Williamsburg Carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi، qui irure Terry richardson ex squid. ايليڪيپ جڳه تي سالويا سيلم آئي فون. Seitan aliquip quis cardigan آمريڪي لباس، butcher 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
هي پلگ ان ٽيب ٿيل علائقن کي شامل ڪرڻ لاءِ ٽيب ٿيل نيويگيشن جزو کي وڌايو.
جاوا اسڪرپٽ ذريعي ٽيبلبل ٽيب کي فعال ڪريو (هر ٽيب کي انفرادي طور تي چالو ڪرڻ جي ضرورت آهي):
توھان ڪيترن ئي طريقن سان انفرادي ٽيب کي چالو ڪري سگھو ٿا:
توھان چالو ڪري سگھو ٿا ٽئب يا پِل نيويگيشن بغير ڪنھن جاوا اسڪرپٽ لکڻ کان سواءِ صرف بيان ڪندي data-toggle="tab"
يا data-toggle="pill"
ھڪڙي عنصر تي. nav
ٽيب ۾ ۽ nav-tabs
ڪلاس شامل ڪرڻ ul
سان بوٽ اسٽريپ ٽئب اسٽائل لاڳو ٿيندو ، جڏهن ته nav
۽ nav-pills
ڪلاس شامل ڪرڻ سان پلي اسٽائلنگ لاڳو ٿيندي .
ٽيب کي ڦهلائڻ لاء، .fade
هر هڪ ۾ شامل ڪريو .tab-pane
. پهرين ٽئب پين کي پڻ لازمي آهي .in
ته شروعاتي مواد کي ڏسڻ ۾ اچي.
$().tab
هڪ ٽيب عنصر ۽ مواد ڪنٽينر کي چالو ڪري ٿو. ٽئب ۾ هجڻ گهرجي يا ته هڪ data-target
يا هڪ href
ٽارگيٽ ڪنٽينر نوڊ DOM ۾. مٿين مثالن ۾، ٽيب خاصيتون آهن <a>
s سان data-toggle="tab"
.
.tab('show')
ڏنل ٽيب چونڊيو ۽ ان سان لاڳاپيل مواد ڏيکاري ٿو. ٻيو ڪو به ٽيب جيڪو اڳ ۾ چونڊيو ويو هو غير منتخب ٿيل آهي ۽ ان سان لاڳاپيل مواد لڪيل آهي. ڪالر ڏانهن واپسي ان کان اڳ جو ٽيب پين اصل ۾ ڏيکاريو ويو آهي (يعني shown.bs.tab
واقعي ٿيڻ کان اڳ).
جڏهن هڪ نئين ٽيب ڏيکاريندي، واقعا هيٺ ڏنل ترتيب ۾ باهه لڳندا آهن:
hide.bs.tab
(موجوده فعال ٽيب تي)show.bs.tab
(ڏسڻ واري ٽيب تي)hidden.bs.tab
(اڳوڻي فعال ٽيب تي، ساڳيو ئي hide.bs.tab
واقعي جي لاءِ)shown.bs.tab
(نئين-فعال صرف ڏيکاريل ٽيب تي، ساڳي ئي show.bs.tab
واقعي جي لاءِ)جيڪڏهن ڪو به ٽيب اڳ ۾ ئي فعال نه هو، ته پوءِ hide.bs.tab
۽ hidden.bs.tab
واقعا فائر نه ڪيا ويندا.
واقعي جو قسم | وصف |
---|---|
ڏيکاريو.bs.tab | هي واقعو ٽيب شو تي فائر ڪري ٿو، پر ان کان اڳ جو نئون ٽيب ڏيکاريو ويو آهي. استعمال ڪريو event.target ۽ event.relatedTarget ھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي). |
ڏيکاريو ويو.bs.tab | هي واقعو ٽيب شو تي فائر ٿئي ٿو جڏهن هڪ ٽيب ڏيکاريو ويو آهي. استعمال ڪريو event.target ۽ event.relatedTarget ھدف ڪرڻ لاءِ فعال ٽيب ۽ پوئين فعال ٽيب (جيڪڏھن موجود ھجي). |
hide.bs.tab | هي واقعو فائر ٿئي ٿو جڏهن هڪ نئين ٽيب کي ڏيکاريو وڃي (۽ اهڙيء طرح پوئين فعال ٽيب کي لڪايو وڃي). استعمال ڪريو event.target ۽ event.relatedTarget ھدف ڪرڻ لاءِ ھدف ڪرڻ لاءِ موجوده فعال ٽيب ۽ نئين جلد فعال ٿيڻ واري ٽيب، ترتيب سان. |
hidden.bs.tab | هي واقعو نئين ٽيب جي ظاهر ٿيڻ کان پوءِ فائر ٿئي ٿو (۽ اهڙيءَ طرح پوئين فعال ٽيب لڪيل آهي). استعمال ڪريو event.target ۽ event.relatedTarget ھدف ڪرڻ لاء اڳئين فعال ٽيب ۽ نئين فعال ٽيب، ترتيب سان. |
جيسن فريم پاران لکيل شاندار jQuery.tipsy پلگ ان کان متاثر ٿي؛ ٽول ٽائپس هڪ اپڊيٽ ورجن آهي، جيڪو تصويرن تي ڀروسو نٿو ڪري، اينيميشنز لاءِ CSS3 استعمال ڪريو، ۽ مقامي ٽائيٽل اسٽوريج لاءِ ڊيٽا-صفات.
زيرو ڊگھائي عنوانن سان ٽول ٽائپس ڪڏھن به نه ڏيکاريا ويندا آھن.
ٽول ٽائپس ڏسڻ لاءِ هيٺ ڏنل لنڪ تي هور ڪريو:
تنگ پتلون ايندڙ ليول ڪيفيه توهان شايد انهن بابت نه ٻڌو هوندو. فوٽو بوٿ بيئر خام ڊينم ليٽرپريس ويگن ميسينجر بيگ اسٽمپ ٽائون. فارم-ٽو-ٽيبل سيٽن، ميڪسويني جي فڪسي پائيدار quinoa 8-bit آمريڪن ڪپڙا هڪ ٽيري رچرڊسن ونائل چيمبري آهي. Beard stumptown, cardigans banh mi lomo Thundercats. ٽوفو بايو ڊيزل وليمسبرگ مارفا، چار لوڪو ميڪسويني جي صاف ويگن چيمبري. هڪ واقعي لوهي ڪاريگر جيڪو به ڪيٽار، سينسٽر فارم کان ٽيبل بئنڪسي آسٽن ٽوئيٽر هينڊل فريگن ڪريڊ را ڊينم سنگل اصل ڪافي وائرل.
چار آپشن موجود آھن: مٿي، ساڄي، ھيٺ، ۽ کاٻي سان ترتيب ڏنل.
ڪارڪردگي جي سببن لاء، ٽول ٽائپ ۽ پاپ اوور ڊيٽا-ايپس آپٽ-ان آهن، مطلب ته توهان کي انهن کي پنهنجو پاڻ شروع ڪرڻ گهرجي .
ھڪڙي صفحي تي سڀني ٽول ٽائپس کي شروع ڪرڻ جو ھڪڙو طريقو انھن کي انھن جي data-toggle
خاصيت سان چونڊيو ويندو:
ٽول ٽائپ پلگ ان مطالبن تي مواد ۽ مارڪ اپ ٺاهي ٿو، ۽ ڊفالٽ طور تي ٽول ٽائپس کي انهن جي محرڪ عنصر کان پوءِ رکي ٿو.
جاوا اسڪرپٽ ذريعي ٽول ٽائپ کي ٽوڙيو:
ٽول ٽائپ لاءِ گهربل مارڪ اپ صرف هڪ data
خاصيت آهي ۽ title
HTML عنصر تي توهان چاهيو ٿا ته هڪ ٽول ٽائپ. ٽول ٽائپ جو ٺاهيل مارڪ اپ بلڪل سادو آهي، جيتوڻيڪ ان کي پوزيشن جي ضرورت آهي (ڊفالٽ طور، top
پلگ ان طرفان مقرر ڪيل).
ڪڏهن ڪڏهن توهان هڪ ٽول ٽپ شامل ڪرڻ چاهيو ٿا هڪ هائپر لنڪ تي جيڪو ڪيترن ئي لائينن کي لپي ٿو. ٽول ٽائپ پلگ ان جو ڊفالٽ رويو اهو آهي ته ان کي افقي ۽ عمودي طور تي مرڪز ۾. white-space: nowrap;
ھن کان بچڻ لاء پنھنجي لنگر ۾ شامل ڪريو .
.btn-group
جڏهن a يا an .input-group
، يا ٽيبل سان لاڳاپيل عناصر ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) جي اندر عناصر تي ٽول ٽائپس استعمال ڪندي <tfoot>
، توهان کي اختيار بيان ڪرڻو پوندو container: 'body'
(هيٺ ڏنل دستاويز) ناپسنديده ضمني اثرات کان بچڻ لاءِ (جهڙوڪ عنصر وسيع ٿيڻ ۽/ يا ان جي گول ڪنڊن کي وڃائڻ جڏهن ٽول ٽائپ شروع ٿئي ٿي).
ڪيبورڊ سان نيويگيٽ ڪرڻ وارن صارفين لاءِ، ۽ خاص طور تي مددگار ٽيڪنالاجيز جي استعمال ڪندڙن لاءِ، توھان کي صرف ڪيبورڊ تي ڌيان ڏيڻ واري عنصرن ۾ ٽول ٽِپس شامل ڪرڻ گھرجي، جھڙوڪ لنڪس، فارم ڪنٽرولز، يا ڪنھن به صوابديدي عنصر سان tabindex="0"
.
disabled
هڪ يا عنصر ۾ ٽول ٽائپ شامل ڪرڻ لاءِ .disabled
، عنصر کي a جي اندر رکو ۽ ان جي بدران <div>
ٽول ٽائپ کي لاڳو ڪريو .<div>
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-animation=""
.
نالو | قسم | ڊفالٽ | وصف |
---|---|---|---|
اينيميشن | بولين | سچو | ٽول ٽائپ تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو |
ڪنٽينر | تار | ڪوڙو | ڪوڙو | ٽول ٽائپ کي مخصوص عنصر ۾ شامل ڪري ٿو. مثال: |
دير ڪرڻ | نمبر | اعتراض | 0 | ٽول ٽائپ (ms) ڏيکارڻ ۽ لڪائڻ ۾ دير - دستي ٽرگر جي قسم تي لاڳو نٿو ٿئي جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لاڳو ٿئي ٿي ٻنهي کي لڪائڻ / ڏيکاريو اعتراض جي جوڙجڪ آهي: |
html | بولين | ڪوڙو | ٽول ٽائپ ۾ HTML داخل ڪريو. جيڪڏهن غلط آهي، jQuery جو text طريقو استعمال ڪيو ويندو مواد کي DOM ۾ داخل ڪرڻ لاء. متن استعمال ڪريو جيڪڏھن توھان پريشان آھيو XSS حملن بابت. |
لڳائڻ | تار | فنڪشن | 'مٿي' | ٽول ٽائيپ جي پوزيشن ڪيئن ڪجي - مٿي | هيٺان | کاٻي | حق | خودڪار جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي جڳهه کي طئي ڪرڻ لاء، ان کي سڏيو ويندو آهي ٽول ٽائپ DOM نوڊ ان جي پهرين دليل جي طور تي ۽ محرڪ عنصر DOM نوڊ ان جي سيڪنڊ طور. |
چونڊيندڙ | تار | ڪوڙو | جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ٽول ٽائپ شيون مقرر ڪيل هدفن ڏانهن موڪليا ويندا. عملي طور تي، اهو استعمال ڪيو ويندو آهي متحرڪ HTML مواد کي فعال ڪرڻ لاءِ ٽول ٽائپس شامل ڪرڻ لاءِ. هي ڏسو ۽ هڪ معلوماتي مثال . |
ٽيمپليٽ | تار | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
ٽول ٽائپ ٺاهڻ وقت استعمال ڪرڻ لاءِ بنيادي HTML. ٽول ٽائپ کي انجيڪشن
ٻاهرين لفافي عنصر کي |
عنوان | تار | فنڪشن | '' | ڊفالٽ عنوان جي قيمت جيڪڏهن جيڪڏهن ڪو فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي |
محرڪ | تار | 'هور فوڪس' | ٽول ٽائپ ڪيئن شروع ٿئي ٿو - ڪلڪ ڪريو | هور | ڌيان | دستور. توھان ڪيترائي محرڪ پاس ڪري سگھو ٿا؛ انھن کي ھڪڙي جڳھ سان الڳ ڪريو. manual ڪنهن ٻئي ٽرڪ سان گڏ نه ٿو ڪري سگھجي. |
ڏيک بندر | تار | اعتراض | فنڪشن | { چونڊيندڙ: 'جسم'، پيڊنگ: 0 } | هن عنصر جي حدن اندر ٽول ٽائپ رکي ٿو. مثال: جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو آهي محرڪ عنصر DOM نوڊ ان جي واحد دليل طور. |
انفرادي ٽول ٽائپس جا اختيار متبادل طور تي بيان ڪري سگھجن ٿا ڊيٽا خاصيتن جي استعمال ذريعي، جيئن مٿي بيان ڪيو ويو آهي.
$().tooltip(options)
هڪ ٽول ٽائپ هينڊلر کي هڪ عنصر گڏ ڪرڻ سان ڳنڍي ٿو.
.tooltip('show')
هڪ عنصر جي ٽول ٽائپ کي ظاهر ڪري ٿو. ٽول ٽائپ اصل ۾ ڏيکاريو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . shown.bs.tooltip
اهو سمجهيو ويندو آهي "دستي" ٽول ٽائپ جي ٽرگرنگ. زيرو ڊگھائي عنوانن سان ٽول ٽائپس ڪڏھن به نه ڏيکاريا ويندا آھن.
.tooltip('hide')
هڪ عنصر جي ٽول ٽائپ کي لڪائيندو آهي. ڪالر ڏانهن واپسي ان کان اڳ جو ٽول ٽائپ اصل ۾ لڪيل هجي (يعني hidden.bs.tooltip
واقعي ٿيڻ کان اڳ). اهو سمجهيو ويندو آهي "دستي" ٽول ٽائپ جي ٽرگرنگ.
.tooltip('toggle')
هڪ عنصر جي ٽول ٽائپ کي ٽوگل ڪري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ٽول ٽائپ اصل ۾ ڏيکاريل يا لڪيل هجي (يعني ان کان اڳ جو واقعو shown.bs.tooltip
يا hidden.bs.tooltip
واقعو ٿئي). اهو سمجهيو ويندو آهي "دستي" ٽول ٽائپ جي ٽرگرنگ.
.tooltip('destroy')
هڪ عنصر جي ٽول ٽائپ کي لڪايو ۽ تباهه ڪري ٿو. ٽول ٽائپس جيڪي استعمال ڪندا آهن وفد (جيڪي اختيار استعمال ڪندي ٺاهيا ويا آهن ) selector
انفرادي طور تي نسلي ٽرگر عناصر تي تباهه نه ٿي سگهن.
واقعي جو قسم | وصف |
---|---|
show.bs.tooltip | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن show مثال جو طريقو سڏيو ويندو آهي. |
ڏيکاريو ويو.bs.tooltip | هي واقعو فائر ڪيو ويو آهي جڏهن ٽول ٽائپ استعمال ڪندڙ کي ڏيکاريو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
hide.bs.tooltip | اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hide مثال جو طريقو سڏيو ويو آهي. |
hidden.bs.tooltip | هي واقعو فائر ڪيو ويندو آهي جڏهن ٽول ٽائپ ختم ٿي وئي آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
inserted.bs.tooltip | هي واقعو ان واقعي کان پوءِ فائر ڪيو ويو آهي show.bs.tooltip جڏهن ٽول ٽائپ ٽيمپليٽ DOM ۾ شامل ڪيو ويو آهي. |
مواد جا ننڍا اوورليز شامل ڪريو، جهڙوڪ iPad تي، ھاؤسنگ ثانوي معلومات لاءِ ڪنھن به عنصر ۾.
Popovers جن جا عنوان ۽ مواد ٻئي صفر ڊگھائي آهن ڪڏهن به ڏيکاريل نه آهن.
Popovers توهان جي بوٽ اسٽريپ جي نسخي ۾ شامل ٿيڻ لاء ٽول ٽائپ پلگ ان جي ضرورت آهي.
ڪارڪردگي جي سببن لاء، ٽول ٽائپ ۽ پاپ اوور ڊيٽا-ايپس آپٽ-ان آهن، مطلب ته توهان کي انهن کي پنهنجو پاڻ شروع ڪرڻ گهرجي .
ھڪڙي صفحي تي سڀني پاپورز کي شروع ڪرڻ جو ھڪڙو طريقو انھن کي انھن جي data-toggle
خاصيت سان چونڊيو ويندو:
.btn-group
جڏهن a يا an .input-group
، يا ٽيبل سان لاڳاپيل عناصر ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) جي اندر عناصر تي پاپ اوور استعمال ڪندي <tfoot>
، توهان کي اختيار بيان ڪرڻو پوندو container: 'body'
(هيٺ ڏنل دستاويز) ناپسنديده ضمني اثرات کان بچڻ لاءِ (جهڙوڪ عنصر وڌندو رهيو ۽/ يا ان جي گول ڪنڊن کي وڃائڻ جڏهن پاپ اوور شروع ٿئي ٿي).
disabled
هڪ يا عنصر ۾ هڪ پاپ اوور شامل ڪرڻ لاءِ .disabled
، عنصر کي a جي اندر رکو ۽ ان جي بدران <div>
پاپ اوور لاڳو ڪريو .<div>
ڪڏهن ڪڏهن توهان هڪ پاپ اوور کي هائپر لنڪ ۾ شامل ڪرڻ چاهيو ٿا جيڪو ڪيترن ئي لائينن کي لپي ٿو. پاپ اوور پلگ ان جو ڊفالٽ رويي ان کي افقي ۽ عمودي طور تي مرڪز ڪرڻ آهي. white-space: nowrap;
ھن کان بچڻ لاء پنھنجي لنگر ۾ شامل ڪريو .
چار آپشن موجود آھن: مٿي، ساڄي، ھيٺ، ۽ کاٻي سان ترتيب ڏنل.
Sed posuere consectetur est at lobortis. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. اينيان اِي ليو ڪوم. Pellentesque ornare sem lacinia quam venenatis vestibulum.
focus
ايندڙ ڪلڪ تي پاپ اوور کي برطرف ڪرڻ لاءِ ٽرگر استعمال ڪريو جيڪو صارف ٺاهي ٿو .
مناسب ڪراس-براؤزر ۽ ڪراس-پليٽ فارم جي رويي لاءِ، توھان کي لازمي طور استعمال ڪرڻ گھرجي <a>
ٽيگ، نه<button>
ٽيگ، ۽ توھان کي پڻ شامل ڪرڻ گھرجي ۽ role="button"
خاصيتون tabindex
.
جاوا اسڪرپٽ ذريعي پاپ اوور کي فعال ڪريو:
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-animation=""
.
نالو | قسم | ڊفالٽ | وصف |
---|---|---|---|
اينيميشن | بولين | سچو | پاپ اوور تي سي ايس ايس فيڊ ٽرانسشن لاڳو ڪريو |
ڪنٽينر | تار | ڪوڙو | ڪوڙو | پوپ اوور کي خاص عنصر ۾ شامل ڪري ٿو. مثال: |
مواد | تار | فنڪشن | '' | ڊفالٽ مواد جي قيمت جيڪڏهن جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي |
دير ڪرڻ | نمبر | اعتراض | 0 | پوپ اوور (ms) ڏيکارڻ ۽ لڪائڻ ۾ دير - دستي ٽرگر جي قسم تي لاڳو نٿو ٿئي جيڪڏهن هڪ نمبر فراهم ڪيو ويو آهي، دير سان لاڳو ٿئي ٿي ٻنهي کي لڪائڻ / ڏيکاريو اعتراض جي جوڙجڪ آهي: |
html | بولين | ڪوڙو | پاپ اوور ۾ HTML داخل ڪريو. جيڪڏهن غلط آهي، jQuery جو text طريقو استعمال ڪيو ويندو مواد کي DOM ۾ داخل ڪرڻ لاء. متن استعمال ڪريو جيڪڏھن توھان پريشان آھيو XSS حملن بابت. |
لڳائڻ | تار | فنڪشن | 'ساڄو' | پوپ اوور جي پوزيشن ڪيئن ڪجي - ٽاپ | هيٺان | کاٻي | حق | خودڪار. جڏهن هڪ فنڪشن استعمال ڪيو ويندو آهي جڳهه جو تعين ڪرڻ لاء، ان کي سڏيو ويندو آهي پاپ اوور DOM نوڊ سان ان جي پهرين دليل طور ۽ محرڪ عنصر DOM نوڊ ان جي سيڪنڊ طور. |
چونڊيندڙ | تار | ڪوڙو | جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، پاپ اوور شين کي مقرر ڪيل هدفن ڏانهن نمائندو ڪيو ويندو. عملي طور تي، اهو استعمال ڪيو ويندو آهي متحرڪ HTML مواد کي فعال ڪرڻ لاءِ پاپ اوور شامل ڪرڻ لاءِ. هي ڏسو ۽ هڪ معلوماتي مثال . |
ٽيمپليٽ | تار | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
پاپ اوور ٺاهڻ وقت استعمال ڪرڻ لاءِ بنيادي HTML. پاپ اوور کي انجيڪشن پاپ اوور کي انجيڪشن
ٻاهرين لفافي عنصر کي |
عنوان | تار | فنڪشن | '' | ڊفالٽ عنوان جي قيمت جيڪڏهن جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو ان جي |
محرڪ | تار | 'ڪلڪ' | پاپ اوور ڪيئن شروع ٿئي ٿو - ڪلڪ ڪريو | هور | ڌيان | دستور. توھان ڪيترائي محرڪ پاس ڪري سگھو ٿا؛ انھن کي ھڪڙي جڳھ سان الڳ ڪريو. manual ڪنهن ٻئي ٽرگر سان گڏ نه ٿو ڪري سگھجي. |
ڏيک بندر | تار | اعتراض | فنڪشن | { چونڊيندڙ: 'جسم'، پيڊنگ: 0 } | هن عنصر جي حدن اندر پاپ اوور رکي ٿو. مثال: جيڪڏهن هڪ فنڪشن ڏنو ويو آهي، ان کي سڏيو ويندو آهي محرڪ عنصر DOM نوڊ ان جي واحد دليل طور. |
انفرادي popovers لاء اختيارن کي متبادل طور تي بيان ڪري سگهجي ٿو ڊيٽا جي خاصيتن جي استعمال ذريعي، جيئن مٿي بيان ڪيو ويو آهي.
$().popover(options)
هڪ عنصر گڏ ڪرڻ لاء popovers جي شروعات.
.popover('show')
هڪ عنصر جي پاپ اوور کي ظاهر ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . shown.bs.popover
اهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽنگ. Popovers جن جا عنوان ۽ مواد ٻئي صفر ڊگھائي آهن ڪڏهن به ڏيکاريل نه آهن.
.popover('hide')
هڪ عنصر جي پاپ اوور کي لڪائيندو آهي. پوپ اوور اصل ۾ لڪايو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . hidden.bs.popover
اهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽنگ.
.popover('toggle')
هڪ عنصر جي پاپ اوور کي ٽوگل ڪري ٿو. پوپ اوور اصل ۾ ڏيکاريو ويو يا لڪايو ويو (يعني واقعي يا واقعو ٿيڻ کان اڳ) ڪالر ڏانهن واپسي . اهو سمجهيو ويندو آهي "دستي" پاپ اوور جي ٽارگيٽنگ.shown.bs.popover
hidden.bs.popover
.popover('destroy')
هڪ عنصر جي پاپ اوور کي لڪائي ۽ تباهه ڪري ٿو. پاپورز جيڪي وفد استعمال ڪندا آهن (جيڪي اختيار استعمال ڪندي ٺاهيا ويا آهن ) selector
انفرادي طور تي نسلي ٽرگر عناصر تي تباهه نه ٿي سگهن.
واقعي جو قسم | وصف |
---|---|
show.bs.popover | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن show مثال جو طريقو سڏيو ويندو آهي. |
ڏيکاريو ويو.bs.popover | اهو واقعو فائر ڪيو ويو آهي جڏهن پاپ اوور کي صارف لاءِ ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
hide.bs.popover | اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hide مثال جو طريقو سڏيو ويو آهي. |
hidden.bs.popover | هي واقعو فائر ڪيو ويندو آهي جڏهن پاپ اوور ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
inserted.bs.popover | اهو واقعو ان واقعي کان پوءِ فائر ڪيو ويو آهي show.bs.popover جڏهن پاپ اوور ٽيمپليٽ ڊوم ۾ شامل ڪيو ويو آهي. |
ھن پلگ ان سان سڀني خبرداري پيغامن ۾ خارج ڪرڻ واري ڪارڪردگي شامل ڪريو.
جڏهن هڪ .close
بٽڻ استعمال ڪيو وڃي، اهو لازمي طور تي پهريون ٻار هجڻ گهرجي .alert-dismissible
۽ مارڪ اپ ۾ ان کان اڳ ڪوبه متن مواد نه اچي سگهي.
ھن ۽ اھو تبديل ڪريو ۽ ٻيهر ڪوشش ڪريو. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.
بس data-dismiss="alert"
پنهنجي بند بٽڻ ۾ شامل ڪريو خودڪار طور تي الرٽ بند ڪارڪردگي ڏي. هڪ خبرداري کي بند ڪرڻ ان کي ڊوم مان هٽائي ٿو.
بند ڪرڻ وقت توهان جي الرٽ اينيميشن کي استعمال ڪرڻ لاءِ، پڪ ڪريو ته انهن وٽ .fade
۽ .in
ڪلاس اڳ ۾ ئي انهن تي لاڳو ٿيل آهن.
$().alert()
هڪ خبرداري ٻڌندو آهي ڪلڪ ٿيندڙ واقعن لاءِ اولاد جي عنصرن تي جيڪي data-dismiss="alert"
خاصيتون آهن. (ضروري ناهي جڏهن ڊيٽا-اي پي آئي جي خودڪار شروعاتي استعمال ڪندي.)
$().alert('close')
ان کي DOM مان هٽائڻ سان هڪ خبرداري کي بند ڪري ٿو. جيڪڏهن .fade
۽ .in
طبقن عنصر تي موجود آهن، خبردار ٿيڻ کان اڳ ختم ٿي ويندو.
بوٽ اسٽريپ جي خبرداري پلگ ان خبرداري ڪارڪردگي ۾ ڇڪڻ لاءِ ڪجھ واقعن کي بي نقاب ڪري ٿي.
واقعي جو قسم | وصف |
---|---|
بند ڪريو بي بي خبر | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن close مثال جو طريقو سڏيو ويندو آهي. |
بند.bs.alert | هي واقعو فائر ڪيو ويو آهي جڏهن الرٽ بند ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
بٽڻ سان وڌيڪ ڪريو. ڪنٽرول بٽڻ بيان ڪري ٿو يا ٽول بار وانگر وڌيڪ اجزاء لاءِ بٽڻن جا گروپ ٺاھيو.
فائر فاکس جاري رهي فارم ڪنٽرول اسٽيٽس (معذوريت ۽ چڪاس) سڄي صفحي جي لوڊ تي . ھن لاء ھڪڙو حل استعمال ڪرڻ آھي autocomplete="off"
. ڏسو Mozilla بگ #654072 .
data-loading-text="Loading..."
بٽڻ تي لوڊ ڪرڻ واري حالت کي استعمال ڪرڻ لاء شامل ڪريو .
ھن خصوصيت کي ختم ڪيو ويو آھي v3.3.5 کان ۽ ختم ڪيو ويو آھي v4 ۾.
هن مظاهري جي خاطر، اسان استعمال ڪري رهيا آهيون data-loading-text
۽ $().button('loading')
، پر اهو واحد رياست ناهي جيڪو توهان استعمال ڪري سگهو ٿا. ھن تي وڌيڪ ڏسو ھيٺ ڏنل $().button(string)
دستاويز ۾ .
data-toggle="button"
ھڪڙي بٽڻ تي ٽوگلنگ کي چالو ڪرڻ لاء شامل ڪريو .
.active
۽aria-pressed="true"
اڳي ٽوگل ٿيل بٽڻن لاءِ، توھان کي لازمي طور شامل ڪرڻ گھرجي .active
ڪلاس ۽ aria-pressed="true"
وصف button
پاڻ ڏانھن.
شامل ڪريو چيڪ بڪس يا ريڊيو انپٽس data-toggle="buttons"
تي .btn-group
مشتمل چيڪ بڪس کي انهن جي لاڳاپيل اندازن ۾ ٽوگلنگ کي فعال ڪرڻ لاءِ.
.active
اڳواٽ چونڊيل اختيارن لاءِ، توھان کي لازمي طور تي .active
ڪلاس کي پنھنجي ان پٽ ۾ شامل ڪرڻ گھرجي label
.
جيڪڏهن چيڪ بڪس بٽڻ جي چيڪ ٿيل حالت کي اپڊيٽ ڪيو ويندو آهي بغير ڪنهن click
واقعي کي بٽڻ تي فائرنگ ڪرڻ جي (مثال طور ان پٽ <input type="reset">
جي ملڪيت کي ترتيب ڏيڻ يا ذريعي )، توهان کي ان پٽ جي پاڻ تي ڪلاس checked
کي ٽوگل ڪرڻ جي ضرورت پوندي ..active
label
$().button('toggle')
ٽوگلز پش اسٽيٽ. بٽڻ کي ظاهر ڪري ٿو ته اهو چالو ڪيو ويو آهي.
$().button('reset')
بٽڻ واري حالت کي ري سيٽ ڪري ٿو - متن کي اصل متن ۾ تبديل ڪري ٿو. اهو طريقو غير مطابقت رکندڙ آهي ۽ ريٽنگ اصل ۾ مڪمل ٿيڻ کان اڳ واپس اچي ٿو.
$().button(string)
متن کي ڪنهن به ڊيٽا بيان ڪيل ٽيڪسٽ اسٽيٽ ڏانهن تبديل ڪري ٿو.
لچڪدار پلگ ان جيڪو استعمال ڪري ٿو مٿئين طبقن کي آسان ٽوگل رويي لاءِ.
کولڻ جي ضرورت آهي منتقلي پلگ ان کي توهان جي بوٽ اسٽريپ جي ورزن ۾ شامل ڪيو وڃي.
ڪلاس تبديلين ذريعي ٻيو عنصر ڏيکارڻ ۽ لڪائڻ لاءِ ھيٺ ڏنل بٽڻن تي ڪلڪ ڪريو:
.collapse
مواد لڪائي ٿو.collapsing
منتقلي دوران لاڳو ٿئي ٿو.collapse.in
مواد ڏيکاري ٿوتوھان استعمال ڪري سگھوٿا ھڪڙي لنڪ سان href
وصف سان، يا ھڪڙي بٽڻ سان data-target
وصف سان. ٻنهي صورتن ۾، data-toggle="collapse"
ضروري آهي.
ڊفالٽ ختم ڪرڻ واري رويي کي وڌايو پينل جي اجزاء سان گڏ ٺاھڻ لاء.
اهو پڻ ممڪن آهي ته .panel-body
s کي s سان .list-group
مٽايو.
aria-expanded
ڪنٽرول عنصر ۾ شامل ڪرڻ جي پڪ ڪريو . هي وصف واضح طور تي اسڪرين ريڊرز ۽ ساڳئي مددگار ٽيڪنالاجيز کي کولڻ واري عنصر جي موجوده حالت کي واضح ڪري ٿو. جيڪڏهن ٽوڙڻ وارو عنصر ڊفالٽ طور بند ڪيو ويو آهي، ان جي قيمت هجڻ گهرجي aria-expanded="false"
. in
جيڪڏهن توهان ڪلاس استعمال ڪندي ڊفالٽ طور کولڻ واري عنصر کي سيٽ aria-expanded="true"
ڪيو آهي، ان جي بدران ڪنٽرول تي سيٽ ڪريو. پلگ ان خود بخود هن خاصيت کي ٽوگل ڪري ڇڏيندو ان جي بنياد تي ته ختم ٿيڻ وارو عنصر کوليو ويو آهي يا بند ڪيو ويو آهي.
اضافي طور تي، جيڪڏهن توهان جو ڪنٽرول عنصر هڪ واحد ختم ٿيڻ واري عنصر کي نشانو بڻائيندو آهي - يعني data-target
وصف هڪ id
چونڊيندڙ ڏانهن اشارو ڪري رهيو آهي - توهان ڪنٽرول عنصر ۾ اضافي aria-controls
خاصيت شامل ڪري سگهو ٿا، جنهن ۾ id
ختم ٿيڻ واري عنصر شامل آهي. جديد اسڪرين ريڊرز ۽ ساڳيا مددگار ٽيڪنالاجيون استعمال ڪن ٿيون هن وصف کي استعمال ڪندڙن کي اضافي شارٽ ڪٽ مهيا ڪرڻ لاءِ ته جيئن پاڻ سڌو سنئون ڪلپسيبل عنصر ڏانهن وڃو.
کولڻ وارو پلگ ان ڳري کڻڻ کي سنڀالڻ لاءِ ڪجھ طبقن کي استعمال ڪري ٿو:
.collapse
مواد کي لڪائي ٿو.collapse.in
مواد ڏيکاري ٿو.collapsing
شامل ڪيو ويندو آهي جڏهن منتقلي شروع ٿئي ٿي، ۽ هٽايو ويندو آهي جڏهن اهو ختم ٿئي ٿواهي ڪلاس ۾ ڳولي سگهجن ٿا component-animations.less
.
بس شامل ڪريو data-toggle="collapse"
۽ هڪ data-target
عنصر کي خودڪار طور تي ختم ڪرڻ واري عنصر جي ڪنٽرول کي تفويض ڪرڻ لاء. انتساب قبول ڪري data-target
ٿو CSS چونڊيندڙ کي لاڳو ڪرڻ لاءِ. پڪ ڪريو ته ڪلاس collapse
کي ٽوڙڻ واري عنصر ۾ شامل ڪريو. جيڪڏھن توھان چاھيو ٿا ته ان کي ڊفالٽ کوليو وڃي، اضافي ڪلاس شامل ڪريو in
.
شامل ڪرڻ لاءِ accordion-like گروپ مينيجمينٽ کي ٽوڙڻ واري ڪنٽرول ۾، ڊيٽا جي خاصيت شامل ڪريو data-parent="#selector"
. هن کي عمل ۾ ڏسڻ لاءِ ڊيم جو حوالو ڏيو.
دستي طور تي فعال ڪريو:
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-parent=""
.
نالو | قسم | ڊفالٽ | وضاحت |
---|---|---|---|
والدين | چونڊيندڙ | ڪوڙو | جيڪڏهن هڪ چونڊيندڙ مهيا ڪيو ويو آهي، ته پوءِ بيان ڪيل والدين جي تحت سڀ ختم ٿيڻ وارا عنصر بند ڪيا ويندا جڏهن هي ٽوڙڻ واري شيءِ ڏيکاري ويندي. panel (روايتي accordion رويي سان ملندڙ جلندڙ - اهو طبقن تي منحصر آهي ) |
ٽوگل ڪرڻ | بولين | سچو | ٽوگل ڪرڻ واري عنصر کي دعوت ڏيڻ تي |
.collapse(options)
توهان جي مواد کي کولڻ واري عنصر طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object
.
.collapse('toggle')
ڏيکاريل يا لڪائڻ لاءِ کولڻ لائق عنصر کي ٽوگل ڪري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ڪلپسيبل عنصر اصل ۾ ڏيکاريو ويو هجي يا لڪيل هجي (يعني ان کان اڳ جو shown.bs.collapse
يا hidden.bs.collapse
واقعو ٿئي).
.collapse('show')
هڪ ٽوڙڻ وارو عنصر ڏيکاري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ختم ٿيڻ وارو عنصر اصل ۾ ڏيکاريو ويو آهي (يعني shown.bs.collapse
واقعي ٿيڻ کان اڳ).
.collapse('hide')
لڪائڻ وارو عنصر لڪائي ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو ختم ٿيڻ وارو عنصر اصل ۾ لڪيل هجي (يعني hidden.bs.collapse
واقعي ٿيڻ کان اڳ).
بوٽ اسٽريپ جي تباهي واري طبقي کي ختم ڪرڻ جي ڪارڪردگي ۾ ڇڪڻ لاء ڪجھ واقعن کي ظاهر ڪري ٿو.
واقعي جو قسم | وصف |
---|---|
show.bs.collapse | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن show مثال جو طريقو سڏيو ويندو آهي. |
ڏيکاريو ويو.bs.collapse | هي واقعو فائر ڪيو ويندو آهي جڏهن هڪ ختم ٿيڻ واري عنصر کي استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
hide.bs.collapse | اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hide طريقي کي سڏيو ويو آهي. |
hidden.bs.collapse | هي واقعو فائر ڪيو ويندو آهي جڏهن هڪ تباهي عنصر صارف کان لڪايو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
عناصرن ذريعي سائيڪل هلائڻ لاءِ سلائيڊ شو جو جزو، ڪارسيل وانگر. Nested carousels سپورٽ نه آهن.
ڪارسيل جزو عام طور تي رسائي جي معيار سان مطابقت ناهي. جيڪڏھن توھان کي تعميل ڪرڻ جي ضرورت آھي، مھرباني ڪري پنھنجي مواد کي پيش ڪرڻ لاءِ ٻين اختيارن تي غور ڪريو.
بوٽ اسٽريپ خاص طور تي CSS3 استعمال ڪري ٿو پنھنجي اينيميشن لاءِ، پر انٽرنيٽ ايڪسپلورر 8 ۽ 9 ضروري CSS ملڪيتن کي سپورٽ نٿو ڪري. اهڙيء طرح، انهن برائوزرن کي استعمال ڪندي سلائڊ منتقلي متحرڪ نه آهن. اسان ڄاڻي واڻي فيصلو ڪيو آهي ته تبديلين لاءِ jQuery-based fallbacks شامل نه ڪجي.
ڪلاس کي ھڪڙي سلائڊ ۾ شامل ڪرڻ جي .active
ضرورت آھي. ٻي صورت ۾، ڪارسيل نظر نه ايندي.
.glyphicon .glyphicon-chevron-left
۽ طبقن کي .glyphicon .glyphicon-chevron-right
لازمي طور تي ڪنٽرول جي ضرورت ناهي. بوٽ اسٽريپ مهيا ڪري ٿو .icon-prev
۽ .icon-next
سادي يونيڪوڊ متبادل طور.
پنھنجي سلائڊ ۾ ڪيپشن شامل ڪريو آساني سان .carousel-caption
عنصر سان ڪنھن به .item
. اتي ڪنهن به اختياري HTML جي باري ۾ رکو ۽ اهو خودڪار طريقي سان ترتيب ڏنو ويندو ۽ فارميٽ ڪيو ويندو.
Carousels کي استعمال ڪرڻ جي ضرورت هوندي آهي هڪ id
تي ٻاهرين ڪنٽينر (The .carousel
) لاءِ carousel ڪنٽرول صحيح طريقي سان ڪم ڪرڻ لاءِ. جڏهن گھڻا carousel شامل ڪريو، يا جڏھن ھڪ carousel's تبديل ڪريو id
، لاڳاپيل ڪنٽرولن کي اپڊيٽ ڪرڻ جي پڪ ڪريو.
آساني سان carousel جي پوزيشن کي ڪنٽرول ڪرڻ لاء ڊيٽا خاصيتون استعمال ڪريو. data-slide
لفظن کي قبول ڪري ٿو prev
يا next
، جيڪو سلائڊ پوزيشن کي ان جي موجوده پوزيشن جي نسبت سان تبديل ڪري ٿو. متبادل طور تي، استعمال ڪريو data-slide-to
خام سلائڊ انڊيڪس ڪارسيل ڏانھن منتقل ڪرڻ لاء data-slide-to="2"
، جيڪو سلائڊ پوزيشن کي ھڪڙي خاص انڊيڪس ڏانھن منتقل ڪري ٿو جيڪو شروع ٿئي ٿو 0
.
data-ride="carousel"
صفحو لوڊ تي شروع ٿيندڙ متحرڪ طور تي ڪارسيل کي نشان لڳائڻ لاءِ استعمال ڪيو ويندو آهي . اهو استعمال نه ٿو ڪري سگھجي (بيڪار ۽ غير ضروري) واضح JavaScript جي شروعات سان گڏ ساڳي ڪارسيل جي.
ڪاريسل کي هٿ سان ڪال ڪريو:
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-interval=""
.
نالو | قسم | ڊفالٽ | وضاحت |
---|---|---|---|
وقفو | نمبر | 5000 | ڪنهن شئي کي پاڻمرادو سائيڪل هلائڻ جي وچ ۾ دير ڪرڻ جو وقت. جيڪڏهن غلط، ڪارسيل خودڪار طريقي سان نه هلندو. |
روڪ | تار | null | "هور" | جيڪڏهن سيٽ ڪيو ويو "hover" آهي ته، ڪارسيل جي سائيڪلنگ کي روڪي ٿو آن mouseenter ۽ ڪارسيل جي سائيڪل کي ٻيهر شروع ڪري ٿو mouseleave . جيڪڏهن سيٽ ڪيو ويو ته null ، ڪارسيل مٿان هوور ڪرڻ ان کي روڪي نه سگهندو. |
لپيٽڻ | بولين | سچو | ڇا ڪارسيل کي مسلسل سائيڪل هلائڻ گهرجي يا سخت اسٽاپ آهن. |
ڪي بورڊ | بولين | سچو | ڇا ڪارسيل کي ڪي بورڊ جي واقعن تي رد عمل ڏيڻ گهرجي. |
.carousel(options)
ڪارسيل کي اختياري اختيارن سان object
شروع ڪري ٿو ۽ شيون ذريعي سائيڪل کي شروع ڪري ٿو.
.carousel('cycle')
کاٻي کان ساڄي تائين ڪارسيل شيون ذريعي سائيڪل.
.carousel('pause')
ڪارسيل کي شيون ذريعي سائيڪل هلائڻ کان روڪي ٿو.
.carousel(number)
ڪارسيل کي ھڪڙي خاص فريم ڏانھن (0 جي بنياد تي، ھڪڙي صف سان ملندڙ جلندڙ).
.carousel('prev')
پوئين شيءِ ڏانهن چڪر.
.carousel('next')
ايندڙ شيون ڏانهن سائيڪل.
بوٽ اسٽريپ جي ڪارسيل ڪلاس ٻن واقعن کي ظاهر ڪري ٿو ڪارسيل ڪارڪردگي ۾ ڇڪڻ لاءِ.
ٻنهي واقعن ۾ هيٺيان اضافي خاصيتون آهن:
direction
: اهو رخ جنهن ۾ ڪارسيل سلائيڊنگ آهي (يا "left"
يا "right"
).relatedTarget
: DOM عنصر جيڪو فعال شيءِ جي طور تي جاءِ تي سلائيڊ ڪيو پيو وڃي.سڀ ڪارسيل واقعا ڪارسيل تي فائر ڪيا ويا آهن (يعني تي <div class="carousel">
).
واقعي جو قسم | وصف |
---|---|
slide.bs.carousel | اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن slide مثال جو طريقو سڏيو ويندو آهي. |
slid.bs.carousel | اهو واقعو فائر ڪيو ويو آهي جڏهن ڪارسيل پنهنجي سلائڊ منتقلي کي مڪمل ڪيو آهي. |
affix پلگ ان کي ٽگل position: fixed;
ڪري آن ۽ آف ڪري ٿو، ان سان مليل اثر کي نقل ڪندي position: sticky;
. ساڄي پاسي سب نيويگيشن affix پلگ ان جو لائيو ڊيمو آهي.
affix پلگ ان استعمال ڪريو ڊيٽا جي خاصيتن ذريعي يا دستي طور تي پنھنجي جاوا اسڪرپٽ سان. ٻنهي حالتن ۾، توهان کي لازمي طور تي CSS مهيا ڪرڻ گهرجي توهان جي لڳل مواد جي پوزيشن ۽ چوٽي لاءِ.
نوٽ: affix پلگ ان کي استعمال نه ڪريو هڪ عنصر تي جيڪو نسبتا پوزيشن واري عنصر ۾ شامل آهي، جهڙوڪ ڇڪيل يا ڇڪيل ڪالمن، سفاري رينڊنگ بگ جي ڪري .
affix پلگ ان ٽن طبقن جي وچ ۾ ٽوگل ڪري ٿو، هر هڪ خاص رياست جي نمائندگي ڪري ٿو: .affix
, .affix-top
, and .affix-bottom
. توھان کي لازمي طور تي اسٽائل مهيا ڪرڻ گهرجن، استثنا سان position: fixed;
، .affix
انھن طبقن لاءِ (ھن پلگ ان کان آزاد) حقيقي پوزيشن کي سنڀالڻ لاءِ.
هتي ڪيئن آهي affix پلگ ان ڪم ڪري ٿو:
.affix-top
اشارو ڪرڻ لاءِ ته عنصر ان جي اعليٰ ترين پوزيشن ۾ آهي. هن نقطي تي ڪا به CSS پوزيشن جي ضرورت ناهي..affix
متبادل .affix-top
۽ سيٽ position: fixed;
(بوٽ اسٽريپ جي سي ايس ايس پاران مهيا ڪيل)..affix
گهرجي .affix-bottom
. جيئن ته آفسيٽ اختياري آهن، هڪ سيٽنگ توهان کي مناسب CSS سيٽ ڪرڻ جي ضرورت آهي. هن حالت ۾، position: absolute;
جڏهن ضروري هجي ته شامل ڪريو. پلگ ان ڊيٽا وصف يا جاوا اسڪرپٽ آپشن استعمال ڪري ٿو اهو طئي ڪرڻ لاءِ ته عنصر کي اتان کان ڪٿي رکڻو آهي.مٿي ڏنل قدمن تي عمل ڪريو پنھنجي CSS کي سيٽ ڪرڻ لاءِ ھيٺ ڏنل استعمال جي اختيارن مان.
آسانيءَ سان شامل ڪرڻ لاءِ ڪنهن به عنصر سان affix رويي کي، صرف data-spy="affix"
ان عنصر ۾ شامل ڪريو جنهن تي توهان جاسوسي ڪرڻ چاهيو ٿا. ڪنهن عنصر جي پننگ کي ٽوگل ڪرڻ جي وضاحت ڪرڻ لاءِ آف سيٽ استعمال ڪريو.
ڪال ڪريو affix پلگ ان ذريعي JavaScript:
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-offset-top="200"
.
نالو | قسم | ڊفالٽ | وضاحت |
---|---|---|---|
بند ڪرڻ | نمبر | فنڪشن | اعتراض | 10 | اسڪرول جي پوزيشن کي ڳڻڻ دوران اسڪرين مان آفسٽ ڪرڻ لاءِ پکسلز. جيڪڏهن هڪ واحد نمبر مهيا ڪيو ويو آهي، آفسيٽ ٻنهي مٿين ۽ هيٺئين طرفن ۾ لاڳو ڪيو ويندو. هڪ منفرد، هيٺيون ۽ مٿانهون آفسيٽ مهيا ڪرڻ لاءِ صرف هڪ اعتراض offset: { top: 10 } يا offset: { top: 10, bottom: 5 } . هڪ فنڪشن استعمال ڪريو جڏهن توهان کي متحرڪ طور تي هڪ آفسيٽ ڳڻڻ جي ضرورت آهي. |
ٽارگيٽ | چونڊيندڙ | نوڊ | jQuery عنصر | window اعتراض _ |
affix جي ٽارگيٽ عنصر کي بيان ڪري ٿو. |
.affix(options)
توھان جي مواد کي چالو ڪري ٿو جئين مواد سان ڳنڍيل آھي. اختياري اختيارن کي قبول ڪري ٿو object
.
.affix('checkPosition')
لاڳاپيل عناصر جي طول و عرض، پوزيشن، ۽ اسڪرول پوزيشن جي بنياد تي لاڳاپو جي حالت کي ٻيهر ڳڻيو. ،، ۽ طبقن .affix
کي نئين رياست جي مطابق شامل ڪيل مواد مان شامل يا ختم ڪيو ويو آھي. هن طريقي کي سڏڻ جي ضرورت آهي جڏهن به لڳل مواد جا طول و عرض يا ٽارگيٽ عنصر تبديل ڪيا وڃن، انهي سان لاڳاپيل مواد جي صحيح پوزيشن کي يقيني بڻائڻ لاء..affix-top
.affix-bottom
بوٽ اسٽريپ جو لاڳاپو پلگ ان لاڳاپو ڪارڪردگي ۾ ڇڪڻ لاءِ ڪجھ واقعن کي بي نقاب ڪري ٿو.
واقعي جو قسم | وصف |
---|---|
affix.bs.affix | اهو واقعو فوري طور تي باهه لڳندو آهي ان کان اڳ جو عنصر لڳايو ويو آهي. |
affixed.bs.affix | اهو واقعو فائر ڪيو ويو آهي ان کان پوءِ عنصر لڳايو ويو آهي. |
affix-top.bs.affix | اهو واقعو فوري طور تي باهه لڳندو آهي ان کان اڳ جو عنصر چسپجي ويو آهي-مٿي. |
affixed-top.bs.affix | هي واقعو فائر ڪيو ويو آهي ان کان پوءِ عنصر چسپجي ويو-مٿي. |
affix-bottom.bs.affix | اهو واقعو فوري طور تي باهه لڳندو آهي ان کان اڳ جو عنصر لڳايو ويو آهي-هيٺيان. |
affixed-bottom.bs.affix | ھي واقعو فائر ڪيو ويو آھي ان کان پوءِ عنصر کي چسپو ڪيو ويو آھي ھيٺان. |