JaavaScript

Bootstrap gara jireenyaatti fidaa filannoo JavaScript plugins keenya jQuery irratti ijaarameen. Waa'ee tokkoon tokkoo pilaaginii, filannoowwan API deetaa fi sagantaa keenyaa fi kkf baradhu.

Dhuunfaa ykn qindaa’ee

Plugins dhuunfaan hammatamuu danda'u (Bootstrap's individual fayyadamuun js/dist/*.js), ykn hunda yeroo tokkotti fayyadamuun bootstrap.jsykn xiqqaate bootstrap.min.js(lamaanuu hin dabaliin).

Yoo bundler fayyadamte (Webpack, Rollup...), /js/dist/*.jsfaayiloota kanneen UMD qophaa'an fayyadamuu dandeessa.

Hirkatummaa

Plugins fi qaamolee CSS tokko tokko plugins biroo irratti hundaa'u. Yoo dhuunfaan ifteessitoota hammatte, hirkattummaa kana docs keessatti ilaaluu mirkaneessi. Akkasumas hubadhu, pilaaginoonni hundi jQuery irratti akka hirkatan (kana jechuun jQuery faayilii ifteessaa dura hammatamuu qaba jechuudha ). Gosoota jQuery kamtu akka deeggaramu ilaaluuf keenya ilaali .package.json

Dropdowns, popovers fi tooltipps keenyas Popper.js irratti hundaa'u .

Amaloota deetaa

Ijaarsiin Bootstrap hundi jechuun ni danda'ama karaa HTML qofa amaloota deetaa waliin dandeessisuun fi qindaa'uu danda'u (akkaataa keenya filatamaan hojii JavaScript fayyadamuu). Tuuta amaloota deetaa tokko qofa qaama tokko irratti fayyadamuu kee mirkaneessi (fkn, gorsa meeshaa fi moodaalii qaree walfakkaataa irraa kakaasuu hin dandeessu.)

Haa ta'u malee, haalawwan tokko tokko keessatti dalagaa kana hanqisuun barbaachisaa ta'uu danda'a. API amaloota deetaa hanqisuuf, taateewwan hunda galmee maqaa maqaa data-apiakkas waliin addaan baafaman irratti hiikaa:

$(document).off('.data-api')

Akka filannootti, ifteessaa murtaa'e irratti xiyyeeffachuuf, maqaa ifteessaa akka iddoo maqaatti iddoo maqaa deetaa-api waliin akkasitti qofa hammachuu:

$(document).off('.alert.data-api')

Taateewwan

Bootstrap taateewwan amala gochoota addaa plugins baay'eedhaaf kenna. Walumaagalatti, kunniin bifa xumura hin qabnee fi gocha darbeen dhufu - bakka xumura hin qabne (fkn show) jalqaba taatee tokkoo irratti kaka’u, fi bifa gocha isaa darbe (fk. shown) xumura gocha tokkoo irratti kaka’u.

Taateewwan dhuma hin qabne hundi preventDefault()dalagaa ni kennu. Kunis dandeettii raawwii gocha tokkoo osoo hin jalqabin dhaabuu kenna. Qabduu taatee irraa soba deebisuun ofumaan ni waama preventDefault().

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

API sagantaa

Akkasumas, Bootstrap plugins hunda karaa JavaScript API qulqulluu ta'een fayyadamuu danda'uu qabdu jennee amanna. APIwwan uummataa hundi malawwan tokko, sansalata qaban, fi walitti qabama irratti tarkaanfii fudhatame deebisu.

$('.btn.danger').button('toggle').addClass('fat')

Malleen hundi wanta filannoowwan filannoo, tarree mala murtaa'e irratti xiyyeeffatu, ykn homaa hin qabne (kan amala durtii waliin ifteessituu jalqabu) fudhachuu qabu:

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Tokkoon tokkoon ifteessaa akkasumas ijaarsa isaa raw Constructorqabeentaa irratti saaxilaa: $.fn.popover.Constructor. Yoo fakkeenya ifteessaa murtaa'e argachuu barbaadde, kallattiin elementii irraa fudhadhu: $('[rel="popover"]').data('popover').

Faankishiniiwwanii fi ce'umsawwan wal hin simne

Malleen API sagantaa hundi wal hin simne yoo ta'an erga ce'umsi jalqabame garuu osoo hin xumuramin gara waamichaatti deebi'u .

Erga ce'umsi xumuramee booda gocha tokko raawwachuuf, taatee walgitu dhaggeeffachuu dandeessa.

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Dabalataan waamichi malaa qaama ce'umsaa irratti ni tuffatama .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

Sajoo durtii

Sajoo durtii ifteessaa jijjiiruu dandeessa Constructor.Defaultwanta ifteessaa fooyyessuudhaan:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

Waldhabdee hin qabu

Yeroo tokko tokko Bootstrap plugins UI frameworks biroo wajjin fayyadamuun barbaachisaadha. Haalota kanneen keessatti, walitti bu'iinsi iddoo maqaa darbee darbee uumamuu danda'a. Yoo kun ta'e, .noConflictpilaaginii gatii isaa deebisuu barbaaddu bilbiluu dandeessa.

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

Lakkoofsa version

VERSIONVershiniin tokkoon tokkoo pilaaginii jQuery Bootstrap karaa qabeentaa ijaarsa ifteessaa argachuun ni danda'ama . Fakkeenyaaf, plugin tooltip tiif:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

Yeroo JaavaScript hanqifamu kufaatii addaa hin jiru

Bootstrap's plugins addatti yeroo JavaScript hanqifamu gracefully duubatti hin deebi'an. Yoo waa'ee muuxannoo fayyadamaa haala kana keessatti dhimmamte, <noscript>haala (fi akkaataa JaavaScript irra deebitee dandeessiftu) fayyadamtoota keetiif ibsuuf fayyadami, fi/ykn kufaatii amala mataa keetii itti dabali.

Util

Faayiloonni JaavaScript Bootstrap hundi irratti kan hundaa'an util.jsyoo ta'u faayiloota JaavaScript kanneen biroo cinatti hammatamuu qaba. Yoo qindaa'e (ykn xiqqaate) fayyadamaa jirta ta'e bootstrap.js, kana hammachuun hin barbaachisu—duraan jira.

util.jsfaankishiniiwwan faayidaa fi gargaaraa bu'uuraa transitionEndtaateewwaniif akkasumas fakkeenya ce'umsa CSS of keessatti qabata. Deeggarsa ce'umsa CSS sakatta'uuf akkasumas ce'umsa fannifame qabachuuf pilaaginoota birootiin fayyadama.

Saanitaayizarii

Tooltips fi Popovers filannoowwan HTML fudhatan qulqulleessuuf sanitizer keenya ijaarame fayyadamu.

Gatiin durtii whiteListkan armaan gadiiti:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // 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: []
}

Yoo gatiiwwan haaraa durtii kana irratti dabaluu barbaadde whiteListkanneen armaan gadii gochuu dandeessa:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-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-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Yoo sanitizer keenya bira darbuu barbaadde sababiin isaas mana kitaabaa addaa fayyadamuu filatte, fakkeenyaaf DOMPurify , kanneen armaan gadii gochuu qabda:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})