in English

ئاگادارکردنەوەکان

پەیامی فیدباکەکانی ناوەڕۆک بۆ کردارە ئاساییەکانی بەکارهێنەر لەگەڵ مشتێک پەیامی ئاگادارکردنەوەی بەردەست و نەرم دابین بکە.

لەم پەیجەدا

نموونە

ئاگادارکردنەوەکان بۆ هەر درێژی دەقێک بەردەستە، هەروەها دوگمەی داخستنی ئیختیاری. بۆ ستایلکردنی دروست، یەکێک لە هەشت پۆلی پێویستی کۆنتێکست بەکاربهێنە (بۆ نموونە، .alert-success). بۆ دەرکردنی ناو هێڵ، پێوەکراوەکەی جاڤاسکڕێپتی ئاگادارکردنەوە بەکاربهێنە .

ئاگادارکردنەوەیەکی سەرەتایی سادە-سەیری بکە!

ئاگادارکردنەوەیەکی لاوەکی سادە-سەیری بکە!

ئاگادارکردنەوەیەکی سادەی سەرکەوتن-سەیری بکە!

ئاگادارکردنەوەیەکی سادەی مەترسی-سەیری بکە!

ئاگادارکردنەوەیەکی سادەی ئاگادارکردنەوە-سەیری بکە!

ئاگادارکردنەوەیەکی زانیاری سادە-سەیری بکە!

ئاگادارکردنەوەیەکی سادەی ڕووناکی-سەیری بکە!

ئاگادارکردنەوەیەکی تاریکی سادە- سەیری بکە!

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ی زیادە وەک سەردێڕ، پەرەگراف و دابەشکەر لەخۆ بگرن.

زۆر باشە!

ئاو بەڵێ، تۆ بە سەرکەوتوویی ئەم پەیامە ئاگادارکردنەوە گرنگە خوێندەوە. ئەم دەقە نموونەییە کەمێک درێژتر کاردەکات بۆ ئەوەی بزانیت چۆن دووری لەناو ئاگادارکردنەوەیەکدا لەگەڵ ئەم جۆرە ناوەڕۆکەدا کاردەکات.

هەرکاتێک پێویستت پێی بوو، دڵنیابە کە سوودمەندییەکانی پەراوێز بەکاربهێنە بۆ ئەوەی شتەکان بە جوانی و ڕێک و پێک بمێننەوە.

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

پێویستت بە زیاتر لە یەک ئایکۆنە بۆ ئاگادارکردنەوەکانت؟ بیر لەوە بکەرەوە کە ئایکۆنی زیاتری Bootstrap بەکاربهێنیت و سپرایتی SVGی ناوخۆیی وەک ئەوە بکەیت بۆ ئەوەی بە ئاسانی ئاماژە بە هەمان ئایکۆنەکان دووبارە و سێبارە بکەیتەوە.

ئاگادارکردنەوەیەکی نموونەیی بە ئایکۆنێکەوە

نموونەی ئاگادارکردنەوەی سەرکەوتن بە ئایکۆنێک

نموونەیەکی ئاگادارکردنەوەی ئاگادارکردنەوە بە ئایکۆنێک

نموونەی ئاگادارکردنەوەی مەترسی بە ئایکۆنێکەوە

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>

دەرکردن

بە بەکارهێنانی پێوەکراوەکەی جاڤاسکڕێپتی ئاگادارکردنەوە، دەتوانرێت هەر ئاگادارکردنەوەیەک لەناو هێڵدا ڕەت بکرێتەوە. لێرەدا چۆنیەتی:

دڵنیابە کە پێوەکراوەکەی ئاگادارکردنەوەت بارکردووە، یان جاڤاسکڕێپتی Bootstrap ی کۆکراوە.
دوگمەی داخستنی زیاد بکە و .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 زیاد کراوە

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS پەرەسەندووەکانی Bootstrap، ئێستا ئاگادارکردنەوەکان گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنن .alertبۆ بەرزکردنەوەی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی 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};

گۆڕاوەکانی ساس

$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

ساس میکسین

بەکاردێت بە تێکەڵکردن لەگەڵ $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%);
  }
}

لوپی ساس

لوپێک کە پۆلەکانی دەستکاریکەر بە 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", پێکهاتەکە بە شێوەیەکی ئۆتۆماتیکی دەستپێدەکات و بە شێوەیەکی دروست ڕەتدەکرێتەوە.

بۆ زانیاری زیاتر سەیری بەشی triggers بکە.

دەستپێکەرەکان

دەتوانرێت دەرکردن بە 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"تایبەتمەندیەکەیان هەیە. (پێویست نییە لە کاتی بەکارهێنانی دەستپێکردنی ئۆتۆماتیکی data-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`	کاتێک ئاگادارکردنەوەکە داخراوە و گواستنەوەکانی CSS تەواو بوون، کاردەکاتە دەرەوە.

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()
})