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

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

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

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

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

$('body').off('.data-api')

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

$('body').off('.alert.data-api')

Ծրագրային API

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

$(".btn.danger").button("toggle").addClass("fat")

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

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

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

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

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

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

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

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

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

$('#myModal').on('show', ֆունկցիա (e) {
    եթե (! Data) վերադարձնի 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="modal-body">
    <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="dialog" 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="modal-body">
    <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').modal(ընտրանքներ)

Ընտրանքներ

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

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

Մեթոդներ

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

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

$('#myModal').մոդալ ({
  ստեղնաշար՝ կեղծ
})

.modal ('toggle')

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

$('#myModal').modal('toggle')

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

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

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

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

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

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

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

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

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

Օրինակներ

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

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

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

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

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

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

<div class="dropdown">
  <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="dropdown">
  <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()

Ընտրանքներ

Ոչ ոք

Մեթոդներ

$().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"]').each(function () {
  var $spy = $(this).scrollspy('թարմացնել')
});

Ընտրանքներ

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

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

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

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

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

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

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('ցուցադրել');
})

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

$('#myTab a[href="#profile"]').tab('ցուցադրել'); // Ընտրեք ներդիրը անունով
$('#myTab a:first').tab('ցուցադրել'); // Ընտրեք առաջին ներդիրը
$('#myTab a:last').tab('ցուցադրել'); // Ընտրեք վերջին ներդիրը
$('#myTab li:eq(2) a').tab('ցուցադրել'); // Ընտրեք երրորդ ներդիրը (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').tab('ցուցադրել');
  })
</script>

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

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

Օրինակներ

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

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

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

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

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

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

Ընտրանքներ

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

Նշում

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

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

Մեթոդներ

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

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

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

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

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

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

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

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

.tooltip ('toggle')

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

$('#element').tooltip('toggle')

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

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

$('#element').tooltip('destroy')

Օրինակներ

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

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

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

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

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

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

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

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

$('#example').popover(ընտրանքներ)

Ընտրանքներ

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

Նշում

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

Մեթոդներ

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

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

.popover ('show')

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

$('#element').popover('show')

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

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

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

.popover ('toggle')

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

$('#element').popover('toggle')

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

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

$('#element').popover('destroy')

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

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

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

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

$(.alert").alert()

Նշում

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

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

Մեթոդներ

$().alert()

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

.alert ('փակել')

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

$(.alert").alert('close')

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

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

Նշում

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

Ընտրանքներ

Ոչ ոք

Մեթոդներ

$().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="finished!" >...</button>
<script>
  $('.btn').button('ավարտված')
</script>

Մասին

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

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

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

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

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Ծալվող խմբի տարր #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Անիմացիոն կլիշե...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Ծալվող խմբի տարր #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Անիմացիոն կլիշե...
      </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").collapse()

Ընտրանքներ

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

Մեթոդներ

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

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

$('#myCollapsible').collapse({
  փոխարկել՝ կեղծ
})

.collapse ('toggle')

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

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

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

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

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

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

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

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

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

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

Առաջին մանրապատկերի պիտակը

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.

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

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="carousel slide">
  <!-- Կարուսելի իրեր -->
  <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>

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

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

...

JavaScript-ի միջոցով

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

$('.carousel').carousel()

Ընտրանքներ

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

Մեթոդներ

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

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

$('.carousel').carousel({
  ընդմիջումը՝ 2000
})

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

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

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

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

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

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

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

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

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

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

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

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

Օրինակ

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

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

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

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

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

JavaScript-ի միջոցով

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

$('.typeahead').typeahead()

Ընտրանքներ

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

Մեթոդներ

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

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

Օրինակ

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

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

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

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

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

JavaScript-ի միջոցով

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

$('#navbar').affix()

Մեթոդներ

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

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

$('[data-spy="affix"]').each(function () {
  $(this).affix('թարմացնել')
});

Ընտրանքներ

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