in English

جاوا اسکرپٹ

ہمارے اختیاری JavaScript پلگ ان کے ساتھ بوٹسٹریپ کو زندہ کریں۔ ہر پلگ ان، ہمارے ڈیٹا اور پروگرامیٹک API کے اختیارات اور مزید کے بارے میں جانیں۔

اس صفحہ پر

انفرادی یا مرتب شدہ

پلگ انز کو انفرادی طور پر شامل کیا جا سکتا ہے (بوٹسٹریپ کے انفرادی کا استعمال کرتے ہوئے js/dist/*.js)، یا سبھی کو ایک ساتھ استعمال کرتے ہوئے bootstrap.jsیا کم کیا گیا bootstrap.min.js(دونوں کو شامل نہ کریں)۔

اگر آپ بنڈلر (ویب پیک، پارسل، وائٹ…) استعمال کرتے ہیں، تو آپ /js/dist/*.jsوہ فائلیں استعمال کر سکتے ہیں جو UMD تیار ہیں۔

جاوا اسکرپٹ فریم ورک کے ساتھ استعمال

جبکہ بوٹسٹریپ سی ایس ایس کو کسی بھی فریم ورک کے ساتھ استعمال کیا جا سکتا ہے، بوٹسٹریپ جاوا اسکرپٹ جاوا اسکرپٹ کے فریم ورک جیسے React، Vue، اور Angular کے ساتھ مکمل طور پر مطابقت نہیں رکھتا ہے جو DOM کی مکمل معلومات حاصل کرتے ہیں۔ بوٹسٹریپ اور فریم ورک دونوں ایک ہی DOM عنصر کو تبدیل کرنے کی کوشش کر سکتے ہیں، جس کے نتیجے میں ڈراپ ڈاؤن جیسے کیڑے پیدا ہوتے ہیں جو "اوپن" پوزیشن میں پھنس جاتے ہیں۔

اس قسم کے فریم ورک استعمال کرنے والوں کے لیے ایک بہتر متبادل یہ ہے کہ بوٹسٹریپ جاوا اسکرپٹ کے بجائے فریم ورک کے لیے مخصوص پیکج استعمال کریں۔ یہاں سب سے زیادہ مقبول اختیارات میں سے کچھ ہیں:

React: React بوٹسٹریپ
Vue: BootstrapVue (فی الحال صرف Vue 2 اور Bootstrap 4 کو سپورٹ کرتا ہے)
کونیی: این جی بوٹسٹریپ

بوٹسٹریپ کو بطور ماڈیول استعمال کرنا

خود کریں! بوٹسٹریپ کو ES ماڈیول کے طور پر twbs/examples repository سے استعمال کرنے کے لیے سورس کوڈ اور ورکنگ ڈیمو ڈاؤن لوڈ کریں ۔ آپ مثال کو StackBlitz میں بھی کھول سکتے ہیں ۔

ہم بوٹسٹریپ کا ایک ایسا ورژن فراہم کرتے ہیں جو بطور 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 استعمال کرنے کے لیے آپ کو ماڈیول کے نام کی بجائے مکمل راستہ اور فائل کا نام استعمال کرنے کی ضرورت ہوتی ہے۔ براؤزر میں جے ایس ماڈیولز کے بارے میں مزید پڑھیں۔ اسی لیے ہم اوپر '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استعمال کرنے کی ضرورت ہوگی ۔ یہاں یہ ہے کہ یہ بوٹسٹریپ اور پوپر کے لیے کیسے کام کرتا ہے:

<!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>

انحصار

کچھ پلگ ان اور سی ایس ایس اجزاء دوسرے پلگ انز پر منحصر ہوتے ہیں۔ اگر آپ انفرادی طور پر پلگ انز شامل کرتے ہیں، تو دستاویزات میں ان انحصارات کو چیک کرنا یقینی بنائیں۔

ہمارے ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس بھی Popper پر منحصر ہیں۔

ڈیٹا کی خصوصیات

تقریباً تمام بوٹسٹریپ پلگ انز کو صرف HTML کے ذریعے ڈیٹا انتساب کے ساتھ فعال اور ترتیب دیا جا سکتا ہے (جاوا اسکرپٹ کی فعالیت کو استعمال کرنے کا ہمارا ترجیحی طریقہ)۔ اس بات کو یقینی بنائیں کہ کسی ایک عنصر پر ڈیٹا کی خصوصیات کا صرف ایک سیٹ استعمال کریں (مثال کے طور پر، آپ ایک ہی بٹن سے ٹول ٹپ اور موڈل کو متحرک نہیں کر سکتے۔)

چونکہ آپشنز کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے، آپ ایک آپشن کا نام شامل کر سکتے ہیں data-bs-، جیسا کہ میں data-bs-animation="{value}"۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے نام کی کیس ٹائپ کو " کیمل کیس" سے " کباب کیس " میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، کے data-bs-custom-class="beautifier"بجائے استعمال کریں data-bs-customClass="beautifier"۔

بوٹسٹریپ 5.2.0 کے مطابق، تمام اجزاء ایک تجرباتی محفوظ ڈیٹا وصف کو سپورٹ کرتے data-bs-configہیں جو JSON سٹرنگ کے طور پر سادہ اجزاء کی ترتیب کو رکھ سکتا ہے۔ جب ایک عنصر 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

تقریبات

بوٹسٹریپ زیادہ تر پلگ ان کی منفرد کارروائیوں کے لیے حسب ضرورت ایونٹس فراہم کرتا ہے۔ عام طور پر، یہ ایک غیرمعمولی اور ماضی کے حصہ دار شکل میں آتے ہیں - جہاں کسی واقعہ کے آغاز پر infinitive (ex. show) کو متحرک کیا جاتا ہے، اور اس کی ماضی کی شریک شکل (ex. 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)

اگر کوئی مثال شروع نہیں کی گئی تھی، تو یہ اختیاری کنفیگریشن آبجیکٹ کو دوسری دلیل کے طور پر قبول اور استعمال کر سکتا ہے۔

کنسٹرکٹرز میں سی ایس ایس سلیکٹرز

getInstanceاور طریقوں کے علاوہ getOrCreateInstance، تمام پلگ ان کنسٹرکٹرز ایک DOM عنصر یا ایک درست 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)
  }
})

اختیاری طور پر jQuery استعمال کرنا

آپ کو بوٹسٹریپ 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

ہمارے دوسرے اجزاء کے لیے بھی یہی ہے۔

کوئی تنازعہ نہیں۔

بعض اوقات بوٹسٹریپ پلگ ان کو دوسرے UI فریم ورک کے ساتھ استعمال کرنا ضروری ہوتا ہے۔ ان حالات میں نام کی جگہ کے تصادم کبھی کبھار ہو سکتے ہیں۔ اگر ایسا ہوتا ہے، تو آپ اس .noConflictپلگ ان پر کال کر سکتے ہیں جس کی قدر کو آپ واپس کرنا چاہتے ہیں۔

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

بوٹسٹریپ باضابطہ طور پر فریق ثالث JavaScript لائبریریوں جیسے Prototype یا jQuery UI کی حمایت نہیں کرتا ہے۔ .noConflictایونٹس اور نام کی جگہ کے باوجود ، مطابقت کے مسائل ہوسکتے ہیں جنہیں آپ کو خود ہی ٹھیک کرنے کی ضرورت ہے۔

jQuery کے واقعات

بوٹسٹریپ jQuery کا پتہ لگائے گا اگر آبجیکٹ jQueryمیں موجود windowہے اور اس پر کوئی data-bs-no-jqueryوصف سیٹ نہیں ہے <body>۔ اگر jQuery پایا جاتا ہے تو، بوٹسٹریپ jQuery کے ایونٹ سسٹم کی بدولت واقعات کو خارج کرے گا۔ لہذا اگر آپ بوٹسٹریپ کے واقعات سننا چاہتے ہیں، تو آپ کو jQuery کے طریقے استعمال کرنے ہوں گے ( .on, .one) کے بجائے addEventListener۔

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

غیر فعال جاوا اسکرپٹ

جاوا اسکرپٹ کے غیر فعال ہونے پر بوٹسٹریپ کے پلگ ان میں کوئی خاص فال بیک نہیں ہوتا ہے۔ اگر آپ اس معاملے میں صارف کے تجربے کی پرواہ کرتے ہیں تو، <noscript>اپنے صارفین کو صورتحال (اور جاوا اسکرپٹ کو دوبارہ فعال کرنے کا طریقہ) کی وضاحت کرنے کے لیے استعمال کریں، اور/یا اپنی مرضی کے مطابق فال بیکس شامل کریں۔