JavaScript

Ampahafantaro ny Bootstrap miaraka amin'ireo plugins JavaScript azo ampiasaina amin'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 Bootstrap's individual js/dist/*.js), na miaraka amin'ny fampiasana bootstrap.jsna ny minified bootstrap.min.js(aza ampidirina izy roa).

Raha mampiasa bundler ianao (Webpack, Rollup…), dia azonao atao ny mampiasa /js/dist/*.jsrakitra efa vonona UMD.

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 (event) {
  if (!data) {
    return event.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 programmatic 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 (event) {
  // Action to execute once the collapsible area is expanded
})

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

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#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 amin'ny fanovana ny Constructor.Defaulttanjon'ny plugin:

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

Tsy misy fifandirana

Indraindray dia ilaina ny mampiasa plugins Bootstrap miaraka amin'ny rafitra UI hafa. Amin'ireo toe-javatra ireo, 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

Ny kinova tsirairay amin'ny plugins jQuery an'ny Bootstrap dia azo idirana amin'ny alàlan'ny VERSIONfananan'ny mpamorona ny plugin. Ohatra, ho an'ny plugin tooltip:

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

Tsy misy fiatoana manokana rehefa tsy mandeha ny JavaScript

Ny plugins Bootstrap dia tsy miverina amin'ny fomba tsara indrindra rehefa tsy mandeha ny JavaScript. Raha miraharaha ny traikefan'ny mpampiasa amin'ity tranga ity ianao dia ampiasao <noscript>ny manazava ny toe-javatra (sy ny fomba famelomana indray ny JavaScript) amin'ny mpampiasa anao, ary/na ampio ny fianjeranao manokana.

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.

Sanitizer

Ny Tooltips sy Popovers dia mampiasa ny fanadiovan-tenantsika mba hanadiovana ireo safidy manaiky HTML.

Ny whiteListsanda default dia ireto manaraka ireto:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Raha te hanampy soatoavina vaovao amin'ity default ity whiteListianao dia afaka manao izao manaraka izao:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Raha te hiala amin'ny sanitizer anay ianao satria aleonao mampiasa tranomboky natokana, ohatra DOMPuify , dia tokony hanao izao manaraka izao ianao:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})