JavaScript

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

Air an duilleig seo

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, Parcel, Vite…), faodaidh tu /js/dist/*.jsfaidhlichean a chleachdadh a tha deiseil UMD.

Cleachdadh le frèaman JavaScript

Ged a ghabhas am Bootstrap CSS a chleachdadh le frèam sam bith, chan eil am Bootstrap JavaScript gu tur co-chòrdail ri frèaman JavaScript mar React, Vue, agus Angular a tha a’ gabhail làn eòlas air an DOM. Faodaidh an dà chuid Bootstrap agus am frèam feuchainn ris an aon eileamaid DOM a thionndadh, agus mar thoradh air sin bidh mialan mar dropdowns a tha glaiste san t-suidheachadh “fosgailte”.

Is e roghainn eile nas fheàrr dhaibhsan a tha a’ cleachdadh an seòrsa frèamaichean seo pasgan frèam sònraichte a chleachdadh an àite Bootstrap JavaScript. Seo cuid de na roghainnean as mòr-chòrdte:

Freagairt: React Bootstrap
Vue: BootstrapVue (an-dràsta a’ toirt taic do Vue 2 agus Bootstrap 4 a-mhàin)
Angular: ng-bootstrap

A’ cleachdadh Bootstrap mar mhodal

Feuch e thu fhèin! Luchdaich sìos an còd stòr agus an demo obrach airson Bootstrap a chleachdadh mar mhodal ES bhon stòr twbs / samples . Faodaidh tu cuideachd an eisimpleir fhosgladh ann an StackBlitz .

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, 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>

An coimeas ri pasganan JS, le bhith a’ cleachdadh ESM sa bhrobhsair feumaidh tu an t-slighe slàn agus ainm an fhaidhle a chleachdadh an àite ainm a’ mhodal. Leugh tuilleadh mu mhodalan JS sa bhrobhsair. Sin as coireach gu bheil sinn a 'cleachdadh 'bootstrap.esm.min.js'an àite gu h- 'bootstrap'àrd. Ach, tha seo nas iom-fhillte leis an eisimeileachd againn air Popper, a bhios a’ toirt a-steach Popper a-steach don JavaScript againn mar seo:

import * as Popper from "@popperjs/core"

Ma dh’ fheuchas tu seo mar a tha, chì thu mearachd sa chonsail mar a leanas:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

Gus seo a chàradh, faodaidh tu a chleachdadh importmapgus ainmean modal neo-riaghailteach fhuasgladh gus slighean a chrìochnachadh. Mura cuir na brobhsairean cuimsichte agad taic ri importmap, feumaidh tu am pròiseact es-module-shims a chleachdadh . Seo mar a tha e ag obair airson Bootstrap agus Popper:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

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 .

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.)

Leis gum faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript, faodaidh tu ainm roghainn a chuir ri data-bs-, mar ann an data-bs-animation="{value}". Dèan cinnteach gun atharraich thu seòrsa cùis an ainm roghainn bho “ camelCase ” gu “ kebab-case ” nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, cleachd data-bs-custom-class="beautifier"an àite data-bs-customClass="beautifier".

Mar Bootstrap 5.2.0, tha na pàirtean uile a’ toirt taic do fheart dàta glèidhte deuchainneachdata-bs-config a dh’ fhaodas rèiteachadh phàirtean sìmplidh a chumail mar shreang JSON. Nuair a tha data-bs-config='{"delay":0, "title":123}'agus data-bs-title="456"buadhan aig eileamaid, bidh an titleluach deireannach 456agus bidh na buadhan dàta fa leth a’ dol thairis air na luachan a chaidh a thoirt seachad air data-bs-config. A bharrachd air an sin, tha na feartan dàta a th’ ann mar-thà comasach air luachan JSON mar data-bs-delay='{"show":0,"hide":150}'.

Luchd-taghaidh

Cleachdaidh sinn na dòighean dùthchasach querySelectoragus na querySelectorAlldòighean gus eileamaidean DOM a cheasnachadh airson adhbharan dèanadais, agus mar sin feumaidh tu taghadairean dligheach a chleachdadh . Ma chleachdas tu luchd-taghaidh sònraichte mar collapse:Example, dèan 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().

const myModal = document.querySelector('#myModal')

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

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):

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

Ma tha thu airson eisimpleir plugan sònraichte fhaighinn, nochdaidh gach plugan getInstancedòigh. Mar eisimpleir, airson eisimpleir fhaighinn air ais gu dìreach bho eileamaid:

bootstrap.Popover.getInstance(myPopoverEl)

Tillidh an dòigh seo nullmura tèid eisimpleir a thòiseachadh thairis air an eileamaid a chaidh iarraidh.

Air neo, getOrCreateInstancefaodar a chleachdadh gus an eisimpleir fhaighinn co-cheangailte ri eileamaid DOM, no cruthaich fear ùr gun fhios nach deach a thòiseachadh.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Air eagal ‘s nach deach eisimpleir a thòiseachadh, faodaidh e gabhail ri rud rèiteachaidh roghainneil agus a chleachdadh mar dhàrna argamaid.

Luchd-taghaidh CSS ann an luchd-togail

A bharrachd air na dòighean getInstanceagus na getOrCreateInstancedòighean, faodaidh gach neach-togail plugan gabhail ri eileamaid DOM no taghadair CSS dligheach mar a’ chiad argamaid. Lorgar eileamaidean plugan leis an querySelectordòigh leis nach eil na plugins againn a’ toirt taic ach do aon eileamaid.

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

Gnìomhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API prògramaichte asyncronach 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.

const myCollapseEl = document.querySelector('#myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', 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 .

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`dòigh-obrach

Ged a tha e coltach gu bheil e ceart an disposedòigh a chleachdadh dìreach às deidh sin hide(), leanaidh e gu toraidhean ceàrr. Seo eisimpleir den duilgheadas cleachdadh:

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

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

Dòighean agus feartan

Bidh a h-uile plugan Bootstrap a’ nochdadh na dòighean a leanas agus feartan statach.

Dòigh-obrach	Tuairisgeul
`dispose`	A 'sgrios modal eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM)
`getInstance`	Modh statach a leigeas leat an suidheachadh modal fhaighinn co-cheangailte ri eileamaid DOM.
`getOrCreateInstance`	Dòigh statach a leigeas leat an eisimpleir modal fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh.

Seilbh statach	Tuairisgeul
`NAME`	Tillidh e ainm a’ plugan. (Eisimpleir: `bootstrap.Tooltip.NAME`)
`VERSION`	Faodar faighinn chun dreach de gach plugan aig Bootstrap tro `VERSION`sheilbh neach-togail a’ phlug (Eisimpleir : `bootstrap.Tooltip.VERSION`)

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:

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

const 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
const 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:

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

Roghainneil a’ cleachdadh jQuery

Chan fheum thu jQuery ann am Bootstrap 5 , ach tha e comasach fhathast na co-phàirtean againn a chleachdadh le jQuery. Ma lorgas Bootstrap jQueryan windownì, cuiridh e na pàirtean againn gu lèir ann an siostam plugan jQuery. Leigidh seo leat na leanas a dhèanamh:

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

Tha an aon rud fìor airson na co-phàirtean eile againn.

Gun strì

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.

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

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.

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', () => {
  // do something...
})

JavaScript à comas

Chan eil cùl-taic sònraichte aig plugins Bootstrap 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.