ጃቫስክሪፕት።

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

ኣብዚ ገጽ

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

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

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

Bootstrap ከም ሞዱል ምጥቃም

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>

ዘይተሰማምዑ ፕላጊናት

ብሰንኪ ድሩትነት መርበብ ሓበሬታ ገለ ካብቶም ፕላጊናትና ማለት Dropdown, Tooltip and Popover plugins ኣብ ፖፐር ስለዝምርኮሱ ኣብ ዓይነት ዘለዎ <script>መለለዪ ክንጥቀመሎም ኣይክእሉን moduleእዮም። ብዛዕባ ’ ቲ ጉዳይ ዝያዳ ሓበሬታ ንምርካብ ኣብዚ ርአ ።

ጽግዕተኛታት

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

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

ሕጂ ውን jQuery ክትጥቀም ትደሊ? ይከኣል እዩ!

Bootstrap 5 ብዘይ jQuery ንኽትጥቀመሉ ዝተዳለወት ኮይና፡ ሕጂ ውን ምስ jQuery ንኣካላትና ምጥቃም ይከኣል እዩ። Bootstrap jQueryኣብቲ windowobject እንተረኺቡ ኩሎም ኣብ jQuery ፕላግ-ኢን ስርዓት ዘለዉ ኣካላትና ክውስኽ እዩ፤ $('[data-bs-toggle="tooltip"]').tooltip()እዚ ማለት ንመሳርሒታት ንምንቅስቓስ ክትገብሮ ትኽእል ኢኻ ። ንኻልኦት ኣካላትና እውን ከምኡ።

ናይ ዳታ ባህርያት

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

መምረጺታት

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

ፍጻሜታት

ቡትስትራፕ ንመብዛሕትኦም ፍሉያት ተግባራት ፕላጊናት ብሕታዊ ፍጻመታት ይህብ። ብሓፈሻ እዚኦም ብዘይውዳእን ሕሉፍ ረባሕታውን መልክዕ ይመጹ - ኣብዚ እቲ ዘይውዳእ (ex. show) ኣብ መጀመርታ ናይ ሓደ ፍጻመ ይብገስ፣ ሕሉፍ ረባሕታኡ መልክዑ (ex. shown) ድማ ምስ ምዝዛም ሓደ ተግባር ይብገስ።

ኩሎም ዘይውዳእ ፍጻመታት preventDefault()ተግባር ይህቡ። እዚ ድማ ቅድሚ ምጅማሩ ምፍጻም ሓደ ተግባር ደው ናይ ምባል ዓቕሚ ይህብ። ካብ ሓደ ናይ ፍጻመ መተሓላለፊ ሓሶት ምምላስ ’ ውን ብኣውቶማቲክ ክጽውዕ preventDefault()እዩ።

var myModal = document.getElementById('myModal')

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

jQuery ፍጻመታት

jQueryBootstrap ኣብቲ windowobject እንተሃልዩን ኣብ 1999 data-bs-no-jqueryዝተቐመጠ ባህሪ እንተዘይሃልዩን jQuery ክፈልጥ እዩ <body>። jQuery እንተተረኺቡ፡ Bootstrap ሳላ ናይ jQuery ስርዓተ ፍጻመታት ፍጻመታት ክለቅቕ እዩ። ስለዚ ናይ Bootstrap ፍጻመታት ክትሰምዕ እንተደሊኻ፡ ኣብ ክንዲ ን jQuery methods ( .on, ) ክትጥቀም ክትግደድ ኢኻ ።.oneaddEventListener

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

ፕሮግራማዊ ኤፒኣይ

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

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

ከምኡ’ውን ነቲ ፕላግ-ኢን ንምጅማር ኣብ ክንዲ DOM ባእታ ከም ቀዳማይ ሞጎተ CSS መምረጺ ክትጥቀም ትኽእል ኢኻ። ኣብዚ እዋን እዚ እቲ ንፕላግ-ኢን ዝኸውን ባእታ ብሜላ ይርከብ querySelectorምኽንያቱ ፕላጊናትና ንሓደ ባእታ ጥራይ ስለ ዝድግፉ።

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

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

ኩሎም ፕሮግራማዊ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም እቲ ምስግጋር ምስ ተጀመረ ግን ቅድሚ ምዝዛሙ ናብቲ ደዋሊ ይምለሱ ።

እቲ ምስግጋር ምስ ተዛዘመ ሓደ ተግባር ንምፍጻም፡ ነቲ ዝምልከቶ ፍጻመ ክትሰምዕ ትኽእል።

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

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

ቁጽሪ ስሪት።

VERSIONስሪት ናይ ነፍሲ ወከፍ ናይ ቡትስትራፕ ፕላግ-ኢናት ብመንገዲ ንብረት ናይቲ ፕላግ-ኢን ሃናጺ ክትረኽቦ ትኽእል ። ንኣብነት ንመሳርሒ ቲፕ ፕላግ-ኢን፤

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

ጃቫስክሪፕት ምስ ዝስረዝ ፍሉይ ምምላስ የለን

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

ናይ ሳልሳይ ወገን ቤተ መጻሕፍቲ

ቡትስትራፕ ከም ፕሮቶታይፕ ወይ jQuery UI ዝኣመሰሉ ናይ ሳልሳይ ወገን ጃቫስክሪፕት ቤተ-መጻሕፍቲ ብወግዒ ኣይድግፍን እዩ ። ዋላ እኳ .noConflictእንተሃለዉን ብስም ዝተቐመጡን ፍጻመታት፡ ባዕልኻ ክትእርሞም ዘለካ ናይ ምትእስሳር ጸገማት ክህልዉ ይኽእሉ እዮም።

ሳኒታይዘር

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

እቲ ነባሪ 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)
  }
})