JavaScript

Avereno amin'ny fiainana ny Bootstrap miaraka amin'ireo plugins JavaScript tsy voatery namboarina tamin'ny jQuery. Mianara momba ny plugin tsirairay, ny angonay sy ny safidy API programmatika, ary ny maro hafa.

Olona tsirairay na natambatra

Ny plugins dia azo ampidirina tsirairay (mampiasa ny *.jsrakitra manokana an'ny Bootstrap), na miaraka amin'ny fampiasana bootstrap.jsna ny minified bootstrap.min.js(aza ampidirina izy roa).

miankina

Ny plugins sasany sy ny singa CSS dia miankina amin'ny plugins hafa. Raha ampidirinao tsirairay ny plugins, ataovy azo antoka ny manamarina ireo fiankinan-doha ireo ao amin'ny doka. Mariho ihany koa fa miankina amin'ny jQuery ny plugins rehetra (midika izany fa tsy maintsy ampidirina alohan'ny rakitra plugin ny jQuery). Jereo ny anaypackage.json mba hahitana hoe iza amin'ireo dikan-jQuery no tohana.

Miankina amin'ny Popper.js ihany koa ny fampidinana, popover ary toro- hevitray .

Data attributes

Saika ny plugins Bootstrap rehetra dia azo alefa sy amboarina amin'ny alàlan'ny HTML irery miaraka amin'ny toetran'ny data (fomba fampiasantsika JavaScript). Ataovy azo antoka fa tsy mampiasa afa-tsy andiana toetra angon-drakitra amin'ny singa tokana ianao (ohatra, tsy afaka manetsika fitaovana iray sy mody amin'ny bokotra iray ihany ianao.)

Na izany aza, amin'ny toe-javatra sasany dia mety ilaina ny manafoana ity fampiasa ity. Mba hanesorana ny API toetran'ny angona, esory ny hetsika rehetra amin'ny anaran'ny antontan-taratasy misy data-apitoy izao:

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

Raha tsy izany, raha mikendry plugin manokana, ampidiro fotsiny ny anaran'ilay plugin ho toy ny namespace miaraka amin'ny namespace data-api toy izao:

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

zava-mitranga

Bootstrap dia manome hetsika manokana ho an'ny ankamaroan'ny hetsika tokana ataon'ny plugins. Amin'ny ankapobeny, ireo dia avy amin'ny endrika infinitive sy past participle - izay ny infinitive (ohatra. show) dia mipoitra eo am-piandohan'ny hetsika iray, ary ny endrik'ilay matoanteny lasa (ex. shown) dia mipoitra rehefa vita ny hetsika iray.

Ny hetsika infinitive rehetra dia manome preventDefault()fiasa. Izany dia manome fahafahana hampiato ny fanatanterahana hetsika iray alohan'ny hanombohany. Ny fiverenana diso avy amin'ny mpitantana hetsika dia hiantso ho azy ihany koa preventDefault().

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

Programmatic API

Mino koa izahay fa tokony ho afaka mampiasa ny plugins Bootstrap rehetra ianao amin'ny alàlan'ny JavaScript API. Ny API ho an'ny daholobe rehetra dia fomba tokana, azo fehezina, ary mamerina ny fanangonana natao.

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

Ny fomba rehetra dia tokony hanaiky zavatra safidy azo atao, tady izay mikendry fomba manokana, na tsy misy (izay manomboka plugin miaraka amin'ny fitondran-tena mahazatra):

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

Ny plugin tsirairay ihany koa dia mampiseho ny mpanamboatra manta ao amin'ny Constructorfananana iray: $.fn.popover.Constructor. Raha te hahazo ohatra plugin manokana ianao dia alaivo mivantana avy amin'ny singa iray: $('[rel="popover"]').data('popover').

Fampiasana asynchronous sy transitions

Ny fomba fiasa API programmatika rehetra dia asynchronous ary miverina amin'ny mpiantso raha vao manomboka ny tetezamita fa alohan'ny hifarana .

Mba hanatanterahana hetsika iray rehefa vita ny tetezamita dia azonao atao ny mihaino ny hetsika mifandraika amin'izany.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

Ho fanampin'izany dia tsy horaharahaina ny fiantsoana fomba amin'ny singa tetezamita .

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Fikirana Default

Azonao atao ny manova ny kinova default ho an'ny plugin iray amin'ny fanovana ny Constructor.Defaulttanjon'ny plugin:

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

Tsy misy fifandirana

Indraindray dia ilaina ny mampiasa plugins Bootstrap miaraka amin'ny rafitra UI hafa. Amin'ireo toe-javatra ireo dia mety hitranga indraindray ny fifandonan'ny toeran'ny anarana. Raha mitranga izany dia azonao atao ny miantso .noConflictny plugin tianao hamerenana ny sandan'ny.

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

Laharana dikan-teny

The version of each of Bootstrap’s jQuery plugins can be accessed via the VERSION property of the plugin’s constructor. For example, for the tooltip plugin:

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

No special fallbacks when JavaScript is disabled

Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <noscript> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.

Util

Ny rakitra JavaScript an'ny Bootstrap rehetra dia miankina util.jsary tsy maintsy ampidirina miaraka amin'ireo rakitra JavaScript hafa. Raha mampiasa ny compiled (na minifié) bootstrap.jsianao, dia tsy ilaina ny mampiditra an'ity — efa eo izy io.

util.jsdia misy ny fiasan'ny fitaovana sy mpanampy fototra ho an'ny transitionEndhetsika ary koa ny emulator tetezamita CSS. Ampiasain'ny plugins hafa izy io mba hijerena ny fanohanan'ny tetezamita CSS sy hisambotra ny fifindrana mihantona.