JavaScript

გააცოცხლეთ Bootstrap ჩვენი არასავალდებულო JavaScript დანამატებით. შეიტყვეთ თითოეული მოდულის, ჩვენი მონაცემებისა და პროგრამული API პარამეტრების შესახებ და სხვა.

ამ გვერდზე

ინდივიდუალური ან შედგენილი

დანამატები შეიძლება ჩაერთოს ინდივიდუალურად (Bootstrap-ის ინდივიდუალური გამოყენებით js/dist/*.js), ან ერთდროულად გამოყენებით bootstrap.jsან შემცირებული bootstrap.min.js(არ მოიცავს ორივეს).

თუ იყენებთ Bundler-ს (Webpack, Parcel, Vite…), შეგიძლიათ გამოიყენოთ /js/dist/*.jsფაილები, რომლებიც მზადაა UMD.

გამოყენება JavaScript ჩარჩოებით

მიუხედავად იმისა, რომ Bootstrap CSS შეიძლება გამოყენებულ იქნას ნებისმიერ ჩარჩოსთან, Bootstrap JavaScript არ არის სრულად თავსებადი JavaScript ჩარჩოებთან, როგორიცაა React, Vue და Angular , რომლებიც ითვალისწინებენ DOM-ის სრულ ცოდნას. Bootstrap-მაც და Framework-მაც შეიძლება სცადონ ერთი და იგივე DOM ელემენტის მუტაცია, რაც გამოიწვევს შეცდომებს, როგორიცაა ჩამოსაშლელი ფაილები, რომლებიც ჩარჩენილია „ღია“ პოზიციაზე.

უკეთესი ალტერნატივა მათთვის, ვინც იყენებს ამ ტიპის ჩარჩოებს, არის Bootstrap JavaScript-ის ნაცვლად ჩარჩოს სპეციფიკური პაკეტის გამოყენება. აქ არის რამდენიმე ყველაზე პოპულარული ვარიანტი:

React: React Bootstrap
Vue: BootstrapVue (ამჟამად მხარს უჭერს მხოლოდ Vue 2 და Bootstrap 4)
კუთხოვანი: ng-bootstrap

Bootstrap მოდულის სახით გამოყენება

თავად სცადე! ჩამოტვირთეთ საწყისი კოდი და სამუშაო დემო ვერსია Bootstrap-ის ES მოდულად გამოსაყენებლად twbs/მაგალითების საცავიდან . თქვენ ასევე შეგიძლიათ გახსნათ მაგალითი StackBlitz-ში .

ჩვენ გთავაზობთ Bootstrap-ის ვერსიას, რომელიც აგებულია როგორც ESM( bootstrap.esm.jsდა bootstrap.esm.min.js), რომელიც საშუალებას გაძლევთ გამოიყენოთ Bootstrap როგორც მოდული ბრაუზერში, თუ თქვენი მიზნობრივი ბრაუზერები მხარს უჭერენ მას .

<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'. თუმცა, ამას კიდევ უფრო ართულებს ჩვენი Popper დამოკიდებულებით, რომელიც პოპერის შემოაქვს ჩვენს JavaScript-ში ასე:

import * as Popper from "@popperjs/core"

თუ სცადეთ ეს როგორც არის, დაინახავთ შეცდომას კონსოლში, როგორიცაა შემდეგი:

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

ამის გამოსასწორებლად, შეგიძლიათ გამოიყენოთ ან importmapგადაჭრას თვითნებური მოდულის სახელები ბილიკების დასასრულებლად. თუ თქვენი მიზნობრივი ბრაუზერები არ უჭერენ მხარს importmap, თქვენ უნდა გამოიყენოთ es-module-shims პროექტი. აი, როგორ მუშაობს 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>

დამოკიდებულებები

ზოგიერთი დანამატი და CSS კომპონენტი დამოკიდებულია სხვა დანამატებზე. თუ ინდივიდუალურად ჩართავთ დანამატებს, დარწმუნდით, რომ შეამოწმეთ ეს დამოკიდებულებები დოკუმენტებში.

ჩვენი ჩამოსაშლელი ფაილები, პოპოვერები და ინსტრუმენტების რჩევები ასევე დამოკიდებულია Popper- ზე .

მონაცემთა ატრიბუტები

Bootstrap-ის თითქმის ყველა დანამატის ჩართვა და კონფიგურაცია შესაძლებელია მხოლოდ HTML-ის საშუალებით მონაცემთა ატრიბუტებით (ჩვენი სასურველი გზა JavaScript ფუნქციონალურობის გამოყენებისთვის). დარწმუნდით, რომ გამოიყენეთ მონაცემთა ატრიბუტების მხოლოდ ერთი ნაკრები ერთ ელემენტზე (მაგ., თქვენ არ შეგიძლიათ გამოიყენოთ ინსტრუმენტის მინიშნება და მოდალი იმავე ღილაკიდან.)

იმის გამო, რომ ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით, შეგიძლიათ დაამატოთ ოფციის სახელი data-bs-, როგორც data-bs-animation="{value}". დარწმუნდით, რომ შეცვალეთ ოფციის სახელის ქეისის ტიპი „ camelCase “-დან „ kebab-case “-ზე ოფციების მონაცემთა ატრიბუტების მეშვეობით გადაცემისას. მაგალითად, გამოიყენეთ data-bs-custom-class="beautifier"ნაცვლად data-bs-customClass="beautifier".

როგორც Bootstrap 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}'.

სელექტორები

ჩვენ ვიყენებთ მშობლიურ querySelectorდა querySelectorAllმეთოდებს DOM ელემენტების შეკითხვისთვის შესრულების მიზეზების გამო, ასე რომ თქვენ უნდა გამოიყენოთ სწორი სელექტორები . თუ იყენებთ სპეციალურ სელექტორებს, როგორიცაა collapse:Example, აუცილებლად გაექცეთ მათ.

Ივენთი

Bootstrap უზრუნველყოფს მორგებულ მოვლენებს პლაგინების უნიკალურ ქმედებებისთვის. როგორც წესი, ესენი მოდის ინფინიტივი და წარსული ნაწილაკის სახით - სადაც ინფინიტივი (მაგ. show) ჩნდება მოვლენის დაწყებისას, ხოლო მისი წარსული ნაწილაკი (მაგ. shown) მოქმედების დასრულებისას.

ყველა უსასრულო მოვლენა უზრუნველყოფს preventDefault()ფუნქციონირებას. ეს იძლევა შესაძლებლობას შეაჩეროს მოქმედების შესრულება მის დაწყებამდე. ღონისძიების დამმუშავებლისგან false-ის დაბრუნება ასევე ავტომატურად გამოიძახებს 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, თუ ინსტანცია არ არის ინიცირებული მოთხოვნილ ელემენტზე.

ალტერნატიულად, getOrCreateInstanceშეიძლება გამოყენებულ იქნას DOM ელემენტთან ასოცირებული ეგზემპლარის მისაღებად, ან ახლის შესაქმნელად, თუ ის არ იყო ინიციალიზებული.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

იმ შემთხვევაში, თუ ინსტანცია არ იყო ინიციალიზებული, მას შეუძლია მიიღოს და გამოიყენოს არასავალდებულო კონფიგურაციის ობიექტი მეორე არგუმენტად.

CSS სელექტორები კონსტრუქტორებში

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

მეთოდები და თვისებები

Bootstrap-ის ყველა დანამატი ავლენს შემდეგ მეთოდებს და სტატიკური თვისებებს.

მეთოდი	აღწერა
`dispose`	ანადგურებს ელემენტის მოდალს. (შლის DOM ელემენტზე შენახულ მონაცემებს)
`getInstance`	სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან დაკავშირებული მოდალური ინსტანცია.
`getOrCreateInstance`	სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან ასოცირებული მოდალური ინსტანცია, ან შექმნათ ახალი, თუ ის არ იყო ინიციალიზებული.

სტატიკური თვისება	აღწერა
`NAME`	აბრუნებს მოდულის სახელს. (მაგალითი `bootstrap.Tooltip.NAME`:)
`VERSION`	Bootstrap-ის თითოეული დანამატის ვერსიაზე წვდომა შესაძლებელია `VERSION`დანამატის კონსტრუქტორის საკუთრების მეშვეობით (მაგალითი: `bootstrap.Tooltip.VERSION`)

სადეზინფექციო საშუალება

Tooltips და Popovers იყენებენ ჩვენს ჩაშენებულ სადეზინფექციო საშუალებებს იმ ვარიანტების გასაწმენდად, რომლებიც იღებენ 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-ის გამოყენებით

თქვენ არ გჭირდებათ jQuery Bootstrap 5-ში , მაგრამ მაინც შესაძლებელია ჩვენი კომპონენტების გამოყენება jQuery-თან ერთად. თუ Bootstrap აღმოაჩენს 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 ოფიციალურად არ უჭერს მხარს მესამე მხარის JavaScript ბიბლიოთეკებს, როგორიცაა Prototype ან jQuery UI. მიუხედავად .noConflictდა სახელთა სივრცის მოვლენებისა, შეიძლება არსებობდეს თავსებადობის პრობლემები, რომლებიც დამოუკიდებლად უნდა მოაგვაროთ.

jQuery მოვლენები

Bootstrap აღმოაჩენს jQuery-ს, თუ jQueryარის windowობიექტში და არ არის data-bs-no-jqueryმითითებული ატრიბუტი <body>. თუ jQuery მოიძებნება, Bootstrap გამოსცემს მოვლენებს jQuery-ის ღონისძიებების სისტემის წყალობით. ასე რომ, თუ გსურთ მოუსმინოთ Bootstrap-ის მოვლენებს, თქვენ უნდა გამოიყენოთ jQuery მეთოდები ( .on, .one) ნაცვლად addEventListener.

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

გამორთულია JavaScript

Bootstrap-ის დანამატებს არ აქვთ სპეციალური ჩანაცვლება, როდესაც JavaScript გამორთულია. თუ თქვენ აინტერესებთ მომხმარებლის გამოცდილება ამ შემთხვევაში, გამოიყენეთ <noscript>სიტუაციის ახსნა (და როგორ ხელახლა ჩართოთ JavaScript) თქვენს მომხმარებლებს და/ან დაამატეთ თქვენი საკუთარი სარეზერვო.