JavaScript

Shakhsi ama la ururiyey

Plugins si gaar ah ayaa loogu dari karaa (iyadoo la adeegsanayo shakhsi Bootstrap js/dist/*.js), ama dhammaan hal mar la isticmaalayo bootstrap.jsama la dhimay bootstrap.min.js(ha ku darin labadaba).

Haddii aad isticmaasho xidhmo (Webpack, Rollup…), waxaad isticmaali kartaa /js/dist/*.jsfaylasha UMD diyaar ah.

Isticmaalka Bootstrap module ahaan

Waxaan bixinaa nooc ka mid ah Bootstrap loo dhisay sida ESM( bootstrap.esm.jsiyo bootstrap.esm.min.js) kaas oo kuu ogolaanaya inaad Bootstrap u isticmaasho biraawsarkaaga, haddii daalacashadaada la beegsanayo ay taageeraan .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Ku-tiirsanaanta

Qaybaha qaar iyo qaybaha CSS waxay ku xidhan yihiin plugins kale. Haddii aad si gaar ah ugu darto plugins, hubi inaad hubiso waxyaalahan ku-tiirsanaanta dukumentiyada.

Hoos-u-dhacyadayada, popovers iyo qalabyada qalabku waxay sidoo kale ku xiran yihiin Popper .

Weli ma rabtaa inaad isticmaasho jQuery? Waa suurtogal!

Bootstrap 5 waxaa loogu talagalay in loo isticmaalo jQuery la'aan, laakiin weli waa suurtogal in la isticmaalo qaybahayada jQuery. Haddii Bootstrap jQueryuu ku ogaado windowshayga wuxuu ku dari doonaa dhammaan qaybahayada nidaamka plugin jQuery; tani waxay la macno tahay inaad awoodid inaad samayso $('[data-bs-toggle="tooltip"]').tooltip()si aad awood ugu yeelato aaladaha. Waxa la mid ah qaybahayada kale.

Sifooyinka xogta

Ku dhawaad ​​​​dhammaan bootstrap plugins waa la awoodsiin karaa oo lagu habeyn karaa HTML oo keliya oo leh sifooyinka xogta (habka aan doorbideyno ee isticmaalka shaqeynta JavaScript). Hubi inaad isticmaasho hal sifo oo xogta ah oo keliya hal shay (tusaale, ma kicin kartid qalab iyo qaab isla badhanka.)

Dhacdooyinka

Bootstrap waxay siisaa dhacdooyin caado u ah inta badan ficilada gaarka ah ee plugins. Guud ahaan, kuwani waxay ku yimaadaan qaab aan dhammaad lahayn oo hore uga qayb-qaatay-halkaas oo aan dhammaad lahayn (tusaale ahaan show) uu kiciyo bilawga dhacdada, iyo qaabkeedii hore ee ka qaybqaadashada (tus. shown) uu kiciyo marka ficilku dhammeeyo.

Dhammaan dhacdooyinka aan dhamaadka lahayn waxay bixiyaan preventDefault()shaqeyn Tani waxay siinaysaa awoodda lagu joojinayo fulinta ficilka ka hor inta uusan bilaaban. Ka soo noqoshada beenta maamulaha dhacdada ayaa sidoo kale si toos ah u soo wici doona 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 Programmatic

Dhammaan dhisayaashu waxay aqbalaan shay ikhtiyaari ikhtiyaari ah ama waxba (kaas oo bilaabaya plugin leh dabeecaddiisa caadiga ah):

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

Haddii aad jeclaan lahayd inaad hesho tusaale plugin gaar ah, plugin kastaa wuxuu daaha ka qaadayaa getInstancehab. Si toos looga soo saaro curiyaha, samee sidan bootstrap.Popover.getInstance(myPopoverEl):.

Xulashada CSS ee dhisayaasha

Waxa kale oo aad isticmaali kartaa xulashada CSS sida doodda koowaad halkii aad ka isticmaali lahayd curiyaha DOM si aad u bilawdo plugin. Waqtigan xaadirka ah walxaha loogu talagalay plugin waxaa laga helaa querySelectorhabka maadaama pluginsyadayadu ay taageeraan hal element oo keliya.

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

Hawlaha iyo kala-guurka asynchronous

Dhammaan hababka API-ga ee barnaamijku waa isku mid oo ku soo noqda qofka soo wacaya marka kala guurka la bilaabo laakiin ka hor inta uusan dhammaan .

Si loo fuliyo ficil marka kala guurka la dhammeeyo, waxaad dhagaysan kartaa dhacdada u dhiganta.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

Intaa waxa dheer hab ku baaqaya qayb ka-wareejineed waa la iska indhatiraa .

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

Dejinta asalka ah

Waxaad ka beddeli kartaa habaynta caadiga ah ee plugin adiga oo wax ka beddelaya Constructor.Defaultshayga plugin:

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

Ma jiro khilaaf (kaliya haddii aad isticmaasho jQuery)

Mararka qaarkood waa lagama maarmaan in la isticmaalo bootstrap plugins oo leh qaabab kale oo UI ah. Duruufahaan, isku dhacyada meel magac ayaa marmar dhici kara. Haddii tani dhacdo, waxaad wici .noConflictkartaa plugin-ka aad rabto inaad dib u soo celiso qiimaha.

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

Nambarada nooca

Nooca mid kasta oo ka mid ah pluginsyada Bootstrap waxaa laga heli karaa iyada oo loo marayo VERSIONhantida dhisaha plugin. Tusaale ahaan, plugin tip-ka ah:

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

Ma jiro dib-u-dhac gaar ah marka JavaScript naafo yahay

Bootstrap's plugins si gaar ah dib uguma soo noqdaan marka JavaScript naafo yahay. Haddii aad danaynayso khibrada isticmaalaha kiiskan, isticmaal <noscript>si aad u sharaxdo xaalada (iyo sida dib loogu soo celiyo JavaScript) isticmaalayaashaada, iyo/ama ku darso dib-u-dhacyadaada caadada ah.

Nadiifiye

Aaladaha iyo Popovers waxay isticmaalaan nadiifiyaha ku dhex dhisan si ay u nadiifiyaan xulashooyinka aqbalaya HTML.

Qiimaha caadiga allowListah waa kan soo socda:

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: []
}

Haddii aad rabto inaad ku darto qiyam cusub default this allowListwaxaad samayn kartaa kuwan soo socda:

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)

Haddii aad rabto inaad dhaafto nadaafaddayada sababtoo ah waxaad doorbideysaa inaad isticmaasho maktabad gaar ah, tusaale ahaan DOMPurify , waa inaad sameyso waxyaabaha soo socda:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})