ጃቫስክሪፕት

በእኛ አማራጭ ጃቫ ስክሪፕት ፕለጊን ቡትስትራፕን ህያው አድርገው። ስለ እያንዳንዱ ተሰኪ፣ የእኛ ውሂብ እና ፕሮግራማዊ ኤፒአይ አማራጮች እና ተጨማሪ ይወቁ።

በዚህ ገጽ ላይ

የግለሰብ ወይም የተጠናቀረ

ተሰኪዎች በተናጥል ሊካተቱ ይችላሉ (የ Bootstrapን ግለሰብ በመጠቀም js/dist/*.js) ወይም ሁሉንም በአንድ ጊዜ በመጠቀም bootstrap.jsወይም የተቀነሰው bootstrap.min.js(ሁለቱንም አያካትቱ)።

ጥቅል (Webpack, Parcel, Vite…) የሚጠቀሙ /js/dist/*.jsከሆነ UMD ዝግጁ የሆኑ ፋይሎችን መጠቀም ይችላሉ።

ከጃቫስክሪፕት ማዕቀፎች ጋር መጠቀም

የ Bootstrap CSS ከማንኛውም ማዕቀፍ ጋር ጥቅም ላይ ሊውል የሚችል ቢሆንም፣ የቡትስትራፕ ጃቫስክሪፕት እንደ DOM ሙሉ እውቀት ከሚወስዱ እንደ React፣ Vue እና Angular ካሉ ጃቫ ስክሪፕት ማዕቀፎች ጋር ሙሉ በሙሉ ተኳሃኝ አይደለም ። ሁለቱም ቡትስትራፕ እና ማዕቀፉ አንድ አይነት የDOM አባል ለመቀየር ሊሞክሩ ይችላሉ፣ ይህም እንደ ተቆልቋይ ያሉ በ"ክፍት" ቦታ ላይ የተጣበቁ ሳንካዎች ሊኖሩ ይችላሉ።

የዚህ አይነት ማዕቀፎችን ለሚጠቀሙ ሰዎች የተሻለው አማራጭ ከቡትስትራፕ ጃቫስክሪፕት ይልቅ ፍሬም-ተኮር ጥቅል መጠቀም ነው ። አንዳንድ በጣም ተወዳጅ አማራጮች እነኚሁና:

ምላሽ ይስጡ፡ ቡትስትራፕ ምላሽ ይስጡ
Vue: BootstrapVue (በአሁኑ ጊዜ Vue 2 እና Bootstrap 4ን ብቻ ይደግፋል)
አንግል: ng-bootstrap

Bootstrapን እንደ ሞጁል መጠቀም

እራስዎ ይሞክሩት! Bootstrapን እንደ ኢኤስ ሞጁል ለመጠቀም የምንጭ ኮዱን እና የስራ ማሳያን ከ twbs/ምሳሌዎች ማከማቻ ያውርዱ ። በ StackBlitz ውስጥ ምሳሌውን መክፈት ይችላሉ .

የታለመላቸው አሳሾች የሚደግፉት ከሆነ ቡትስትራፕን እንደ ሞጁል በአሳሹ ውስጥ እንዲጠቀሙ የሚያስችልዎትን እንደ ESM( bootstrap.esm.jsእና ) የተሰራውን የBootstrap ስሪት እናቀርባለን ።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>

ከጄኤስ ቅርቅቦች ጋር ሲወዳደር በአሳሹ ውስጥ 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መጠቀም ያስፈልግዎታል ። ለ 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>

ጥገኛዎች

አንዳንድ ተሰኪዎች እና የሲኤስኤስ ክፍሎች በሌሎች ተሰኪዎች ላይ ይወሰናሉ። ፕለጊኖችን ለየብቻ ካካተትክ፣ እነዚህን ጥገኞች በሰነዶቹ ውስጥ ማረጋገጥህን አረጋግጥ።

የእኛ ተቆልቋይ፣ ብቅ-ባይ እና የመሳሪያ ምክሮች እንዲሁ በፖፐር ላይ ይወሰናሉ ።

የውሂብ ባህሪያት

ከሞላ ጎደል ሁሉም የ Bootstrap ፕለጊኖች በኤችቲኤምኤል በኩል ብቻ በመረጃ ባህሪያት (የእኛ ተመራጭ የጃቫስክሪፕት ተግባር የምንጠቀምበት መንገድ) ሊነቁ እና ሊዋቀሩ ይችላሉ። በአንድ ኤለመንት ላይ አንድ የውሂብ ባህሪያትን ስብስብ ብቻ መጠቀምዎን ያረጋግጡ (ለምሳሌ፣ ከተመሳሳይ አዝራር የመሳሪያ ጥቆማ እና ሞዳል ማስነሳት አይችሉም።)

አማራጮች በውሂብ ባህሪያት ወይም በጃቫ ስክሪፕት ሊተላለፉ ስለሚችሉ፣ በ ውስጥ እንዳለ የአማራጭ ስም ወደ ላይ ማከል data-bs-ይችላሉ data-bs-animation="{value}"። በመረጃ ባህሪያት በኩል አማራጮችን ሲያስተላልፉ የአማራጭ ስም የጉዳይ አይነትን ከ " camelcase " ወደ " kebab-case " መቀየርዎን ያረጋግጡ. ለምሳሌ, data-bs-custom-class="beautifier"በምትኩ ይጠቀሙ data-bs-customClass="beautifier".

ከ Bootstrap 5.2.0 ጀምሮ፣ ሁሉም አካላት ቀላል የአካል ክፍሎችን እንደ JSON string ውቅረት ሊያስቀምጥ የሚችል በሙከራ የተያዘ የውሂብ ባህሪን ይደግፋሉ። 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እና ዘዴዎችን እንጠቀማለን፣ ስለዚህ ትክክለኛ መምረጫዎችንquerySelectorAll መጠቀም አለብዎት ። እንደ ልዩ መራጮችን ከተጠቀሙ , እነሱን ለማምለጥ እርግጠኛ ይሁኑ.collapse: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
  }
})

ፕሮግራማዊ ኤፒአይ

ሁሉም ግንበኞች የአማራጭ አማራጮችን ነገር ወይም ምንም ነገር አይቀበሉም (ይህም ተሰኪን ከነባሪ ባህሪው ያስጀምራል)

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፣ ሁሉም ፕለጊን ገንቢዎች የ DOM ኤለመንት ወይም ልክ የሆነ የሲኤስኤስ መምረጫ እንደ መጀመሪያው ክርክር 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')

ያልተመሳሰሉ ተግባራት እና ሽግግሮች

ሁሉም የፕሮግራም ኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግሩ ከተጀመረ በኋላ ወደ ደዋይ ይመለሳሉ ነገር ግን ከማለቁ በፊት . ሽግግሩ ከተጠናቀቀ በኋላ አንድን ድርጊት ለመፈጸም፣ ተጓዳኙን ክስተት ማዳመጥ ይችላሉ።

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 ተሰኪዎች ሥሪት በተሰኪው ገንቢ ንብረት በኩል ሊደረስበት ይችላል (ምሳሌ `bootstrap.Tooltip.VERSION`፡)

ሳኒታይዘር

Tooltips እና 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 መጠቀም አሁንም ይቻላል. ቡትስትራፕ በእቃው 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

ስለ ሌሎች ክፍሎቻችንም ተመሳሳይ ነው።

ግጭት የለም።

አንዳንድ ጊዜ የ Bootstrap ፕለጊኖችን ከሌሎች የUI ማዕቀፎች ጋር መጠቀም አስፈላጊ ነው። በነዚህ ሁኔታዎች፣ የስም ቦታ ግጭቶች አልፎ አልፎ ሊከሰቱ ይችላሉ። ይህ ከተከሰተ .noConflictእሴቱን ለመመለስ የሚፈልጉትን ፕለጊን መደወል ይችላሉ።

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

Bootstrap እንደ ፕሮቶታይፕ ወይም jQuery UI ያሉ የሶስተኛ ወገን ጃቫ ስክሪፕት ቤተ-መጻሕፍትን በይፋ አይደግፍም። ምንም እንኳን .noConflictእና በስም የተከፋፈሉ ክስተቶች፣ እርስዎ እራስዎ ማስተካከል የሚፈልጓቸው የተኳኋኝነት ችግሮች ሊኖሩ ይችላሉ።

jQuery ክስተቶች

ቡትስትራፕ በእቃው jQueryውስጥ ካለ እና በ ላይ ምንም አይነት ባህሪ ከሌለ jQuery ን ያገኛል ። jQuery ከተገኘ፣ Bootstrap ለ jQuery የክስተት ስርዓት ምስጋና ይግባው። ስለዚህ የ Bootstrapን ዝግጅቶችን ለማዳመጥ ከፈለጉ ከ ይልቅ የ jQuery ስልቶችን ( , ) መጠቀም አለብዎት .windowdata-bs-no-jquery<body>.on.oneaddEventListener

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