JavaScript

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

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

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

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

ჩვენ გთავაზობთ 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>

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

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

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

ისევ გსურთ გამოიყენოთ jQuery? Შესაძლებელია!

Bootstrap 5 შექმნილია jQuery-ის გარეშე გამოსაყენებლად, მაგრამ მაინც შესაძლებელია ჩვენი კომპონენტების გამოყენება jQuery-თან ერთად. თუ Bootstrap აღმოაჩენს jQueryობიექტსwindow , ის დაამატებს ჩვენს ყველა კომპონენტს jQuery-ის დანამატის სისტემაში ; ეს ნიშნავს, რომ თქვენ შეძლებთ ინსტრუმენტთა $('[data-bs-toggle="tooltip"]').tooltip()რჩევების ჩართვას. იგივე ეხება ჩვენს სხვა კომპონენტებს.

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

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

Ივენთი

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

ყველა უსასრულო მოვლენა უზრუნველყოფს preventDefault()ფუნქციონირებას. ეს იძლევა შესაძლებლობას შეაჩეროს მოქმედების შესრულება მის დაწყებამდე. ღონისძიების დამმუშავებლისგან false-ის დაბრუნება ასევე ავტომატურად გამოიძახებს preventDefault().

var myModal = document.getElementById('myModal')

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

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

პროგრამული API

ყველა კონსტრუქტორი იღებს არასავალდებულო ოფციონის ობიექტს ან არაფერს (რომელიც იწყებს დანამატს თავისი ნაგულისხმევი ქცევით):

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 სელექტორები კონსტრუქტორებში

თქვენ ასევე შეგიძლიათ გამოიყენოთ CSS სელექტორი, როგორც პირველი არგუმენტი DOM ელემენტის ნაცვლად მოდულის ინიციალიზაციისთვის. ამჟამად მოდულის ელემენტი ნაპოვნია querySelectorმეთოდით, რადგან ჩვენი დანამატები მხარს უჭერენ მხოლოდ ერთ ელემენტს.

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

ასინქრონული ფუნქციები და გადასვლები

ყველა პროგრამული API მეთოდი ასინქრონულია და უბრუნდება აბონენტს გადასვლის დაწყების შემდეგ, მაგრამ მის დასრულებამდე .

გადასვლის დასრულების შემდეგ მოქმედების შესასრულებლად, შეგიძლიათ მოუსმინოთ შესაბამის მოვლენას.

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

ვერსიის ნომრები

Bootstrap-ის თითოეული დანამატის ვერსიაზე წვდომა შესაძლებელია VERSIONმოდულის კონსტრუქტორის საკუთრების მეშვეობით. მაგალითად, ხელსაწყოების მოდულისთვის:

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

არ არის სპეციალური ჩანაცვლება, როდესაც JavaScript გამორთულია

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

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

Tooltips და Popovers იყენებენ ჩვენს ჩაშენებულ სადეზინფექციო საშუალებებს იმ ვარიანტების გასაწმენდად, რომლებიც იღებენ HTML-ს.

ნაგულისხმევი 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)
  }
})