Javascript Bootstrap-ի համար

Կյանքի կոչեք Bootstrap-ի բաղադրիչները՝ այժմ jQuery- ի 12 հատուկ պլագիններով:

Մոդալներ

Պարզեցված, բայց ճկուն, ավանդական javascript մոդալ հավելումը միայն նվազագույն պահանջվող ֆունկցիոնալությամբ և խելացի լռելյայններով:

Բացվող պատուհաններ

Բացվող ընտրացանկերը ավելացրեք Bootstrap-ում գրեթե ցանկացած բանի այս պարզ հավելվածի միջոցով: Bootstrap-ն ապահովում է բացվող ընտրացանկի ամբողջական աջակցությունը navbar-ում, ներդիրներում և հաբերում:

Scrollspy

Օգտագործեք scrollspy՝ ձեր navbar-ի հղումները ավտոմատ կերպով թարմացնելու համար՝ ընթացիկ ակտիվ հղումը ցուցադրելու համար՝ հիմնված ոլորման դիրքի վրա:

Փոխարկվող ներդիրներ

Օգտագործեք այս հավելվածը՝ ներդիրներն ու հաբերն ավելի օգտակար դարձնելու համար՝ թույլ տալով նրանց անցնել տեղական բովանդակության ներդիրների վահանակների միջով:

Գործիքների հուշումներ

jQuery Tipsy plugin-ի նոր մոտեցում՝ Tooltips-ը չի հիմնվում պատկերների վրա. նրանք օգտագործում են CSS3 անիմացիաների համար, իսկ տվյալների ատրիբուտները տեղական վերնագրերի պահպանման համար:

Պոպովեր *

Ավելացրեք բովանդակության փոքր ծածկույթներ, ինչպիսիք են iPad-ի բովանդակությունը, ցանկացած տարրի վրա՝ երկրորդական տեղեկատվության պահպանման համար:

* Պահանջվում է Գործիքների հուշումներ ներառել

Զգուշացման հաղորդագրություններ

Զգուշացման հավելումը փոքր դաս է զգուշացումներին մոտ ֆունկցիոնալություն ավելացնելու համար:

Կոճակներ

Կատարեք ավելին կոճակներով: Կառավարեք կոճակի վիճակը կամ ստեղծեք կոճակների խմբեր ավելի շատ բաղադրիչների համար, ինչպիսիք են գործիքների տողերը:

Փլուզվել

Ստացեք հիմնական ոճեր և ճկուն աջակցություն ծալվող բաղադրիչների համար, ինչպիսիք են ակորդեոնները և նավիգացիան:

Կարուսել

Ստեղծեք ցանկացած բովանդակության զվարճալի ցուցադրություն, որը ցանկանում եք տրամադրել բովանդակության ինտերակտիվ սլայդշոու:

Typeahead

Հիմնական, հեշտությամբ ընդլայնվող հավելված՝ ցանկացած ձևի տեքստի մուտքագրմամբ էլեգանտ տառատեսակներ արագ ստեղծելու համար:

Անցումներ *

Պարզ անցումային էֆեկտների համար ներառեք bootstrap-transition.js-ը մեկ անգամ՝ մոդալներում սահելու կամ ծանուցումները մարելու համար:

* Պահանջվում է պլագիններում անիմացիայի համար

Գլուխը վեր Բոլոր javascript հավելվածները պահանջում են jQuery-ի վերջին տարբերակը:

Մոդալների մասին

Պարզեցված, բայց ճկուն, ավանդական javascript մոդալ հավելումը միայն նվազագույն պահանջվող ֆունկցիոնալությամբ և խելացի լռելյայններով:

Ներբեռնել ֆայլը

Ստատիկ օրինակ

Ստորև բերված է ստատիկ կերպով ներկայացված մոդալ:

Կենդանի ցուցադրություն

Միացնել մոդալը Javascript-ի միջոցով՝ սեղմելով ստորև նշված կոճակը: Այն կսահի ներքև և կխամրի էջի վերևից:

Գործարկել ցուցադրական մոդալը

Օգտագործելով bootstrap-modal

Զանգահարեք մոդալը Javascript-ի միջոցով.

  1. $ ( «#myModal» ): մոդալ ( ընտրանքներ )

Ընտրանքներ

Անուն տիպ լռելյայն նկարագրությունը
ֆոն բուլյան ճիշտ Ներառում է մոդալ-ֆոնային տարր: Որպես այլընտրանք, նշեք staticֆոն, որը չի փակում մոդալը սեղմելով:
ստեղնաշար բուլյան ճիշտ Փակում է մոդալը, երբ սեղմված է escape ստեղնը
ցուցադրում բուլյան ճիշտ Ցույց է տալիս մոդալը, երբ սկզբնավորվում է:

Նշում

Դուք կարող եք հեշտությամբ ակտիվացնել մոդալները ձեր էջում՝ առանց Javascript-ի մեկ տող գրելու: Պարզապես դրեք data-toggle="modal"կարգավորիչի տարրը data-target="#foo"կամ href="#foo"որը համապատասխանում է մոդալ տարրի id-ին, և սեղմելուց հետո այն կգործարկի ձեր մոդալը:

Բացի այդ, ձեր մոդալ օրինակին տարբերակներ ավելացնելու համար պարզապես ներառեք դրանք որպես լրացուցիչ տվյալների ատրիբուտներ կամ կառավարման տարրի կամ մոդալ նշագրման վրա:

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Գործարկել մոդալը </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Մոդալ վերնագիր </h3>
  5. </div>
  6. <div class = «մոդալ-մարմին» >
  7. <p> Մեկ նուրբ մարմին… </p>
  8. </div>
  9. <div class = «modal-footer» >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Փակել </a>
  11. <a href = "#" class = "btn btn-primary" > Պահպանել փոփոխությունները </a>
  12. </div>
  13. </div>
Գլուխը վեր Եթե ​​ցանկանում եք, որ ձեր մոդալը շարժվի և դուրս գա, պարզապես մի .fadeդաս ավելացրեք .modalտարրին (տե՛ս ցուցադրությունը՝ սա գործողության մեջ տեսնելու համար) և ներառեք bootstrap-transition.js:

Մեթոդներ

.modal(ընտրանքներ)

Ակտիվացնում է ձեր բովանդակությունը որպես մոդալ: Ընդունում է ընտրովի տարբերակներ object:

  1. $ ( «#myModal» ): մոդալ ({
  2. ստեղնաշար : կեղծ
  3. })

.modal ('toggle')

Ձեռքով փոխում է մոդալը:

  1. $ ( «#myModal» ): մոդալ ( «անջատել» )

.modal ('ցուցադրել')

Ձեռքով բացում է մոդալ:

  1. $ ( «#myModal» ): մոդալ ( «ցուցադրել» )

.modal ('թաքցնել')

Ձեռքով թաքցնում է մոդալը:

  1. $ ( «#myModal» ): մոդալ ( «թաքցնել» )

Իրադարձություններ

Bootstrap-ի մոդալ դասը բացահայտում է մի քանի իրադարձություն՝ մոդալ ֆունկցիոնալությանը միանալու համար:

Իրադարձություն Նկարագրություն
ցուցադրում Այս իրադարձությունը գործարկվում է անմիջապես, երբ showկանչվում է օրինակի մեթոդը:
ցուցադրված է Այս իրադարձությունը գործարկվում է, երբ մոդալը տեսանելի է դառնում օգտատիրոջը (կսպասի css անցումների ավարտին):
թաքցնել Այս իրադարձությունը գործարկվում է անմիջապես, երբ hideկանչվում է օրինակի մեթոդը:
թաքնված Այս իրադարձությունը գործարկվում է, երբ մոդալն ավարտում է օգտագործողից թաքցված լինելը (կսպասի css անցումների ավարտին):
  1. $ ( «#myModal» ): on ( 'թաքնված' , ֆունկցիա () {
  2. // անել ինչ որ բան…
  3. })

ScrollSpy հավելվածը նախատեսված է նավի թիրախների ավտոմատ թարմացման համար՝ հիմնվելով ոլորման դիրքի վրա:

Ներբեռնել ֆայլը

Օրինակ նավագոտի 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.

@mdo

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.

երկու

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee բլոգ, 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.


Օգտագործելով bootstrap-scrollspy.js

Զանգահարեք scrollspy-ին Javascript-ի միջոցով.

  1. $ ( '#navbar' ): scrollspy ()

Նշում

Որպեսզի հեշտությամբ ավելացնեք ձեր վերևի տողի նավարկության մեջ գաղտնալսման վարքագիծը, պարզապես ավելացրեք data-spy="scroll"այն տարրը, որը ցանկանում եք լրտեսել (սովորաբար սա կլինի մարմինը):

  1. <body data-spy = "scroll" > ... </body>
Գլուխը վեր Navbar-ի հղումները պետք է ունենան լուծելի ID թիրախներ: Օրինակ, a-ն <a href="#home">home</a>պետք է համապատասխանի մի բանի, ինչպիսին է <div id="home"></div>.

Մեթոդներ

.scrollspy ('թարմացնել')

Երբ օգտագործում եք scrollspy-ը DOM-ից տարրեր ավելացնելու կամ հեռացնելու հետ մեկտեղ, դուք պետք է զանգահարեք թարմացման մեթոդը այսպես.

  1. $ ( '[data-spy="scroll"]' ): յուրաքանչյուրը ( ֆունկցիա () {
  2. var $spy = $ ( սա ): scrollspy ( «թարմացում» )
  3. });

Ընտրանքներ

Անուն տիպ լռելյայն նկարագրությունը
օֆսեթ թիվ 10 Փիքսելներ, որոնք պետք է շրջվեն վերևից՝ ոլորման դիրքը հաշվարկելիս:

Իրադարձություններ

Իրադարձություն Նկարագրություն
ակտիվացնել Այս իրադարձությունը գործարկվում է, երբ նոր տարր ակտիվանում է scrollspy-ի կողմից:

Այս փլագինը ավելացնում է արագ, դինամիկ ներդիրների և հաբերի ֆունկցիոնալությունը՝ տեղական բովանդակության միջոցով անցնելու համար:

Ներբեռնել ֆայլը

Օրինակ ներդիրներ

Կտտացրեք ստորև բերված ներդիրներին՝ թաքնված վահանակների միջև փոխարկվելու համար, նույնիսկ բացվող ընտրացանկերի միջոցով:

Հում ջինսե, դուք, հավանաբար, չեք լսել դրանց մասին 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 single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Օգտագործելով bootstrap-tab.js

Միացնել tabbable ներդիրները javascript-ի միջոցով (յուրաքանչյուր ներդիր պետք է առանձին ակտիվացվի).

  1. $ ( «#myTab a» ): սեղմեք ( ֆունկցիա ( e ) {
  2. ե . preventDefault ();
  3. $ ( սա ): ներդիր ( «ցուցադրել» );
  4. })

Դուք կարող եք ակտիվացնել առանձին ներդիրները մի քանի եղանակով.

  1. $ ( '#myTab a[href="#profile"]' ): ներդիր ( «ցուցադրել» ); // Ընտրեք ներդիրը անունով
  2. $ ( '#myTab a:first' ): ներդիր ( «ցուցադրել» ); // Ընտրեք առաջին ներդիրը
  3. $ ( '#myTab a:last' ): ներդիր ( «ցուցադրել» ); // Ընտրեք վերջին ներդիրը
  4. $ ( '#myTab li:eq(2) a' ): ներդիր ( «ցուցադրել» ); // Ընտրեք երրորդ ներդիրը (0-ինդեքսավորված)

Նշում

Դուք կարող եք ակտիվացնել ներդիրի կամ հաբերի նավարկությունը՝ առանց որևէ javascript գրելու՝ պարզապես նշելով data-toggle="tab"կամ data-toggle="pill"որևէ տարրի վրա: navև nav-tabsդասերը ներդիրում ավելացնելու ulդեպքում կկիրառվի bootstrap ներդիրի ոճավորումը:

  1. <ul class = «nav nav-tabs» >
  2. <li><a href = "#home" data-toggle = "tab" > Գլխավոր </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Պրոֆիլ </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Հաղորդագրություններ </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Կարգավորումներ </a></li>
  6. </ul>

Մեթոդներ

$().էջանիշ

Ակտիվացնում է ներդիրի տարրը և բովանդակության կոնտեյները: Ներդիրը պետք է ունենա DOM-ում կամ a data-targetկամ hrefթիրախավորող կոնտեյներային հանգույց:

  1. <ul class = "nav nav- tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Գլխավոր </a></li>
  3. <li><a href = "#profile" > Պրոֆիլ </a></li>
  4. <li><a href = "#messages" > Հաղորդագրություններ </a></li>
  5. <li><a href = "#settings" > Կարգավորումներ </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( ֆունկցիա () {
  17. $ ( '#myTab a:last' ): ներդիր ( «ցուցադրել» );
  18. })
  19. </script>

Իրադարձություններ

Իրադարձություն Նկարագրություն
ցուցադրում Այս իրադարձությունը բացվում է ներդիրների ցուցադրման վրա, բայց մինչ նոր ներդիրը կցուցադրվի: Օգտագործեք event.targetև event.relatedTargetթիրախավորեք համապատասխանաբար ակտիվ ներդիրը և նախորդ ակտիվ ներդիրը (եթե առկա է):
ցուցադրված է Այս իրադարձությունը բացվում է ներդիրների ցուցադրումից հետո ներդիրի ցուցադրումից հետո: Օգտագործեք event.targetև event.relatedTargetթիրախավորեք համապատասխանաբար ակտիվ ներդիրը և նախորդ ակտիվ ներդիրը (եթե առկա է):
  1. $ ( 'a[data-toggle="tab"]' ): on ( 'ցուցադրված' , ֆունկցիա ( e ) {
  2. ե . թիրախ // ակտիվացված ներդիր
  3. ե . relatedTarget // նախորդ ներդիր
  4. })

Tooltips-ի մասին

Ոգեշնչված է հիանալի jQuery.tipsy հավելվածով, որը գրվել է Ջեյսոն Ֆրեյմի կողմից; Tooltips-ը թարմացված տարբերակ է, որը չի հիմնվում պատկերների վրա, օգտագործում է css3 անիմացիաների համար, իսկ տվյալների ատրիբուտները տեղական վերնագրերի պահպանման համար:

Ներբեռնել ֆայլը

Tooltips-ի օգտագործման օրինակ

Գործիքների հուշումները տեսնելու համար սավառնեք ստորև նշված հղումների վրա.

Նիհար տաբատ հաջորդ մակարդակի keffiyeh դուք հավանաբար չեք լսել նրանց մասին: Ֆոտո խցիկ մորուք հում ջինսե տառատեսակ Vegan Messenger պայուսակ stumptown. Ֆերմայից սեղան սեյթան, Mcsweeney's fixie-ի կայուն քինոա 8-բիթանոց ամերիկյան հագուստն ունի Թերի Ռիչարդսոնի վինիլային շամպրե: Մորուքի ստամպթաուն, կարդիգաններ բանհ մի լոմո ամպրոպ. Tofu բիոդիզել Ուիլյամսբուրգ Մարֆա, չորս Loko Mcsweeney's cleanse vegan chambray. Իսկապես հեգնական արհեստավոր , ինչ էլ որ լինի keytar-ը, սկեսնթեր ֆերմայից-սեղան Banksy Austin twitter handle freegan cred raw denim single-origin սուրճ վիրուսային:


Օգտագործելով bootstrap-tooltip.js

Գործարկեք գործիքի հուշումը Javascript-ի միջոցով.

  1. $ ( '#example' ): գործիքի հուշում ( ընտրանքներ )

Ընտրանքներ

Անուն տիպ լռելյայն նկարագրությունը
անիմացիա բուլյան ճիշտ կիրառել css fade անցում դեպի գործիքի հուշում
տեղաբաշխում լարային|գործառ 'գագաթ' ինչպես տեղադրել գործիքի հուշումը - վերև | ստորին | ձախ | ճիշտ
ընտրիչ լար կեղծ Եթե ​​ընտրիչ է տրամադրվում, գործիքի հուշման օբյեկտները կփոխանցվեն նշված թիրախներին:
կոչում լարային | ֆունկցիան '' վերնագրի կանխադրված արժեքը, եթե «վերնագիր» պիտակը չկա
ձգան լար 'սավառնել' ինչպես է գործարկվում գործիքի հուշումը - սավառնել | կենտրոնացում | ձեռնարկ
ուշացում համարը | օբյեկտ 0

Գործիքների հուշումը (ms) ցուցադրելու և թաքցնելու հետաձգում - չի կիրառվում ձեռքով ձգանման տեսակի համար

Եթե ​​համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել

Օբյեկտի կառուցվածքը հետևյալն է.delay: { show: 500, hide: 100 }

Գլուխը վեր Գործիքների առանձին հուշումների տարբերակները կարող են այլընտրանքային կերպով սահմանվել տվյալների ատրիբուտների օգտագործման միջոցով:

Նշում

Կատարման նկատառումներից ելնելով, Tooltip-ը և Popover data-apis-ը միացված են: Եթե ցանկանում եք դրանք օգտագործել, պարզապես նշեք ընտրիչի տարբերակը:

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > սավառնել իմ վրա </a>

Մեթոդներ

$().tooltip(ընտրանքներ)

Կցում է գործիքի հուշման կարգավորիչը տարրերի հավաքածուին:

.tooltip ('ցուցադրել')

Բացահայտում է տարրի գործիքի հուշումը:

  1. $ ( '#element' ): գործիքի հուշում ( «ցուցադրել» )

.tooltip ('թաքցնել')

Թաքցնում է տարրի գործիքի հուշումը:

  1. $ ( '#element' ): գործիքի հուշում ( «թաքցնել» )

.tooltip ('toggle')

Փոխում է տարրի գործիքի հուշումը:

  1. $ ( '#element' ): գործիքի հուշում ( «անջատել» )

Պոպովերի մասին

Ավելացրեք բովանդակության փոքր ծածկույթներ, ինչպիսիք են iPad-ի բովանդակությունը, ցանկացած տարրի վրա՝ երկրորդական տեղեկատվության պահպանման համար:

* Պահանջվում է Tooltip ներառել

Ներբեռնել ֆայլը

Օրինակ hover popover

Սավառնեք կոճակի վրա՝ պոպովերը գործարկելու համար:


Օգտագործելով bootstrap-popover.js

Միացնել popover-ները Javascript-ի միջոցով.

  1. $ ( '#example' ): popover ( տարբերակներ )

Ընտրանքներ

Անուն տիպ լռելյայն նկարագրությունը
անիմացիա բուլյան ճիշտ կիրառել css fade անցում դեպի գործիքի հուշում
տեղաբաշխում լարային|գործառ 'ճիշտ' ինչպես տեղադրել popover-ը - վերև | ստորին | ձախ | ճիշտ
ընտրիչ լար կեղծ եթե տրամադրվում է ընտրիչ, գործիքի հուշման օբյեկտները կփոխանցվեն նշված թիրախներին
ձգան լար 'սավառնել' ինչպես է գործարկվում գործիքի հուշումը - սավառնել | կենտրոնացում | ձեռնարկ
կոչում լարային | ֆունկցիան '' վերնագրի լռելյայն արժեքը, եթե «title» հատկանիշը չկա
բովանդակությունը լարային | ֆունկցիան '' բովանդակության լռելյայն արժեքը, եթե «data-content» հատկանիշը չկա
ուշացում համարը | օբյեկտ 0

Պոպովերի (ms) ցուցադրման և թաքցման հետաձգումը - չի կիրառվում ձեռքով ձգանման տեսակի համար

Եթե ​​համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել

Օբյեկտի կառուցվածքը հետևյալն է.delay: { show: 500, hide: 100 }

Գլուխը վեր Անհատական ​​​​փոփոխների տարբերակները կարող են այլընտրանքային կերպով սահմանվել տվյալների ատրիբուտների օգտագործման միջոցով:

Նշում

Կատարման նկատառումներից ելնելով, Tooltip-ը և Popover data-apis-ը միացված են: Եթե ցանկանում եք դրանք օգտագործել, պարզապես նշեք ընտրիչի տարբերակը:

Մեթոդներ

$().popover(տարբերակներ)

Նախաձեռնում է popovers տարրերի հավաքածուի համար:

.popover ('show')

Բացահայտում է տարրերի պոպովեր:

  1. $ ( '#element' ): popover ( «ցուցադրում» )

.popover ('թաքցնել')

Թաքցնում է տարրերի պոպովերը:

  1. $ ( '#element' ): popover ( «թաքցնել» )

.popover ('toggle')

Անջատում է տարրերի փոփվերը:

  1. $ ( '#element' ): popover ( «անջատել» )

Ահազանգերի մասին

Զգուշացման հավելումը փոքր դաս է զգուշացումներին մոտ ֆունկցիոնալություն ավելացնելու համար:

Բեռնել

Զգուշացումների օրինակներ

Ծանուցումների հավելվածն աշխատում է կանոնավոր ահազանգերի վրա և արգելափակում է հաղորդագրությունները:

Սուրբ guacamole! Լավագույնս ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք:

Օ՜, դիպուկ Դուք սխալ եք ստացել:

Փոխեք սա և այն և նորից փորձեք: Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Կատարեք այս գործողությունը Կամ արեք սա


Օգտագործելով bootstrap-alert.js

Միացնել ահազանգի անջատումը Javascript-ի միջոցով.

  1. $ ( «.alert» ): զգոն ()

Նշում

Պարզապես ավելացրեք data-dismiss="alert"ձեր փակման կոճակին, որպեսզի ավտոմատ կերպով ազդանշան փակման գործառույթը տրամադրվի:

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

Մեթոդներ

$().alert()

Փաթաթում է բոլոր ահազանգերը փակ ֆունկցիոնալությամբ: Որպեսզի ձեր ծանուցումները փակ լինեն, համոզվեք, որ դրանք .fadeև .inդասը արդեն կիրառվել են դրանց համար:

.alert ('փակել')

Փակում է ահազանգը:

  1. $ ( «.alert» ): զգուշացում ( «փակ» )

Իրադարձություններ

Bootstrap-ի ազդանշանային դասը բացահայտում է մի քանի իրադարձություններ՝ ազդանշանային գործառույթին միանալու համար:

Իրադարձություն Նկարագրություն
փակել Այս իրադարձությունը գործարկվում է անմիջապես, երբ closeկանչվում է օրինակի մեթոդը:
փակված Այս իրադարձությունը գործարկվում է, երբ ահազանգը փակված է (կսպասի css անցումների ավարտին):
  1. $ ( '#my-alert' ): bind ( 'փակ' , ֆունկցիա () {
  2. // անել ինչ որ բան…
  3. })

Մասին

Կատարեք ավելին կոճակներով: Կառավարեք կոճակի վիճակը կամ ստեղծեք կոճակների խմբեր ավելի շատ բաղադրիչների համար, ինչպիսիք են գործիքների տողերը:

Ներբեռնել ֆայլը

Օգտագործման օրինակներ

Օգտագործեք կոճակների հավելվածը վիճակների և անջատիչների համար:

Պետական
Մեկ անջատիչ
Նշավանդակ
Ռադիո

Օգտագործելով bootstrap-button.js

Միացնել կոճակները Javascript-ի միջոցով.

  1. $ ( '.nav-tabs' ): կոճակ ()

Նշում

Տվյալների ատրիբուտները անբաժանելի են կոճակի հավելվածի համար: Ստուգեք ստորև բերված օրինակի կոդը տարբեր նշագրման տեսակների համար:

  1. <!-- Ավելացնել data-toggle="button"՝ մեկ կոճակի վրա փոխարկումն ակտիվացնելու համար -->
  2. <button class = "btn" data-toggle = "button" > Մեկ անջատիչ </button>
  3.  
  4. <!-- Ավելացնել data-toggle="buttons-checkbox"՝ btn-group-ում վանդակի ոճը փոխելու համար -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Ձախ </button>
  7. <button class = "btn" > Միջին </button>
  8. <button class = "btn" > Աջ </button>
  9. </div>
  10.  
  11. <!-- Ավելացնել data-toggle="buttons-radio"` btn-group-ում ռադիոյի ոճը փոխելու համար -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Ձախ </button>
  14. <button class = "btn" > Միջին </button>
  15. <button class = "btn" > Աջ </button>
  16. </div>

Մեթոդներ

$().button('toggle')

Անջատում է մղման վիճակը: Կոճակին տալիս է այն տեսքը, որ այն ակտիվացված է:

Գլուխը վեր Դուք կարող եք միացնել կոճակի ավտոմատ փոխարկումը՝ օգտագործելով data-toggleհատկանիշը:
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('loading')

Սահմանում է կոճակի վիճակը բեռնման համար - անջատում է կոճակը և փոխում է տեքստը բեռնվող տեքստի: Տեքստի բեռնումը պետք է սահմանվի կոճակի տարրի վրա՝ օգտագործելով տվյալների հատկանիշը data-loading-text:

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>
Գլուխը վեր Firefox-ը պահպանում է անջատված վիճակը էջի բեռնվածության ընթացքում : Դրա լուծումը օգտագործելն է autocomplete="off":

$().button('reset')

Վերականգնում է կոճակի վիճակը - տեքստը փոխում է բնօրինակ տեքստի:

$().button(string)

Վերականգնում է կոճակի վիճակը - տեքստը փոխում է ցանկացած տվյալների սահմանված տեքստային վիճակի:

  1. <button class = "btn" data-complete-text = "ավարտված է!" > ... </button>
  2. <script>
  3. $ ( '.btn' ): կոճակ ( «ավարտել» )
  4. </script>

Մասին

Ստացեք հիմնական ոճեր և ճկուն աջակցություն ծալվող բաղադրիչների համար, ինչպիսիք են ակորդեոնները և նավիգացիան:

Ներբեռնել ֆայլը

* Պահանջում է ներառել Transitions հավելվածը:

Օրինակ ակորդեոն

Օգտագործելով collapse plugin-ը, մենք կառուցեցինք պարզ ակորդեոնի ոճի վիդջեթ.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson adsquid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Սննդի բեռնատար quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua վրան մի թռչուն դրեց կաղամար մեկ ծագման սուրճ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Գովազդ բուսակերների բացառիկ մսագործի տեղակալ Լոմո. Սռնապաններ occaecat craft գարեջրի ֆերմա-սեղան, հում ջինսե էսթետիկ սինթեզ, դուք հավանաբար չեք լսել դրանց մասին accusamus labore կայուն VHS:
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson adsquid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Սննդի բեռնատար quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua վրան մի թռչուն դրեց կաղամար մեկ ծագման սուրճ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Գովազդ բուսակերների բացառիկ մսագործի տեղակալ Լոմո. Սռնապաններ occaecat craft գարեջրի ֆերմա-սեղան, հում ջինսե էսթետիկ սինթեզ, դուք հավանաբար չեք լսել դրանց մասին accusamus labore կայուն VHS:
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson adsquid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Սննդի բեռնատար quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua վրան մի թռչուն դրեց կաղամար մեկ ծագման սուրճ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Գովազդ բուսակերների բացառիկ մսագործի տեղակալ Լոմո. Սռնապաններ occaecat craft գարեջրի ֆերմա-սեղան, հում ջինսե էսթետիկ սինթեզ, դուք հավանաբար չեք լսել դրանց մասին accusamus labore կայուն VHS:

Օգտագործելով bootstrap-collapse.js

Միացնել Javascript-ի միջոցով.

  1. $ ( «.collapse» ): փլուզում ()

Ընտրանքներ

Անուն տիպ լռելյայն նկարագրությունը
ծնող ընտրիչ կեղծ Եթե ​​ընտրիչը, ապա նշված ծնողի տակ գտնվող բոլոր ծալվող տարրերը կփակվեն, երբ ցուցադրվի այս ծալվող տարրը: (նման է ավանդական ակորդեոնի վարքագծին)
փոխարկել բուլյան ճիշտ Անջատում է ծալվող տարրը կանչի ժամանակ

Նշում

Պարզապես ավելացրեք data-toggle="collapse"և a data-targetտարր՝ ծալվող տարրի կառավարումը ավտոմատ կերպով նշանակելու համար: Հատկանիշն data-targetընդունում է css ընտրիչ՝ փլուզումը կիրառելու համար: Համոզվեք, որ դասը ավելացրե՛ք collapseծալվող տարրին: Եթե ​​ցանկանում եք, որ այն լռելյայն բացվի, ավելացրեք լրացուցիչ դասը in:

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. պարզ ծալվող
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Գլուխը վեր Ակորդեոնի նման խմբի կառավարում ավելացնելու համար ծալվող կառավարում ավելացրեք տվյալների հատկանիշը data-parent="#selector": Տեսեք ցուցադրությունը՝ սա գործողության մեջ տեսնելու համար:

Մեթոդներ

.collapse (տարբերակներ)

Ակտիվացնում է ձեր բովանդակությունը որպես ծալովի տարր: Ընդունում է ընտրովի տարբերակներ object:

  1. $ ( '#myCollapsible' ): փլուզում ({
  2. փոխարկել ՝ կեղծ
  3. })

.collapse ('toggle')

Անջատում է ծալվող տարրը ցուցադրված կամ թաքցվածի:

.collapse ('ցուցադրել')

Ցույց է տալիս ծալվող տարր:

.collapse ('թաքցնել')

Թաքցնում է ծալվող տարրը:

Իրադարձություններ

Bootstrap-ի փլուզման դասը բացահայտում է մի քանի իրադարձություններ՝ փլուզման գործառույթին միանալու համար:

Իրադարձություն Նկարագրություն
ցուցադրում Այս իրադարձությունը գործարկվում է անմիջապես, երբ showկանչվում է օրինակի մեթոդը:
ցուցադրված է Այս իրադարձությունը գործարկվում է, երբ ծալման տարրը տեսանելի է դառնում օգտատիրոջը (կսպասի css անցումների ավարտին):
թաքցնել Այս իրադարձությունը գործարկվում է անմիջապես, երբ hideմեթոդը կանչվում է:
թաքնված Այս իրադարձությունը գործարկվում է, երբ ծալման տարրը թաքցված է օգտվողից (կսպասի css-ի անցումների ավարտին):
  1. $ ( '#myCollapsible' ): on ( 'թաքնված' , ֆունկցիա () {
  2. // անել ինչ որ բան…
  3. })

Մասին

Հիմնական, հեշտությամբ ընդլայնվող հավելված՝ ցանկացած ձևի տեքստի մուտքագրմամբ էլեգանտ տառատեսակներ արագ ստեղծելու համար:

Ներբեռնել ֆայլը

Օրինակ

Սկսեք մուտքագրել ներքևի դաշտում` տպագրության արդյունքները ցույց տալու համար:


Օգտագործելով bootstrap-typeahead.js

Զանգահարեք տառատեսակը Javascript-ի միջոցով.

  1. $ ( '.typeahead' ): տպագիր ()

Ընտրանքներ

Անուն տիպ լռելյայն նկարագրությունը
աղբյուր զանգված [ ] Տվյալների աղբյուրը, որի դեմ պետք է հարցում:
իրեր թիվ 8 Բացվող ցանկում ցուցադրվող տարրերի առավելագույն քանակը:
համապատասխանող ֆունկցիան գործի անզգայուն Մեթոդ, որն օգտագործվում է որոշելու համար, թե արդյոք հարցումը համապատասխանում է որևէ տարրի: Ընդունում է մեկ փաստարկ, որի itemդեմ պետք է ստուգվի հարցումը: Մուտք գործեք ընթացիկ հարցումը this.query. Վերադարձեք բուլյան true, եթե հարցումը համընկնում է:
տեսակավորող ֆունկցիան ճշգրիտ համընկնում,
մեծատառերի զգայուն,
մեծատառերի անզգայուն
Ինքնալրացման արդյունքները տեսակավորելու համար օգտագործվող մեթոդ: Ընդունում է մեկ արգումենտ itemsև ունի տպագիր օրինակի շրջանակը: Հղեք ընթացիկ հարցումը this.query.
ընդգծող ֆունկցիան ընդգծում է բոլոր լռելյայն համընկնումները Ինքնալրացման արդյունքներն ընդգծելու համար օգտագործվող մեթոդ: Ընդունում է մեկ արգումենտ itemև ունի տպագիր օրինակի շրջանակը: Պետք է վերադարձնի html:

Նշում

Տվյալների ատրիբուտներ ավելացրեք՝ տպագիր գլխի ֆունկցիոնալությամբ տարր գրանցելու համար:

  1. <input type = "text" data- provide = "typeahead" >

Մեթոդներ

.typeahead (տարբերակներ)

Նախաձեռնում է մուտքագրումը տառատեսակով: