ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
Check
in English

ማንቂያዎች

በጣት በሚቆጠሩ እና በተለዋዋጭ የማንቂያ መልእክቶች ለተለመደ የተጠቃሚ እርምጃዎች የአውድ ግብረመልስ መልዕክቶችን ያቅርቡ።

በዚህ ገጽ ላይ

ምሳሌዎች

ማንቂያዎች ለማንኛውም የጽሑፍ ርዝመት እና እንደ አማራጭ የመዝጊያ ቁልፍ ይገኛሉ። ለትክክለኛው የቅጥ አሰራር፣ ከስምንቱ አስፈላጊ የአውድ ክፍሎች አንዱን ተጠቀም (ለምሳሌ .alert-success፡)። ለውስጥ መስመር ስንብት፣ ማንቂያዎቹን ይጠቀሙ JavaScript plugin .

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
ለረዳት ቴክኖሎጂዎች ትርጉም መስጠት

ትርጉምን ለመጨመር ቀለምን መጠቀም ምስላዊ ማሳያን ብቻ ያቀርባል, ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች አይተላለፍም - እንደ ስክሪን አንባቢዎች. በቀለም የተወከለው መረጃ ከይዘቱ (ለምሳሌ ከሚታየው ጽሑፍ) ግልጽ መሆኑን ወይም በአማራጭ ዘዴዎች መካተቱን ያረጋግጡ፣ ለምሳሌ .visually-hiddenከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

የቀጥታ ምሳሌ

ማንቂያውን ለማሳየት ከታች ያለውን ቁልፍ ጠቅ ያድርጉ (ለመጀመር ከውስጥ ስልቶች ጋር ተደብቋል)፣ በመቀጠል አብሮ በተሰራው የመዝጊያ ቁልፍ ያጥፉት (እና ያጠፉት)።

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

የቀጥታ ማንቂያ ማሳያችንን ለማስነሳት የሚከተለውን ጃቫ ስክሪፕት እንጠቀማለን፡

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

.alert-linkበማንኛውም ማንቂያ ውስጥ ተዛማጅ ቀለም ያላቸው አገናኞችን በፍጥነት ለማቅረብ የመገልገያ ክፍሉን ይጠቀሙ ።

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

ተጨማሪ ይዘት

ማንቂያዎች እንደ አርእስት፣ አንቀጾች እና አካፋዮች ያሉ ተጨማሪ የኤችቲኤምኤል ክፍሎችን ሊይዝ ይችላል።

html 
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

አዶዎች

በተመሳሳይ፣ ከአዶዎች ጋር ማንቂያዎችን ለመፍጠር flexbox utilities እና Bootstrap Icons መጠቀም ይችላሉ። በእርስዎ አዶዎች እና ይዘቶች ላይ በመመስረት፣ ተጨማሪ መገልገያዎችን ወይም ብጁ ቅጦችን ማከል ይፈልጉ ይሆናል።

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

ለማንቂያዎችዎ ከአንድ በላይ አዶ ይፈልጋሉ? ተመሳሳዩን አዶዎች በቀላሉ ለመጥቀስ ተጨማሪ የቡት ስታራፕ አዶዎችን ለመጠቀም እና እንደዚ አይነት የSVG sprite ለመስራት ያስቡበት።

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

ማሰናበት

ማንቂያውን ጃቫስክሪፕት ተሰኪን በመጠቀም ማንኛውንም ማንቂያ ከውስጥ መስመር ማሰናበት ይቻላል። እንዴት እንደሆነ እነሆ፡-

  • የማንቂያ ተሰኪውን ወይም የተቀናበረውን ቡትስትራፕ ጃቫስክሪፕት እንደጫኑ እርግጠኛ ይሁኑ።
  • በማንቂያው በቀኝ በኩል ተጨማሪ ፓዲንግ የሚጨምር እና የመዝጊያ ቁልፍን የሚያስቀምጥ የመዝጊያ ቁልፍ እና ክፍሉን ያክሉ ።.alert-dismissible
  • በመዝጊያው ቁልፍ data-bs-dismiss="alert"ላይ የጃቫስክሪፕት ተግባርን የሚቀሰቅሰውን ባህሪ ያክሉ። <button>በሁሉም መሳሪያዎች ላይ ለትክክለኛ ባህሪ ከእሱ ጋር ያለውን ንጥረ ነገር መጠቀምዎን ያረጋግጡ ።
  • ማንቂያዎችን ሲያሰናብቱ ለማንቃት፣ ክፍሎቹን .fadeእና .showክፍሎችን ማከልዎን ያረጋግጡ።

በቀጥታ ማሳያ ይህንን በተግባር ማየት ይችላሉ፡-

html 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
ማንቂያ ከተሰናበተ ኤለመንቱ ከገጹ መዋቅር ሙሉ በሙሉ ይወገዳል. አንድ የቁልፍ ሰሌዳ ተጠቃሚ ማንቂያውን የመዝጊያ ቁልፍን ተጠቅሞ ካሰናበተ ትኩረታቸው በድንገት ይጠፋል እና በአሳሹ ላይ በመመስረት ወደ ገፁ/ሰነዱ መጀመሪያ ይጀምራል። በዚህ ምክንያት ዝግጅቱን የሚያዳምጥ እና በገጹ ውስጥ በጣም ተስማሚ ወደሆነው ቦታ closed.bs.alertበፕሮግራም የሚዘጋጅ ተጨማሪ ጃቫ ስክሪፕት እንዲያካትቱ እንመክራለን ። focus()ትኩረትን ወደ መስተጋብር ወደሌለው አካል ለማንቀሳቀስ እያሰብክ ከሆነ በተለምዶ ትኩረትን ወደማይቀበል ንጥረ ነገር ማከልህን አረጋግጥ tabindex="-1"።

CSS

ተለዋዋጮች

በ v5.2.0 ውስጥ ተጨምሯል

እንደ የ Bootstrap የ CSS ተለዋዋጮች አቀራረብ አካል፣ ማንቂያዎች አሁን .alertለተሻሻለ ቅጽበታዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን ይጠቀማሉ። የCSS ተለዋዋጮች እሴቶች በ Sass በኩል ተቀናብረዋል፣ ስለዚህ Sass ማበጀት አሁንም ይደገፋል።

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Sass ተለዋዋጮች

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Sass ቅልቅል

$theme-colorsለማንቂያዎቻችን የአውድ ማሻሻያ ክፍሎችን ለመፍጠር ከ ጋር በማጣመር ጥቅም ላይ ይውላል ።

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Sass loop

የመቀየሪያ ክፍሎችን ከድብልቅ ጋር የሚያመነጭ ሉፕ alert-variant()።

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

የጃቫስክሪፕት ባህሪ

አስጀምር

ክፍሎችን እንደ ማንቂያ አስጀምር

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

ማንቂያን ለማሰናበት ብቸኛ ዓላማ፣ አካሉን በJS API በኩል በእጅ ማስጀመር አስፈላጊ አይደለም። አጠቃቀሙን በመጠቀም data-bs-dismiss="alert"ክፍሉ በራስ-ሰር ይጀመራል እና በትክክል ይሰረዛል።

ለተጨማሪ ዝርዝሮች ቀስቅሴዎችን ክፍል ይመልከቱ።

ቀስቅሴዎች

ማሰናበት ከታች እንደሚታየው በማንቂያው ውስጥdata ባለ አዝራር ላይ ባለው ባህሪ ሊገኝ ይችላል

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

ወይም ከታች እንደሚታየው በመጠቀም ከማንቂያው ውጪ ባለው አዝራር ላይ፡-data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

ማንቂያውን መዝጋት ከDOM እንደሚያስወግደው ልብ ይበሉ።

ዘዴዎች

ከማንቂያ ገንቢው ጋር የማንቂያ ምሳሌ መፍጠር ይችላሉ፣ ለምሳሌ፡-

const bsAlert = new bootstrap.Alert('#myAlert')

ይህ ባህሪ ባላቸው የትውልድ አካላት ላይ ጠቅ የሚደረጉ ክስተቶችን ማንቂያ እንዲያዳምጥ ያደርገዋል data-bs-dismiss="alert"። (የዳታ-api ራስ-አስጀማሪን ሲጠቀሙ አስፈላጊ አይደለም።)

ዘዴ መግለጫ
close ማንቂያውን ከDOM በማስወገድ ይዘጋል። ክፍሎቹ .fadeእና .showክፍሎቹ በንጥሉ ላይ ካሉ፣ ከመውጣቱ በፊት ማንቂያው ይጠፋል።
dispose የአንድን ንጥረ ነገር ማንቂያ ያጠፋል. (የተከማቸ ውሂብ በ DOM አባል ላይ ያስወግዳል)
getInstance ከDOM ኤለመንት ጋር የተገናኘውን የማንቂያ ምሳሌ ለማግኘት የሚያስችል የማይንቀሳቀስ ዘዴ። ለምሳሌ bootstrap.Alert.getInstance(alert)፡.
getOrCreateInstance ከDOM ኤለመንት ጋር የተያያዘ ማንቂያ ምሳሌን የሚመልስ ወይም ካልተጀመረ አዲስ የሚፈጥር የማይንቀሳቀስ ዘዴ። እንደሚከተለው ሊጠቀሙበት ይችላሉ bootstrap.Alert.getOrCreateInstance(element):.

መሰረታዊ አጠቃቀም፡-

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

ክስተቶች

የቡትስትራፕ ማንቂያ ተሰኪ ወደ ማንቂያ ተግባር ለመግባት ጥቂት ክስተቶችን ያጋልጣል።

ክስተት መግለጫ
close.bs.alert closeየምሳሌው ዘዴ ሲጠራ ወዲያውኑ ይቃጠላል .
closed.bs.alert ማንቂያው ሲዘጋ እና የሲኤስኤስ ሽግግሮች ሲጠናቀቁ ተባረሩ። 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})