Ընդհանուր ակնարկ

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

Փլագինները կարող են ներառվել առանձին (օգտագործելով Bootstrap-ի անհատական *.js​​ֆայլերը), կամ միանգամից (օգտագործելով bootstrap.jsկամ փոքրացված bootstrap.min.js):

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

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

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

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

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

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

Ծրագրային API

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

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

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

Կանխադրված կարգավորումներ

Դուք կարող եք փոխել plugin-ի լռելյայն կարգավորումները՝ փոփոխելով plugin-ի Constructor.DEFAULTSօբյեկտը.

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

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

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

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

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

3.0.0-ի դրությամբ Bootstrap-ի բոլոր իրադարձությունները անվանատարածված են:

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

Տարբերակների համարները

Bootstrap-ի jQuery պլագիններից յուրաքանչյուրի տարբերակը հասանելի VERSIONէ plugin-ի կոնստրուկտորի սեփականության միջոցով: Օրինակ, Tooltip plugin-ի համար.

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

Հատուկ հետադարձ կապ չկա, երբ JavaScript-ն անջատված է

Bootstrap-ի պլագինները առանձնապես նրբագեղորեն չեն զիջում, երբ JavaScript-ն անջատված է: Եթե ​​այս դեպքում ձեզ հետաքրքրում է օգտատերերի փորձը, օգտագործեք <noscript>ձեր օգտատերերին իրավիճակը (և ինչպես կրկին ակտիվացնել JavaScript-ը) բացատրելու համար և/կամ ավելացրեք ձեր սեփական հետադարձ կապերը:

Transitions transition.js

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

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

Ինչ կա ներսում

Transition.js-ը իրադարձությունների հիմնական օգնական է, transitionEndինչպես նաև CSS անցումային էմուլյատոր: Այն օգտագործվում է այլ պլագինների կողմից՝ ստուգելու CSS անցումային աջակցությունը և կախված անցումները բռնելու համար:

Անջատում է անցումները

Անցումները կարող են գլոբալ անջատվել՝ օգտագործելով հետևյալ JavaScript հատվածը, որը պետք է գա բեռնվելուց հետո transition.js(կամ bootstrap.jsկամ bootstrap.min.js, ըստ դեպքի).

$.support.transition = false

Մոդալներ modal.js

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

Քանի որ HTML5-ը սահմանում է իր իմաստաբանությունը, autofocusHTML հատկանիշը որևէ ազդեցություն չունի Bootstrap մոդալներում: Նույն էֆեկտին հասնելու համար օգտագործեք որոշ հատուկ JavaScript.

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Օրինակներ

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

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ընտրովի չափսեր

Մոդալներն ունեն երկու ընտրովի չափեր, որոնք հասանելի են մոդիֆիկատորների դասերի միջոցով, որոնք տեղադրվելու են .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Հեռացնել անիմացիան

Մոդալների համար, որոնք պարզապես հայտնվում են, այլ ոչ թե խամրում, հեռացրեք .fadeդասը ձեր մոդալ նշումից:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Օգտագործելով ցանցային համակարգը

Մոդալի շրջանակներում Bootstrap ցանցային համակարգի առավելություններից օգտվելու համար պարզապես տեղադրեք .rows-ը .modal-bodyև այնուհետև օգտագործեք սովորական ցանցային համակարգի դասերը:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Տարբեր մոդալ բովանդակություն՝ հիմնված ձգանման կոճակի վրա

Ունե՞ք մի փունջ կոճակներ, որոնք բոլորն էլ գործարկում են նույն մոդալը, պարզապես մի փոքր տարբեր բովանդակությամբ: Օգտագործեք event.relatedTargetև HTML data-*ատրիբուտներ (հնարավոր է jQuery-ի միջոցով )՝ մոդալի բովանդակությունը փոխելու համար՝ կախված նրանից, թե որ կոճակն է սեղմված: Մանրամասների համար տե՛ս Modal Events փաստաթղթերը relatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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

Մոդալ հավելվածը փոխում է ձեր թաքնված բովանդակությունը ըստ պահանջի՝ տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Այն նաև ավելացնում .modal-openէ <body>լռելյայն ոլորման վարքագիծը վերացնելու համար և առաջացնում է .modal-backdropսեղմման տարածք՝ մոդալից դուրս սեղմելիս ցուցադրված մոդալները հեռացնելու համար:

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

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript-ի միջոցով

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

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

Ընտրանքներ

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

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

Մեթոդներ

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Ձեռքով փոխում է մոդալը: Վերադառնում է զանգահարողին մինչև մոդալն իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.modalկամ hidden.bs.modalիրադարձությունը տեղի ունենալը):

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

.modal('show')

Ձեռքով բացում է մոդալ: Վերադառնում է զանգահարողին մինչև մոդալը փաստացի ցուցադրվելը (այսինքն՝ նախքան shown.bs.modalիրադարձությունը տեղի ունենալը):

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

.modal('hide')

Ձեռքով թաքցնում է մոդալը: Վերադառնում է զանգահարողին նախքան մոդալն իրականում թաքցվել է (այսինքն՝ նախքան hidden.bs.modalիրադարձությունը տեղի ունենալը):

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

.modal('handleUpdate')

Նորից կարգավորում է մոդալի դիրքը, որպեսզի հակադարձի ոլորման տողը, եթե այն հայտնվի, ինչը կստիպի մոդալը ցատկել դեպի ձախ:

Անհրաժեշտ է միայն այն դեպքում, երբ մոդալի բարձրությունը փոխվում է, երբ այն բաց է:

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

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

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

Բոլոր մոդալ իրադարձությունները կրակվում են հենց մոդալի վրա (այսինքն ՝ <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdown dropdown.js

Օրինակներ

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

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

Հաբերի շրջանակներում

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

Տվյալների ատրիբուտների կամ JavaScript-ի միջոցով բացվող հավելվածը փոխում է թաքնված բովանդակությունը (բացվող ընտրացանկերը)՝ փոխելով .openդասը մայր ցանկի տարրի վրա:

Բջջային սարքերում բացվող ցանկը բացելով ավելացնում է .dropdown-backdropորպես հպման տարածք՝ մենյուից դուրս սեղմելիս բացվող ընտրացանկերը փակելու համար, ինչը iOS-ի պատշաճ աջակցության պահանջ է: Սա նշանակում է, որ բաց բացվող ընտրացանկից այլ բացվող ընտրացանկից անցնելը պահանջում է լրացուցիչ հպում բջջայինի վրա:

Նշում. data-toggle="dropdown"հատկանիշը հիմնվում է հավելվածի մակարդակով բացվող ընտրացանկերը փակելու համար, ուստի լավ գաղափար է միշտ օգտագործել այն:

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScript-ի միջոցով

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

$('.dropdown-toggle').dropdown()

Ընտրանքներ

Ոչ ոք

Մեթոդներ

$().dropdown('toggle')

Անջատում է տվյալ նավագոտու կամ ներդիրներով նավիգացիայի բացվող ընտրացանկը:

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

Բոլոր իջնող իրադարձությունները գործարկվում են .dropdown-menuծնողական տարրի վրա:

Բոլոր բացվող իրադարձություններն ունեն relatedTargetհատկություն, որի արժեքը փոխարկվող խարիսխի տարրն է:

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Օրինակ navbar-ում

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

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

Պահանջում է հարաբերական դիրքավորում

Անկախ իրականացման եղանակից, scrollspy-ը պահանջում է օգտագործել position: relative;այն տարրի վրա, որը դուք լրտեսում եք: Շատ դեպքերում սա է <body>. Երբ պտտվում եք այլ տարրերի վրա, քան <body>, համոզվեք, որ ունեք heightհավաքածու և կիրառեք overflow-y: scroll;:

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

Ձեր վերին տողում նավիգացիայի մեջ հեշտությամբ ավելացնելու սկոլսպի վարքագիծը, ավելացրեք data-spy="scroll"այն տարրին, որը ցանկանում եք լրտեսել (առավել սովորաբար սա կլինի <body>): Այնուհետև ավելացրեք հատկանիշը Bootstrap-ի որևէ բաղադրիչի data-targetծնող տարրի ID-ով կամ դասով :.nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScript-ի միջոցով

Ձեր CSS-ն ավելացնելուց հետո position: relative;զանգահարեք scrollspy-ը JavaScript-ի միջոցով.

$('body').scrollspy({ target: '#navbar-example' })

Մեթոդներ

.scrollspy('refresh')

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

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Ընտրանքներ

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

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

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

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

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

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Նշում

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Մարման էֆեկտ

Ներդիրները խամրելու համար ավելացրեք .fadeյուրաքանչյուրին .tab-pane: Առաջին ներդիրի վահանակը նույնպես պետք .inէ տեսանելի դարձնի սկզբնական բովանդակությունը:

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Մեթոդներ

$().tab

Ակտիվացնում է ներդիրի տարրը և բովանդակության կոնտեյները: Ներդիրը պետք է ունենա DOM-ում կամ a data-targetկամ hrefթիրախավորող կոնտեյներային հանգույց: Վերոնշյալ օրինակներում ներդիրները ատրիբուտներով <a>s են :data-toggle="tab"

.tab('show')

Ընտրում է տվյալ ներդիրը և ցուցադրում դրա հետ կապված բովանդակությունը: Նախկինում ընտրված ցանկացած այլ ներդիր դառնում է չընտրված, և դրա հետ կապված բովանդակությունը թաքցվում է: Վերադառնում է զանգահարողին՝ նախքան ներդիրի վահանակի ցուցադրումը (այսինքն՝ նախքան shown.bs.tabիրադարձությունը տեղի ունենալը):

$('#someTab').tab('show')

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

Նոր ներդիր ցուցադրելիս իրադարձությունները բացվում են հետևյալ հաջորդականությամբ.

1. hide.bs.tab(ներկայիս ակտիվ ներդիրում)
2. show.bs.tab(ցուցադրվող ներդիրում)
3. hidden.bs.tab(նախորդ ակտիվ ներդիրում, նույնը, ինչ hide.bs.tabմիջոցառման համար)
4. shown.bs.tab(նոր ակտիվ ցուցադրված ներդիրում, նույնը, ինչ show.bs.tabմիջոցառման համար)

Եթե ​​ոչ մի ներդիր արդեն ակտիվ չի եղել, ապա hide.bs.tabև hidden.bs.tabիրադարձությունները չեն գործարկվի:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

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

Գործիքների հուշումները զրոյական երկարությամբ վերնագրերով երբեք չեն ցուցադրվում:

Օրինակներ

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

Ստատիկ գործիքի հուշում

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

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

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

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

Tooltip plugin-ը ստեղծում է բովանդակություն և նշում ըստ պահանջի, և լռելյայն տեղադրում է գործիքի հուշումները դրանց գործարկիչի տարրից հետո:

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

$('#example').tooltip(options)

Նշում

Գործիքների հուշման համար անհրաժեշտ նշումը միայն dataհատկանիշ titleէ, և HTML տարրի վրա դուք ցանկանում եք ունենալ գործիքի հուշում: Գործիքների հուշման ստեղծվող նշումը բավականին պարզ է, թեև այն պահանջում է դիրք (լռելյայն սահմանվել է topհավելվածի կողմից):

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Ընտրանքներ

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

Մեթոդներ

$().tooltip(options)

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

.tooltip('show')

Բացահայտում է տարրի գործիքի հուշումը: Վերադառնում է զանգահարողին՝ նախքան գործիքի հուշումը փաստացի ցուցադրելը (այսինքն՝ նախքան shown.bs.tooltipիրադարձությունը տեղի ունենալը): Սա համարվում է գործիքի հուշման «ձեռքով» գործարկում: Գործիքների հուշումները զրոյական երկարությամբ վերնագրերով երբեք չեն ցուցադրվում:

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

.tooltip('hide')

Թաքցնում է տարրի գործիքի հուշումը: Վերադառնում է զանգահարողին՝ նախքան գործիքի հուշումը փաստացի թաքցվելը (այսինքն՝ նախքան hidden.bs.tooltipիրադարձությունը տեղի ունենալը): Սա համարվում է գործիքի հուշման «ձեռքով» գործարկում:

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

.tooltip('toggle')

Փոխում է տարրի գործիքի հուշումը: Վերադառնում է զանգահարողին նախքան գործիքի հուշումը իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.tooltipկամ hidden.bs.tooltipիրադարձությունը տեղի ունենալը): Սա համարվում է գործիքի հուշման «ձեռքով» գործարկում:

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

.tooltip('destroy')

Թաքցնում և ոչնչացնում է տարրի գործիքի հուշումը: Գործիքների հուշումները, որոնք օգտագործում են պատվիրակում (որոնք ստեղծվել են selectorտարբերակի միջոցով ) չեն կարող անհատապես ոչնչացվել հետնորդ ձգան տարրերի վրա:

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

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

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

Փոփերները, որոնց վերնագիրը և բովանդակությունը զրոյական երկարություն ունեն, երբեք չեն ցուցադրվում:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Օրինակներ

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

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

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

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

Փակել հաջորդ սեղմումով

Օգտագործեք focusգործարկիչը՝ օգտագործողի կատարած հաջորդ սեղմումով popover-ները հեռացնելու համար:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

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

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

$('#example').popover(options)

Ընտրանքներ

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

Մեթոդներ

$().popover(options)

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

.popover('show')

Բացահայտում է տարրի պոպովեր: Վերադառնում է զանգահարողին նախքան փոփերի փաստացի ցուցադրումը (այսինքն՝ նախքան shown.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «ձեռնարկ» հրահրում: Փոփերները, որոնց վերնագիրը և բովանդակությունը զրոյական երկարություն ունեն, երբեք չեն ցուցադրվում:

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

.popover('hide')

Թաքցնում է տարրի պոպովերը: Վերադառնում է զանգահարողին նախքան popover-ը իրականում թաքցվել է (այսինքն՝ նախքան hidden.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «ձեռնարկ» հրահրում:

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

.popover('toggle')

Անջատում է տարրի popover-ը: Վերադառնում է զանգահարողին նախքան popover-ն իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.popoverկամ hidden.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «ձեռնարկ» հրահրում:

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

.popover('destroy')

Թաքցնում և ոչնչացնում է տարրի պոպովերը: Պոպովերը, որոնք օգտագործում են պատվիրակում (որոնք ստեղծվում են selectorտարբերակի միջոցով ) չեն կարող անհատապես ոչնչացվել հետնորդ ձգան տարրերի վրա:

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

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

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

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

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

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

Կոճակ օգտագործելիս .closeայն պետք է լինի առաջին զավակը .alert-dismissibleև նշագծման մեջ չպետք է լինի տեքստային բովանդակություն:

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

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Որպեսզի ձեր ծանուցումները փակելիս օգտագործեն անիմացիա, համոզվեք, որ դրանք ունեն .fadeև.in դասերն արդեն կիրառված են դրանց համար:

Մեթոդներ

$().alert()

data-dismiss="alert"Կատարում է ազդանշան, որը լսում է ատրիբուտ ունեցող ժառանգական տարրերի վրա սեղմումների իրադարձությունները : (Պետք չէ data-api-ի ավտոմատ սկզբնավորումն օգտագործելիս):

$().alert('close')

Փակում է ահազանգը՝ հեռացնելով այն DOM-ից: Եթե .fade​​և .inդասերը առկա են տարրի վրա, նախքան այն հեռացնելը զգուշացումը կթուլանա:

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

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Կոճակներ button.js

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

Պետական

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

Այս հատկությունը հնացած է v3.3.5-ից և հեռացվել է v4-ում:

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Մեկ անջատիչ

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Նշման տուփ / ռադիո

Ավելացրե՛ք data-toggle="buttons"պարունակող .btn-groupվանդակում կամ ռադիո մուտքագրումներ՝ դրանց համապատասխան ոճերի փոխարկումը հնարավոր դարձնելու համար:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Մեթոդներ

$().button('toggle')

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

$().button('reset')

Վերականգնում է կոճակի վիճակը - տեքստը փոխում է բնօրինակ տեքստի: Այս մեթոդը ասինխրոն է և վերադառնում է մինչև վերակայման փաստացի ավարտը:

$().button(string)

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

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Collapse collapse.js

Ճկուն փլագին, որն օգտագործում է մի քանի դասեր՝ հեշտ փոխակերպման վարքագծի համար:

Օրինակ

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

• .collapseթաքցնում է բովանդակությունը
• .collapsingկիրառվում է անցումների ժամանակ
• .collapse.inցույց է տալիս բովանդակությունը

Դուք կարող եք օգտագործել hrefատրիբուտով հղում կամ հատկանիշով կոճակ data-target: Երկու դեպքում data-toggle="collapse"էլ պահանջվում է.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Ակորդեոնի օրինակ

Ընդլայնել լռելյայն փլուզման վարքագիծը՝ վահանակի բաղադրիչով ակորդեոն ստեղծելու համար:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Հնարավոր է նաև s-ը փոխանակել .panel-bodys-ի հետ .list-group:

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

Փլուզման պլագինը օգտագործում է մի քանի դասեր՝ ծանր բարձրացնելու համար.

• .collapseթաքցնում է բովանդակությունը
• .collapse.inցույց է տալիս բովանդակությունը
• .collapsingավելացվում է, երբ անցումը սկսվում է, և հեռացվում է, երբ այն ավարտվում է

Այս դասերը կարելի է գտնել component-animations.less.

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

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

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

JavaScript-ի միջոցով

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

$('.collapse').collapse()

Ընտրանքներ

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

Մեթոդներ

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Անջատում է ծալվող տարրը ցուցադրված կամ թաքցվածի: Վերադառնում է զանգահարողին մինչև ծալվող տարրը իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.collapseկամ hidden.bs.collapseիրադարձությունը տեղի ունենալը):

.collapse('show')

Ցույց է տալիս ծալվող տարր: Վերադառնում է զանգահարողին նախքան ծալվող տարրը փաստացի ցուցադրվելը (այսինքն՝ նախքան shown.bs.collapseիրադարձությունը տեղի ունենալը):

.collapse('hide')

Թաքցնում է ծալվող տարրը: Վերադառնում է զանգահարողին նախքան ծալվող տարրը իրականում թաքցվել է (այսինքն՝ նախքան hidden.bs.collapseիրադարձությունը տեղի ունենալը):

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

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Կարուսել կարուսել .js

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

Օրինակներ

Նախորդ Հաջորդը

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Ընտրովի ենթագրեր

Հեշտությամբ ավելացրեք ենթագրեր ձեր սլայդներին՝ օգտագործելով .carousel-captionորևէ տարր .item: Տեղադրեք գրեթե ցանկացած ընտրովի HTML այնտեղ, և այն ավտոմատ կերպով կհավասարեցվի և ձևաչափվի:

Առաջին սլայդի պիտակը

Nulla vitae elit libero, a pharetra augue mollis interdum:

Երկրորդ սլայդի պիտակ

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Երրորդ սլայդի պիտակ

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Նախորդ Հաջորդը

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

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

Բազմաթիվ կարուսելներ

Կարուսելների համար անհրաժեշտ է օգտագործել idամենաարտաքին կոնտեյների վրա (the .carousel), որպեսզի կարուսելի հսկիչները ճիշտ աշխատեն: Բազմաթիվ կարուսելներ ավելացնելիս կամ կարուսելները փոխելիս idհամոզվեք, որ թարմացնեք համապատասխան հսկիչները:

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

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

Հատկանիշն data-ride="carousel"օգտագործվում է կարուսելը որպես աշխույժ նշելու համար՝ սկսած էջի բեռնումից: Այն չի կարող օգտագործվել նույն կարուսելի (ավելորդ և անհարկի) բացահայտ JavaScript սկզբնավորման հետ համատեղ:

JavaScript-ի միջոցով

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

$('.carousel').carousel()

Ընտրանքներ

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

Մեթոդներ

.carousel(options)

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

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

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

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

Երկու իրադարձություններն ունեն հետևյալ լրացուցիչ հատկությունները.

• directionՈւղղությունը, որով սահում է կարուսելը (կամ "left"կամ "right"):
• relatedTargetDOM տարրը, որը սահում է իր տեղը որպես ակտիվ տարր:

Կարուսելի բոլոր իրադարձությունները կրակում են հենց կարուսելի վրա (այսինքն՝ <div class="carousel">):

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Կցեք affix.js

Օրինակ

Affix plugin- position: fixed;ը միանում և անջատվում է՝ ընդօրինակելով հայտնաբերված էֆեկտը position: sticky;: Աջ կողմում գտնվող ենթանավիգացիան affix plugin-ի կենդանի ցուցադրությունն է:

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

Օգտագործեք հավելվածի հավելվածը տվյալների ատրիբուտների միջոցով կամ ձեռքով ձեր սեփական JavaScript-ով: Երկու իրավիճակներում էլ դուք պետք է տրամադրեք CSS ձեր ամրացված բովանդակության դիրքավորման և լայնության համար:

Նշում․ մի օգտագործեք կցման պլագինը համեմատաբար տեղակայված տարրում պարունակվող տարրի վրա, օրինակ՝ ձգված կամ հրված սյունակում, Safari-ի մատուցման սխալի պատճառով :

Դիրքորոշում CSS-ի միջոցով

Affix plugin-ը փոխվում է երեք դասերի միջև, որոնցից յուրաքանչյուրը ներկայացնում է որոշակի վիճակ .affix՝ .affix-top, և .affix-bottom: Դուք պետք է տրամադրեք ոճերը, բացառությամբ position: fixed;on-ի .affix, այս դասերի համար (անկախ այս հավելվածից)՝ իրական դիրքերը կարգավորելու համար:

Ահա թե ինչպես է աշխատում աֆիքս հավելվածը.

1. Սկսելու համար հավելվածն ավելացնում .affix-topէ՝ ցույց տալու համար, որ տարրը գտնվում է ամենաբարձր դիրքում: Այս պահին ոչ մի CSS դիրքավորում չի պահանջվում:
2. Ոլորելով այն տարրի կողքով, որը ցանկանում եք ամրացնել, պետք է գործարկի իրական ամրացումը: Այստեղ .affixփոխարինվում .affix-topև position: fixed;տեղադրվում է (տրամադրվում է Bootstrap-ի CSS-ի կողմից):
3. .affixԵթե ​​ներքևի շեղումը սահմանված է, ոլորելով դրա կողքով պետք է փոխարինվի .affix-bottom. Քանի որ օֆսեթները կամընտիր են, մեկի կարգավորումը պահանջում է, որ դուք սահմանեք համապատասխան CSS: Այս դեպքում position: absolute;անհրաժեշտության դեպքում ավելացրեք: Փլագինը օգտագործում է տվյալների հատկանիշը կամ JavaScript տարբերակը՝ որոշելու, թե որտեղից պետք է տեղավորել տարրը:

Հետևեք վերը նշված քայլերին՝ ձեր CSS-ը ստորև նշված օգտագործման տարբերակներից որևէ մեկի համար սահմանելու համար:

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

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

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

JavaScript-ի միջոցով

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Ընտրանքներ

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

Մեթոդներ

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Վերահաշվում է կցորդի վիճակը՝ հիմնվելով համապատասխան տարրերի չափերի, դիրքի և ոլորման դիրքի վրա: Այն.affix , .affix-topև .affix-bottomդասերը ավելացվում են կամ հեռացվում կցված բովանդակությունից՝ համաձայն նոր վիճակի: Այս մեթոդը պետք է կանչվի ամեն անգամ, երբ կցված բովանդակության կամ թիրախային տարրի չափերը փոխվում են՝ ամրացված բովանդակության ճիշտ դիրքավորումն ապահովելու համար:

$('#myAffix').affix('checkPosition')

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

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