Անհատական ​​կամ կազմված

Փլագինները կարող են ներառվել առանձին (թեև ոմանք պահանջել են կախվածություն) կամ միանգամից: Ե՛վ bootstrap.js- ը , և՛ bootstrap.min.js- ը պարունակում են բոլոր պլագինները մեկ ֆայլում:

Տվյալների հատկանիշներ

Դուք կարող եք օգտագործել բոլոր Bootstrap հավելվածները զուտ նշագրման API-ի միջոցով՝ առանց JavaScript-ի մեկ տող գրելու: Սա Bootstrap-ի առաջին կարգի API-ն է և պետք է լինի ձեր առաջին ուշադրությունը plugin օգտագործելիս:

Այնուամենայնիվ, որոշ իրավիճակներում կարող է ցանկալի լինել անջատել այս գործառույթը: Հետևաբար, մենք նաև հնարավորություն ենք տալիս անջատել տվյալների հատկանիշի API-ն՝ անջատելով «data-api»՝ մարմնի անվանատարածքի բոլոր իրադարձությունները: Սա այսպիսի տեսք ունի.

$ ( «մարմին» ): անջատված է ( '.data-api' )

Որպես այլընտրանք, հատուկ պլագին թիրախավորելու համար պարզապես ներառեք հավելվածի անունը որպես անվանատարածք տվյալների api անվանատարածքի հետ միասին, ինչպես հետևյալը.

$ ( «մարմին» ): անջատված ( '.alert.data-api' )

Ծրագրային API

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

$ ( «.btn.danger» ): կոճակ ( «անջատել» ): addClass ( «ճարպ» )

Բոլոր մեթոդները պետք է ընդունեն կամընտիր ընտրանքների օբյեկտ, տող, որն ուղղված է որոշակի մեթոդին կամ ոչինչ (որը սկսում է լռելյայն վարքագիծ ունեցող պլագին).

$ ( «#myModal» ): մոդալ () // սկզբնավորվել է լռելյայններով                       
$ ( «#myModal» ): մոդալ ({ keyboard : false }) // սկզբնավորվել առանց ստեղնաշարի     
$ ( «#myModal» ): մոդալ ( 'show' ) // սկզբնավորում է և կանչում է ցույց տալ անմիջապես                

Յուրաքանչյուր փլագին նաև բացահայտում է իր չմշակված կոնստրուկտորը՝ «Կառուցող» հատկության վրա՝ $.fn.popover.Constructor. Եթե ​​ցանկանում եք ստանալ հատուկ plugin-ի օրինակ, առբերեք այն անմիջապես տարրից՝ $('[rel=popover]').data('popover').

Ոչ մի կոնֆլիկտ

Երբեմն անհրաժեշտ է լինում օգտագործել Bootstrap պլագիններ այլ UI շրջանակների հետ: Այս հանգամանքներում երբեմն կարող են տեղի ունենալ անունների տարածության բախումներ: Եթե ​​դա տեղի ունենա, դուք կարող եք զանգահարել .noConflictայն պլագինին, որի արժեքը ցանկանում եք վերադարձնել:

var bootstrapButton = $ : fn . կոճակը . noConflict () // վերադարձնել $.fn.button-ը նախկինում նշանակված արժեքին 
$ . fn . bootstrapBtn = bootstrapButton             // տալ $().bootstrapBtn bootstrap ֆունկցիան

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

Bootstrap-ն ապահովում է հարմարեցված իրադարձություններ plugin-ի եզակի գործողությունների մեծ մասի համար: Ընդհանրապես, դրանք գալիս են ինֆինիտիվ և անցյալ մասնակցային ձևով. որտեղ ինֆինիտիվը (նախ. show) գործարկվում է իրադարձության սկզբում, իսկ նրա անցյալ մասնակցային ձևը (նախ . ) գործարկվում shownէ գործողության ավարտին:

Բոլոր անվերջ իրադարձությունները ապահովում են preventDefault ֆունկցիոնալությունը: Սա հնարավորություն է տալիս դադարեցնել գործողությունների կատարումը նախքան այն սկսելը:

$ ( «#myModal» ): on ( 'show' , function ( e ) {   
    եթե (! տվյալները ) վերադարձնեն էլ . preventDefault () // դադարեցնում է մոդալի ցուցադրումը   
})

Անցումների մասին

Պարզ անցումային էֆեկտների համար ներառեք bootstrap-transition.js- ը մեկ անգամ մյուս JS ֆայլերի կողքին: Եթե ​​դուք օգտագործում եք կազմված (կամ փոքրացված) bootstrap.js- ը, կարիք չկա ներառել սա. այն արդեն կա:

Օգտագործման դեպքեր

Անցումային հավելվածի մի քանի օրինակ.

• Մոդալներում սահում կամ մարում
• Ներդիրների մարում
• Զգուշացումների մարում
• Սահող կարուսելի ապակիներ

Օրինակներ

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

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

Վերարտադրված մոդալ՝ վերնագրի, հիմնականի և ներքևում գտնվող գործողությունների հավաքածուով:

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Մոդալ վերնագիր </h3>
  </div>
  <div class = «մոդալ-մարմին» > 
    <p> Մեկ նուրբ մարմին… </p>
  </div>
  <div class = «modal-footer» > 
    <a href = "#" class = "btn" > Փակել </a>  
    <a href = "#" class = "btn btn-primary" > Պահպանել փոփոխությունները </a>  
  </div>
</div>

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

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

<!-- Մոդալ գործարկելու կոճակ -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Գործարկել ցուցադրական մոդալը </a>    
 
<!-- Մոդալ -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "երկխոսություն" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Մոդալ վերնագիր </h3> 
  </div>
  <div class = «մոդալ-մարմին» > 
    <p> Մեկ նուրբ մարմին… </p>
  </div>
  <div class = «modal-footer» > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Փակել </button>   
    <button class = "btn btn-primary" > Պահպանել փոփոխությունները </button> 
  </div>
</div>

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

Ակտիվացրեք մոդալ առանց JavaScript գրելու: Սահմանել data-toggle="modal"կարգավորիչի տարրը, ինչպես կոճակը, a-ի հետ մեկտեղ data-target="#foo"կամ href="#foo"թիրախավորել որոշակի մոդալ՝ փոխարկելու համար:

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Գործարկել մոդալը </button>   

JavaScript-ի միջոցով

Զանգահարեք մոդալ id- myModalով JavaScript-ի մեկ տողով.

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Մեթոդներ

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

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

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

.modal ('toggle')

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

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

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

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

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

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

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

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

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

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

$ ( «#myModal» ): on ( 'թաքնված' , ֆունկցիա () {   
  // անել ինչ որ բան…
})

Օրինակներ

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

Navbar-ի շրջանակներում

Ներդիրների ներսում

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

Ավելացրեք data-toggle="dropdown"հղմանը կամ կոճակին՝ բացվող ցանկը փոխարկելու համար:

<div class = «բացվող» > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > իջնող գործարկիչ </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL-ները անփոփոխ պահելու համար օգտագործեք data-targetհատկանիշը .-ի փոխարեն href="#":

<div class = «բացվող» > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Բացվող
    <b class = «caret» ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript-ի միջոցով

Զանգահարեք բացվող ցանկերը JavaScript-ի միջոցով.

$ ( '.dropdown-toggle' ): բացվող ()

Ընտրանքներ

Ոչ ոք

Մեթոդներ

$().dropdown('toggle')

Ծրագրային api՝ տվյալ նավագոտու կամ ներդիրներով նավիգացիայի համար ընտրացանկերը փոխելու համար:

Օրինակ navbar-ում

ScrollSpy հավելվածը նախատեսված է նավի թիրախների ավտոմատ թարմացման համար՝ հիմնվելով ոլորման դիրքի վրա: Ոլորեք նավագոտի տակ գտնվող տարածքը և դիտեք ակտիվ դասի փոփոխությունը: Բացվող ենթակետերը նույնպես ընդգծված կլինեն:

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

Ձեր վերևի տողում նավիգացիայի մեջ հեշտությամբ ավելացնելու սկոլսպի վարքագիծը, պարզապես ավելացրեք data-spy="scroll"այն տարրը, որը ցանկանում եք լրտեսել (սովորաբար սա է մարմինը) և data-target=".navbar"ընտրեք, թե որ նավարկությունն օգտագործել: Դուք կցանկանաք օգտագործել scrollspy .navբաղադրիչի հետ:

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

JavaScript-ի միջոցով

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

$ ( '#navbar' ): scrollspy ()

Մեթոդներ

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

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

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-offset="".

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

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

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

Օգտագործումը

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

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

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

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

Նշում

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

<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>

Մեթոդներ

$().էջանիշ

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

<ul class = "nav nav- tabs" id = "myTab" >  
  <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>
  $ ( ֆունկցիա () {  
    $ ( '#myTab a:last' ): ներդիր ( «ցուցադրել» );
  })
</script>

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

$ ( 'a[data-toggle="tab"]' ): on ( 'ցուցադրված' , ֆունկցիա ( e ) {   
  ե . թիրախ // ակտիվացված ներդիր
  ե . relatedTarget // նախորդ ներդիր
})

Օրինակներ

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

Արդյունավետության նկատառումներից ելնելով, գործիքի հուշումը և popover data-apis-ը միացված են, ինչը նշանակում է, որ դուք պետք է նախաստորագրեք դրանք ինքներդ :

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

Չորս ուղղություն

Գործիքների հուշումներ մուտքագրման խմբերում

Bootstrap-ի մուտքագրման խմբերի հետ գործիքների հուշումներն ու popover-ներն օգտագործելիս դուք պետք է կարգավորեք container(ստորև ներկայացված փաստաթղթերը) տարբերակը՝ անցանկալի կողմնակի ազդեցություններից խուսափելու համար:

Օգտագործումը

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

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-animation="".

Նշում

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > սավառնել իմ վրա </a>   

Մեթոդներ

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

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

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

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

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

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

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

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

.tooltip ('toggle')

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

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

.tooltip ('ոչնչացնել')

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

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

Օրինակներ

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

Ստատիկ պոպովեր

Հասանելի է չորս տարբերակ՝ վերև, աջ, ներքև և ձախ հավասարեցված:

Ոչ մի նշագրում չի ցուցադրվում, քանի որ popover-ները ստեղծվում են JavaScript-ից և dataհատկանիշի բովանդակությունից:

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

Չորս ուղղություն

Օգտագործումը

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

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-animation="".

Նշում

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

Մեթոդներ

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

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

.popover ('show')

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

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

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

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

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

.popover ('toggle')

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

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

.popover ('ոչնչացնել')

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

$ ( '#element' ): popover ( «ոչնչացնել» )

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

Այս փլագինով ավելացրեք անջատման գործառույթը բոլոր ահազանգերի հաղորդագրություններին:

Օգտագործումը

Միացնել ծանուցման անջատումը JavaScript-ի միջոցով.

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

Նշում

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

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

Մեթոդներ

$().alert()

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

.alert ('փակել')

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

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

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

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

$ ( '#my-alert' ): bind ( 'փակ' , ֆունկցիա () {   
  // անել ինչ որ բան…
})

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

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

Պետական

Ավելացնել data-loading-text="Loading..."կոճակի վրա բեռնման վիճակ օգտագործելու համար:

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Բեռնման վիճակ </button>   

Մեկ անջատիչ

Ավելացրեք data-toggle="button"՝ մեկ կոճակի վրա փոխարկումն ակտիվացնելու համար:

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Մեկ անջատիչ </button>   

Նշավանդակ

Ավելացնել data-toggle="buttons-checkbox"վանդակի ոճի փոխարկման համար btn-group-ում:

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Ձախ </button>  
  <button type = "button" class = "btn btn-primary" > Միջին </button>  
  <button type = "button" class = "btn btn-primary" > Աջ </button>  
</div>

Ռադիո

Ավելացնել data-toggle="buttons-radio"btn-խմբում ռադիոյի ոճը փոխելու համար:

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Ձախ </button>  
  <button type = "button" class = "btn btn-primary" > Միջին </button>  
  <button type = "button" class = "btn btn-primary" > Աջ </button>  
</div>

Օգտագործումը

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

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

Նշում

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

Ընտրանքներ

Ոչ ոք

Մեթոդներ

$().button('toggle')

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

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('loading')

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

<button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>    

$().button('reset')

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

$().button(string)

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

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

Մասին

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

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

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

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

<div class = "ակորդեոն" id = "ակորդեոն2" >  
  <div class = «ակորդեոն-խումբ» > 
    <div class = «ակորդեոնի վերնագիր» > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Ծալվող խմբի տարր #1
      </a>
    </div>
    <div id = "collapseOne" class = "ակորդեոնի մարմնի փլուզումը" >  
      <div class = «ակորդեոն-ներքին» > 
        Անիմացիոն կլիշե...
      </div>
    </div>
  </div>
  <div class = «ակորդեոն-խումբ» > 
    <div class = «ակորդեոնի վերնագիր» > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Ծալվող խմբի տարր #2
      </a>
    </div>
    <div id = "collapseTwo" class = "ակորդեոնի մարմնի փլուզում" >  
      <div class = «ակորդեոն-ներքին» > 
        Անիմացիոն կլիշե...
      </div>
    </div>
  </div>
</div>
...

Դուք կարող եք նաև օգտագործել փլագինը առանց ակորդեոնի նշագրման: Կատարեք կոճակ, որը փոխում է մեկ այլ տարրի ընդլայնումն ու փլուզումը:

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  պարզ ծալվող
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

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

Ակորդեոնի նման խմբի կառավարում ավելացնելու համար ծալվող կառավարում ավելացրեք տվյալների հատկանիշը data-parent="#selector": Տեսեք ցուցադրությունը՝ սա գործողության մեջ տեսնելու համար:

JavaScript-ի միջոցով

Ձեռքով միացնել՝

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-parent="".

Մեթոդներ

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

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

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

.collapse ('toggle')

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

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

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

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

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

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

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

$ ( '#myCollapsible' ): on ( 'թաքնված' , ֆունկցիա () {   
  // անել ինչ որ բան…
})

Կարուսելի օրինակ

Ստորև բերված սլայդշոուն ցույց է տալիս ընդհանուր պլագին և բաղադրիչ՝ կարուսելի նման տարրերով անցնելու համար:

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Երկրորդ մանրապատկերի պիտակ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "կարուսելի սլայդ" >  
  <ol class = «կարուսել-ցուցիչներ» > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "ակտիվ" </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" </li>  
  </ol>
  <!-- Կարուսելի իրեր -->
  <div class = «կարուսել-ներքին» > 
    <div class = "ակտիվ նյութ" > … </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>

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

Օգտագործեք տվյալների ատրիբուտներ՝ կարուսելի դիրքը հեշտությամբ կառավարելու համար: data-slideընդունում է հիմնաբառերը prevկամ next, որը փոխում է սլայդի դիրքը ներկայիս դիրքի համեմատ: Որպես այլընտրանք, օգտագործեք data-slide-to՝ կարուսելին չմշակված սլայդի ինդեքս փոխանցելու համար data-slide-to="2", որը սլայդի դիրքն է դեպի որոշակի ինդեքս՝ սկսած 0.

JavaScript-ի միջոցով

Ձեռքով զանգահարեք կարուսել՝

$ ( '.կարուսել' ): կարուսել ()

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScriptz-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-interval="".

Մեթոդներ

.կարուսել (տարբերակներ)

Նախաձեռնում է կարուսելը կամընտիր ընտրանքներով objectև սկսում հեծանվով անցնել իրերի միջով:

$ ( '.կարուսել' ): կարուսել ({
  ընդմիջումը ՝ 2000 
})

.կարուսել («ցիկլ»)

Շրջում է կարուսելի տարրերի միջով ձախից աջ:

.կարուսել ('դադար')

Դադարեցնում է կարուսելը իրերի միջով հեծանիվ անցնելուց:

.կարուսել(համար)

Կարուսելը տեղափոխում է որոշակի շրջանակ (0-ի վրա հիմնված, զանգվածի նման):

.կարուսել ('նախորդ')

Ցիկլեր դեպի նախորդ կետը:

.կարուսել ('հաջորդ')

Շրջագայություններ դեպի հաջորդ կետ:

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

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

Օրինակ

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

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

Ցանկանում եք կարգաբերել autocomplete="off"այնպես, որ զննարկչի լռելյայն ընտրացանկերը չհայտնվեն Bootstrap տառատեսակի գլխի բացվող ցանկում:

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

Տվյալների ատրիբուտներ ավելացրեք՝ տառատեսակի գլխի ֆունկցիոնալությամբ տարր գրանցելու համար, ինչպես ցույց է տրված վերը նշված օրինակում:

JavaScript-ի միջոցով

Ձեռքով զանգահարեք տառատեսակը՝

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-source="".

Մեթոդներ

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

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

Օրինակ

Ձախ կողմում գտնվող ենթանավիգացիան affix plugin-ի կենդանի ցուցադրությունն է:

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

Ցանկացած տարրի վրա կցելու վարքագիծը հեշտությամբ ավելացնելու համար պարզապես ավելացրեք data-spy="affix"այն տարրին, որը ցանկանում եք լրտեսել: Այնուհետև օգտագործեք շեղումներ՝ որոշելու, թե երբ պետք է միացնել և անջատել տարրի ամրացումը:

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

JavaScript-ի միջոցով

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

$ ( '#navbar' ): ամրացնել ()

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-offset-top="200".