Կյանքի կոչեք Bootstrap-ի բաղադրիչները՝ այժմ jQuery- ի 12 հատուկ պլագիններով:
Պարզեցված, բայց ճկուն, ավանդական javascript մոդալ հավելումը միայն նվազագույն պահանջվող ֆունկցիոնալությամբ և խելացի լռելյայններով:
Ներբեռնել ֆայլըՍտորև բերված է ստատիկ կերպով ներկայացված մոդալ:
Մեկ նուրբ մարմին…
Միացնել մոդալը Javascript-ի միջոցով՝ սեղմելով ստորև նշված կոճակը: Այն կսահի ներքև և կխամրի էջի վերևից:
Գործարկել ցուցադրական մոդալըԶանգահարեք մոդալը Javascript-ի միջոցով.
$('#myModal').modal(ընտրանքներ)
Անուն | տիպ | լռելյայն | նկարագրությունը |
---|---|---|---|
ֆոն | բուլյան | ճիշտ | Ներառում է մոդալ-ֆոնային տարր |
ստեղնաշար | բուլյան | ճիշտ | Փակում է մոդալը, երբ սեղմված է escape ստեղնը |
ցուցադրում | բուլյան | ճիշտ | Ցույց է տալիս մոդալը, երբ սկզբնավորվում է: |
Դուք կարող եք հեշտությամբ ակտիվացնել մոդալները ձեր էջում՝ առանց Javascript-ի մեկ տող գրելու: Պարզապես դրեք data-toggle="modal"
կարգավորիչի տարրը data-target="#foo"
կամ href="#foo"
որը համապատասխանում է մոդալ տարրի id-ին, և սեղմելուց հետո այն կգործարկի ձեր մոդալը:
Բացի այդ, ձեր մոդալ օրինակին տարբերակներ ավելացնելու համար պարզապես ներառեք դրանք որպես լրացուցիչ տվյալների ատրիբուտներ կամ կառավարման տարրի կամ մոդալ նշագրման վրա:
<a class="btn" data-toggle="modal" href="#myModal" >Մոդալ գործարկել</a>
<div class="modal" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Մոդալ վերնագիր</h3> </div> <div class="modal-body"> <p>Մի նուրբ մարմին…</p> </div> <div class="modal-footer"> <a href="#" class="btn btn-primary">Պահպանել փոփոխությունները</a> <a href="#" class="btn">Փակել</a> </div> </div>
.fade
դաս
ավելացրեք .modal
տարրին (տե՛ս ցուցադրությունը՝ սա գործողության մեջ տեսնելու համար) և ներառեք bootstrap-transition.js:
Ակտիվացնում է ձեր բովանդակությունը որպես մոդալ: Ընդունում է ընտրովի տարբերակներ object
:
$('#myModal').մոդալ ({ ստեղնաշար՝ կեղծ })
Ձեռքով փոխում է մոդալը:
$('#myModal').modal('toggle')
Ձեռքով բացում է մոդալ:
$('#myModal').modal('ցուցադրել')
Ձեռքով թաքցնում է մոդալը:
$('#myModal').modal('թաքցնել')
Bootstrap-ի մոդալ դասը բացահայտում է մի քանի իրադարձություն՝ մոդալ ֆունկցիոնալությանը միանալու համար:
Իրադարձություն | Նկարագրություն |
---|---|
ցուցադրում | Այս իրադարձությունը գործարկվում է անմիջապես, երբ show կանչվում է օրինակի մեթոդը: |
ցուցադրված է | Այս իրադարձությունը գործարկվում է, երբ մոդալը տեսանելի է դառնում օգտատիրոջը (կսպասի css անցումների ավարտին): |
թաքցնել | Այս իրադարձությունը գործարկվում է անմիջապես, երբ hide կանչվում է օրինակի մեթոդը: |
թաքնված | Այս իրադարձությունը գործարկվում է, երբ մոդալն ավարտում է օգտագործողից թաքցված լինելը (կսպասի css անցումների ավարտին): |
$('#myModal').on('թաքնված', ֆունկցիա () { // անել ինչ որ բան… })
Բացվող ընտրացանկերը ավելացրեք Bootstrap-ում գրեթե ցանկացած բանի այս պարզ հավելվածի միջոցով: Bootstrap-ն ապահովում է բացվող ընտրացանկի ամբողջական աջակցությունը navbar-ում, ներդիրներում և հաբերում:
Ներբեռնել ֆայլըԿտտացրեք նավարկիչի բացվող հղումների վրա և ներքևում գտնվող հաբերի վրա՝ բացվող ցանկերը փորձարկելու համար:
Զանգահարեք բացվող ցանկերը Javascript-ի միջոցով.
$('.dropdown-toggle').dropdown()
Ցանկացած տարրի բացվող ֆունկցիոնալությունը արագ ավելացնելու համար պարզապես ավելացրեք data-toggle="dropdown"
, և ցանկացած վավեր bootstrap բացվող ցանկն ավտոմատ կերպով կակտիվանա:
data-target="#fat"
կամ
href="#fat"
.
<ul class="nav pills"> <li class="active"><a href="#">Կանոնավոր հղում</a></li> <li class="dropdown" id="menu1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> Բացվող <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Գործողություն</a></li> <li><a href="#">Մեկ այլ գործողություն</a></li> <li><a href="#">Այլ բան կա այստեղ</a></li> <li class="divider"></li> <li><a href="#">Առանձնացված հղում</a></li> </ul> </li> ... </ul>
Ծրագրային api՝ տվյալ նավագոտու կամ ներդիրներով նավիգացիայի համար ընտրացանկերի ակտիվացման համար:
ScrollSpy հավելվածը նախատեսված է նավի թիրախների ավտոմատ թարմացման համար՝ հիմնվելով ոլորման դիրքի վրա:
Ներբեռնել ֆայլըՈլորեք ներքևի տարածքը և դիտեք նավիգացիայի թարմացումը: Բացվող ենթակետերը նույնպես ընդգծված կլինեն: Փորձիր!
Գովազդային սռնապաններ 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 սվիտեր Lomo Jean Shorts, Wiliamsburg Hoodie Minim qui, որոնց մասին դուք հավանաբար չեք լսել և բրդե հյուսված բրդե հյուսված ֆոնդ culpa biodiesel Wes Anderson էսթետիկ: Nihil դաջված accusamus, cred հեգնանք biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa բեղավոր սքեյթբորդ, դիպչող ֆուգիաթ թավշյա մորուք: Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat չորս loko nisi, ea helvetica nulla carles. Դաջված Cosby սվիտեր սննդի բեռնատար, mcsweeney's quis non freegan վինիլ: Lo-fi wes anderson +1 sartorial. Կառլեսը ոչ էսթետիկ վարժություն quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft գարեջուր deserunt skateboard ea. Lomo հեծանիվների իրավունքները adipisicing banh mi, velit ea sunt հաջորդ մակարդակի locavore մեկ ծագման սուրճ է magna veniam. Բարձր կյանքի id վինիլային, էխո պարկի հետևանքով quis aliquip banh mi pitchfork: Vero VHS-ը դիպչող է: Կառուցեք DIY նվազագույն մեսենջերի պայուսակ: Cred ex in, կայուն ելեկտ��ական կոնսեկտոր Fanny փաթեթ iPhone.
Incididunt echo park-ում, officia deserunt mcsweeney's proident master-ը մաքրում է sapiente veniam ամպրոպային կատուները: Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft գարեջուր: Մեկ ծագման սուրճի ճանապարհորդները irure four loko, cupidatat terry richardson master cleanse. Ասումենդա, դուք հավանաբար չեք լսել նրանց մասին արվեստի երեկույթի ֆաննի փաթեթ, դաջված nulla կարդիգան ժամանակավոր գովազդ: Proident wolf nesciunt sartorial keffiyeh eu banh mi կայուն. Elit wolf voluptate, lo-fi ea Portland նախքան նրանք վաճառել են չորս Loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Գովազդային սռնապաններ 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 սվիտեր Lomo Jean Shorts, Wiliamsburg Hoodie Minim qui, որոնց մասին դուք հավանաբար չեք լսել և բրդե հյուսված բրդե հյուսված ֆոնդ culpa biodiesel Wes Anderson էսթետիկ: Nihil դաջված accusamus, cred հեգնանք biodiesel keffiyeh artisan ullamco consequat.
Keytar twee բլոգ, culpa մեսենջեր պայուսակ marfa, ինչ էլ որ լինի դելեկտուս սննդի մեքենա: Sapiente synth id assumenda. Locavore sed helvetica կլիշե հեգնանք, ամպրոպային կատուներ, որոնց մասին դուք հավանաբար չեք լսել, հետևում են hoodie առանց սնձան lo-fi fap aliquip-ի: Labore elit placeat նախքան նրանք վաճառվել են, Terry richardson proident brunch nesciunt quis cosby սվիտեր pariatur keffiyeh ut helvetica artisan. Cardigan craft գարեջուր seitan պատրաստի թել. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.
Զանգահարեք scrollspy-ին Javascript-ի միջոցով.
$('#navbar').scrollspy()
Որպեսզի հեշտությամբ ավելացնեք ձեր վերևի տողի նավարկության մեջ գաղտնալսման վարքագիծը, պարզապես ավելացրեք data-spy="scroll"
այն տարրը, որը ցանկանում եք լրտեսել (սովորաբար սա կլինի մարմինը):
<body data-spy="scroll" >...</body>
<a href="#home">home</a>
պետք է համապատասխանի մի բանի, ինչպիսին է
<div id="home"></div>
.
Անուն | տիպ | լռելյայն | նկարագրությունը |
---|---|---|---|
օֆսեթ | թիվ | 10 | Փիքսելներ, որոնք պետք է շրջվեն վերևից՝ ոլորման դիրքը հաշվարկելիս: |
Այս փլագինը ավելացնում է արագ, դինամիկ ներդիրների և հաբերի ֆունկցիոնալությունը՝ տեղական բովանդակության միջոցով անցնելու համար:
Ներբեռնել ֆայլըԿտտացրեք ստորև բերված ներդիրներին՝ թաքնված վահանակների միջև փոխարկվելու համար, նույնիսկ բացվող ընտրացանկերի միջոցով:
Հում ջինսե, դուք, հավանաբար, չեք լսել դրանց մասին Jean Shorts Austin: Nesciunt tofu stumptown aliqua, ռետրո սինթետիկ վարպետ մաքրում: Բեղերի կլիշե ժամանակավոր, Wiliamsburg carles vegan helvetica. Reprehenderit մսագործ ռետրո keffiyeh Dreamcatcher synth. Cosby սվիտեր eu banh mi, qui irure terry richardson նախկին կաղամար. Այն կարող է օգտագործվել iPhone-ի համար: Seitan aliquip quis cardigan ամերիկյան հագուստ, մսագործ voluptate nisi qui.
Food Truck fixie locavore, accusamus mcsweeney's marfa nulla մեկ ծագման սուրճի կաղամար: Զորավարժություն +1 labore velit, բլոգի sartorial PBR սռնապաններ հաջորդ մակարդակի Wes Anderson Artisan four loko ֆերմա-սեղան արհեստ գարեջուր twee. Qui լուսանկարչական տաղավար, commodo enim craft գարեջուր mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assummenda labore գեղագիտական magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack Odio cillum Wes Anderson 8-բիթանոց, կայուն ջինսե շորտեր մորուքով և DIY էթիկական մեղավոր Թերի Ռիչարդսոնի կենսադիզել: Արվեստի երեկույթների գեղարվեստական սցեստր ստամպթաուն, tumblr մսագործ vero sint qui sapiente accusamus դաջված էխո պարկ:
Etsy mixtape ճանապարհորդներ, էթիկական Վես Անդերսոն tofu նախքան նրանք վաճառել են Mcsweeney-ի օրգանական Lomo Retro Fanny փաթեթը lo-fi ֆերմայից մինչև սեղան պատրաստի: Messenger պայուսակ gentrify pitchfork դաջված արհեստական գարեջուր, iPhone-ի սքեյթբորդ locavore Carles Etsy Salvia Banksy hoodie helvetica: DIY synth PBR banksy հեգնանք. Լեգինսները մեղմացնում են կաղամարը 8-բիթանոց կրեդի պատառաքաղով: Williamsburg banh mi ինչ էլ որ լինի առանց սնձան, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester հավատարմությունը, դուք հավանաբար չեք լսել նրանց մասին, վինիլային արհեստագործական գարեջրի բլոգ stumptown: Pitchfork կայուն tofu synth chambray թ.
Trust Fund seitan letterpress, keytar raw denim keffiyeh etsy art party, նախքան դրանք վաճառվել են վարպետ մաքրել առանց սնձանից կաղամարի դեկորացիա ֆրիգան կոսբի սվիտեր: Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi, նախքան նրանք վաճառել էին ֆերմայից սեղան VHS վիրուսային լոկավոր Cosby սվիտեր: Lomo wolf վիրուսային, բեղերի պատրաստի ամպրոպներ keffiyeh craft գարեջուր marfa էթիկական. Wolf Salvia Freegan, sartorial keffiyeh echo park vegan.
Միացնել tabbable ներդիրները Javascript-ի միջոցով.
$('#myTab').tab ('ցուցադրել')
Դուք կարող եք ակտիվացնել ներդիրի կամ հաբերի նավարկությունը՝ առանց որևէ javascript գրելու՝ պարզապես նշելով data-toggle="tab"
կամ data-toggle="pill"
որևէ տարրի վրա:
<ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Տուն</a></li> <li><a href="#profile" data-toggle="tab">Պրոֆիլ</a></li> <li><a href="#messages" data-toggle="tab">Հաղորդագրություններ</a></li> <li><a href="#settings" data-toggle="tab">Կարգավորումներ</a></li> </ul>
Ակտիվացնում է ներդիրի տարրը և բովանդակության կոնտեյները: Ներդիրը պետք է ունենա կամ «տվյալների թիրախ» կամ «href»՝ ուղղված բեռնարկղային հանգույցին dom-ում:
<ul class="nav nav-tabs"> <li class="active"><a href="#home">Տուն</a></li> <li><a href="#profile">Պրոֆիլ</a></li> <li><a href="#messages">Հաղորդագրություններ</a></li> <li><a href="#settings">Կարգավորումներ</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">...</div> <div class="tab-pane" id="profile">...</div> <div class="tab-pane" id="messages">...</div> <div class="tab-pane" id="settings">...</div> </div> <script> $(գործառույթ () { $('.tabs a:last').tab('ցուցադրել') }) </script>
Իրադարձություն | Նկարագրություն |
---|---|
ցուցադրում | Այս իրադարձությունը բացվում է ներդիրների ցուցադրման վրա, բայց մինչ նոր ներդիրը կցուցադրվի: Օգտագործեք event.target և event.relatedTarget թիրախավորեք համապատասխանաբար ակտիվ ներդիրը և նախորդ ակտիվ ներդիրը (եթե առկա է): |
ցուցադրված է | Այս իրադարձությունը բացվում է ներդիրների ցուցադրումից հետո ներդիրի ցուցադրումից հետո: Օգտագործեք event.target և event.relatedTarget թիրախավորեք համապատասխանաբար ակտիվ ներդիրը և նախորդ ակտիվ ներդիրը (եթե առկա է): |
$('a[data-toggle="tab"]').on('ցուցադրված', ֆունկցիա (e) { e.target // ակտիվացված ներդիր e.relatedTarget // նախորդ ներդիր })
Ոգեշնչված է հիանալի jQuery.tipsy հավելվածով, որը գրվել է Ջեյսոն Ֆրեյմի կողմից; Tooltips-ը թարմացված տարբերակ է, որը չի հիմնվում պատկերների վրա, օգտագործում է css3 անիմացիաների համար, իսկ տվյալների ատրիբուտները տեղական վերնագրերի պահպանման համար:
Ներբեռնել ֆայլըԳործիքների հուշումները տեսնելու համար սավառնեք ստորև նշված հղումների վրա.
Նիհար տաբատ հաջորդ մակարդակի keffiyeh դուք հավանաբար չեք լսել նրանց մասին: Ֆոտո խցիկ մորուք հում ջինսե տառատեսակ Vegan Messenger պայուսակ stumptown. Ֆերմայից սեղան սեյթան, Mcsweeney's fixie-ի կայուն քինոա 8-բիթանոց ամերիկյան հագուստն ունի Թերի Ռիչարդսոնի վինիլային շամպրե: Մորուքի ստամպթաուն, կարդիգաններ բանհ մի լոմո ամպրոպ. Tofu բիոդիզել Ուիլյամսբուրգ Մարֆա, չորս Loko Mcsweeney's cleanse vegan chambray. Իսկապես հեգնական արհեստավոր , ինչ էլ որ լինի keytar, դեկորացիա ֆերմա-to-sable Banksy Austin twitter handle freegan cred հում ջինսե մեկ ծագման սուրճ վիրուսային.
Գործարկեք գործիքի հուշումը Javascript-ի միջոցով.
$('#example').tooltip(ընտրանքներ)
Անուն | տիպ | լռելյայն | նկարագրությունը |
---|---|---|---|
անիմացիա | բուլյան | ճիշտ | կիրառել css fade անցում դեպի գործիքի հուշում |
տեղաբաշխում | լարային|գործառ | 'գագաթ' | ինչպես տեղադրել գործիքի հուշումը - վերև | ստորին | ձախ | ճիշտ |
ընտրիչ | լար | կեղծ | Եթե ընտրիչ է տրամադրվում, գործիքի հուշման օբյեկտները կփոխանցվեն նշված թիրախներին: |
կոչում | լարային | ֆունկցիան | '' | վերնագրի կանխադրված արժեքը, եթե «վերնագիր» պիտակը չկա |
ձգան | լար | 'սավառնել' | ինչպես է գործարկվում գործիքի հուշումը - սավառնել | կենտրոնացում | ձեռնարկ |
ուշացում | համարը | օբյեկտ | 0 | հետաձգել գործիքի հուշումը ցուցադրելը և թաքցնելը (ms) Եթե համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել Օբյեկտի կառուցվածքը հետևյալն է. |
Կատարման նկատառումներից ելնելով, Tooltip-ը և Popover data-apis-ը միացված են: Եթե ցանկանում եք դրանք օգտագործել, պարզապես նշեք ընտրիչի տարբերակը:
<a href="#" rel="tooltip" title="first tooltip">սավառնել իմ վրա</a>
Կցում է գործիքի հուշման կարգավորիչը տարրերի հավաքածուին:
Բացահայտում է տարրերի գործիքի հուշում:
$('#element').tooltip('ցուցադրել')
Թաքցնում է տարրերի գործիքի հուշումը:
$('#element').tooltip('թաքցնել')
Անջատում է տարրերի գործիքի հուշումը:
$('#element').tooltip('toggle')
Ավելացրեք բովանդակության փոքր ծածկույթներ, ինչպիսիք են iPad-ի բովանդակությունը, ցանկացած տարրի վրա՝ երկրորդական տեղեկատվության պահպանման համար:
* Պահանջվում է Tooltip ներառել
Ներբեռնել ֆայլըՍավառնեք կոճակի վրա՝ պոպովերը գործարկելու համար:
Միացնել popover-ները Javascript-ի միջոցով.
$('#example').popover(ընտրանքներ)
Անուն | տիպ | լռելյայն | նկարագրությունը |
---|---|---|---|
անիմացիա | բուլյան | ճիշտ | կիրառել css fade անցում դեպի գործիքի հուշում |
տեղաբաշխում | լարային|գործառ | 'ճիշտ' | ինչպես տեղադրել popover-ը - վերև | ստորին | ձախ | ճիշտ |
ընտրիչ | լար | կեղծ | եթե տրամադրվում է ընտրիչ, գործիքի հուշման օբյեկտները կփոխանցվեն նշված թիրախներին |
ձգան | լար | 'սավառնել' | ինչպես է գործարկվում գործիքի հուշումը - սավառնել | կենտրոնացում | ձեռնարկ |
կոչում | լարային | ֆունկցիան | '' | վերնագրի լռելյայն արժեքը, եթե «title» հատկանիշը չկա |
բովանդակությունը | լարային | ֆունկցիան | '' | բովանդակության լռելյայն արժեքը, եթե «data-content» հատկանիշը չկա |
ուշացում | համարը | օբյեկտ | 0 | հետաձգել popover-ը ցուցադրելը և թաքցնելը (ms) Եթե համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել Օբյեկտի կառուցվածքը հետևյալն է. |
Արդյունավետության նկատառումներից ելնելով, Tooltip-ը և Popover data-apis-ը միացված են: Եթե ցանկանում եք դրանք օգտագործել, պարզապես նշեք ընտրիչի տարբերակը:
Նախաձեռնում է popovers տարրերի հավաքածուի համար:
Բացահայտում է տարրերի պոպովեր:
$('#element').popover('show')
Թաքցնում է տարրերի պոպովերը:
$('#element').popover('թաքցնել')
Անջատում է տարրերի փոփվերը:
$('#element').popover('toggle')
Զգուշացման հավելումը փոքր դաս է զգուշացումներին մոտ ֆունկցիոնալություն ավելացնելու համար:
ԲեռնելԾանուցումների հավելվածն աշխատում է կանոնավոր ահազանգերի վրա և արգելափակում է հաղորդագրությունները:
Փոխեք սա և այն և նորից փորձեք: Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Միացնել ահազանգի անջատումը Javascript-ի միջոցով.
$(.alert").alert()
Պարզապես ավելացրեք data-dismiss="alert"
ձեր փակման կոճակին, որպեսզի ավտոմատ կերպով ազդանշան փակման գործառույթը տրամադրվի:
<a class="close" data-dismiss="alert" href="#">×</a>
Փաթաթում է բոլոր ահազանգերը փակ ֆունկցիոնալությամբ: Որպեսզի ձեր ծանուցումները փակ լինեն, համոզվեք, որ դրանք .fade
և .in
դասը արդեն կիրառվել են դրանց համար:
Փակում է ահազանգը:
$(.alert").alert('close')
Bootstrap-ի ազդանշանային դասը բացահայտում է մի քանի իրադարձություններ՝ ազդանշանային գործառույթին միանալու համար:
Իրադարձություն | Նկարագրություն |
---|---|
փակել | Այս իրադարձությունը գործարկվում է անմիջապես, երբ close կանչվում է օրինակի մեթոդը: |
փակված | Այս իրադարձությունը գործարկվում է, երբ ահազանգը փակված է (կսպասի css անցումների ավարտին): |
$('#my-alert').bind('փակ', ֆունկցիա () { // անել ինչ որ բան… })
Ստացեք հիմնական ոճեր և ճկուն աջակցություն ծալվող բաղադրիչների համար, ինչպիսիք են ակորդեոնները և նավիգացիան:
Ներբեռնել ֆայլըՕգտագործելով collapse plugin-ը, մենք կառուցեցինք պարզ ակորդեոնի ոճի վիդջեթ.
Միացնել Javascript-ի միջոցով.
$(".collapse").collapse()
Անուն | տիպ | լռելյայն | նկարագրությունը |
---|---|---|---|
ծնող | ընտրիչ | կեղծ | Եթե ընտրիչը, ապա նշված ծնողի տակ գտնվող բոլոր ծալվող տարրերը կփակվեն, երբ ցուցադրվի այս ծալվող տարրը: (նման է ավանդական ակորդեոնի վարքագծին) |
փոխարկել | բուլյան | ճիշտ | Անջատում է ծալվող տարրը կանչի ժամանակ |
Պարզապես ավելացրեք data-toggle="collapse"
և a data-target
տարր՝ ծալվող տարրի կառավարումը ավտոմատ կերպով նշանակելու համար: Հատկանիշն data-target
ընդունում է css ընտրիչ՝ փլուզումը կիրառելու համար: Համոզվեք, որ դասը ավելացրե՛ք collapse
ծալվող տարրին: Եթե ցանկանում եք, որ այն լռելյայն բացվի, ավելացրեք լրացուցիչ դասը in
:
<button class="btn btn-danger" data-toggle="collapse" data-target="#demo"> պարզ ծալվող </button> <div id="demo" class="collapse in"> … </div>
data-parent="#selector"
: Տեսեք ցուցադրությունը՝ սա գործողության մեջ տեսնելու համար:
Ակտիվացնում է ձեր բովանդակությունը որպես ծալովի տարր: Ընդունում է ընտրովի տարբերակներ object
:
$('#myCollapsible').collapse({ փոխարկել՝ կեղծ })
Անջատում է ծալվող տարրը ցուցադրված կամ թաքցվածի:
Ցույց է տալիս ծալվող տարր:
Թաքցնում է ծալվող տարրը:
Bootstrap-ի փլուզման դասը բացահայտում է մի քանի իրադարձություններ՝ փլուզման գործառույթին միանալու համար:
Իրադարձություն | Նկարագրություն |
---|---|
ցուցադրում | Այս իրադարձությունը գործարկվում է անմիջապես, երբ show կանչվում է օրինակի մեթոդը: |
ցուցադրված է | Այս իրադարձությունը գործարկվում է, երբ ծալման տարրը տեսանելի է դառնում օգտատիրոջը (կսպասի css անցումների ավարտին): |
թաքցնել | Այս իրադարձությունը գործարկվում է անմիջապես, երբ hide մեթոդը կանչվում է: |
թաքնված | Այս իրադարձությունը գործարկվում է, երբ ծալման տարրը թաքցված է օգտվողից (կսպասի css-ի անցումների ավարտին): |
$('#myCollapsible').on('թաքնված', ֆունկցիա () { // անել ինչ որ բան… })
Ընդհանուր պլագին տարրերի միջով հեծանիվ անցնելու համար: Զվարճալի շրջագայություն:
Ներբեռնել ֆայլըԴիտեք ստորև ներկայացված սլայդշոուն:
Զանգահարեք Javascript-ի միջոցով.
$('.carousel').carousel()
Անուն | տիպ | լռելյայն | նկարագրությունը |
---|---|---|---|
ընդմիջում | թիվ | 5000 | Ժամանակի չափը, որը հետաձգվում է ապրանքի ինքնաբերաբար հեծանիվ վարելու միջև: |
Տվյալների ատրիբուտները անբաժանելի են կարուսելային հավելվածի համար: Ստուգեք ստորև բերված օրինակի կոդը տարբեր նշագրման տեսակների համար:
<div id="myCarousel" class="carousel"> <!-- Կարուսելի իրեր --> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- Կարուսել նավ --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>
Նախաձեռնում է կարուսելը կամընտիր ընտրանքներով object
և սկսում հեծանվով անցնել իրերի միջով:
$('.myCarousel').կարուսել({ ընդմիջումը՝ 2000 })
Շրջում է կարուսելի տարրերի միջով ձախից աջ:
Դադարեցնում է կարուսելը իրերի միջով հեծանիվ անցնելուց:
Կարուսելը տեղափոխում է որոշակի շրջանակ (0-ի վրա հիմնված, զանգվածի նման):
Ցիկլեր դեպի նախորդ կետը:
Շրջագայություններ դեպի հաջորդ կետ:
Bootstrap-ի մոդալ դասը բացահայտում է մի քանի իրադարձություն՝ մոդալ ֆունկցիոնալությանը միանալու համար:
Իրադարձություն | Նկարագրություն |
---|---|
Սլայդ | Այս իրադարձությունն անմիջապես գործարկվում է, երբ գործարկվում է slide օրինակի մեթոդը: |
սահեց | Այս միջոցառումը գործարկվում է, երբ կարուսելը ավարտում է իր սլայդային անցումը: |
Հիմնական, հեշտությամբ ընդլայնվող հավելված՝ ցանկացած ձևի տեքստի մուտքագրմամբ էլեգանտ տառատեսակներ արագ ստեղծելու համար:
Ներբեռնել ֆայլըՍկսեք մուտքագրել ներքևի դաշտում` տպագրության արդյունքները ցույց տալու համար:
Զանգահարեք տառատեսակը Javascript-ի միջոցով.
$('.typeahead').typeahead()
Անուն | տիպ | լռելյայն | նկարագրությունը |
---|---|---|---|
աղբյուր | զանգված | [ ] | Տվյալների աղբյուրը, որի դեմ պետք է հարցում: |
իրեր | թիվ | 8 | Բացվող ցանկում ցուցադրվող տարրերի առավելագույն քանակը: |
համապատասխանող | ֆունկցիան | գործի անզգայուն | Մեթոդ, որն օգտագործվում է որոշելու համար, թե արդյոք հարցումը համապատասխանում է որևէ տարրի: Ընդունում է մեկ փաստարկ, որի item դեմ պետք է ստուգվի հարցումը: Մուտք գործեք ընթացիկ հարցումը this.query . Վերադարձեք բուլյան true , եթե հարցումը համընկնում է: |
տեսակավորող | ֆունկցիան | ճշգրիտ համընկնում, մեծատառերի զգայուն, մեծատառերի անզգայուն |
Ինքնալրացման արդյունքները տեսակավորելու համար օգտագործվող մեթոդ: Ընդունում է մեկ արգումենտ items և ունի տպագիր օրինակի շրջանակը: Հղեք ընթացիկ հարցումը this.query . |
ընդգծող | ֆունկցիան | ընդգծում է բոլոր լռելյայն համընկնումները | Ինքնալրացման արդյունքներն ընդգծելու համար օգտագործվող մեթոդ: Ընդունում է մեկ արգումենտ item և ունի տպագիր օրինակի շրջանակը: Պետք է վերադարձնի html: |
Տվյալների ատրիբուտներ ավելացրեք՝ տպագիր գլխի ֆունկցիոնալությամբ տարր գրանցելու համար:
<input type="text" data-provide="typeahead">
Նախաձեռնում է մուտքագրումը տառատեսակով: