باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
Check
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()
})