ጃቫስክሪፕት።

ቡትስትራፕ ብኣማራጺ ጃቫስክሪፕት ፕላጊናትና ህይወት ኣምጽእዎ። ብዛዕባ ነፍሲ ወከፍ ፕላግ-ኢን፡ ዳታናን ፕሮግራማዊ ኤፒኣይ ኣማራጺታትናን ካልእን ፍለጡ።

ኣብዚ ገጽ

ውልቃዊ ወይ ዝተጠርነፈ

ፕላጊናት ብውልቂ ክካተቱ ይኽእሉ (Bootstrap's individual ብምጥቃም js/dist/*.js), ወይ ኩሎም ብሓንሳብ ብምጥቃም bootstrap.jsወይ እቲ ዝተቐነሰ bootstrap.min.js(ክልቲኦም ኣይተካተቱ)።

bundler (Webpack, Parcel, Vite...) እንተተጠቒምካ /js/dist/*.js፡ UMD ድሉዋት ዝኾኑ ፋይላት ክትጥቀም ትኽእል ኢኻ።

ምስ ጃቫስክሪፕት ፍሬምዎርክስ ምጥቃም

ቡትስትራፕ ሲኤስኤስ ምስ ዝኾነ ፍሬምዎርክ ክጥቀመሉ ዝኽእል እኳ እንተኾነ ፡ ቡትስትራፕ ጃቫስክሪፕት ግን ምስ ከም ሪኣክት፡ ቪው፡ ኣንጉላር ዝኣመሰሉ ምሉእ ኣፍልጦ ናይ ዶም ዝግምቱ ጃቫስክሪፕት ፍሬምዎርክ ምሉእ ብምሉእ ኣይሰማማዕን እዩ። ክልቲኦም Bootstrapን frameworkን ሓደ ዓይነት DOM element ንምቕያር ክፍትኑ ይኽእሉ እዮም፣ ውጽኢቱ ድማ ከም dropdowns ዝኣመሰሉ ኣብቲ “ክፉት” ቦታ ዝተዓጽዉ ስሕተታት የስዕቡ።

ነቶም ነዚ ዓይነት ፍሬምዎርክ ዝጥቀሙ ዝሓሸ ኣማራጺ ኣብ ክንዲ ቡትስትራፕ ጃቫስክሪፕት ንፍሬምዎርክ ዝምልከት ፓኬጅ ምጥቃም እዩ። ገለ ካብቶም ኣዝዮም ተፈተውቲ ዝኾኑ ኣማራጺታት እዞም ዝስዕቡ እዮም፤

ሪኣክት ፡ ሪኣክት ቡትስትራፕ
Vue: BootstrapVue (ኣብዚ እዋን እዚ Vue 2ን Bootstrap 4ን ጥራይ እዩ ዝድግፍ)
ኩርናዓዊ ፡ ng-bootstrap ዝብል እዩ።

Bootstrap ከም ሞዱል ምጥቃም

ባዕልኻ ፈትኖ! Bootstrap ከም ES ሞዱል ንምጥቃም ዝሕግዝ ምንጪ ኮድን ናይ ስራሕ ዲሞን ካብ twbs/examples repository ኣውርድ ። ነቲ ኣብነት ኣብ StackBlitz ውን ክትከፍቶ ትኽእል ኢኻ ።

ESMንሕና ከም ( bootstrap.esm.jsand ) ዝተሃንጸ ስሪት ናይ Bootstrap ንህብ 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 bundlers ክነጻጸር ከሎ፡ ኣብ መርበብ ሓበሬታ ESM ምጥቃም ኣብ ክንዲ ስም ሞዱል ምሉእ መንገድን ስም ፋይልን ክትጥቀም የድልየካ። ብዛዕባ ሞዱላት JS ኣብቲ መርበብ ሓበሬታ ዝያዳ ኣንብብ። ስለዚ ኢና ድማ '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፡ መንገድታት ንምፍጻም ነቶም ፍቓደኛታት ኣስማት ሞዱላት ንምፍታሕ an ክትጥቀም ትኽእል። ዕላማ ዝገበርካዮም ዳህሰስቲ ን ፡ እንተዘይድጊፎም ፡ ፕሮጀክት 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>

ጽግዕተኛታት

ገለ ፕላጊናትን CSS ኣካላትን ኣብ ካልኦት ፕላጊናት ይምርኮሱ። ፕላጊናት ብውልቂ እንተ ኣካቲትካዮም፡ ነዞም ጽግዕተኛታት ኣብቲ docs ምፍታሽካ ኣረጋግጽ።

ናትና ድሮፕዳውንድስ፣ ፖፖቨርስ፣ ከምኡውን ቱልቲፕስ እውን ኣብ ፖፐር ይምርኮሱ ።

ናይ ዳታ ባህርያት

ዳርጋ ኩሎም Bootstrap plugins ብመንገዲ HTML ጥራይ ምስ data attributes (እቲ እንመርጾ ኣገባብ ኣጠቓቕማ JavaScript functionality) ክኽፈሉን ክውነኑን ይኽእሉ። ኣብ ሓደ ባእታ ሓደ ስብስብ ናይ ዳታ ባህርያት ጥራይ ምጥቃምካ ኣረጋግጽ (ንኣብነት፡ ካብ ሓደ መጠወቒ ንመሳርሒ ምኽሪን ሞዳልን ክትጅምር ኣይትኽእልን ኢኻ።)

ኣማራጺታት ብባህርያት ዳታ ወይ ጃቫስክሪፕት ክሓልፉ ስለ ዝኽእሉ 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}'and data-bs-title="456"attributes ምስ ዝህልዎ፡ እቲ ናይ መወዳእታ titleዋጋ ክኸውን እዩ 456፡ እቶም ዝተፈላለዩ ዳታ ባህርያት ድማ ነቶም ኣብ data-bs-config. ብተወሳኺ፡ ዝጸንሑ ባህርያት ዳታ ከም data-bs-delay='{"show":0,"hide":150}'.

መምረጺታት

ንሕና ንባእታታት DOM ብናይ ኣፈጻጽማ ምኽንያታት ንምሕታት ተወላዲን ሜላታትን ንጥቀም querySelector፣ ስለዚ ቅኑዓት መምረጺታት ክትጥቀም ኣለካ ። ፍሉያት መምረጺታት ከም ፡ እንተተጠቒምካሎም ፡ ካብኣቶም ምህዳምካ ኣረጋግጽ።querySelectorAllcollapse:Example

ፍጻሜታት

ቡትስትራፕ ንመብዛሕትኦም ፍሉያት ተግባራት ፕላጊናት ብሕታዊ ፍጻመታት ይህብ። ብሓፈሻ እዚኦም ብዘይውዳእን ሕሉፍ ረባሕታውን መልክዕ ይመጹ - ኣብዚ እቲ ዘይውዳእ (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
  }
})

ፕሮግራማዊ ኤፒኣይ

ኩሎም ሃነጽቲ ኣማራጺ ኣማራጺታት ነገር ወይ ዋላ ሓንቲ ኣይቅበሉን (እዚ ንሓደ ፕላግ-ኢን ብነባሪ ባህርያቱ የበግስ)፦

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 መምረጺታት

ብዘይካ እቲ getInstanceand 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')

ዘይተመዓራረዩ ተግባራትን ምስግጋራትን።

ኩሎም ፕሮግራማዊ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም እቲ ምስግጋር ምስ ተጀመረ ናብቲ ደዋሊ ይምለሱ፣ ግን ቅድሚ ምዝዛሙ . እቲ ምስግጋር ምስ ተዛዘመ ሓደ ተግባር ንምፍጻም፡ ነቲ ዝምልከቶ ፍጻመ ክትሰምዕ ትኽእል።

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 element ዝተዓቀበ ዳታ የወግድ)
`getInstance`	ምስ ሓደ DOM element ዝተኣሳሰር ሞዳል ኢንስታንስ ክትረክብ ዘኽእለካ ስታቲክ ሜላ።
`getOrCreateInstance`	ምስ ሓደ DOM element ዝተኣሳሰር ሞዳል ኢንስታንስ ክትረክብ ዘኽእለካ ስታትቲክ ሜላ፣ ወይ ድማ እንተዘይተጀሚሩ ሓድሽ ክትፈጥር ዘኽእለካ።

ስታትቲካዊ ንብረት	መግለፂ
`NAME`	ስም ናይቲ ፕላግ-ኢን ይመልስ። (ኣብነት `bootstrap.Tooltip.NAME`፡ )
`VERSION`	`VERSION`ስሪት ናይ ነፍሲ ወከፍ ናይ ቡትስትራፕ ፕላግ-ኢናት ብመንገዲ ንብረት ናይቲ ፕላግ-ኢን ሃናጺ ክትረኽቦ ትኽእል ኢኻ (ኣብነት: `bootstrap.Tooltip.VERSION`)

ሳኒታይዘር

Tooltips and Popovers ንኤችቲኤምኤል ዝቕበሉ ኣማራጺታት ንምጽራይ ኣብ ውሽጢ ዝተሃንጸ ሳኒታይዘርና ይጥቀሙ።

እቲ ነባሪ 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 ምጥቃም

ኣብ Bootstrap 5 jQuery ኣየድልየካን እዩ , ግን ሕጂ ውን ምስ jQuery ንኣካላትና ምጥቃም ይከኣል እዩ። Bootstrap jQueryኣብቲ windowobject እንተረኺቡ፡ ኩሎም ኣካላትና ኣብ 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 plugins ምስ ካልኦት UI frameworks ምጥቃም የድሊ። ኣብ ከምዚ ኩነታት፡ ሓሓሊፉ ናይ ስም ቦታ ምግጫው ከጋጥም ይኽእል። .noConflictእዚ እንተ ኣጋጢሙ ፡ ነቲ ዋጋኡ ክትመልሶ እትደሊ ፕላግ-ኢን ክትድውለሉ ትኽእል ኢኻ።

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

Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite .noConflict and namespaced events, there may be compatibility problems that you need to fix on your own.

jQuery events

Bootstrap will detect jQuery if jQuery is present in the window object and there is no data-bs-no-jquery attribute set on <body>. If jQuery is found, Bootstrap will emit events thanks to jQuery’s event system. So if you want to listen to Bootstrap’s events, you’ll have to use the jQuery methods (.on, .one) instead of addEventListener.

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

Disabled JavaScript

ጃቫስክሪፕት ምስ ዝስረዝ ናይ ቡትስትራፕ ፕላጊናት ፍሉይ ፋልባክ የብሎምን። ኣብዚ ጉዳይ እዚ ብዛዕባ ተመኩሮ ተጠቃሚ ትግደስ እንተኾንካ <noscript>፡ ነቲ ኩነታት ንምግላጽ (ከምኡ’ውን ከመይ ጌርካ ጃቫስክሪፕት ዳግማይ ከም እተኽእሎ) ንተጠቀምትኻ ንምግላጽ፡ ከምኡ’ውን/ወይ ናይ ገዛእ ርእስኻ ብሕታዊ ምምላስ ንምውሳኽ ተጠቐም።