ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
in English

JavaScript

ເຮັດໃຫ້ Bootstrap ມີຊີວິດຊີວາດ້ວຍ plugins JavaScript ທາງເລືອກຂອງພວກເຮົາ. ຮຽນຮູ້ກ່ຽວກັບແຕ່ລະປລັກອິນ, ຂໍ້ມູນຂອງພວກເຮົາ ແລະຕົວເລືອກ API ແບບໂປຣແກຣມ, ແລະອື່ນໆອີກ.

ໃນໜ້ານີ້

ສ່ວນບຸກຄົນຫຼືລວບລວມ

ປັ໊ກອິນສາມາດຖືກລວມເຂົ້າເປັນສ່ວນບຸກຄົນ (ໂດຍນໍາໃຊ້ສ່ວນບຸກຄົນຂອງ Bootstrap js/dist/*.js), ຫຼືທັງຫມົດໃນເວລາດຽວໂດຍໃຊ້ bootstrap.jsຫຼືຫຍໍ້ bootstrap.min.js(ບໍ່ລວມທັງສອງ).

ຖ້າທ່ານໃຊ້ bundler (Webpack, Parcel, Vite…), ທ່ານສາມາດນໍາໃຊ້ /js/dist/*.jsໄຟລ໌ທີ່ມີ UMD ພ້ອມ.

ການນໍາໃຊ້ກັບກອບ JavaScript

ໃນຂະນະທີ່ Bootstrap CSS ສາມາດຖືກນໍາໃຊ້ກັບກອບໃດກໍ່ຕາມ, Bootstrap JavaScript ແມ່ນບໍ່ເຫມາະສົມກັບກອບ JavaScript ເຊັ່ນ React, Vue, ແລະ Angular ເຊິ່ງສົມມຸດວ່າມີຄວາມຮູ້ຢ່າງເຕັມທີ່ກ່ຽວກັບ DOM. ທັງ Bootstrap ແລະກອບອາດຈະພະຍາຍາມປ່ຽນອົງປະກອບ DOM ດຽວກັນ, ເຊິ່ງກໍ່ໃຫ້ເກີດຂໍ້ບົກພ່ອງເຊັ່ນ dropdowns ທີ່ຕິດຢູ່ໃນຕໍາແຫນ່ງ "ເປີດ".

ທາງເລືອກທີ່ດີກວ່າສໍາລັບຜູ້ທີ່ໃຊ້ກອບປະເພດນີ້ແມ່ນການໃຊ້ຊຸດກອບສະເພາະ ແທນທີ່ຈະເປັນ Bootstrap JavaScript. ນີ້ແມ່ນບາງທາງເລືອກທີ່ນິຍົມຫຼາຍທີ່ສຸດ:

  • ປະຕິກິລິຍາ: React Bootstrap
  • Vue: BootstrapVue (ປະຈຸບັນຮອງຮັບພຽງແຕ່ Vue 2 ແລະ Bootstrap 4 ເທົ່ານັ້ນ)
  • Angular: ng-bootstrap

ການນໍາໃຊ້ Bootstrap ເປັນໂມດູນ

ລອງໃຊ້ເອງ! ດາວໂຫລດຊອດໂຄດ ແລະສາທິດການເຮັດວຽກສຳລັບການໃຊ້ Bootstrap ເປັນໂມດູນ ES ຈາກ ບ່ອນເກັບຂໍ້ມູນ tws/example . ນອກນັ້ນທ່ານຍັງສາມາດ ເປີດຕົວຢ່າງໃນ StackBlitz .

ພວກເຮົາສະຫນອງສະບັບຂອງ Bootstrap ສ້າງຂຶ້ນເປັນ ESM(bootstrap.esm.js ແລະ bootstrap.esm.min.js) ເຊິ່ງອະນຸຍາດໃຫ້ທ່ານໃຊ້ Bootstrap ເປັນໂມດູນໃນຕົວທ່ອງເວັບ, ຖ້າ ຕົວທ່ອງເວັບເປົ້າຫມາຍຂອງທ່ານສະຫນັບສະຫນູນມັນ .

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

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

ເມື່ອປຽບທຽບກັບ JS bundleers, ການນໍາໃຊ້ ESM ໃນຕົວທ່ອງເວັບຮຽກຮ້ອງໃຫ້ທ່ານໃຊ້ເສັ້ນທາງເຕັມແລະຊື່ໄຟລ໌ແທນທີ່ຈະເປັນຊື່ໂມດູນ. ອ່ານເພີ່ມເຕີມກ່ຽວກັບໂມດູນ JS ໃນຕົວທ່ອງເວັບ. ນັ້ນແມ່ນເຫດຜົນທີ່ພວກເຮົາໃຊ້'bootstrap.esm.min.js' ແທນ 'bootstrap'ຂ້າງເທິງ. ຢ່າງໃດກໍຕາມ, ນີ້ແມ່ນສັບສົນຕື່ມອີກໂດຍການຂຶ້ນກັບ Popper ຂອງພວກເຮົາ, ເຊິ່ງນໍາເຂົ້າ Popper ເຂົ້າໄປໃນ JavaScript ຂອງພວກເຮົາເຊັ່ນ:

import * as Popper from "@popperjs/core"

ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ພະ​ຍາ​ຍາມ​ດັ່ງ​ນີ້​, ທ່ານ​ຈະ​ເຫັນ​ຄວາມ​ຜິດ​ພາດ​ໃນ console ດັ່ງ​ຕໍ່​ໄປ​ນີ້​:

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

ເພື່ອແກ້ໄຂນີ້, ທ່ານສາມາດນໍາໃຊ້ a importmapເພື່ອແກ້ໄຂຊື່ໂມດູນທີ່ມັກເພື່ອເຮັດສໍາເລັດເສັ້ນທາງ. ຖ້າ ຕົວທ່ອງເວັບເປົ້າຫມາຍ ຂອງທ່ານ ບໍ່ສະຫນັບສະຫນູນ importmap, ທ່ານຈະຕ້ອງໃຊ້ es-module-shims . ນີ້ແມ່ນວິທີທີ່ມັນເຮັດວຽກສໍາລັບ Bootstrap ແລະ 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>

ການເພິ່ງພາອາໄສ

ບາງ plugins ແລະອົງປະກອບ CSS ແມ່ນຂຶ້ນກັບ plugins ອື່ນໆ. ຖ້າທ່ານລວມເອົາ plugins ແຕ່ລະອັນ, ໃຫ້ແນ່ໃຈວ່າຈະກວດເບິ່ງການເພິ່ງພາອາໄສເຫຼົ່ານີ້ຢູ່ໃນເອກະສານ.

ການຫຼຸດລົງຂອງພວກເຮົາ, popovers, ແລະຄໍາແນະນໍາເຄື່ອງມືຍັງຂຶ້ນກັບ Popper .

ຄຸນລັກສະນະຂອງຂໍ້ມູນ

ເກືອບທຸກ plugins Bootstrap ສາມາດຖືກເປີດໃຊ້ງານແລະກໍາຫນົດຄ່າຜ່ານ HTML ຢ່າງດຽວດ້ວຍຄຸນລັກສະນະຂໍ້ມູນ (ວິທີທີ່ພວກເຮົາຕ້ອງການໃຊ້ຫນ້າທີ່ JavaScript). ໃຫ້ແນ່ໃຈວ່າ ໃຊ້ພຽງແຕ່ຫນຶ່ງຊຸດຂອງຄຸນລັກສະນະຂໍ້ມູນໃນອົງປະກອບດຽວ (ຕົວຢ່າງ, ທ່ານບໍ່ສາມາດກະຕຸ້ນຄໍາແນະນໍາເຄື່ອງມືແລະ modal ຈາກປຸ່ມດຽວກັນ.)

ເນື່ອງຈາກທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript, ທ່ານສາມາດເພີ່ມຊື່ທາງເລືອກໃສ່ data-bs-, ດັ່ງໃນ data-bs-animation="{value}". ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ " camelCase " ເປັນ " kebab-case " ເມື່ອຖ່າຍທອດທາງເລືອກຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ໃຊ້ data-bs-custom-class="beautifier"ແທນ data-bs-customClass="beautifier".

ໃນຖານະເປັນຂອງ Bootstrap 5.2.0, ອົງປະກອບທັງຫມົດສະຫນັບສະຫນູນ ຄຸນລັກສະນະຂໍ້ມູນທີ່ສະຫງວນໄວ້ສໍາ ລັບ ການທົດລອງdata-bs-config ທີ່ສາມາດຈັດການຕັ້ງຄ່າອົງປະກອບງ່າຍດາຍເປັນ JSON string. ເມື່ອອົງປະກອບມີ data-bs-config='{"delay":0, "title":123}'ແລະdata-bs-title="456" ຄຸນລັກສະນະ, ຄ່າສຸດທ້າຍ titleຈະເປັນ 456ແລະຄຸນລັກສະນະຂອງຂໍ້ມູນແຍກຕ່າງຫາກຈະ override ຄ່າທີ່ໃຫ້ຢູ່ໃນ data-bs-config. ນອກຈາກນັ້ນ, ຄຸນລັກສະນະຂໍ້ມູນທີ່ມີຢູ່ແມ່ນສາມາດຈັດວາງຄ່າ JSON ເຊັ່ນ data-bs-delay='{"show":0,"hide":150}'.

ຕົວເລືອກ

ພວກເຮົາໃຊ້ພື້ນເມືອງ querySelectorແລະquerySelectorAll ວິທີການສອບຖາມອົງປະກອບ DOM ສໍາລັບເຫດຜົນການປະຕິບັດ, ດັ່ງນັ້ນທ່ານຕ້ອງໃຊ້ ຕົວເລືອກທີ່ຖືກຕ້ອງ . ຖ້າທ່ານໃຊ້ຕົວເລືອກພິເສດເຊັ່ນ collapse:Example, ໃຫ້ແນ່ໃຈວ່າຈະຫນີພວກເຂົາ.

ເຫດການ

Bootstrap ໃຫ້ເຫດການທີ່ກໍາຫນົດເອງສໍາລັບການປະຕິບັດທີ່ເປັນເອກະລັກຂອງ plugins ສ່ວນໃຫຍ່. ໂດຍທົ່ວໄປແລ້ວ, ສິ່ງເຫຼົ່ານີ້ມາໃນຮູບແບບການມີສ່ວນຮ່ວມທີ່ບໍ່ມີຂອບເຂດ ແລະ ທີ່ຜ່ານມາ - ບ່ອນທີ່ infinitive (ex.show ) ຖືກກະຕຸ້ນໃນຕອນເລີ່ມຕົ້ນຂອງເຫດການ, ແລະແບບຟອມການມີສ່ວນຮ່ວມທີ່ຜ່ານມາຂອງມັນ (ຕົວຢ່າງ. shown) ຖືກກະຕຸ້ນໃນເວລາສໍາເລັດການດໍາເນີນການ.

ເຫດການທີ່ບໍ່ມີຂອບເຂດທັງໝົດໃຫ້ການ preventDefault()ເຮັດວຽກ. ນີ້ສະຫນອງຄວາມສາມາດໃນການຢຸດການປະຕິບັດການດໍາເນີນການກ່ອນທີ່ຈະເລີ່ມຕົ້ນ. ການສົ່ງຄືນຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງຈາກຕົວຈັດການເຫດການຈະໂທຫາໂດຍອັດຕະໂນມັດ preventDefault().

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

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

API ໂປຣແກຣມ

ຜູ້ກໍ່ສ້າງທັງໝົດຍອມຮັບວັດຖຸທາງເລືອກທີ່ເປັນທາງເລືອກ ຫຼືບໍ່ມີຫຍັງເລີຍ (ເຊິ່ງລິເລີ່ມ plugin ທີ່ມີພຶດຕິກຳເລີ່ມຕົ້ນຂອງມັນ):

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

ຖ້າທ່ານຕ້ອງການເອົາຕົວຢ່າງ plugin ໂດຍສະເພາະ, ແຕ່ລະ plugin ຈະເປີດເຜີຍ getInstanceວິທີການ. ຕົວຢ່າງ, ເພື່ອດຶງເອົາຕົວຢ່າງໂດຍກົງຈາກອົງປະກອບ:

bootstrap.Popover.getInstance(myPopoverEl)

ວິທີການນີ້ຈະກັບຄືນມາnull ຖ້າ instance ບໍ່ໄດ້ຖືກລິເລີ່ມຜ່ານອົງປະກອບທີ່ຮ້ອງຂໍ.

ອີກທາງເລືອກ, getOrCreateInstanceສາມາດໃຊ້ເພື່ອເອົາຕົວຢ່າງທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ຫຼືສ້າງອັນໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

ໃນກໍລະນີທີ່ບໍ່ໄດ້ເລີ່ມຕົ້ນຕົວຢ່າງ, ມັນອາດຈະຍອມຮັບແລະນໍາໃຊ້ວັດຖຸການຕັ້ງຄ່າທາງເລືອກເປັນ argument ທີສອງ.

ຕົວເລືອກ CSS ໃນຕົວສ້າງ

ນອກເຫນືອຈາກ ວິທີການ getInstanceແລະ getOrCreateInstanceວິທີການ, ຜູ້ສ້າງ plugin ທັງຫມົດສາມາດຍອມຮັບອົງປະກອບ DOM ຫຼື ຕົວເລືອກ CSS ທີ່ຖືກຕ້ອງ ເປັນການໂຕ້ຖຽງທໍາອິດ. ອົງປະກອບ Plugin ໄດ້ຖືກພົບເຫັນດ້ວຍ querySelectorວິທີການນັບຕັ້ງແຕ່ 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')

ຟັງຊັນ ແລະ ການຫັນປ່ຽນແບບບໍ່ກົງກັນ

ວິທີການ API ທີ່ເປັນໂປຣແກຣມທັງໝົດແມ່ນ asynchronous ແລະກັບຄືນຫາຜູ້ໂທເມື່ອການຫັນປ່ຽນເລີ່ມຕົ້ນ, ແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດ . ເພື່ອປະຕິບັດການກະທໍາເມື່ອການຫັນປ່ຽນສໍາເລັດ, ທ່ານສາມາດຟັງເຫດການທີ່ສອດຄ້ອງກັນໄດ້.

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

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

ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

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ວິທີການ

ໃນຂະນະທີ່ມັນອາດຈະເບິ່ງຄືວ່າຖືກຕ້ອງທີ່ຈະໃຊ້ disposeວິທີການທັນທີຫຼັງຈາກ hide(), ມັນຈະນໍາໄປສູ່ຜົນໄດ້ຮັບທີ່ບໍ່ຖືກຕ້ອງ. ນີ້ແມ່ນຕົວຢ່າງຂອງບັນຫາການນໍາໃຊ້:

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

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

ການຕັ້ງຄ່າເລີ່ມຕົ້ນ

ທ່ານ​ສາ​ມາດ​ປ່ຽນ​ການ​ຕັ້ງ​ຄ່າ​ເລີ່ມ​ຕົ້ນ​ສໍາ​ລັບ plugin ໄດ້​ໂດຍ​ການ​ປັບ​ປຸງ Constructor.Default​ຈຸດ​ປະ​ສົງ​ຂອງ plugin ໄດ້​:

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

ວິທີການແລະຄຸນສົມບັດ

ທຸກໆ plugin Bootstrap ເປີດເຜີຍວິທີການຕໍ່ໄປນີ້ແລະຄຸນສົມບັດຄົງທີ່.

ວິທີການ ລາຍລະອຽດ
dispose ທໍາລາຍ modal ຂອງອົງປະກອບ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM)
getInstance ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ modal ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM.
getOrCreateInstance ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ modal ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ຫຼືສ້າງໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ.
ຊັບສິນຄົງທີ່ ລາຍລະອຽດ
NAME ຕອບຊື່ປລັກອິນ. (ຕົວຢ່າງ: bootstrap.Tooltip.NAME)
VERSION ສະບັບຂອງແຕ່ລະ plugins ຂອງ Bootstrap ສາມາດເຂົ້າເຖິງໄດ້ໂດຍຜ່ານ VERSIONຊັບສິນຂອງຕົວສ້າງ plugin (ຕົວຢ່າງ: bootstrap.Tooltip.VERSION)

ເຈວລ້າງມື

ຄໍາແນະນໍາເຄື່ອງມືແລະ Popovers ໃຊ້ຢາຂ້າເຊື້ອໃນຕົວຂອງພວກເຮົາເພື່ອເຮັດຄວາມສະອາດທາງເລືອກທີ່ຍອມຮັບ HTML.

ຄ່າເລີ່ມຕົ້ນ allowListແມ່ນຕໍ່ໄປນີ້:

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

ຖ້າທ່ານຕ້ອງການເພີ່ມຄ່າໃຫມ່ໃຫ້ກັບຄ່າເລີ່ມຕົ້ນນີ້ allowList, ທ່ານສາມາດເຮັດດັ່ງຕໍ່ໄປນີ້:

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)

ຖ້າທ່ານຕ້ອງການຂ້າມຢາຂ້າເຊື້ອຂອງພວກເຮົາເພາະວ່າທ່ານຕ້ອງການໃຊ້ຫ້ອງສະຫມຸດສະເພາະ, ຕົວຢ່າງ DOMPurify , ທ່ານຄວນເຮັດສິ່ງຕໍ່ໄປນີ້:

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

ທາງເລືອກໃນການໃຊ້ jQuery

ທ່ານບໍ່ຕ້ອງການ jQuery ໃນ Bootstrap 5 , ແຕ່ມັນຍັງສາມາດໃຊ້ອົງປະກອບຂອງພວກເຮົາກັບ jQuery ໄດ້. ຖ້າ Bootstrap ກວດພົບ jQueryໃນ windowວັດຖຸ, ມັນຈະເພີ່ມອົງປະກອບຂອງພວກເຮົາທັງຫມົດໃນລະບົບ plugin ຂອງ jQuery. ນີ້ອະນຸຍາດໃຫ້ທ່ານເຮັດດັ່ງຕໍ່ໄປນີ້:

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

ອັນດຽວກັນກັບອົງປະກອບອື່ນໆຂອງພວກເຮົາ.

ບໍ່ມີຂໍ້ຂັດແຍ່ງ

ບາງຄັ້ງມັນຈໍາເປັນຕ້ອງໃຊ້ plugins Bootstrap ກັບກອບ UI ອື່ນໆ. ໃນສະຖານະການເຫຼົ່ານີ້, ການຂັດກັນຂອງ namespace ສາມາດເກີດຂຶ້ນເປັນບາງຄັ້ງຄາວ. ຖ້າສິ່ງນີ້ເກີດຂຶ້ນ, ທ່ານອາດຈະໂທຫາ .noConflictplugin ທີ່ທ່ານຕ້ອງການທີ່ຈະກັບຄືນມູນຄ່າຂອງ.

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

Bootstrap ບໍ່ຮອງຮັບຫ້ອງສະໝຸດ JavaScript ຂອງພາກສ່ວນທີສາມຢ່າງເປັນທາງການເຊັ່ນ Prototype ຫຼື jQuery UI. ເຖິງວ່າຈະມີ .noConflictເຫດການທີ່ມີ namespaced, ອາດຈະມີບັນຫາຄວາມເຂົ້າກັນໄດ້ທີ່ທ່ານຈໍາເປັນຕ້ອງແກ້ໄຂດ້ວຍຕົນເອງ.

ເຫດການ jQuery

Bootstrap ຈະກວດພົບ jQuery ຖ້າ jQueryມີຢູ່ໃນ windowວັດຖຸແລະບໍ່ມີ data-bs-no-jqueryຄຸນລັກສະນະທີ່ຕັ້ງໄວ້ <body>. ຖ້າພົບ jQuery, Bootstrap ຈະປ່ອຍເຫດການຂອບໃຈກັບລະບົບເຫດການຂອງ jQuery. ດັ່ງນັ້ນຖ້າທ່ານຕ້ອງການຟັງເຫດການຂອງ Bootstrap, ທ່ານຈະຕ້ອງໃຊ້ວິທີການ jQuery ( .on, .one) ແທນ addEventListener.

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

JavaScript ປິດໃຊ້ງານ

ປັ໊ກອິນຂອງ Bootstrap ບໍ່ມີທາງເລືອກພິເສດເມື່ອ JavaScript ຖືກປິດໃຊ້ງານ. ຖ້າທ່ານສົນໃຈປະສົບການຂອງຜູ້ໃຊ້ໃນກໍລະນີນີ້, ໃຫ້ໃຊ້ <noscript>ເພື່ອອະທິບາຍສະຖານະການ (ແລະວິທີການເປີດໃຊ້ JavaScript ຄືນໃໝ່) ໃຫ້ກັບຜູ້ໃຊ້ຂອງເຈົ້າ, ແລະ/ຫຼືເພີ່ມການຕອບໂຕ້ແບບກຳນົດເອງຂອງເຈົ້າເອງ.