జావాస్క్రిప్ట్
మా ఐచ్ఛిక JavaScript ప్లగిన్‌లతో బూట్‌స్ట్రాప్‌కు జీవం పోయండి. ప్రతి ప్లగ్ఇన్, మా డేటా మరియు ప్రోగ్రామాటిక్ API ఎంపికలు మరియు మరిన్నింటి గురించి తెలుసుకోండి.
వ్యక్తిగత లేదా సంకలనం
ప్లగిన్‌లను ఒక్కొక్కటిగా చేర్చవచ్చు (బూట్స్ట్రాప్ యొక్క వ్యక్తిగతాన్ని ఉపయోగించి js/dist/*.js), లేదా అన్నింటినీ ఒకేసారి ఉపయోగించడం bootstrap.jsలేదా మినిఫైడ్ bootstrap.min.js(రెండూ చేర్చవద్దు).
మీరు బండ్లర్‌ను (వెబ్‌ప్యాక్, పార్సెల్, వీట్...) ఉపయోగిస్తే, మీరు /js/dist/*.jsUMD సిద్ధంగా ఉన్న ఫైల్‌లను ఉపయోగించవచ్చు.
జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్‌లతో వినియోగం
బూట్స్ట్రాప్ CSSని ఏదైనా ఫ్రేమ్‌వర్క్‌తో ఉపయోగించగలిగినప్పటికీ, బూట్స్ట్రాప్ జావాస్క్రిప్ట్ రియాక్ట్, వ్యూ మరియు యాంగ్యులర్ వంటి జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్‌లతో పూర్తిగా అనుకూలంగా లేదు, ఇది DOM గురించి పూర్తి జ్ఞానాన్ని కలిగి ఉంటుంది. బూట్స్ట్రాప్ మరియు ఫ్రేమ్‌వర్క్ రెండూ ఒకే DOM మూలకాన్ని మార్చడానికి ప్రయత్నించవచ్చు, ఫలితంగా డ్రాప్‌డౌన్‌ల వంటి బగ్‌లు "ఓపెన్" స్థానంలో నిలిచిపోతాయి.
ఈ రకమైన ఫ్రేమ్‌వర్క్‌లను ఉపయోగించే వారికి బూట్స్ట్రాప్ జావాస్క్రిప్ట్‌కు బదులుగా ఫ్రేమ్‌వర్క్-నిర్దిష్ట ప్యాకేజీని ఉపయోగించడం మెరుగైన ప్రత్యామ్నాయం. ఇక్కడ అత్యంత ప్రజాదరణ పొందిన కొన్ని ఎంపికలు ఉన్నాయి:
- రియాక్ట్: రియాక్ట్ బూట్స్ట్రాప్
- Vue: BootstrapVue (ప్రస్తుతం Vue 2 మరియు Bootstrap 4కి మాత్రమే మద్దతు ఇస్తుంది)
- కోణీయ: ng-బూట్స్ట్రాప్
బూట్‌స్ట్రాప్‌ను మాడ్యూల్‌గా ఉపయోగించడం
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'అయినప్పటికీ, మా పాపర్ డిపెండెన్సీ ద్వారా ఇది మరింత క్లిష్టంగా ఉంటుంది, ఇది పాపర్‌ని మా జావాస్క్రిప్ట్‌లోకి దిగుమతి చేస్తుంది:
import * as Popper from "@popperjs/core"
మీరు దీన్ని యథాతథంగా ప్రయత్నిస్తే, కన్సోల్‌లో కింది విధంగా మీరు ఎర్రర్‌ను చూస్తారు:
Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".
దీన్ని పరిష్కరించడానికి, మీరు importmapపాత్‌లను పూర్తి చేయడానికి ఏకపక్ష మాడ్యూల్ పేర్లను పరిష్కరించడానికి aని ఉపయోగించవచ్చు. మీ లక్షిత బ్రౌజర్‌లు మద్దతు ఇవ్వకపోతే 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 ద్వారా మాత్రమే డేటా అట్రిబ్యూట్‌లతో ప్రారంభించవచ్చు మరియు కాన్ఫిగర్ చేయవచ్చు (జావాస్క్రిప్ట్ ఫంక్షనాలిటీని ఉపయోగించడం మా ఇష్టపడే మార్గం). ఒకే మూలకంపై ఒక సెట్ డేటా అట్రిబ్యూట్‌లను మాత్రమే ఉపయోగించాలని నిర్ధారించుకోండి (ఉదా, మీరు అదే బటన్ నుండి టూల్‌టిప్ మరియు మోడల్‌ను ట్రిగ్గర్ చేయలేరు.)
ఎంపికలు డేటా అట్రిబ్యూట్‌లు లేదా జావాస్క్రిప్ట్ ద్వారా పాస్ చేయగలవు కాబట్టి, మీరు ఎంపిక పేరును data-bs-, లో వలె జోడించవచ్చు data-bs-animation="{value}". డేటా అట్రిబ్యూట్‌ల ద్వారా ఆప్షన్‌లను పాస్ చేస్తున్నప్పుడు ఎంపిక పేరు యొక్క కేస్ రకాన్ని “ కామెల్‌కేస్ ” నుండి “ కబాబ్-కేస్ ”కి మార్చాలని నిర్ధారించుకోండి. ఉదాహరణకు, data-bs-custom-class="beautifier"బదులుగా ఉపయోగించండి data-bs-customClass="beautifier".
బూట్స్ట్రాప్ 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
ఈవెంట్స్
బూట్స్ట్రాప్ చాలా ప్లగిన్‌ల ప్రత్యేక చర్యల కోసం అనుకూల ఈవెంట్‌లను అందిస్తుంది. సాధారణంగా, ఇవి ఇన్ఫినిటివ్ మరియు పాస్ట్ పార్టిసిపుల్ రూపంలో వస్తాయి - ఇక్కడ ఇన్ఫినిటివ్ (ఉదా. 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) |
శానిటైజర్
టూల్‌టిప్‌లు మరియు పాపవర్‌లు 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)
}
})
ఐచ్ఛికంగా j క్వెరీని ఉపయోగిస్తుంది
మీకు బూట్స్ట్రాప్ 5లో j క్వెరీ అవసరం లేదు , కానీ j క్వెరీతో మా భాగాలను ఉపయోగించడం ఇప్పటికీ సాధ్యమే. ఆబ్జెక్ట్‌లో బూట్స్ట్రాప్ గుర్తిస్తే jQuery, windowఅది j క్వెరీ యొక్క ప్లగ్ఇన్ సిస్టమ్‌లో మా అన్ని భాగాలను జోడిస్తుంది. ఇది క్రింది వాటిని చేయడానికి మిమ్మల్ని అనుమతిస్తుంది:
$('[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
బూట్స్ట్రాప్ ప్రోటోటైప్ లేదా j క్వెరీ UI వంటి మూడవ పక్షం జావాస్క్రిప్ట్ లైబ్రరీలకు అధికారికంగా మద్దతు ఇవ్వదు. నేమ్‌స్పేస్డ్ ఈవెంట్‌లు ఉన్నప్పటికీ .noConflict, మీరు మీ స్వంతంగా పరిష్కరించుకోవాల్సిన అనుకూలత సమస్యలు ఉండవచ్చు.
j క్వెరీ ఈవెంట్స్
బూట్స్ట్రాప్ ఆబ్జెక్ట్‌లో ఉంటే j క్వెరీని గుర్తిస్తుంది మరియు jQueryఆట్రిబ్యూట్ సెట్ చేయబడలేదు . j క్వెరీ కనుగొనబడితే, j క్వెరీ యొక్క ఈవెంట్ సిస్టమ్‌కు కృతజ్ఞతలు తెలుపుతూ బూట్స్ట్రాప్ ఈవెంట్‌లను విడుదల చేస్తుంది. కాబట్టి మీరు బూట్స్ట్రాప్ ఈవెంట్‌లను వినాలనుకుంటే, మీరు బదులుగా j క్వెరీ పద్ధతులను ( , ) ఉపయోగించాలి .windowdata-bs-no-jquery<body>.on.oneaddEventListener
$('#myTab a').on('shown.bs.tab', () => {
// do something...
})
జావాస్క్రిప్ట్ నిలిపివేయబడింది
జావాస్క్రిప్ట్ నిలిపివేయబడినప్పుడు బూట్స్ట్రాప్ ప్లగిన్‌లకు ప్రత్యేక ఫాల్‌బ్యాక్ ఉండదు. మీరు ఈ సందర్భంలో వినియోగదారు అనుభవం గురించి శ్రద్ధ వహిస్తే, <noscript>మీ వినియోగదారులకు పరిస్థితిని (మరియు JavaScriptని తిరిగి ప్రారంభించడం ఎలా) మరియు/లేదా మీ స్వంత అనుకూల ఫాల్‌బ్యాక్‌లను జోడించడానికి ఉపయోగించండి.