ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್

ನಮ್ಮ ಐಚ್ಛಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಜೀವಂತಗೊಳಿಸಿ. ಪ್ರತಿ ಪ್ಲಗಿನ್, ನಮ್ಮ ಡೇಟಾ ಮತ್ತು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ API ಆಯ್ಕೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಬಗ್ಗೆ ತಿಳಿಯಿರಿ.

ಈ ಪುಟದಲ್ಲಿ

ವೈಯಕ್ತಿಕ ಅಥವಾ ಸಂಕಲನ

ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸೇರಿಸಬಹುದು (ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ವೈಯಕ್ತಿಕ ಬಳಸಿ js/dist/*.js), ಅಥವಾ ಎಲ್ಲವನ್ನೂ ಏಕಕಾಲದಲ್ಲಿ ಬಳಸುವುದು bootstrap.jsಅಥವಾ ಮಿನಿಫೈಡ್ bootstrap.min.js(ಎರಡನ್ನೂ ಸೇರಿಸಬೇಡಿ).

ನೀವು ಬಂಡ್ಲರ್ ಅನ್ನು ಬಳಸಿದರೆ (ವೆಬ್‌ಪ್ಯಾಕ್, ಪಾರ್ಸೆಲ್, ವೈಟ್...), ನೀವು /js/dist/*.jsUMD ಸಿದ್ಧವಾಗಿರುವ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

JavaScript ಚೌಕಟ್ಟುಗಳೊಂದಿಗೆ ಬಳಕೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ CSS ಅನ್ನು ಯಾವುದೇ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನೊಂದಿಗೆ ಬಳಸಬಹುದಾದರೂ , ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರಿಯಾಕ್ಟ್, ವ್ಯೂ ಮತ್ತು ಆಂಗ್ಯುಲರ್‌ನಂತಹ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ, ಇದು DOM ನ ಸಂಪೂರ್ಣ ಜ್ಞಾನವನ್ನು ಊಹಿಸುತ್ತದೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮತ್ತು ಫ್ರೇಮ್‌ವರ್ಕ್ ಎರಡೂ ಒಂದೇ DOM ಅಂಶವನ್ನು ರೂಪಾಂತರಿಸಲು ಪ್ರಯತ್ನಿಸಬಹುದು, ಇದರಿಂದಾಗಿ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳಂತಹ ದೋಷಗಳು "ತೆರೆದ" ಸ್ಥಾನದಲ್ಲಿ ಅಂಟಿಕೊಂಡಿರುತ್ತವೆ.

ಈ ರೀತಿಯ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಬಳಸುವವರಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬದಲಿಗೆ ಫ್ರೇಮ್‌ವರ್ಕ್-ನಿರ್ದಿಷ್ಟ ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಬಳಸುವುದು ಉತ್ತಮ ಪರ್ಯಾಯವಾಗಿದೆ . ಕೆಲವು ಜನಪ್ರಿಯ ಆಯ್ಕೆಗಳು ಇಲ್ಲಿವೆ:

ಪ್ರತಿಕ್ರಿಯೆ: ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ರತಿಕ್ರಿಯಿಸಿ
Vue: BootstrapVue (ಪ್ರಸ್ತುತ Vue 2 ಮತ್ತು Bootstrap 4 ಅನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತದೆ)
ಕೋನೀಯ: ng-ಬೂಟ್‌ಸ್ಟ್ರಾಪ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬಳಸುವುದು

ನೀವೇ ಪ್ರಯತ್ನಿಸಿ! twbs/ಉದಾಹರಣೆಗಳ ರೆಪೊಸಿಟರಿಯಿಂದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ES ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬಳಸುವುದಕ್ಕಾಗಿ ಮೂಲ ಕೋಡ್ ಮತ್ತು ವರ್ಕಿಂಗ್ ಡೆಮೊವನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ . ನೀವು StackBlitz ನಲ್ಲಿ ಉದಾಹರಣೆಯನ್ನು ಸಹ ತೆರೆಯಬಹುದು .

ನಿಮ್ಮ ಉದ್ದೇಶಿತ ಬ್ರೌಸರ್‌ಗಳು ಅದನ್ನು ಬೆಂಬಲಿಸಿದರೆ , ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬಳಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ESM( bootstrap.esm.jsಮತ್ತು ) ನಂತೆ ನಿರ್ಮಿಸಲಾದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಆವೃತ್ತಿಯನ್ನು ನಾವು ಒದಗಿಸುತ್ತೇವೆ .bootstrap.esm.min.js

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

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

JS ಬಂಡ್ಲರ್‌ಗಳಿಗೆ ಹೋಲಿಸಿದರೆ, ಬ್ರೌಸರ್‌ನಲ್ಲಿ ESM ಅನ್ನು ಬಳಸುವುದರಿಂದ ಮಾಡ್ಯೂಲ್ ಹೆಸರಿನ ಬದಲಿಗೆ ನೀವು ಪೂರ್ಣ ಮಾರ್ಗ ಮತ್ತು ಫೈಲ್ ಹೆಸರನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ಬ್ರೌಸರ್‌ನಲ್ಲಿ JS ಮಾಡ್ಯೂಲ್‌ಗಳ ಕುರಿತು ಇನ್ನಷ್ಟು ಓದಿ. ಅದಕ್ಕಾಗಿಯೇ ನಾವು ಮೇಲಿನ 'bootstrap.esm.min.js'ಬದಲು ಬಳಸುತ್ತೇವೆ. 'bootstrap'ಆದಾಗ್ಯೂ, ನಮ್ಮ ಪಾಪ್ಪರ್ ಅವಲಂಬನೆಯಿಂದ ಇದು ಮತ್ತಷ್ಟು ಜಟಿಲವಾಗಿದೆ, ಇದು ಪಾಪ್ಪರ್ ಅನ್ನು ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತದೆ:

import * as Popper from "@popperjs/core"

ನೀವು ಇದನ್ನು ಹಾಗೆಯೇ ಪ್ರಯತ್ನಿಸಿದರೆ, ಕೆಳಗಿನಂತೆ ಕನ್ಸೋಲ್‌ನಲ್ಲಿ ದೋಷವನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ:

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

ಇದನ್ನು ಸರಿಪಡಿಸಲು, ಮಾರ್ಗಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಅನಿಯಂತ್ರಿತ ಮಾಡ್ಯೂಲ್ ಹೆಸರುಗಳನ್ನು ಪರಿಹರಿಸಲು ನೀವು ಬಳಸಬಹುದು importmap. ನಿಮ್ಮ ಉದ್ದೇಶಿತ ಬ್ರೌಸರ್‌ಗಳು ಬೆಂಬಲಿಸದಿದ್ದರೆ , ನೀವು es-module-shims ಯೋಜನೆಯನ್ನು importmapಬಳಸಬೇಕಾಗುತ್ತದೆ . ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮತ್ತು ಪಾಪ್ಪರ್‌ಗಾಗಿ ಇದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

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

ಅವಲಂಬನೆಗಳು

ಕೆಲವು ಪ್ಲಗಿನ್‌ಗಳು ಮತ್ತು CSS ಘಟಕಗಳು ಇತರ ಪ್ಲಗಿನ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿವೆ. ನೀವು ಪ್ರತ್ಯೇಕವಾಗಿ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಸೇರಿಸಿದರೆ, ಡಾಕ್ಸ್‌ನಲ್ಲಿ ಈ ಅವಲಂಬನೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ನಮ್ಮ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು, ಪಾಪೋವರ್‌ಗಳು ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಸಹ ಪಾಪ್ಪರ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ .

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು

ಬಹುತೇಕ ಎಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ HTML ಮೂಲಕ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು ಮತ್ತು ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯವನ್ನು ಬಳಸುವ ನಮ್ಮ ಆದ್ಯತೆಯ ವಿಧಾನ). ಒಂದೇ ಅಂಶದಲ್ಲಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಒಂದು ಸೆಟ್ ಅನ್ನು ಮಾತ್ರ ಬಳಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಉದಾಹರಣೆಗೆ, ನೀವು ಒಂದೇ ಬಟನ್‌ನಿಂದ ಟೂಲ್‌ಟಿಪ್ ಮತ್ತು ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.)

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದಾದ್ದರಿಂದ, ನೀವು ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಗೆ data-bs-ಸೇರಿಸಬಹುದು data-bs-animation="{value}". ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸುವಾಗ "ಒಂಟೆ ಕೇಸ್" ನಿಂದ "ಕಬಾಬ್-ಕೇಸ್" ಗೆ ಆಯ್ಕೆಯ ಹೆಸರಿನ ಕೇಸ್ ಪ್ರಕಾರವನ್ನು ಬದಲಾಯಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ . ಉದಾಹರಣೆಗೆ, data-bs-custom-class="beautifier"ಬದಲಿಗೆ ಬಳಸಿ data-bs-customClass="beautifier".

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 5.2.0 ರಂತೆ, ಎಲ್ಲಾ ಘಟಕಗಳು ಪ್ರಾಯೋಗಿಕವಾಗಿ ಕಾಯ್ದಿರಿಸಿದ ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ data-bs-configಅದು JSON ಸ್ಟ್ರಿಂಗ್‌ನಂತೆ ಸರಳ ಘಟಕ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಇರಿಸಬಹುದು. ಒಂದು ಅಂಶವು data-bs-config='{"delay":0, "title":123}'ಮತ್ತು data-bs-title="456"ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರುವಾಗ, ಅಂತಿಮ titleಮೌಲ್ಯವಾಗಿರುತ್ತದೆ 456ಮತ್ತು ಪ್ರತ್ಯೇಕ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ನಲ್ಲಿ ನೀಡಲಾದ ಮೌಲ್ಯಗಳನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ data-bs-config. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ನಂತಹ JSON ಮೌಲ್ಯಗಳನ್ನು ಇರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ data-bs-delay='{"show":0,"hide":150}'.

ಆಯ್ಕೆಗಾರರು

ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾರಣಗಳಿಗಾಗಿ DOM ಅಂಶಗಳನ್ನು ಪ್ರಶ್ನಿಸಲು ನಾವು ಸ್ಥಳೀಯ querySelectorಮತ್ತು ವಿಧಾನಗಳನ್ನು ಬಳಸುತ್ತೇವೆ, ಆದ್ದರಿಂದ ನೀವು ಮಾನ್ಯವಾದ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಬೇಕು . ನೀವು ವಿಶೇಷ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಿದರೆ , ಅವುಗಳನ್ನು ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ.querySelectorAllcollapse:Example

ಕಾರ್ಯಕ್ರಮಗಳು

ಹೆಚ್ಚಿನ ಪ್ಲಗಿನ್‌ಗಳ ವಿಶಿಷ್ಟ ಕ್ರಿಯೆಗಳಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕಸ್ಟಮ್ ಈವೆಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯವಾಗಿ, ಇವುಗಳು ಇನ್ಫಿನಿಟಿವ್ ಮತ್ತು ಪಾಸ್ಟ್ ಪಾರ್ಟಿಸಿಪಲ್ ರೂಪದಲ್ಲಿ ಬರುತ್ತವೆ - ಅಲ್ಲಿ ಇನ್ಫಿನಿಟಿವ್ (ಉದಾ. 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

ಎಲ್ಲಾ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ಗಳು ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳ ವಸ್ತು ಅಥವಾ ಯಾವುದನ್ನೂ ಸ್ವೀಕರಿಸುವುದಿಲ್ಲ (ಇದು ಅದರ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯೊಂದಿಗೆ ಪ್ಲಗಿನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ):

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

ನೀವು ನಿರ್ದಿಷ್ಟ ಪ್ಲಗಿನ್ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ಬಯಸಿದರೆ, ಪ್ರತಿ ಪ್ಲಗಿನ್ ಒಂದು getInstanceವಿಧಾನವನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಒಂದು ಅಂಶದಿಂದ ನೇರವಾಗಿ ನಿದರ್ಶನವನ್ನು ಹಿಂಪಡೆಯಲು:

bootstrap.Popover.getInstance(myPopoverEl)

nullವಿನಂತಿಸಿದ ಅಂಶದ ಮೇಲೆ ನಿದರ್ಶನವನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದರೆ ಈ ವಿಧಾನವು ಹಿಂತಿರುಗುತ್ತದೆ .

ಪರ್ಯಾಯವಾಗಿ, getOrCreateInstanceDOM ಅಂಶದೊಂದಿಗೆ ಸಂಯೋಜಿತವಾದ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಲು ಬಳಸಬಹುದು.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

ಒಂದು ನಿದರ್ಶನವನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ, ಅದು ಐಚ್ಛಿಕ ಕಾನ್ಫಿಗರೇಶನ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸಬಹುದು ಮತ್ತು ಬಳಸಬಹುದು.

ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ಗಳಲ್ಲಿ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳು

getInstanceಮತ್ತು ವಿಧಾನಗಳ ಜೊತೆಗೆ getOrCreateInstance, ಎಲ್ಲಾ ಪ್ಲಗಿನ್ ಕನ್ಸ್ಟ್ರಕ್ಟರ್‌ಗಳು DOM ಅಂಶ ಅಥವಾ ಮಾನ್ಯ CSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಮೊದಲ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸಬಹುದು. querySelectorನಮ್ಮ ಪ್ಲಗಿನ್‌ಗಳು ಒಂದೇ ಅಂಶವನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುವುದರಿಂದ ಪ್ಲಗಿನ್ ಅಂಶಗಳು ವಿಧಾನದೊಂದಿಗೆ ಕಂಡುಬರುತ್ತವೆ .

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 ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸಿದ ನಂತರ ಕರೆ ಮಾಡುವವರಿಗೆ ಹಿಂತಿರುಗಿ, ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಪರಿವರ್ತನೆಯು ಪೂರ್ಣಗೊಂಡ ನಂತರ ಕ್ರಿಯೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು, ನೀವು ಅನುಗುಣವಾದ ಈವೆಂಟ್ ಅನ್ನು ಆಲಿಸಬಹುದು.

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

ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳು

ಪ್ಲಗಿನ್‌ನ Constructor.Defaultವಸ್ತುವನ್ನು ಮಾರ್ಪಡಿಸುವ ಮೂಲಕ ನೀವು ಪ್ಲಗಿನ್‌ಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು:

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

ವಿಧಾನಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳು

ಪ್ರತಿಯೊಂದು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್ ಈ ಕೆಳಗಿನ ವಿಧಾನಗಳು ಮತ್ತು ಸ್ಥಿರ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ.

ವಿಧಾನ	ವಿವರಣೆ
`dispose`	ಅಂಶದ ಮಾದರಿಯನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. (DOM ಅಂಶದಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ)
`getInstance`	DOM ಅಂಶದೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ಮಾದರಿ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ.
`getOrCreateInstance`	DOM ಅಂಶದೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ಮಾದರಿ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ, ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಿ.

ಸ್ಥಿರ ಆಸ್ತಿ	ವಿವರಣೆ
`NAME`	ಪ್ಲಗಿನ್ ಹೆಸರನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. (ಉದಾಹರಣೆ `bootstrap.Tooltip.NAME`:)
`VERSION`	`VERSION`ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ರತಿಯೊಂದು ಪ್ಲಗಿನ್‌ಗಳ ಆವೃತ್ತಿಯನ್ನು ಪ್ಲಗಿನ್‌ನ ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ನ ಆಸ್ತಿಯ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದು (ಉದಾಹರಣೆ: `bootstrap.Tooltip.VERSION`)

ಸ್ಯಾನಿಟೈಸರ್

ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪೋವರ್‌ಗಳು 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 ಬಳಸಿ

ನಿಮಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 5 ರಲ್ಲಿ jQuery ಅಗತ್ಯವಿಲ್ಲ , ಆದರೆ ನಮ್ಮ ಘಟಕಗಳನ್ನು jQuery ಯೊಂದಿಗೆ ಬಳಸಲು ಇನ್ನೂ ಸಾಧ್ಯವಿದೆ. ಆಬ್ಜೆಕ್ಟ್‌ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪತ್ತೆಯಾದರೆ jQuery, windowಅದು ನಮ್ಮ ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು 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

ನಮ್ಮ ಇತರ ಘಟಕಗಳಿಗೂ ಅದೇ ಹೋಗುತ್ತದೆ.

ಸಂಘರ್ಷವಿಲ್ಲ

ಕೆಲವೊಮ್ಮೆ ಇತರ UI ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಬಳಸುವುದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೇಮ್‌ಸ್ಪೇಸ್ ಘರ್ಷಣೆಗಳು ಸಾಂದರ್ಭಿಕವಾಗಿ ಸಂಭವಿಸಬಹುದು. ಇದು ಸಂಭವಿಸಿದಲ್ಲಿ, ನೀವು .noConflictಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸಲು ಬಯಸುವ ಪ್ಲಗಿನ್‌ಗೆ ನೀವು ಕರೆ ಮಾಡಬಹುದು.

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮೂಲಮಾದರಿ ಅಥವಾ jQuery UI ನಂತಹ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಗಳನ್ನು ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಈವೆಂಟ್‌ಗಳ ಹೊರತಾಗಿಯೂ .noConflictಮತ್ತು ನೇಮ್‌ಸ್ಪೇಸ್ಡ್ ಈವೆಂಟ್‌ಗಳು, ನಿಮ್ಮದೇ ಆದ ಮೇಲೆ ನೀವು ಸರಿಪಡಿಸಬೇಕಾದ ಹೊಂದಾಣಿಕೆಯ ಸಮಸ್ಯೆಗಳಿರಬಹುದು.

jQuery ಘಟನೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ವಸ್ತುವಿನಲ್ಲಿ ಇದ್ದಲ್ಲಿ jQuery ಅನ್ನು ಪತ್ತೆ ಮಾಡುತ್ತದೆ jQueryಮತ್ತು windowಯಾವುದೇ data-bs-no-jqueryಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿಸದಿದ್ದರೆ <body>. jQuery ಕಂಡುಬಂದರೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ jQuery ನ ಈವೆಂಟ್ ಸಿಸ್ಟಮ್‌ಗೆ ಧನ್ಯವಾದಗಳು ಈವೆಂಟ್‌ಗಳನ್ನು ಹೊರಸೂಸುತ್ತದೆ. ಆದ್ದರಿಂದ ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಈವೆಂಟ್‌ಗಳನ್ನು ಕೇಳಲು ಬಯಸಿದರೆ, ನೀವು ಬದಲಿಗೆ jQuery ವಿಧಾನಗಳನ್ನು ( .on, ) ಬಳಸಬೇಕಾಗುತ್ತದೆ ..oneaddEventListener

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

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ JavaScript

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದಾಗ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಪ್ಲಗಿನ್‌ಗಳು ಯಾವುದೇ ವಿಶೇಷ ಫಾಲ್‌ಬ್ಯಾಕ್ ಹೊಂದಿರುವುದಿಲ್ಲ. ಈ ಸಂದರ್ಭದಲ್ಲಿ ಬಳಕೆದಾರರ ಅನುಭವದ ಬಗ್ಗೆ ನೀವು ಕಾಳಜಿವಹಿಸಿದರೆ, <noscript>ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಪರಿಸ್ಥಿತಿಯನ್ನು (ಮತ್ತು JavaScript ಅನ್ನು ಮರು-ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಹೇಗೆ) ವಿವರಿಸಲು ಬಳಸಿ, ಮತ್ತು/ಅಥವಾ ನಿಮ್ಮ ಸ್ವಂತ ಕಸ್ಟಮ್ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಸೇರಿಸಿ.