Rach gu prìomh shusbaint Air adhart gu seòladh docs
in English

JavaScript

Thoir beò Bootstrap leis na plugins roghainneil JavaScript againn. Ionnsaich mu gach plugan, ar dàta agus roghainnean API prògramaidh, agus barrachd.

Aonair no air a chur ri chèile

Faodar plugins a thoirt a-steach leotha fhèin (a’ cleachdadh an neach fa leth aig Bootstrap js/dist/*.js), no iad uile aig an aon àm a’ cleachdadh bootstrap.jsno am mion- bootstrap.min.jsfhiosrachadh (na cuir a-steach an dà chuid).

Ma chleachdas tu pasgan (Webpack, Rollup…), faodaidh tu /js/dist/*.jsfaidhlichean a chleachdadh a tha deiseil UMD.

A’ cleachdadh Bootstrap mar mhodal

Bheir sinn seachad dreach de Bootstrap a chaidh a thogail mar ESM( bootstrap.esm.jsagus bootstrap.esm.min.js) a leigeas leat Bootstrap a chleachdadh mar mhodal sa bhrobhsair agad, ma tha na brobhsairean cuimsichte agad a’ toirt taic dha .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Plugins neo-fhreagarrach

Air sgàth cuingealachaidhean brabhsair, chan urrainnear cuid de na plugins againn, is e sin plugins Dropdown, Tooltip agus Popover, a chleachdadh ann an <script>tag le moduleseòrsa oir tha iad an urra ri Popper. Airson tuilleadh fiosrachaidh mun chùis faic an seo .

eisimeileachd

Tha cuid de plugins agus co-phàirtean CSS an urra ri plugins eile. Ma bheir thu a-steach plugins leotha fhèin, dèan cinnteach gun dèan thu cinnteach airson na h-eisimeileachd sin anns na docaichean.

Tha na dropdowns, popovers agus molaidhean innealan againn cuideachd an urra ri Popper .

Fhathast ag iarraidh jQuery a chleachdadh? Tha e comasach!

Tha Bootstrap 5 air a dhealbhadh airson a chleachdadh às aonais jQuery, ach tha e fhathast comasach na pàirtean againn a chleachdadh le jQuery. Ma lorgas Bootstrap jQueryan window cuiridh e na pàirtean againn gu lèir ann an siostam plugan jQuery; tha seo a’ ciallachadh gun urrainn dhut a dhèanamh $('[data-bs-toggle="tooltip"]').tooltip()gus molaidhean innealan a chomasachadh. Tha an aon rud fìor airson na co-phàirtean eile againn.

Feartan dàta

Faodar cha mhòr a h-uile plugan Bootstrap a chomasachadh agus a rèiteachadh tro HTML a-mhàin le buadhan dàta (an dòigh as fheàrr leinn air gnìomhachd JavaScript a chleachdadh). Dèan cinnteach nach cleachd thu ach aon sheata de bhuadhan dàta air aon eileamaid (me, chan urrainn dhut inneal agus modal a bhrosnachadh bhon aon phutan.)

Luchd-taghaidh

An-dràsta gus eileamaidean DOM a cheasnachadh bidh sinn a’ cleachdadh nan dòighean dùthchasach querySelectoragus querySelectorAllairson adhbharan dèanadais, mar sin feumaidh tu taghadairean dligheach a chleachdadh . Ma chleachdas tu luchd-taghaidh sònraichte, mar eisimpleir: collapse:Examplebi cinnteach gun teicheadh ​​​​thu.

Tachartasan

Bidh Bootstrap a’ toirt seachad tachartasan àbhaisteach airson gnìomhan sònraichte a’ mhòr-chuid de plugins. San fharsaingeachd, thig iad sin ann an cruth com-pàirt infinitive agus san àm a dh’ fhalbh - far a bheil an infinitive (ex. show) air a phiobrachadh aig toiseach tachartais, agus an cruth com-pàirteachaidh san àm a dh’ fhalbh (ex. shown) air a phiobrachadh nuair a thèid gnìomh a chrìochnachadh.

Bidh a h-uile tachartas infinitive a’ toirt seachad preventDefault()comas-gnìomh. Bheir seo an comas stad a chuir air gnìomh mus tòisich e. Bidh tilleadh meallta bho neach-làimhseachaidh tachartais cuideachd a’ gairm preventDefault().

var myModal = document.getElementById('myModal')

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

tachartasan jQuery

Lorgaidh Bootstrap jQuery ma jQuerytha e an làthair san windownì agus nach eil data-bs-no-jqueryfeart air a shuidheachadh air <body>. Ma lorgar jQuery, cuiridh Bootstrap tachartasan a-mach le taing do shiostam tachartais jQuery. Mar sin ma tha thu airson èisteachd ri tachartasan Bootstrap, feumaidh tu na dòighean jQuery ( .on, .one) a chleachdadh an àite addEventListener.

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

Prògramachadh API

Gabhaidh a h-uile neach-togail ri nì roghainnean roghainneil no gun dad (a thòisicheas plugan leis a’ ghiùlan àbhaisteach aige):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Ma tha thu airson eisimpleir plugan sònraichte fhaighinn, nochdaidh gach plugan getInstancedòigh. Gus a thoirt air ais gu dìreach bho eileamaid, dèan seo: bootstrap.Popover.getInstance(myPopoverEl).

Luchd-taghaidh CSS ann an luchd-togail

Faodaidh tu cuideachd roghnaichear CSS a chleachdadh mar a’ chiad argamaid an àite eileamaid DOM gus am plugan a thòiseachadh. An-dràsta tha an eileamaid airson a’ plugan air a lorg leis an querySelectordòigh leis gu bheil na plugins againn a’ toirt taic do aon eileamaid a-mhàin.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

Gnìomhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh prògramaidh API neo- chunbhalach agus tillidh iad chun neach-fios aon uair ‘s gu bheil an gluasad air tòiseachadh ach mus tig e gu crìch .

Gus gnìomh a chuir an gnìomh aon uair ‘s gu bheil an eadar-ghluasad deiseil, faodaidh tu èisteachd ris an tachartas co-fhreagarrach.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

A bharrachd air an sin cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

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

Roghainnean bunaiteach

'S urrainn dhut na roghainnean bunaiteach airson plugan atharrachadh le bhith ag atharrachadh Constructor.Defaultnì a' phlugain:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Gun strì (dìreach ma chleachdas tu jQuery)

Aig amannan feumar plugins Bootstrap a chleachdadh le frèaman UI eile. Anns na suidheachaidhean sin, faodaidh tubaistean ainmean-àite tachairt bho àm gu àm. Ma thachras seo, faodaidh tu fios a chuir chun .noConflictplugan a tha thu airson luach a thilleadh.

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

Àireamhan tionndaidh

Faodar faighinn chun dreach de gach plugan aig Bootstrap tro VERSIONsheilbh neach-togail a’ phlug. Mar eisimpleir, airson am plugan Tooltip:

bootstrap.Tooltip.VERSION // => "5.0.2"

Chan eil cùl-taic sònraichte ann nuair a tha JavaScript à comas

Cha bhith plugins Bootstrap a’ tuiteam air ais gu sònraichte gràsmhor nuair a tha JavaScript à comas. Ma tha dragh ort mu eòlas an neach-cleachdaidh sa chùis seo, cleachd <noscript>gus an suidheachadh a mhìneachadh (agus mar a nì thu ath-chomasachadh JavaScript) don luchd-cleachdaidh agad, agus / no cuir ris na fallbacks àbhaisteach agad fhèin.

Leabharlannan treas-phàrtaidhean

Chan eil Bootstrap a’ toirt taic oifigeil do leabharlannan JavaScript treas-phàrtaidh leithid Prototype no jQuery UI. A dh'aindeoin .noConflictagus ainmean thachartasan, dh'fhaodadh gum bi duilgheadasan co-chòrdalachd ann a dh'fheumas tu a rèiteachadh leat fhèin.

Sanitizer

Bidh Tooltips agus Popovers a’ cleachdadh ar inneal-glanaidh togte gus roghainnean a tha a’ gabhail ri HTML a ghlanadh.

allowListTha an luach bunaiteach mar a leanas:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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: []
}

Ma tha thu airson luachan ùra a chur ris a’ bhunait seo allowList, faodaidh tu na leanas a dhèanamh:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

Ma tha thu airson a dhol seachad air an inneal-glanaidh againn oir is fheàrr leat leabharlann sònraichte a chleachdadh, mar eisimpleir DOMPurify , bu chòir dhut na leanas a dhèanamh:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})