جاواسکریپټ
د بوټسټریپ اجزاو له درجن څخه ډیر دودیز jQuery پلگ انونو سره ژوند ته راوړو. په اسانۍ سره دا ټول شامل کړئ، یا یو یو.
د بوټسټریپ اجزاو له درجن څخه ډیر دودیز jQuery پلگ انونو سره ژوند ته راوړو. په اسانۍ سره دا ټول شامل کړئ، یا یو یو.
پلگ انونه په انفرادي ډول شامل کیدی شي (د بوټسټریپ انفرادي *.js
فایلونو په کارولو سره) ، یا ټول په یوځل (د کارولو bootstrap.js
یا کوچني شوي bootstrap.min.js
).
دواړه bootstrap.js
او bootstrap.min.js
په یوه فایل کې ټول پلگ انونه لري. یوازې یو پکې شامل کړئ.
ځینې پلگ انونه او د CSS برخې په نورو پلگ انونو پورې اړه لري. که تاسو په انفرادي ډول فلګونه شامل کړئ، ډاډ ترلاسه کړئ چې په اسنادو کې د دې انحصارونو لپاره وګورئ. دا هم په یاد ولرئ چې ټول پلگ ان په 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
شئ هغه پلگ ان ته زنګ ووهئ چې تاسو یې غواړئ ارزښت بیرته راوباسئ.
بوټسټریپ د ډیری پلگ انونو ځانګړي کړنو لپاره دودیز پیښې چمتو کوي. عموما، دا په غیر انتفاعي او پخوانۍ برخه اخیستونکي بڼه کې راځي - چیرې چې انفینیټیوټ (مثال show
) د پیښې په پیل کې پیل کیږي، او د هغې پخوانۍ برخه اخیستونکي بڼه (مثال shown
) د عمل په بشپړیدو سره پیل کیږي.
تر 3.0.0 پورې، د بوټسټریپ ټولې پیښې په نوم ځای کې دي.
ټول غیر معمولي پیښې preventDefault
فعالیت چمتو کوي. دا د دې وړتیا چمتو کوي چې د پیل کیدو دمخه د عمل اجرا ودروي.
VERSION
د هر بوټسټریپ jQuery پلگ انونو نسخه د پلگ ان جوړونکي ملکیت له لارې لاسرسی کیدی شي . د مثال په توګه، د اوزار ټایپ پلگ ان لپاره:
د بوټسټریپ پلگ انونه په ځانګړي ډول په زړه پورې نه راځي کله چې جاواسکریپټ غیر فعال وي. که تاسو پدې قضیه کې د کارونکي تجربې ته پاملرنه کوئ ، نو <noscript>
د وضعیت تشریح کولو لپاره وکاروئ (او څنګه د جاوا سکریپټ بیا فعال کړئ) خپلو کاروونکو ته ، او/یا خپل دودیز فال بیکونه اضافه کړئ.
بوټسټریپ په رسمي ډول د دریمې ډلې جاواسکریپټ کتابتونونو لکه پروټوټایپ یا jQuery UI ملاتړ نه کوي. د .noConflict
پیښو او نومونو سره سره، ممکن د مطابقت ستونزې شتون ولري چې تاسو یې پخپله حل کولو ته اړتیا لرئ.
د ساده لیږد اغیزو لپاره، transition.js
یو ځل د نورو JS فایلونو سره یوځای شامل کړئ. که تاسو تالیف شوی (یا کوچنی شوی) کاروئ bootstrap.js
، نو د دې شاملولو ته اړتیا نشته — دا دمخه شتون لري.
Transition.js د پیښو لپاره یو بنسټیز مرستندوی دی transitionEnd
او همدارنګه د CSS لیږد ایمولیټر دی. دا د نورو پلگ انونو لخوا کارول کیږي ترڅو د CSS لیږد مالتړ وګوري او ځړول لیږدونه ونیسي.
لیږدونه د لاندې جاواسکریپټ سنیپټ په کارولو سره په نړیواله کچه غیر فعال کیدی شي، کوم چې باید د بارولو وروسته transition.js
(یا bootstrap.js
یا bootstrap.min.js
، لکه څنګه چې قضیه وي) راشي:
موډلونه منظم دي، مګر انعطاف وړ، ډیالوګ د لږ تر لږه اړین فعالیت او سمارټ ډیفالټ سره اشاره کوي.
ډاډ ترلاسه کړئ چې موډل خلاص نه کړئ پداسې حال کې چې بل لاهم څرګند دی. په یو وخت کې له یو څخه ډیر ماډل ښودل دودیز کوډ ته اړتیا لري.
تل هڅه وکړئ چې د موډل HTML کوډ په خپل سند کې د لوړې کچې موقعیت کې ځای په ځای کړئ ترڅو د نورو برخو څخه مخنیوی وشي چې د موډل ظاهري او/یا فعالیت اغیزه کوي.
په ګرځنده وسیلو کې د ماډلونو کارولو په اړه ځینې احتیاطونه شتون لري. د جزیاتو لپاره زموږ د براوزر ملاتړ سندونه وګورئ.
د دې له امله چې څنګه HTML5 خپل سیمانټیکونه تعریفوي، د autofocus
HTML ځانګړتیا د بوټسټراپ ماډلونو کې هیڅ اغیزه نلري. د ورته تاثیر ترلاسه کولو لپاره ، ځینې دودیز جاواسکریپټ وکاروئ:
په فوټر کې د سرلیک، بدن، او د کړنو سیټ سره وړاندې شوی ماډل.
د لاندې تڼۍ په کلیک کولو سره د جاواسکریپټ له لارې موډل بدل کړئ. دا به د پاڼې له پورتنۍ برخې څخه ښکته او تیاره شي.
ډاډ ترلاسه کړئ چې اضافه کړئ role="dialog"
او aria-labelledby="..."
، د موډل سرلیک راجع کول، ته .modal
، او ځان role="document"
ته .modal-dialog
.
aria-describedby
برسیره پردې، تاسو کولی شئ د خپل موډل ډیالوګ په اړه توضیحات ورکړئ .modal
.
په موډلونو کې د یوټیوب ویډیوګانو ځای په ځای کول اضافي جاوا سکریپټ ته اړتیا لري نه په بوټسټریپ کې ترڅو په اتوماتيک ډول پلے بیک بند کړي او نور ډیر څه. د نورو معلوماتو لپاره دا ګټور سټیک اوور فلو پوسټ وګورئ .
موډلونه دوه اختیاري اندازې لري، د بدلون کونکي ټولګیو له لارې شتون لري چې په .modal-dialog
.
د موډلونو لپاره چې د لیدو لپاره د تیاره کیدو پرځای په ساده ډول څرګندیږي ، .fade
ټولګي له خپل ماډل مارک اپ څخه لرې کړئ.
په موډل کې د بوټسټریپ گرډ سیسټم څخه د ګټې اخیستنې لپاره، یوازې په دننه کې نیست .row
او .modal-body
بیا د نورمال گرډ سیسټم ټولګي وکاروئ.
د بټونو یوه ډله لرئ چې ټول ورته موډل رامینځته کوي، یوازې د یو څه مختلف مینځپانګو سره؟ د موډل مینځپانګې توپیر کولو لپاره د HTML ځانګړتیاوې وکاروئ (احتمالا د jQuery له لارې) د دې پورې اړه لري event.relatedTarget
چې کوم data-*
تڼۍ کلیک شوې . د جزیاتو لپاره د موډل پیښو اسناد وګورئ relatedTarget
،
موډل پلگ ان ستاسو پټ مینځپانګه د غوښتنې سره سم ، د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې بدلوي. دا د ډیفالټ سکرول کولو چلند ته هم اضافه کوي او .modal-open
د موډل څخه بهر کلیک کولو پرمهال د ښودل شوي ماډلونو د لرې کولو لپاره د کلیک ساحه چمتو کولو لپاره رامینځته کوي.<body>
.modal-backdrop
د جاواسکریپټ لیکلو پرته موډل فعال کړئ. data-toggle="modal"
د کنټرولر عنصر باندې تنظیم کړئ ، لکه د تڼۍ په څیر ، د یو سره data-target="#foo"
یا href="#foo"
د توګل کولو لپاره ځانګړي ماډل په نښه کول.
myModal
د جاواسکریپټ د یوې کرښې سره د ID سره موډل ته زنګ ووهئ :
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-backdrop=""
.
نوم | ډول | ډیفالټ | توضیحات |
---|---|---|---|
پس منظر | بولین یا تار'static' |
ریښتیا | د ماډل شالید عنصر شامل دی. په بدیل سره، static د شالید لپاره مشخص کړئ کوم چې په کلیک کولو موډل بند نه کوي. |
کیبورډ | بولین | ریښتیا | موډل بندوي کله چې د فرار کیلي فشار راوړي |
ښودل | بولین | ریښتیا | موډل ښیې کله چې پیل شي. |
لرې | لاره | دروغ | دا اختیار د v3.3.0 راهیسې له مینځه وړل شوی او په v4 کې لرې شوی. موږ د دې پرځای وړاندیز کوو چې د پیرودونکي اړخ ټیمپلینګ یا د ډیټا پابند کولو چوکاټ وکاروئ ، یا پخپله jQuery.load زنګ ووهئ . که چیرې لیرې یو آر ایل چمتو شي، مینځپانګه به یو ځل د jQuery میتود له لارې پورته شي او په div |
.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 | دا پیښه له مینځه وړل کیږي کله چې موډل کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). که د کلیک له امله رامینځته شي، کلیک شوی عنصر relatedTarget د پیښې ملکیت په توګه شتون لري. |
hide.bs.modal | دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hide مثال میتود ویل کیږي. |
hidden.bs.modal | دا پیښه له مینځه وړل کیږي کله چې موډل د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
loaded.bs.modal | دا پیښه له مینځه وړل کیږي کله چې موډل د remote اختیار په کارولو سره مینځپانګې بار کړي. |
د دې ساده پلگ ان سره نږدې هرڅه ته د ډراپ ډاون مینو اضافه کړئ ، پشمول د نیوبار ، ټبونو او ګولیو.
د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې، د ډراپ ډاون پلگ ان .open
د اصلي لیست توکي کې د ټولګي په بدلولو سره پټ مینځپانګې (ډراپ ډاون مینو) ته بدلون ورکوي.
په ګرځنده وسیلو کې ، د ډراپ ډاون خلاصول .dropdown-backdrop
د ډراپ ډاون مینو بندولو لپاره د نل ساحې په توګه اضافه کوي کله چې له مینو څخه بهر ټایپ کول ، د مناسب iOS ملاتړ لپاره اړتیا. دا پدې مانا ده چې د خلاص ډراپ ډاون مینو څخه مختلف ډراپ ډاون مینو ته بدلول په موبایل کې اضافي نل ته اړتیا لري.
یادونه: دا data-toggle="dropdown"
خاصیت د غوښتنلیک په کچه د ډراپ ډاون مینو بندولو لپاره تکیه کوي ، نو دا ښه نظر دی چې تل یې وکاروئ.
data-toggle="dropdown"
د ډراپ ډاون بدلولو لپاره لینک یا تڼۍ کې اضافه کړئ .
د لینک بټونو سره د URLs ساتلو لپاره، د data-target
ځای پرځای خاصیت وکاروئ href="#"
.
د جاواسکریپټ له لارې ډراپ ډاون ته زنګ ووهئ:
data-toggle="dropdown"
لا هم اړتیا دهپرته لدې چې تاسو د جاواسکریپټ له لارې خپل ډراپ ډاون ته زنګ ووهئ یا د دې پرځای د ډیټا-Api وکاروئ ، data-toggle="dropdown"
تل اړین دي چې د ډراپ ډاون محرک عنصر کې شتون ولري.
هیڅ نه
$().dropdown('toggle')
د ورکړل شوي نوبار یا ټب شوي نیویګیشن د ډراپ ډاون مینو بدلوي.
ټولې ډراپ ډاؤن پیښې .dropdown-menu
د اصلي عنصر څخه ډزې کیږي.
ټول ډراپ ډاؤن پیښې یو relatedTarget
ملکیت لري، چې ارزښت یې د ټګلینګ اینکر عنصر دی.
د پیښې ډول | تفصیل |
---|---|
show.bs.dropdown | دا پیښه سمدلاسه ډزې کوي کله چې د ښودلو مثال میتود ویل کیږي. |
ښودل شوی.bs.dropdown | دا پیښه له مینځه وړل کیږي کله چې ډراپ ډاون کارونکي ته ښکاره شي (د بشپړیدو لپاره به د CSS لیږد انتظار وکړي). |
hide.bs.dropdown | دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د پټولو مثال میتود بلل شوی وي. |
hidden.bs.dropdown | دا پیښه له مینځه وړل کیږي کله چې ډراپ ډاون د کارونکي څخه پټ شوی وي (د بشپړیدو لپاره به د CSS لیږد ته انتظار وباسي). |
د ScrollSpy پلگ ان د سکرول موقعیت پراساس د نوي هدفونو په اتوماتيک ډول تازه کولو لپاره دی. د نیوبار لاندې ساحه سکرول کړئ او د فعال ټولګي بدلون وګورئ. د ښکته کولو فرعي توکي به هم روښانه شي.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi مخکې له دې چې دوی وپلورل شي qui. د ټمبلر فارم څخه تر میز پورې د بایسکل حق هر څه. 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.
وینیم مارفا مستې سکیټبورډ، adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat څلور loko nisi، ea helvetica nulla carles. ټاټو شوي کاسبي سویټر خوراکي لارۍ ، د میکسویني کویس غیر فریګن وینیل. Lo-fi Wes Anderson +1 sartorial. کارلس غیر جمالیاتی تمرین quis gentrify. د بروکلین adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. د فاپ کرافټ بیر ډیزرنټ سکیټ بورډ ea. د لومو بایسکل حقونه ایډپیسیکینګ 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 لږترلږه میسینجر کڅوړه جوړه کړئ. کریډ ایکس ان، دوامداره ډیلکټس کنسکټټور فینی پیک آی فون.
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.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats تاسو شاید د دوی په اړه نه وي اوریدلي چې پایله یې د هوډي ګلوټین فری لو فای فاپ الیکیپ. Labore elit placeat مخکې له دې چې دوی وپلورل شي، د ټیری ریچارډسن پروډینټ برانچ نیسسیونټ کویس کاسبی سویټر پیریټور کیفیه او هیلویټیکا هنرمند. د کارډیګن کرافټ بیر سیتان چمتو شوي ویلیټ. د VHS چیمبری لیبریس لنډمهاله وینیم. Anim mollit minim commodo ullamco thundercats.
د Navbar لینکونه باید د حل وړ ID اهداف ولري. د مثال په توګه، یو <a href="#home">home</a>
باید په DOM کې د یو څه سره مطابقت ولري لکه <div id="home"></div>
.
:visible
هدفي عناصر له پامه غورځول شويد هدف عناصر چې د :visible
jQuery مطابق ندي به له پامه غورځول شي او د دوی اړونده توکي به هیڅکله روښانه نشي.
مهمه نده چې د پلي کولو میتود وي ، سکرول سپي د position: relative;
هغه عنصر کارولو ته اړتیا لري چې تاسو یې جاسوسي کوئ. په ډیرو مواردو کې دا دی <body>
. کله چې د غیر نورو عناصرو سکرول کول <body>
، ډاډ ترلاسه کړئ چې یو height
سیټ ولرئ او overflow-y: scroll;
پلي یې کړئ.
ستاسو د ټاپ بار نیویګیشن کې په اسانۍ سره د سکرول سپي چلند اضافه کولو data-spy="scroll"
لپاره ، هغه عنصر ته اضافه کړئ چې تاسو یې جاسوس کول غواړئ (ډیری معمولا دا به وي <body>
). بیا data-target
د هر بوټسټریپ .nav
برخې د اصلي عنصر ID یا ټولګي سره صفت اضافه کړئ.
ستاسو په سی ایس ایس کې اضافه کولو وروسته position: relative;
، د جاواسکریپټ له لارې سکرول سپی ته زنګ ووهئ:
.scrollspy('refresh')
کله چې د DOM څخه د عناصرو اضافه کولو یا لرې کولو سره په ګډه سکرولسپي وکاروئ ، تاسو اړتیا لرئ د ریفریش میتود ته زنګ ووهئ لکه:
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-offset=""
.
نوم | ډول | ډیفالټ | توضیحات |
---|---|---|---|
بندول | شمیره | 10 | د سکرول موقعیت محاسبه کولو پر مهال له پورتنۍ برخې څخه د خلاصولو لپاره پکسلونه. |
د پیښې ډول | تفصیل |
---|---|
activate.bs.scrollspy | دا پیښه هغه وخت اوریږي کله چې یو نوی توکي د سکرول سپي لخوا فعال شي. |
د ځایی مینځپانګو پینونو له لارې لیږد لپاره ګړندي ، متحرک ټب فعالیت اضافه کړئ ، حتی د ډراپ ډاون مینو له لارې. نیست شوي ټبونه ملاتړ نه کوي.
خام ډینم تاسو شاید د جین شارټس آسټین په اړه نه وي اوریدلی. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor، Williamsburg Carles Vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. کاسبي سویټر eu banh mi, qui irure Terry Richardson ex squid. ایلیکیپ پلیسیټ سالویا سیلم آی فون. Seitan aliquip quis cardigan American apparel, 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
د ټب عنصر او د مینځپانګې کانټینر فعالوي. ټب باید په DOM کې د کانټینر نوډ په نښه کولو data-target
یا هم ولري. href
په پورته مثالونو کې، ټبونه د ځانګړتیاوو <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
پیښې به نه ویستل کیږي.
د پیښې ډول | تفصیل |
---|---|
show.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 پلگ ان څخه الهام اخیستل؛ Tooltips یوه تازه نسخه ده، کوم چې په عکسونو تکیه نه کوي، د حرکتونو لپاره CSS3 کاروي، او د ځایی سرلیک ذخیره کولو لپاره د معلوماتو ځانګړتیاوې.
د صفر اوږدوالي سرلیکونو سره اوزار لارښوونې هیڅکله نه ښودل کیږي.
د وسیلې لارښوونو لیدو لپاره لاندې لینکونو ته ځیر شئ:
تنګ پتلون د بلې کچې کیفیه تاسو شاید د دوی په اړه نه وي اوریدلي. د عکس بوټ ږیره خام ډینم لیټرپریس ویگن میسنجر کڅوړه سټمپټاون. د فارم څخه میز سیتان، د میکسویني فکسي پایښت وړ quinoa 8-bit امریکایی پوښاک د ټیری ریچارډسن وینیل چیمبری لري . بیرډ سټمپټاون، کارډیګینس بنه می لومو تندر کیټس. توفو بایوډیزل ویلیامسبرګ مارفا، څلور لوکو مکسوینی کلینز ویګن چیمبری. یو ریښتیني اوسپنیز هنرمند هر څه چې کیتار ، سینسټر فارم څخه تر میز بانکي آسټین ټویټر هینډل فریګن کریډ خام ډینم واحد اصلي کافي ویروس.
څلور اختیارونه شتون لري: پورته، ښیې، ښکته، او کیڼ اړخ ته.
د فعالیت دلایلو لپاره، Tooltip او Popover data-apis غوره شوي، پدې معنی چې تاسو باید دوی پخپله پیل کړئ .
په یوه پاڼه کې د ټولو وسیلو د پیل کولو یوه لاره به دا وي چې دوی د دوی د data-toggle
ځانګړتیاوو له مخې غوره کړي:
د اوزار ټایپ پلگ ان د غوښتنې پراساس مینځپانګه او مارک اپ رامینځته کوي ، او د ډیفالټ له مخې د دوی محرک عنصر وروسته اوزار ټایپونه ځای په ځای کوي.
د جاواسکریپټ له لارې وسیلې ټایپ پیل کړئ:
د وسیلې ټایپ لپاره اړین مارک اپ یوازې یو data
خاصیت دی او title
په HTML عنصر کې تاسو غواړئ د اوزار ټایپ ولرئ. د وسیلې ټایپ رامینځته شوی مارک اپ خورا ساده دی ، که څه هم دا موقعیت ته اړتیا لري (د ډیفالټ لخوا ، top
د پلگ ان لخوا ټاکل شوی).
ځینې وختونه تاسو غواړئ په هایپر لینک کې د وسیلې ټایپ اضافه کړئ چې ډیری لینونه پوښي. د وسیلې ټایپ پلگ ان ډیفالټ چلند دا دی چې دا په افقی او عمودی توګه مرکز کړي. white-space: nowrap;
د دې څخه مخنیوي لپاره خپلو لنگرونو ته اضافه کړئ .
کله چې په a .btn-group
یا an کې دننه عناصرو په اړه د وسیلې لارښوونې وکاروئ .input-group
، یا د میز پورې اړوند عناصرو ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, <tfoot>
) کې، تاسو باید اختیار مشخص کړئ container: 'body'
(لاندې مستند شوی) ترڅو د ناغوښتل شوي اړخیزو اغیزو څخه مخنیوی وشي (لکه عنصر پراخیږي او/ یا خپل ګردي کونجونه له لاسه ورکوي کله چې د وسیلې ټایپ پیل شي).
د هغو کاروونکو لپاره چې د کیبورډ سره حرکت کوي، او په ځانګړې توګه د مرستندویه ټیکنالوژیو کاروونکي، تاسو باید یوازې د کیبورډ تمرکز وړ عناصرو لکه لینکونو، فورمو کنټرولونو، یا د tabindex="0"
ځانګړتیاو سره هر ډول خپلمنځي عنصر ته وسیلې اضافه کړئ.
disabled
په یو یا .disabled
عنصر کې د وسیلې ټایپ اضافه کولو لپاره ، عنصر د a دننه کېږدئ او د دې پرځای <div>
د اوزار ټایپ پلي کړئ .<div>
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-animation=""
.
نوم | ډول | ډیفالټ | تفصیل |
---|---|---|---|
حرکت | بولین | ریښتیا | وسیلې ته د CSS فیډ لیږد پلي کړئ |
کانتینر | تار | دروغ | دروغ | د وسیله ټایپ یو ځانګړي عنصر ته ضمیمه کوي. بېلګه: |
ځنډ | شمیره | اعتراض | 0 | د وسیلې ټایپ ښودل او پټول ځنډول (ms) - د لارښود محرک ډول باندې نه پلي کیږي که یوه شمیره ورکړل شي، ځنډ د پټولو / ښودلو لپاره کارول کیږي د شیانو جوړښت دا دی: |
html | بولین | دروغ | HTML په وسیلې کې دننه کړئ. که غلط وي، د jQuery text میتود به په DOM کې د مینځپانګې داخلولو لپاره وکارول شي. متن وکاروئ که تاسو د XSS بریدونو په اړه اندیښمن یاست. |
ځای پرځای کول | تار | فعالیت | 'پورته' | څنګه د وسیلې ټاپ ځای ونیسئ - ټاپ | لاندې | پاتې | حق | اتومات کله چې یو فنکشن د ځای پرځای کولو ټاکلو لپاره کارول کیږي، دا د لومړي دلیل په توګه د Tooltip DOM نوډ سره او د محرک عنصر DOM نوډ د دویم په توګه ویل کیږي. |
انتخاب کونکی | تار | دروغ | که یو انتخاب کونکی چمتو شي، د اوزار ټایپ توکي به ټاکل شوي هدفونو ته واستول شي. په عمل کې، دا د متحرک HTML مینځپانګې وړولو لپاره کارول کیږي ترڅو د وسیلې لارښوونې اضافه کړي. دا او یو معلوماتي مثال وګورئ . |
کينډۍ | تار | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
د وسیلې ټایپ رامینځته کولو پرمهال د کارولو لپاره اساس HTML. د وسیلې ټایپ
د بهر تر ټولو لفافه عنصر باید |
عنوان | تار | فعالیت | '' | د اصلي سرلیک ارزښت که چیرې که چیرې یو فنکشن ورکړل شي، نو دا به د |
محرک | تار | د تمرکز تمرکز | د وسیلې ټایپ څنګه پیل کیږي - کلیک | هور | تمرکز | لارښود تاسو ممکن ډیری محرکونه تیر کړئ؛ دوی د ځای سره جلا کړئ. manual د کوم بل محرک سره یوځای نشي. |
viewport | تار | څيز | فعالیت | {ټاکونکی: 'بدن'، پیډینګ: 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 | دا پیښه له مینځه وړل کیږي کله چې د وسیلې ټایپ کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
hide.bs.tooltip | دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hide مثال میتود ویل کیږي. |
hidden.bs.tooltip | دا پیښه له مینځه وړل کیږي کله چې د وسیلې ټایپ د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
inserted.bs.tooltip | دا پیښه د show.bs.tooltip پیښې وروسته له مینځه وړل کیږي کله چې د اوزار ټایپ ټیمپلیټ DOM ته اضافه شوی وي. |
د منځپانګې کوچنۍ پوښښ اضافه کړئ، لکه په iPad کې، د کور ثانوي معلوماتو لپاره هر عنصر ته.
Popovers چې دواړه سرلیک او مینځپانګه صفر اوږدوالی لري هیڅکله نه ښودل کیږي.
Popovers د Tooltip پلگ ان ته اړتیا لري ترڅو ستاسو د بوټسټریپ نسخه کې شامل شي.
د فعالیت دلایلو لپاره، Tooltip او Popover data-apis غوره شوي، پدې معنی چې تاسو باید دوی پخپله پیل کړئ .
په یوه پاڼه کې د ټولو پاپورونو پیل کولو یوه لاره به دا وي چې دوی د دوی د data-toggle
ځانګړتیاوو له مخې غوره کړي:
کله چې په a .btn-group
یا 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. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
focus
په بل کلیک کې چې کارن یې کوي د پاپورونو لرې کولو لپاره محرک وکاروئ .
د مناسب کراس براوزر او کراس پلیټ فارم چلند لپاره، تاسو باید <a>
ټاګ وکاروئ، نه<button>
ټاګ، او تاسو باید دا او ځانګړتیاوې هم شامل role="button"
کړئ tabindex
.
د جاواسکریپټ له لارې پاپور فعال کړئ:
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-animation=""
.
نوم | ډول | ډیفالټ | تفصیل |
---|---|---|---|
حرکت | بولین | ریښتیا | پاپ اوور ته د CSS فیډ لیږد پلي کړئ |
کانتینر | تار | دروغ | دروغ | یو ځانګړي عنصر ته پاپ اوور ضمیمه کوي. بېلګه: |
منځپانګه | تار | فعالیت | '' | د اصلي منځپانګې ارزښت که که یو فنکشن ورکړل شي، نو دا به د |
ځنډ | شمیره | اعتراض | 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 د کوم بل محرک سره یوځای نشي. |
viewport | تار | څيز | فعالیت | {ټاکونکی: 'بدن'، پیډینګ: 0 } | د دې عنصر په حدودو کې پاپ اوور ساتي. بېلګه: که یو فنکشن ورکړل شي، دا د محرک عنصر DOM نوډ سره د یوازینۍ دلیل په توګه ویل کیږي. |
د انفرادي پاپورونو اختیارونه په بدیل ډول د ډیټا ځانګړتیاو کارولو له لارې مشخص کیدی شي ، لکه څنګه چې پورته تشریح شوي.
$().popover(options)
د عنصر راټولولو لپاره پاپور پیل کوي.
.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 | دا پیښه له مینځه وړل کیږي کله چې پاپ اوور کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
hide.bs.popover | دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hide مثال میتود ویل کیږي. |
hidden.bs.popover | دا پیښه له مینځه وړل کیږي کله چې پاپ اوور د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
inserted.bs.popover | دا پیښه د show.bs.popover پیښې وروسته له مینځه وړل کیږي کله چې د پاپ اوور ټیمپلیټ DOM ته اضافه شوی وي. |
د دې پلگ ان سره ټولو خبرتیا پیغامونو ته د ګوښه کولو فعالیت اضافه کړئ.
کله چې .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"
خپل نږدې تڼۍ ته اضافه کړئ ترڅو په اتوماتيک ډول د خبرتیا نږدې فعالیت ورکړئ. د خبرتیا بندول دا د DOM څخه لرې کوي.
د دې لپاره چې ستاسو خبرتیاوې د بندیدو پرمهال انیمیشن وکاروئ ، ډاډ ترلاسه کړئ چې دوی لا دمخه پلي شوي .fade
او .in
ټولګي لري.
$().alert()
د نسلي عناصرو په اړه د کلیک پیښو لپاره خبرتیا اوریدل کیږي کوم چې data-dismiss="alert"
ځانګړتیا لري. (ضرورت نلري کله چې د ډیټا-اپي اتومات پیل کول وکاروئ.)
$().alert('close')
د DOM څخه د لرې کولو له لارې خبرتیا بندوي. که چیرې .fade
او .in
ټولګي په عنصر کې شتون ولري، خبرتیا به مخکې له دې چې لیرې شي له منځه ځي.
د بوټسټریپ خبرتیا پلگ ان د خبرتیا فعالیت کې د ځړولو لپاره یو څو پیښې افشا کوي.
د پیښې ډول | تفصیل |
---|---|
close.bs.alert | دا پیښه سمدلاسه اوریږي کله چې د close مثال میتود ویل کیږي. |
تړل شوی بی بی خبرتیا | دا پیښه له مینځه وړل کیږي کله چې خبرتیا تړل شوې وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
د بټونو سره ډیر څه وکړئ. د کنټرول تڼۍ حالتونه یا د نورو برخو لکه اوزار بارونو لپاره د بټونو ګروپونه رامینځته کړئ.
فایرفوکس د پاڼي بارونو په اوږدو کې د کنټرول حالتونو (معیوبیت او چک کیدو) ته دوام ورکوي . د دې لپاره د حل لاره کارول autocomplete="off"
دي. د موزیلا بګ #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 سره .list-group
s بدل کړئ.
ډاډ ترلاسه کړئ 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"
او a data-target
په اتوماتيک ډول د سقوط وړ عنصر کنټرول وټاکئ. خاصیت د data-target
CSS انتخاب کونکی مني چې د سقوط پلي کولو لپاره. ډاډ ترلاسه کړئ چې ټولګي collapse
د سقوط وړ عنصر ته اضافه کړئ. که تاسو غواړئ چې دا په ډیفالټ خلاص شي، اضافي ټولګي اضافه کړئ in
.
د تړل کیدو وړ کنټرول ته د اکارډین په څیر ګروپ مدیریت اضافه کولو لپاره ، د ډیټا خاصیت اضافه کړئ data-parent="#selector"
. ډیمو ته مراجعه وکړئ ترڅو دا په عمل کې وګورئ.
په لاسي ډول د دې سره فعال کړئ:
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-parent=""
.
نوم | ډول | ډیفالټ | توضیحات |
---|---|---|---|
مور او پلار | انتخاب کونکی | دروغ | که یو ټاکونکی چمتو شوی وي، نو د ټاکل شوي پلار لاندې ټول تړل کیدونکي عناصر به وتړل شي کله چې دا د سقوط وړ توکي وښودل شي. (د دودیز اکارډین چلند سره ورته - دا په panel ټولګي پورې اړه لري) |
بدلول | بولین | ریښتیا | په بلنه کې د سقوط وړ عنصر بدلوي |
.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.collaps | دا پیښه له مینځه وړل کیږي کله چې د سقوط عنصر کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
hide.bs.collapse | دا پیښه سمدلاسه له مینځه وړل کیږي کله چې hide میتود ویل کیږي. |
hidden.bs.collapse | دا پیښه له مینځه وړل کیږي کله چې د سقوط عنصر د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
د عناصرو له لارې د سایکل چلولو لپاره د سلاید شو اجزا، لکه د کیروسل. ځړول شوي carousels نه ملاتړ کیږي.
د carousel برخه عموما د لاسرسي معیارونو سره مطابقت نلري. که تاسو ورته اړتیا لرئ، مهرباني وکړئ د خپل مینځپانګې وړاندې کولو لپاره نور اختیارونه په پام کې ونیسئ.
بوټسټریپ په ځانګړې توګه د خپلو انیمیشنونو لپاره CSS3 کاروي، مګر د انټرنیټ اکسپلورر 8 او 9 د اړین CSS ملکیتونو ملاتړ نه کوي. پدې توګه ، د دې براوزرونو کارولو پرمهال د سلایډ لیږد متحرکات شتون نلري. موږ په قصدي توګه پریکړه کړې چې د لیږدونو لپاره د jQuery پر بنسټ فال بیک شامل نه کړو.
ټولګي باید په .active
یو سلایډ کې اضافه شي. که نه نو، carousel به ښکاره نشي.
د کنټرول لپاره ټولګیو .glyphicon .glyphicon-chevron-left
او .glyphicon .glyphicon-chevron-right
ټولګیو ته اړتیا نشته. بوټسټریپ چمتو کوي .icon-prev
او .icon-next
د ساده یونیکوډ بدیل په توګه.
.carousel-caption
په اسانۍ سره په هر یو کې د عنصر سره خپلو سلایډونو ته سرلیکونه اضافه کړئ .item
. هلته دننه هر ډول اختیاري HTML ځای په ځای کړئ او دا به په اوتومات ډول تنظیم او فارمیټ شي.
Carousels د کاروسیل کنټرولونو د سم فعالیت لپاره id
په بهر کې ترټولو بهر کانټینر (د ) کارولو ته اړتیا لري . .carousel
کله چې ډیری کیروسلونه اضافه کړئ، یا کله چې د کاروسیل بدل id
کړئ، ډاډ ترلاسه کړئ چې اړوند کنټرولونه تازه کړئ.
د کاروسیل موقعیت په اسانۍ سره کنټرولولو لپاره د معلوماتو ځانګړتیاوې وکاروئ. data-slide
کلیدي کلمې مني prev
یا next
، کوم چې د اوسني موقعیت سره سم د سلایډ موقعیت بدلوي. په بدیل سره، data-slide-to
کاروسیل ته د خام سلایډ شاخص لیږدولو لپاره وکاروئ data-slide-to="2"
، کوم چې د سلایډ موقعیت یو ځانګړي شاخص ته بدلوي چې پیل کیږي 0
.
دا data-ride="carousel"
خاصیت د کاروسیل په نښه کولو لپاره کارول کیږي لکه څنګه چې د مخ په بار کې پیل کیږي. دا د ورته کاروسیل د (بې ځایه او غیر ضروري) واضح جاواسکریپټ ابتکار سره په ترکیب کې نشي کارول کیدی.
carousel په لاسي ډول سره زنګ ووهئ:
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-interval=""
.
نوم | ډول | ډیفالټ | توضیحات |
---|---|---|---|
وقفه | شمیره | 5000 | د یو توکي په اتوماتيک ډول سایکل چلولو تر منځ د ځنډولو وخت. که غلط وي، carousel به په اتوماتيک ډول سایکل نشي. |
وقفه | تار | null | "هور" | که ټاکل شوی وي "hover" ، د کاروسیل سایکل چلول ودروي mouseenter او د کاروسیل سایکل چلول بیا پیلوي mouseleave . که ټاکل شوی وي null ، په کاروسل باندې ځړول به دا ودروي. |
لپاسه | بولین | ریښتیا | آیا کاروسیل باید په دوامداره توګه سایکل وکړي یا سخت تمځایونه ولري. |
کیبورډ | بولین | ریښتیا | آیا کاروسیل باید د کیبورډ پیښو ته عکس العمل ښکاره کړي. |
.carousel(options)
د اختیاري اختیارونو سره کاروسیل object
پیل کوي او د توکو له لارې سایکل چلول پیل کوي.
.carousel('cycle')
د کیروسل توکي له کیڼ څخه ښیې ته بایسکل.
.carousel('pause')
کیروسیل د توکو له لارې د سایکل چلولو مخه نیسي.
.carousel(number)
کاروسیل یو ځانګړي چوکاټ ته سایکل کوي (0 پر بنسټ، د سرې سره ورته).
.carousel('prev')
تیر توکي ته سایکل.
.carousel('next')
راتلونکي توکي ته سایکل.
د بوټسټریپ کیروسیل ټولګي د کیروسل فعالیت کې د ځړولو لپاره دوه پیښې افشا کوي.
دواړه پیښې لاندې اضافي ځانګړتیاوې لري:
direction
: هغه لوري چې کیروسل په کې تیریږي (یا "left"
یا "right"
).relatedTarget
: د DOM عنصر چې د فعال توکي په توګه ځای پرځای شوی.د carousel ټولې پیښې پخپله په carousel کې ډزې کیږي (یعنې په <div class="carousel">
).
د پیښې ډول | تفصیل |
---|---|
slide.bs.carousel | دا پیښه سمدلاسه اوریږي کله چې د slide مثال میتود غوښتنه کیږي. |
slid.bs.carousel | دا پیښه له مینځه وړل کیږي کله چې کیروسل خپل سلایډ لیږد بشپړ کړی وي. |
د affix پلگ ان فعال position: fixed;
او غیر فعال کیږي، د اغیز سره موندل شوي انډول کوي position: sticky;
. په ښي خوا کې فرعي نیویګیشن د انفیکس پلگ ان ژوندی ډیمو دی.
د ډیټا ځانګړتیاو له لارې یا په لاسي ډول د خپل جاواسکریپټ سره د affix پلگ ان وکاروئ. په دواړو حالتونو کې، تاسو باید د خپل تړل شوي مینځپانګې موقعیت او عرض لپاره CSS چمتو کړئ.
یادونه: د افیکس پلگ ان په هغه عنصر کې مه کاروئ چې په نسبتا موقعیت لرونکي عنصر کې شتون لري، لکه د سفاري رینډرینګ بګ له امله یو ایستل شوی یا فشار شوی کالم .
د انفیکس پلگ ان د دریو ټولګیو تر مینځ بدلیږي، هر یو د یو ځانګړي حالت استازیتوب کوي: .affix
،، .affix-top
او .affix-bottom
. تاسو باید سټایلونه چمتو کړئ ، پرته له استثنا سره position: fixed;
، .affix
د دې ټولګیو لپاره پخپله (د دې پلگ ان څخه خپلواک) د اصلي موقعیتونو اداره کولو لپاره.
دلته دا دی چې څنګه د افکس پلگ ان کار کوي:
.affix-top
چې دا په ګوته کوي چې عنصر په خپل ترټولو لوړ موقعیت کې دی. پدې مرحله کې د CSS موقعیت ته اړتیا نشته..affix
ځای په ځای کوي .affix-top
او سیټ position: fixed;
کوي (د Bootstrap د CSS لخوا چمتو شوی)..affix
سره بدل شي .affix-bottom
. څرنګه چې آفسیټونه اختیاري دي، د یو ترتیب کول تاسو ته اړتیا لري چې مناسب CSS تنظیم کړئ. په دې حالت کې، د اړتیا په صورت کې اضافه کړئ position: absolute;
. پلگ ان د ډیټا خاصیت یا جاواسکریپټ اختیار کاروي ترڅو معلومه کړي چې له هغه ځای څخه عنصر چیرته موقعیت لري.د لاندې کارولو اختیارونو څخه د هر یو لپاره خپل CSS تنظیم کولو لپاره پورته ګامونه تعقیب کړئ.
د دې لپاره چې په اسانۍ سره هر عنصر ته د عاطفي چلند اضافه کړئ، یوازې هغه عنصر ته اضافه کړئ data-spy="affix"
چې تاسو یې جاسوس کول غواړئ. آفسیټس وکاروئ ترڅو تعریف کړئ کله چې د عنصر پنینګ بدل کړئ.
د جاواسکریپټ له لارې affix plugin ته زنګ ووهئ:
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-offset-top="200"
.
نوم | ډول | ډیفالټ | توضیحات |
---|---|---|---|
بندول | شمیره | فعالیت | اعتراض | 10 | د سکرول موقعیت محاسبه کولو پر مهال د سکرین څخه د خلاصولو لپاره پکسلونه. که یو واحد شمیره چمتو شي، آفسیټ به په پورتنۍ او ښکته دواړو لارښوونو کې پلي شي. د یو ځانګړي ، لاندې او پورتنۍ آفسیټ چمتو کولو لپاره یوازې یو څیز چمتو کړئ offset: { top: 10 } یا offset: { top: 10, bottom: 5 } . یو فنکشن وکاروئ کله چې تاسو اړتیا لرئ په متحرک ډول د آفسیټ محاسبه وکړئ. |
هدف | انتخاب کونکی | نوډ | jQuery عنصر | window څيز _ |
د اتصال هدف عنصر مشخص کوي. |
.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 | دا پیښه وروسته له هغه له مینځه وړل کیږي کله چې عنصر لاندې وصل شوی وي. |