in English

जाभास्क्रिप्ट

हाम्रो वैकल्पिक JavaScript प्लगइनहरूको साथ बुटस्ट्र्यापलाई जीवन्त बनाउनुहोस्। प्रत्येक प्लगइन, हाम्रो डाटा र प्रोग्रामेटिक API विकल्पहरू, र थप बारे जान्नुहोस्।

यस पृष्ठमा

व्यक्तिगत वा संकलित

प्लगइनहरू व्यक्तिगत रूपमा समावेश गर्न सकिन्छ (बुटस्ट्र्यापको व्यक्तिगत प्रयोग गरेर js/dist/*.js), वा सबै एकैचोटि प्रयोग गरेर bootstrap.jsवा मिनिफाइड bootstrap.min.js(दुवै समावेश नगर्नुहोस्)।

यदि तपाइँ बन्डलर (वेबप्याक, पार्सल, Vite...) प्रयोग गर्नुहुन्छ भने, तपाइँ /js/dist/*.jsUMD तयार भएका फाइलहरू प्रयोग गर्न सक्नुहुन्छ।

JavaScript फ्रेमवर्कको साथ प्रयोग

जबकि बुटस्ट्र्याप CSS कुनै पनि फ्रेमवर्कसँग प्रयोग गर्न सकिन्छ, बुटस्ट्र्याप JavaScript जाभास्क्रिप्ट फ्रेमवर्क जस्तै React, Vue, र Angular सँग पूर्ण रूपमा मिल्दो छैन जसले DOM को पूर्ण ज्ञान लिन्छ। दुबै बुटस्ट्र्याप र फ्रेमवर्कले एउटै DOM तत्वलाई म्यूटेट गर्ने प्रयास गर्न सक्छ, जसको परिणामस्वरूप ड्रपडाउनहरू जस्तै बगहरू छन् जुन "खुला" स्थितिमा अड्किएका छन्।

यस प्रकारका फ्रेमवर्कहरू प्रयोग गर्नेहरूका लागि राम्रो विकल्प भनेको बुटस्ट्र्याप जाभास्क्रिप्टको सट्टा फ्रेमवर्क-विशेष प्याकेज प्रयोग गर्नु हो। यहाँ केहि सबैभन्दा लोकप्रिय विकल्पहरू छन्:

प्रतिक्रिया: बुटस्ट्र्याप प्रतिक्रिया
Vue: BootstrapVue (हाल मात्र Vue 2 र Bootstrap 4 लाई समर्थन गर्दछ)
कोणीय: एनजी-बुटस्ट्र्याप

मोड्युलको रूपमा बुटस्ट्र्याप प्रयोग गर्दै

आफैलाई प्रयास गर्नुहोस्! Twbs/examples repository बाट Bootstrap लाई 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'यद्यपि, यो हाम्रो Popper निर्भरता द्वारा थप जटिल छ, जसले Popper लाई हाम्रो जाभास्क्रिप्टमा आयात गर्दछ:

import * as Popper from "@popperjs/core"

यदि तपाइँ यसलाई जस्तै प्रयास गर्नुहुन्छ भने, तपाइँ कन्सोलमा निम्न जस्तै त्रुटि देख्नुहुनेछ:

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

यसलाई ठीक गर्नको लागि, तपाईंले importmapपथहरू पूरा गर्न मनमानी मोड्युल नामहरू समाधान गर्न प्रयोग गर्न सक्नुहुन्छ। यदि तपाईंको लक्षित ब्राउजरहरूले समर्थन गर्दैन भने importmap, तपाईंले es-module-shims परियोजना प्रयोग गर्न आवश्यक छ। बुटस्ट्र्याप र पोपरको लागि यसले कसरी काम गर्दछ यहाँ छ:

<!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}"। डेटा विशेषताहरू मार्फत विकल्पहरू पास गर्दा विकल्प नामको केस प्रकारलाई " camelCase " बाट " kebab-case " मा परिवर्तन गर्न निश्चित गर्नुहोस्। उदाहरण को लागी, data-bs-custom-class="beautifier"को सट्टा प्रयोग गर्नुहोस् data-bs-customClass="beautifier"।

बुटस्ट्र्याप ५.२.० को रूपमा, सबै कम्पोनेन्टहरूले प्रयोगात्मक आरक्षित डेटा विशेषतालाई समर्थन गर्दछ 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र विधिहरूका अतिरिक्त , सबै प्लगइन निर्माणकर्ताहरूले पहिलो तर्कको रूपमा getOrCreateInstanceDOM तत्व वा वैध 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`)

सेनिटाइजर

Tooltips र 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 प्रयोग गर्दै

तपाईंलाई Bootstrap 5 मा jQuery आवश्यक पर्दैन , तर jQuery सँग हाम्रा कम्पोनेन्टहरू प्रयोग गर्न अझै सम्भव छ। यदि Bootstrap ले वस्तुमा पत्ता लगायो भने 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

जाभास्क्रिप्ट असक्षम हुँदा बुटस्ट्र्यापको प्लगइनहरूमा कुनै विशेष फलब्याक हुँदैन। यदि तपाइँ यस मामलामा प्रयोगकर्ता अनुभवको बारेमा ख्याल गर्नुहुन्छ भने, <noscript>तपाइँका प्रयोगकर्ताहरूलाई स्थिति (र कसरी JavaScript पुन: सक्षम गर्ने) व्याख्या गर्न प्रयोग गर्नुहोस्, र/वा तपाइँको आफ्नै अनुकूल फलब्याकहरू थप्नुहोस्।