JavaScript

Ampahafantaro ny Bootstrap miaraka amin'ireo plugins JavaScript azo atao. Mianara momba ny plugin tsirairay, ny angonay sy ny safidy API programmatika, ary ny maro hafa.

Amin'ity pejy ity

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, Parcel, Vite…), dia azonao atao ny mampiasa /js/dist/*.jsrakitra efa vonona UMD.

Fampiasana amin'ny rafitra JavaScript

Na dia azo ampiasaina amin'ny rafitra rehetra aza ny Bootstrap CSS, ny Bootstrap JavaScript dia tsy mifanaraka tanteraka amin'ny rafitra JavaScript toy ny React, Vue, ary Angular izay manana fahalalana feno momba ny DOM. Ny Bootstrap sy ny rafitra dia mety manandrana manova ny singa DOM mitovy, ka miteraka bibikely toy ny dropdowns izay mijanona amin'ny toerana "misokatra".

Ny safidy tsara kokoa ho an'ireo izay mampiasa ity karazana framework ity dia ny fampiasana fonosana manokana ho an'ny framework fa tsy ny Bootstrap JavaScript. Ireto ny sasany amin'ireo safidy malaza indrindra:

React: React Bootstrap
Vue: BootstrapVue (tsy manohana ny Vue 2 sy Bootstrap 4 amin'izao fotoana izao)
Angular: ng-bootstrap

Mampiasa Bootstrap ho modely

Andramo ny tenanao! Ampidino ny kaody loharano sy ny demo miasa amin'ny fampiasana Bootstrap ho modely ES avy amin'ny tahiry twbs/examples . Azonao atao ihany koa ny manokatra ny ohatra ao amin'ny StackBlitz .

Manolotra dikan-tenin'ny Bootstrap namboarina ho ESM( bootstrap.esm.jsary bootstrap.esm.min.js) izahay izay ahafahanao mampiasa Bootstrap ho maody ao amin'ny navigateur, raha manohana azy ny navigateur kendrenao .

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

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

Raha oharina amin'ny JS bundlers, ny fampiasana ESM ao amin'ny navigateur dia mitaky anao hampiasa ny lalana feno sy ny anaran-drakitra fa tsy ny anaran'ny module. Vakio bebe kokoa momba ny mody JS ao amin'ny navigateur. Izany no antony ampiasantsika 'bootstrap.esm.min.js'fa tsy eo 'bootstrap'ambony. Na izany aza, sarotra kokoa izany noho ny fiankinan-doha amin'ny Popper, izay manafatra Popper amin'ny JavaScript toy izao:

import * as Popper from "@popperjs/core"

Raha manandrana ity toy izao ianao dia hahita hadisoana ao amin'ny console toy izao manaraka izao:

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

Mba hamahana izany dia azonao atao ny mampiasa a importmaphamaha ny anaran'ny module tsy misy dikany mba hamitana ny lalana. Raha toa ka tsy manohana ny navigateur nokendrenaoimportmap , dia mila mampiasa ny tetikasa es-module-shims ianao . Ity ny fomba fiasan'ny Bootstrap sy 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>

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.

Miankina amin'ny Popper ihany koa ny fidinanay, ny popover ary ny toro-làlanay .

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 sy mody amin'ny bokotra iray ihany ianao.)

Satria azo ampitaina amin'ny alàlan'ny toetran'ny data na JavaScript ny safidy, azonao atao ny manisy anarana safidy amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="{value}". Ataovy azo antoka fa hanova ny karazana tranga amin'ny anarana safidy avy amin'ny " CamelCase " ho " kebab-case " rehefa mandalo ny safidy amin'ny alàlan'ny toetran'ny data. Ohatra, ampiasao data-bs-custom-class="beautifier"fa tsy data-bs-customClass="beautifier".

Amin'ny Bootstrap 5.2.0, ny singa rehetra dia manohana toetra angon-drakitra natokana ho an'ny fanandramanadata-bs-config izay afaka mametraka ny fandrindrana singa tsotra ho tady JSON. Rehefa manana data-bs-config='{"delay":0, "title":123}'sy data-bs-title="456"toetra ny singa iray, dia ny titlesanda farany 456ary ny toetran'ny angon-drakitra misaraka dia hanongotra ny sanda omena amin'ny data-bs-config. Ankoatr'izay, ny toetran'ny data efa misy dia afaka mametraka ny sanda JSON toy ny data-bs-delay='{"show":0,"hide":150}'.

Selectors

Mampiasa ny teratany querySelectorsy querySelectorAllny fomba hanontaniana ny singa DOM izahay noho ny antony fampisehoana, noho izany dia tsy maintsy mampiasa mpifidy manan-kery ianao . Raha mampiasa mpifidy manokana toa an'i collapse:Example, aza hadino ny mandositra azy ireo.

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

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

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

Programmatic API

Ny mpanamboatra rehetra dia manaiky zavatra safidy azo atao na tsia (izay manomboka plugin miaraka amin'ny fitondrantena mahazatra azy):

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

Raha te hahazo ohatra plugin manokana ianao, ny plugin tsirairay dia mampiseho getInstancefomba iray. Ohatra, raha maka ohatra mivantana avy amin'ny singa iray:

bootstrap.Popover.getInstance(myPopoverEl)

Hiverina io fomba io nullraha toa ka tsy atomboka amin'ny singa nangatahana ny ohatra iray.

Raha tsy izany, getOrCreateInstancedia azo ampiasaina hahazoana ny ohatra mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

Raha toa ka tsy natomboka ny ohatra iray, dia mety hanaiky sy hampiasa zavatra azo atao ho tohan-kevitra faharoa izy.

CSS selectors amin'ny constructors

Ho fanampin'ny getInstancesy ny getOrCreateInstancefomba, ny mpamorona plugin rehetra dia afaka manaiky singa DOM na mpifidy CSS manan-kery ho tohan-kevitra voalohany. Ny singa plugin dia hita miaraka amin'ny querySelectorfomba satria singa tokana ihany no manohana ny plugins.

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

Fampiasana asynchronous sy transitions

Asynchronous daholo ny fomba fiasa API programmatic ary miverina amin'ny mpiantso rehefa 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.

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

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

Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

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`FOMBA

Na dia toa marina aza ny fampiasana ny disposefomba avy hatrany aorian'ny hide(), dia hiteraka vokatra diso izany. Ity misy ohatra iray amin'ny fampiasana olana:

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

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

Fikirana Default

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

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

Fomba sy fananana

Ny plugin Bootstrap tsirairay dia mampiseho ireto fomba manaraka ireto sy ny fananana static.

FOMBA	Description
`dispose`	Manimba ny modalin'ny singa iray. (Esory ny angona voatahiry amin'ny singa DOM)
`getInstance`	Fomba static izay ahafahanao mahazo ny ohatra modal mifandray amin'ny singa DOM.
`getOrCreateInstance`	Fomba static izay ahafahanao mahazo ny ohatra modal mifandray amin'ny singa DOM, na mamorona iray vaovao raha toa ka tsy natomboka izany.

Fananana static	Description
`NAME`	Mamerina ny anaran'ny plugin. (Ohatra: `bootstrap.Tooltip.NAME`)
`VERSION`	Ny dikan-tenin'ny plugins Bootstrap tsirairay dia azo idirana amin'ny alàlan'ny `VERSION`fananan'ny mpamorona ny plugin (Ohatra: `bootstrap.Tooltip.VERSION`)

Sanitizer

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

Ny allowListsanda default dia ireto manaraka ireto:

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

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

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)

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

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

Optionally mampiasa jQuery

Tsy mila jQuery ianao ao amin'ny Bootstrap 5 , fa mbola azo atao ny mampiasa ny singantsika amin'ny jQuery. Raha hitan'i Bootstrap jQueryao amin'ilay windowzavatra, dia hanampy ny singa rehetra ao amin'ny rafitra plugin an'ny jQuery. Izany dia ahafahanao manao ireto manaraka ireto:

$('[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

Toy izany koa ny singa hafa eto amintsika.

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.

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

Bootstrap dia tsy manohana amin'ny fomba ofisialy ny tranokala JavaScript an'ny antoko fahatelo toa ny Prototype na jQuery UI. Na .noConflictdia eo aza ny zava-mitranga ary nomena anarana, dia mety hisy olana amin'ny fifanarahana izay mila amboarinao samirery.

hetsika jQuery

Bootstrap dia hamantatra ny jQuery raha jQuerymisy ao amin'ilay windowzavatra ary tsy misy data-bs-no-jquerytoetra napetraka amin'ny <body>. Raha hita ny jQuery dia hamoaka hetsika ny Bootstrap noho ny rafitra hetsika jQuery. Ka raha te hihaino ny hetsika Bootstrap ianao dia tsy maintsy mampiasa ny fomba jQuery ( .on, .one) fa tsy addEventListener.

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

JavaScript kilemaina

Ny plugins Bootstrap dia tsy misy fiatoana manokana 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.