in English

JavaScript

අපගේ විකල්ප JavaScript ප්ලගීන සමඟ Bootstrap ජීවමාන කරන්න. එක් එක් ප්ලගිනය, අපගේ දත්ත සහ ක්‍රමලේඛන API විකල්ප, සහ තවත් දේ ගැන ඉගෙන ගන්න.

මෙම පිටුවේ

තනි හෝ සම්පාදනය කරන ලදී

ප්ලගීන තනි තනිව ඇතුළත් කළ හැක (Bootstrap හි තනි භාවිතාව js/dist/*.js), හෝ එකවර භාවිතා කිරීම bootstrap.jsහෝ minified bootstrap.min.js(දෙකම ඇතුළත් නොකරන්න).

ඔබ බණ්ඩලරයක් භාවිතා කරන්නේ නම් (වෙබ්පැක්, පාර්සලය, වීට්...), ඔබට /js/dist/*.jsUMD සූදානම් ගොනු භාවිතා කළ හැක.

JavaScript රාමු සමඟ භාවිතය

Bootstrap CSS ඕනෑම රාමුවක් සමඟ භාවිතා කළ හැකි අතර, Bootstrap JavaScript DOM පිළිබඳ සම්පූර්ණ දැනුමක් උපකල්පනය කරන React, Vue සහ Angular වැනි JavaScript රාමු සමඟ සම්පුර්ණයෙන්ම නොගැලපේ . Bootstrap සහ රාමුව යන දෙකම එකම DOM මූලද්‍රව්‍යය විකෘති කිරීමට උත්සාහ කළ හැක, එහි ප්‍රතිඵලයක් ලෙස "විවෘත" ස්ථානයේ සිරවී ඇති පතනයන් වැනි දෝෂ ඇතිවේ.

මෙම වර්ගයේ රාමු භාවිතා කරන අයට වඩා හොඳ විකල්පයක් වන්නේ Bootstrap JavaScript වෙනුවට රාමු-විශේෂිත පැකේජයක් භාවිතා කිරීමයි. මෙන්න වඩාත් ජනප්රිය විකල්ප කිහිපයක්:

ප්‍රතික්‍රියා කරන්න: ප්‍රතික්‍රියා බූට්ස්ට්‍රැප්
Vue: BootstrapVue (දැනට සහය දක්වන්නේ Vue 2 සහ Bootstrap 4 සඳහා පමණි)
කෝණික: ng-bootstrap

Module එකක් ලෙස Bootstrap භාවිතා කිරීම

එය ඔබම උත්සාහ කරන්න! ES මොඩියුලයක් ලෙස Bootstrap භාවිතා කිරීම සඳහා මූලාශ්‍ර කේතය සහ ක්‍රියාකාරී ආදර්ශනය twbs/උදාහරණ ගබඩාවෙන් බාගන්න . ඔබට StackBlitz හි උදාහරණය විවෘත කළ හැක .

ESMඅපි ( bootstrap.esm.jsසහ ) ලෙස ගොඩනගා ඇති Bootstrap අනුවාදයක් සපයන්නෙමු 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 bundlers හා සසඳන විට, බ්‍රවුසරයේ 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මෙය නිවැරදි කිරීම සඳහා, මාර්ග සම්පූර්ණ කිරීම සඳහා අත්තනෝමතික මොඩියුල නාම විසඳීමට ඔබට භාවිතා කළ හැක . ඔබගේ ඉලක්කගත බ්‍රව්සර් සහාය නොදක්වන්නේ නම් 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>

යැපීම්

සමහර ප්ලගින සහ CSS සංරචක වෙනත් ප්ලගීන මත රඳා පවතී. ඔබ තනි තනිව ප්ලගීන ඇතුළත් කරන්නේ නම්, ලේඛනවල මෙම පරායත්තතා පරීක්ෂා කිරීමට වග බලා ගන්න.

අපගේ පතන, popovers, සහ මෙවලම් ඉඟි ද Popper මත රඳා පවතී .

දත්ත ගුණාංග

සියලුම Bootstrap ප්ලගීන පාහේ සක්‍රිය කර වින්‍යාසගත කළ හැක්කේ දත්ත උපලක්ෂණ සමඟින් HTML හරහා පමණි (JavaScript ක්‍රියාකාරීත්වය භාවිතා කිරීමට අප කැමති ක්‍රමය). තනි මූලද්‍රව්‍යයක් මත එක් දත්ත උපලක්ෂණ කට්ටලයක් පමණක් භාවිතා කිරීමට වග බලා ගන්න (උදා, ඔබට එම බොත්තමෙන් මෙවලම් ඉඟියක් සහ මාදිලියක් ක්‍රියාරම්භ කළ නොහැක.)

දත්ත උපලක්ෂණ හෝ ජාවාස්ක්‍රිප්ට් හරහා විකල්ප ලබා දිය හැකි බැවින්, ඔබට විකල්ප නාමයක් data-bs-, ලෙසට එකතු කළ හැක data-bs-animation="{value}". දත්ත ගුණාංග හරහා විකල්ප සම්මත කිරීමේදී විකල්ප නාමයේ කේස් වර්ගය “ කැමල්කේස් ” සිට “ කෙබාබ්-කේස් ” ලෙස වෙනස් කිරීමට වග බලා ගන්න. උදාහරණයක් ලෙස, data-bs-custom-class="beautifier"වෙනුවට භාවිතා කරන්න data-bs-customClass="beautifier".

Bootstrap 5.2.0 වන විට, සියලුම සංරචක JSON තන්තුවක් ලෙස සරල සංරචක වින්‍යාසගත කළ හැකි පර්යේෂණාත්මක වෙන් කළ දත්ත ගුණාංගයකට සහාය දක්වයි. data-bs-configමූලද්‍රව්‍යයක් සතුව 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

සිදුවීම්

Bootstrap බොහෝ ප්ලගීනවල අද්විතීය ක්‍රියා සඳහා අභිරුචි සිදුවීම් සපයයි. සාමාන්‍යයෙන්, මේවා අසංඛ්‍යාත සහ අතීත කෘදන්ත ස්වරූපයකින් පැමිණේ - 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සහ ක්‍රම වලට අමතරව , සියලුම ප්ලගින නිර්මාණකරුවන්ට DOM මූලද්‍රව්‍යයක් හෝ වලංගු CSS තේරීමක් පළමු තර්කය ලෙස getOrCreateInstanceපිළිගත හැක . අපගේ ප්ලගීන තනි මූලද්‍රව්‍යයකට පමණක් සහය දක්වන බැවින් ප්ලගින මූලද්‍රව්‍ය ක්‍රමය සමඟින් සොයා ගැනේ .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

ක්රම සහ ගුණාංග

සෑම Bootstrap ප්ලගිනයක්ම පහත ක්‍රම සහ ස්ථිතික ගුණාංග නිරාවරණය කරයි.

ක්රමය	විස්තර
`dispose`	මූලද්රව්යයක මාදිලිය විනාශ කරයි. (DOM මූලද්‍රව්‍යයේ ගබඩා කර ඇති දත්ත ඉවත් කරයි)
`getInstance`	DOM මූලද්‍රව්‍යයක් සමඟ සම්බන්ධිත මාදිලියේ අවස්ථාව ලබා ගැනීමට ඔබට ඉඩ සලසන ස්ථිතික ක්‍රමය.
`getOrCreateInstance`	DOM මූලද්‍රව්‍යයක් සමඟ සම්බන්ධිත මාදිලි නිදර්ශනය ලබා ගැනීමට හෝ එය ආරම්භ නොකළහොත් නව එකක් සෑදීමට ඔබට ඉඩ සලසන ස්ථිතික ක්‍රමය.

ස්ථිතික දේපල	විස්තර
`NAME`	ප්ලගින නම ආපසු ලබා දෙයි. (උදාහරණ `bootstrap.Tooltip.NAME`:)
`VERSION`	`VERSION`බූට්ස්ට්‍රැප් හි එක් එක් ප්ලගීන වල අනුවාදය ප්ලගිනයේ කන්ස්ට්‍රක්ටරයේ දේපල හරහා ප්‍රවේශ විය හැක (උදාහරණ: `bootstrap.Tooltip.VERSION`)

සනීපාරක්ෂක

HTML පිළිගන්නා විකල්ප සනීපාරක්ෂාව සඳහා මෙවලම් ඉඟි සහ Popovers අපගේ බිල්ට් සනීපාරක්ෂක භාවිතා කරයි.

පෙරනිමි 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 රාමු සමඟ Bootstrap ප්ලගීන භාවිතා කිරීම අවශ්‍ය වේ. මෙම තත්වයන් තුළ, නාම අවකාශයේ ගැටීම් විටින් විට සිදු විය හැක. මෙය සිදුවුවහොත්, ඔබට .noConflictඅගය ආපසු හැරවීමට අවශ්‍ය ප්ලගිනය ඇමතීමට හැකිය.

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

Bootstrap නිල වශයෙන් Prototype හෝ jQuery UI වැනි තෙවන පාර්ශවීය JavaScript පුස්තකාල සඳහා සහය නොදක්වයි. සිදුවීම් තිබියදීත් .noConflict, නම් පරතරය, ඔබ විසින්ම විසඳා ගැනීමට අවශ්‍ය අනුකූලතා ගැටලු තිබිය හැක.

jQuery සිදුවීම්

Bootstrap විසින් jQuery වස්තුවේ jQueryතිබේ windowනම් සහ කිසිදු data-bs-no-jqueryattribute එකක් සකසා නොමැති නම් හඳුනා ගනී <body>. jQuery සොයා ගතහොත්, බූට්ස්ට්‍රැප් jQuery හි සිදුවීම් පද්ධතියට ස්තුති කරමින් සිදුවීම් නිකුත් කරයි. එබැවින් ඔබට Bootstrap හි සිදුවීම් වලට සවන් දීමට අවශ්‍ය නම්, ඔබට jQuery ක්‍රම ( .on, .one) වෙනුවට භාවිතා කිරීමට සිදුවේ addEventListener.

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

ජාවාස්ක්‍රිප්ට් අබල කර ඇත

ජාවාස්ක්‍රිප්ට් අක්‍රිය වූ විට බූට්ස්ට්‍රැප් ප්ලගීනවලට විශේෂ පසුබෑමක් නොමැත. ඔබ මෙම අවස්ථාවෙහි පරිශීලක අත්දැකීම ගැන සැලකිලිමත් වන්නේ නම්, <noscript>ඔබගේ පරිශීලකයින්ට තත්වය (සහ JavaScript නැවත සක්‍රිය කරන්නේ කෙසේද) පැහැදිලි කිරීමට භාවිතා කරන්න, සහ/හෝ ඔබේම අභිරුචි පසුබැසීමක් එක් කරන්න.