JavaScript

ਸਾਡੇ ਵਿਕਲਪਿਕ JavaScript ਪਲੱਗਇਨਾਂ ਨਾਲ ਬੂਟਸਟਰੈਪ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆਓ। ਹਰੇਕ ਪਲੱਗਇਨ, ਸਾਡੇ ਡੇਟਾ ਅਤੇ ਪ੍ਰੋਗਰਾਮੇਟਿਕ API ਵਿਕਲਪਾਂ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬਾਰੇ ਜਾਣੋ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਵਿਅਕਤੀਗਤ ਜਾਂ ਸੰਕਲਿਤ

ਪਲੱਗਇਨਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਬੂਟਸਟਰੈਪ ਦੇ ਵਿਅਕਤੀਗਤ ਦੀ ਵਰਤੋਂ ਕਰਕੇ js/dist/*.js), ਜਾਂ ਸਭ ਨੂੰ ਇੱਕੋ ਵਾਰ ਵਰਤ ਕੇ bootstrap.jsਜਾਂ ਮਿਨਿਫਾਈਡ bootstrap.min.js(ਦੋਵੇਂ ਸ਼ਾਮਲ ਨਾ ਕਰੋ)।

ਜੇ ਤੁਸੀਂ ਇੱਕ ਬੰਡਲ (ਵੈਬਪੈਕ, ਪਾਰਸਲ, ਵਾਈਟ…) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਉਹਨਾਂ /js/dist/*.jsਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜੋ UMD ਤਿਆਰ ਹਨ।

JavaScript ਫਰੇਮਵਰਕ ਨਾਲ ਵਰਤੋਂ

ਜਦੋਂ ਕਿ ਬੂਟਸਟਰੈਪ CSS ਨੂੰ ਕਿਸੇ ਵੀ ਫਰੇਮਵਰਕ ਨਾਲ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਬੂਟਸਟਰੈਪ JavaScript JavaScript ਫਰੇਮਵਰਕ ਜਿਵੇਂ React, Vue, ਅਤੇ Angular ਨਾਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਨੁਕੂਲ ਨਹੀਂ ਹੈ ਜੋ DOM ਦੀ ਪੂਰੀ ਜਾਣਕਾਰੀ ਨੂੰ ਮੰਨਦੇ ਹਨ। ਬੂਟਸਟਰੈਪ ਅਤੇ ਫਰੇਮਵਰਕ ਦੋਵੇਂ ਇੱਕੋ DOM ਤੱਤ ਨੂੰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਸਕਦੇ ਹਨ, ਨਤੀਜੇ ਵਜੋਂ ਡ੍ਰੌਪਡਾਊਨ ਵਰਗੇ ਬੱਗ ਜੋ "ਓਪਨ" ਸਥਿਤੀ ਵਿੱਚ ਫਸੇ ਹੋਏ ਹਨ।

ਇਸ ਕਿਸਮ ਦੇ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲਿਆਂ ਲਈ ਇੱਕ ਬਿਹਤਰ ਵਿਕਲਪ ਬੂਟਸਟਰੈਪ JavaScript ਦੀ ਬਜਾਏ ਇੱਕ ਫਰੇਮਵਰਕ-ਵਿਸ਼ੇਸ਼ ਪੈਕੇਜ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ। ਇੱਥੇ ਕੁਝ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਵਿਕਲਪ ਹਨ:

React: React Bootstrap
Vue: BootstrapVue (ਵਰਤਮਾਨ ਵਿੱਚ ਸਿਰਫ Vue 2 ਅਤੇ Bootstrap 4 ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ)
ਕੋਣੀ: ng-ਬੂਟਸਟਰੈਪ

ਬੂਟਸਟਰੈਪ ਨੂੰ ਇੱਕ ਮੋਡੀਊਲ ਵਜੋਂ ਵਰਤਣਾ

ਇਸ ਨੂੰ ਆਪਣੇ ਆਪ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ! twbs/examples ਰਿਪੋਜ਼ਟਰੀ ਤੋਂ ਬੂਟਸਟਰੈਪ ਨੂੰ 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 ਦੁਆਰਾ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਕਾਰਜਕੁਸ਼ਲਤਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਾਡਾ ਤਰਜੀਹੀ ਤਰੀਕਾ) ਨਾਲ ਸਮਰੱਥ ਅਤੇ ਸੰਰਚਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇੱਕ ਸਿੰਗਲ ਐਲੀਮੈਂਟ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਸਿਰਫ਼ ਇੱਕ ਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ (ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਇੱਕੋ ਬਟਨ ਤੋਂ ਟੂਲਟਿਪ ਅਤੇ ਮਾਡਲ ਨੂੰ ਟਰਿੱਗਰ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹੋ।)

ਜਿਵੇਂ ਕਿ ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਵਿਕਲਪ ਨਾਮ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ 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ਜੇਕਰ ਬੇਨਤੀ ਕੀਤੇ ਤੱਤ ਉੱਤੇ ਇੱਕ ਉਦਾਹਰਨ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਵਿਕਲਪਕ getOrCreateInstanceਤੌਰ 'ਤੇ, ਇੱਕ DOM ਐਲੀਮੈਂਟ ਨਾਲ ਸੰਬੰਧਿਤ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜੇਕਰ ਇਹ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਸੀ।

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 ਵਰਗੀਆਂ ਤੀਜੀ-ਧਿਰ ਦੀਆਂ JavaScript ਲਾਇਬ੍ਰੇਰੀਆਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਵੈਂਟਾਂ ਅਤੇ ਨੇਮਸਪੇਸ ਦੇ ਬਾਵਜੂਦ .noConflict, ਅਨੁਕੂਲਤਾ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਪ ਠੀਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

jQuery ਸਮਾਗਮ

ਬੂਟਸਟਰੈਪ jQuery ਦਾ ਪਤਾ ਲਗਾਵੇਗਾ ਜੇਕਰ ਆਬਜੈਕਟ jQueryਵਿੱਚ ਮੌਜੂਦ windowਹੈ ਅਤੇ ਕੋਈ data-bs-no-jqueryਵਿਸ਼ੇਸ਼ਤਾ ਸੈੱਟ ਨਹੀਂ ਹੈ <body>। ਜੇ jQuery ਲੱਭਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਬੂਟਸਟਰੈਪ jQuery ਦੇ ਇਵੈਂਟ ਸਿਸਟਮ ਲਈ ਇਵੈਂਟਾਂ ਨੂੰ ਛੱਡੇਗਾ। ਇਸ ਲਈ ਜੇਕਰ ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਘਟਨਾਵਾਂ ਨੂੰ ਸੁਣਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ jQuery ਵਿਧੀਆਂ ( .on, .one) ਦੀ ਬਜਾਏ ਵਰਤਣੀਆਂ ਪੈਣਗੀਆਂ addEventListener।

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

ਅਯੋਗ JavaScript

ਜਦੋਂ JavaScript ਅਯੋਗ ਹੁੰਦੀ ਹੈ ਤਾਂ ਬੂਟਸਟਰੈਪ ਦੇ ਪਲੱਗਇਨਾਂ ਦਾ ਕੋਈ ਖਾਸ ਫਾਲਬੈਕ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਦੀ ਪਰਵਾਹ ਕਰਦੇ ਹੋ, <noscript>ਤਾਂ ਆਪਣੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਥਿਤੀ (ਅਤੇ JavaScript ਨੂੰ ਮੁੜ-ਸਮਰੱਥ ਕਿਵੇਂ ਕਰਨਾ ਹੈ) ਦੀ ਵਿਆਖਿਆ ਕਰਨ ਲਈ ਵਰਤੋ, ਅਤੇ/ਜਾਂ ਆਪਣੇ ਖੁਦ ਦੇ ਕਸਟਮ ਫਾਲਬੈਕ ਜੋੜੋ।