ጃቫስክሪፕት
በእኛ አማራጭ ጃቫ ስክሪፕት ፕለጊን ቡትስትራፕን ህያው አድርገው። ስለ እያንዳንዱ ተሰኪ፣ የእኛ ውሂብ እና ፕሮግራማዊ ኤፒአይ አማራጮች እና ተጨማሪ ይወቁ።
የግለሰብ ወይም የተጠናቀረ
ተሰኪዎች በተናጥል ሊካተቱ ይችላሉ (የ Bootstrapን ግለሰብ በመጠቀም js/dist/*.js
) ወይም ሁሉንም በአንድ ጊዜ በመጠቀም bootstrap.js
ወይም የተቀነሰው bootstrap.min.js
(ሁለቱንም አያካትቱ)።
ጥቅል (Webpack፣ Rollup…) የሚጠቀሙ ከሆነ /js/dist/*.js
UMD ዝግጁ የሆኑ ፋይሎችን መጠቀም ይችላሉ።
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 ስልቶችን ( , ) መጠቀም አለብዎት .window
data-bs-no-jquery
<body>
.on
.one
addEventListener
$('#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.0.2"
ጃቫ ስክሪፕት ሲሰናከል ምንም ልዩ ውድቀት የለም።
ጃቫ ስክሪፕት ሲሰናከል የቡትስትራፕ ተሰኪዎች በጸጋ ወደ ኋላ አይመለሱም። በዚህ ጉዳይ ላይ ስለተጠቃሚው ተሞክሮ የሚጨነቁ ከሆነ፣ <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)
}
})