ጃቫስክሪፕት

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

በዚህ ገጽ ላይ

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

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

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

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

የታለመላቸው አሳሾች የሚደግፉት ከሆነ Bootstrapን እንደ ሞጁል በአሳሽዎ ውስጥ እንዲጠቀሙ የሚያስችልዎትን እንደ 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>

የማይጣጣሙ ተሰኪዎች

በአሳሽ ውሱንነት ምክንያት አንዳንድ የእኛ ተሰኪዎች ማለትም Dropdown፣ Tooltip እና Popover plugins በፖፐር ላይ ስለሚመሰረቱ በአይነት <script>መለያ መጠቀም አይቻልም። moduleስለ ጉዳዩ ተጨማሪ መረጃ ለማግኘት እዚህ ይመልከቱ .

ጥገኛዎች

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

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

አሁንም jQuery መጠቀም ይፈልጋሉ? ይቻላል!

ቡትስትራፕ 5 ያለ jQuery ጥቅም ላይ እንዲውል ተደርጎ ነው የተቀየሰው፣ ነገር ግን ክፍሎቻችንን በ jQuery መጠቀም አሁንም ይቻላል። ቡትስትራፕ በእቃው jQueryውስጥwindow ካወቀ ሁሉንም ክፍሎቻችንን በ jQuery ፕለጊን ሲስተም ውስጥ ይጨምራል። $('[data-bs-toggle="tooltip"]').tooltip()ይህ ማለት የመሳሪያ ምክሮችን ለማንቃት ማድረግ ይችላሉ ማለት ነው ። ስለ ሌሎች ክፍሎቻችንም ተመሳሳይ ነው።

የውሂብ ባህሪያት

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

መራጮች

በአሁኑ ጊዜ የ DOM አካላትን ለመጠየቅ ቤተኛ ስልቶችን querySelectorእና querySelectorAllለአፈጻጸም ምክንያቶች እንጠቀማለን፣ ስለዚህ ትክክለኛ መምረጫዎችን መጠቀም አለብዎት ። ልዩ መራጮችን ከተጠቀሙ, ለምሳሌ: collapse:Exampleእነሱን ለማምለጥ እርግጠኛ ይሁኑ.

ክስተቶች

Bootstrap ለአብዛኛዎቹ ተሰኪዎች ልዩ ድርጊቶች ብጁ ክስተቶችን ያቀርባል። በጥቅሉ፣ እነዚህ ወደ ፍጻሜ የለሽ እና ያለፈ ተካፋይ መልክ ይመጣሉ - መጨረሻው (ለምሳሌ show) በክስተቱ መጀመሪያ ላይ የሚቀሰቀስበት እና ያለፈው አካል ቅርፅ (ለምሳሌ shown) የሚቀሰቀሰው ድርጊት ሲጠናቀቅ ነው።

ሁሉም ማለቂያ የሌላቸው ክስተቶች preventDefault()ተግባራዊነት ይሰጣሉ. ይህ እርምጃ ከመጀመሩ በፊት አፈፃፀምን የማቆም ችሎታ ይሰጣል። ከክስተት ተቆጣጣሪ የውሸት መመለስ እንዲሁ በቀጥታ ይደውላል preventDefault()።

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

jQuery ክስተቶች

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

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

ፕሮግራማዊ ኤፒአይ

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

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

የተለየ ፕለጊን ለምሳሌ ማግኘት ከፈለጉ እያንዳንዱ ተሰኪ getInstanceዘዴን ያጋልጣል። በቀጥታ ከአንድ ኤለመንት ለማውጣት ይህንን ያድርጉ bootstrap.Popover.getInstance(myPopoverEl)፡.

በገንቢዎች ውስጥ የ CSS መምረጫዎች

ተሰኪውን ለማስጀመር ከDOM ኤለመንት ይልቅ የCSS መራጭን እንደ መጀመሪያው መከራከሪያ መጠቀም ይችላሉ። querySelectorየእኛ ፕለጊኖች አንድ ነጠላ ኤለመንት ብቻ ስለሚደግፉ በአሁኑ ጊዜ የፕለጊኑ ንጥረ ነገር በስልቱ ይገኛል ።

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

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

ሁሉም የፕሮግራም ኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግሩ ከተጀመረ በኋላ ግን ከማለቁ በፊት ወደ ደዋይ ይመለሳሉ ።

ሽግግሩ ከተጠናቀቀ በኋላ አንድን ድርጊት ለመፈጸም፣ ተጓዳኙን ክስተት ማዳመጥ ይችላሉ።

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

በተጨማሪም የሽግግር አካል ላይ ዘዴ ጥሪ ችላ ይባላል .

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (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 !!

ነባሪ ቅንብሮች

የተሰኪውን ነገር በማስተካከል የፕለጊን ነባሪ ቅንብሮችን መቀየር ይችላሉ Constructor.Default፡-

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

ምንም ግጭት የለም ( jQuery ከተጠቀሙ ብቻ)

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

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

የስሪት ቁጥሮች

VERSIONየእያንዳንዱ የBootstrap ተሰኪዎች ሥሪት በተሰኪው ገንቢ ንብረት በኩል ሊደረስበት ይችላል ። ለምሳሌ፣ ለመሳሪያ ምክር ተሰኪ፡-

bootstrap.Tooltip.VERSION // => "5.1.3"

ጃቫ ስክሪፕት ሲሰናከል ምንም ልዩ ውድቀት የለም።

ጃቫ ስክሪፕት ሲሰናከል የቡትስትራፕ ተሰኪዎች በጸጋ ወደ ኋላ አይመለሱም። በዚህ ጉዳይ ላይ ስለተጠቃሚው ተሞክሮ የሚጨነቁ ከሆነ፣ <noscript>ሁኔታውን (እና ጃቫ ስክሪፕትን እንዴት እንደገና ማንቃት እንደሚችሉ) ለተጠቃሚዎችዎ ለማስረዳት ይጠቀሙ እና/ወይም የራስዎን ብጁ ውድቀት ያክሉ።

የሶስተኛ ወገን ቤተ-መጻሕፍት

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

ሳኒታይዘር

Tooltips እና Popovers ኤችቲኤምኤልን የሚቀበሉ አማራጮችን ለማጽዳት የእኛን አብሮገነብ ማጽጃ ይጠቀማሉ።

ነባሪው allowListዋጋ የሚከተለው ነው።

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var 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የሚከተሉትን ማድረግ ይችላሉ።

var 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
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

የተለየ ቤተ-መጽሐፍት መጠቀም ስለምትመርጡ የኛን ማጽጃ ማለፍ ከፈለጉ ለምሳሌ DOMPurify የሚከተሉትን ማድረግ አለብዎት።

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})