JavaScript

Uripake Bootstrap kanthi plugin JavaScript opsional sing dibangun ing jQuery. Sinau babagan saben plugin, data lan opsi API terprogram, lan liya-liyane.

Individu utawa kompilasi

Plugins bisa dilebokake kanthi individu (nggunakake Bootstrap individu js/dist/*.js), utawa kabeh bebarengan nggunakake bootstrap.jsutawa minified bootstrap.min.js(ora kalebu loro-lorone).

Yen sampeyan nggunakake bundler (Webpack, Rollup…), sampeyan bisa nggunakake /js/dist/*.jsfile sing siap UMD.

Ketergantungan

Sawetara plugin lan komponen CSS gumantung ing plugin liyane. Yen sampeyan nyakup plugin kanthi individu, priksa manawa sampeyan mriksa dependensi kasebut ing dokumen kasebut. Uga elinga yen kabeh plugin gumantung ing jQuery (iki tegese jQuery kudu dilebokake sadurunge file plugin). Hubungi kitapackage.json kanggo ndeleng versi jQuery sing didhukung.

Kita dropdowns, popovers lan tooltips uga gumantung ing Popper.js .

Atribut data

Saklawasé kabeh plugin Bootstrap bisa diaktifake lan dikonfigurasi liwat HTML kanthi atribut data (cara sing disenengi kanggo nggunakake fungsi JavaScript). Priksa manawa sampeyan mung nggunakake siji set atribut data ing siji unsur (contone, sampeyan ora bisa micu tooltip lan modal saka tombol sing padha.)

Nanging, ing sawetara kahanan bisa uga dikarepake kanggo mateni fungsi iki. Kanggo mateni API atribut data, copot kabeh acara ing spasi jeneng dokumen data-apikaya mangkene:

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

Utawa, kanggo ngarahake plugin tartamtu, mung lebokake jeneng plugin kasebut minangka ruang jeneng bebarengan karo ruang jeneng data-api kaya iki:

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

Acara

Bootstrap nyedhiyakake acara khusus kanggo umume tumindak unik plugin. Umumé, iki teka ing wangun infinitive lan past participle - ngendi infinitive (ex. show) dipicu ing wiwitan acara, lan past participle wangun (ex. shown) dipicu nalika completion saka tumindak.

Kabeh acara infinitive nyedhiyakake preventDefault()fungsi. Iki menehi kemampuan kanggo mungkasi eksekusi tumindak sadurunge diwiwiti. Mbalik palsu saka panangan acara uga bakal nelpon kanthi otomatis preventDefault().

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

Programmatic API

Kita uga pracaya sampeyan kudu bisa nggunakake kabeh plugin Bootstrap murni liwat JavaScript API. Kabeh API umum iku siji, cara chainable, lan bali koleksi tumindak marang.

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

Kabeh cara kudu nampa obyek opsional, senar sing ngarahake metode tartamtu, utawa ora ana apa-apa (sing miwiti plugin kanthi prilaku standar):

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

Saben plugin uga mbukak konstruktor mentah ing Constructorproperti: $.fn.popover.Constructor. Yen sampeyan pengin njaluk conto plugin tartamtu, njupuk langsung saka unsur: $('[rel="popover"]').data('popover').

Fungsi lan transisi asinkron

Kabeh cara API terprogram ora sinkron lan bali menyang panelpon yen transisi diwiwiti nanging sadurunge rampung .

Kanggo nglakokake tumindak sawise transisi rampung, sampeyan bisa ngrungokake acara sing cocog.

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

Kajaba iku, telpon metode ing komponen transisi bakal diabaikan .

$('#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 !!

Setelan gawan

Sampeyan bisa ngganti setelan gawan kanggo plugin kanthi ngowahi Constructor.Defaultobyek plugin:

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

Ora ana konflik

Kadhangkala perlu nggunakake plugin Bootstrap karo kerangka UI liyane. Ing kahanan kasebut, tabrakan spasi jeneng kadhangkala bisa kedadeyan. Yen kedadeyan kasebut, sampeyan bisa nelpon .noConflictplugin sing pengin dibalekake regane.

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

Nomer versi

Versi saben plugin jQuery Bootstrap bisa diakses liwat VERSIONproperti konstruktor plugin kasebut. Contone, kanggo plugin tooltip:

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

Ora ana fallbacks khusus nalika JavaScript dipateni

Plugin Bootstrap ora mundur kanthi apik nalika JavaScript dipateni. Yen sampeyan peduli karo pengalaman pangguna ing kasus iki, gunakake <noscript>kanggo nerangake kahanan kasebut (lan carane ngaktifake JavaScript maneh) menyang pangguna, lan / utawa nambah fallbacks khusus sampeyan dhewe.

Util

Kabeh file JavaScript Bootstrap gumantung util.jslan kudu dilebokake bebarengan karo file JavaScript liyane. Yen sampeyan nggunakake compiled (utawa minified) bootstrap.js, ora perlu kanggo kalebu iki-wis ana.

util.jskalebu fungsi sarana lan helper dhasar kanggo transitionEndacara uga minangka emulator transisi CSS. Iki digunakake dening plugin liyane kanggo mriksa dhukungan transisi CSS lan kanggo nyekel transisi gantung.

Sanitizer

Tooltips lan Popovers nggunakake sanitizer sing dibangun kanggo ngresiki opsi sing nampa HTML.

Nilai standar whiteListyaiku ing ngisor iki:

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: []
}

Yen sampeyan pengin nambah nilai anyar menyang standar iki, whiteListsampeyan bisa nindakake ing ngisor iki:

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)

Yen sampeyan pengin ngliwati sanitizer amarga luwih seneng nggunakake perpustakaan khusus, contone DOMPurify , sampeyan kudu nindakake ing ngisor iki:

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