U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Digniin

Bixi fariimaha jawaab celinta macnaha guud ee ficilada isticmaale ee caadiga ah oo leh farriimaha digniinta ee la heli karo oo dabacsan.

Boggan

Tusaalooyinka

Ogeysiisyada ayaa diyaar u ah dherer kasta oo qoraal ah, iyo sidoo kale badhanka xidhitaanka ee ikhtiyaarka ah. Si loo habeeyo habboon, isticmaal mid ka mid ah siddeedda fasal ee loo baahan yahay macnaha guud (tusaale, .alert-success). Eryidda khadka dhexda ah, isticmaal ogeysiisyada 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>
U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.

Tusaale nool

Guji badhanka hoose si aad u muujiso digniin (ku qarsoon qaababka khad dhexdeedka ah si aad u bilowdo),ka dibna ka saar (oo burburiso) adigoo isticmaalaya badhanka ku dhex jira.

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

Waxaan isticmaalnaa JavaScript-ka soo socda si aan u kicino muujinta digniinta tooska ah:

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

Isticmaal .alert-linkfasalka utility si aad si deg deg ah u bixiso iskuxiryada midabada leh ee digniin kasta.

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>

Waxyaabo dheeraad ah

Ogeysiisyadu sidoo kale waxay ka koobnaan karaan walxo HTML dheeraad ah sida cinwaan, cutubyo iyo qaybiyayaal.

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>

Astaamo

Sidoo kale, waxaad isticmaali kartaa utility flexbox iyo Bootstrap Icons si aad u abuurto digniino leh astaamo. Iyada oo ku xidhan summadaada iyo waxa ku jira, waxa laga yaabaa inaad rabto inaad ku darto agabyo badan ama qaabab gaar ah.

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>

Ma u baahan tahay wax ka badan hal calaamad digniinahaaga? Tixgeli inaad isticmaasho astaamo badan oo Bootstrap ah oo aad samayso SVG sprite sida si aad si sahal ah ugu tixraacdo isla summadan si isdaba joog ah.

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>

Xil ka qaadis

Adeegsiga digniinta JavaScript plugin, waxa suurtogal ah in meesha laga saaro digniin kasta oo khadka ah. Waa kan sida:

  • Hubi inaad ku shubtay furaha digniinta, ama Bootstrap JavaScript-ka la soo ururiyey.
  • Ku dar badhan dhow iyo .alert-dismissiblefasalka, kaas oo ku daraya suuf dheeraad ah dhanka midig ee digniinta oo dhigaysa badhanka dhow.
  • Badhanka dhow, ku dar data-bs-dismiss="alert"sifada, taas oo kicinaysa shaqeynta JavaScript. U hubso inaad u isticmaasho <button>curiyaha leh hab-dhaqan habboon dhammaan qalabka.
  • Si aad u kiciso ogeysiisyada marka aad shaqada ka cayrinayso, hubi inaad ku darto .fadeiyo .showfasallada.

Waxaad tan ku arki kartaa iyadoo la adeegsanayo bandhig toos ah:

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>
Marka digniinta la joojiyo, curiyaha gabi ahaanba waa laga saarayaa qaab dhismeedka bogga. Haddii isticmaalaha kiiboodhka uu ka diro digniinta isagoo isticmaalaya badhanka u dhow, diiradda ayaa si lama filaan ah u lumi doonta, waxayna ku xidhan tahay browserka, dib u dajinta bilawga bogga/dokumentiga. Sababtan awgeed, waxaan kugula talineynaa in lagu daro JavaScript dheeri ah oo dhageysata closed.bs.alertmunaasabadda oo si barnaamij ah focus()u dejisa meesha ugu habboon ee bogga. Haddii aad qorshaynayso inaad u guurto diiradda shay aan dhexgal ahayn oo sida caadiga ah aan helin diiradda, hubi inaad ku darto tabindex="-1"curiyaha.

CSS

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, ogeysiisyadu hadda waxay adeegsadaan doorsoomayaasha CSS-ta maxalliga ah .alertsi loo horumariyo habaynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

  --#{$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};

Doorsoomayaasha 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 mixin

Loo isticmaalo in lagu daro $theme-colorssi loo abuuro fasalo wax ka beddelka macnaha guud ee digniintayada.

@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

Loop kaas oo abuura fasalada wax ka beddelka ee isku- alert-variant()dhafka ah.

// 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);
  }
}

Dhaqanka JavaScript

Bilow

Curiyayaasha u bilow digniin ahaan

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

Ujeeddada kaliya ee digniinta la iska diray, muhiim maaha in gacanta lagu bilaabo qaybta JS API. Isticmaalka data-bs-dismiss="alert", qaybta si toos ah ayaa loo bilaabi doonaa oo si sax ah ayaa loo burin doonaa.

Faahfaahin dheeraad ah ka eeg qaybta kicinta .

Kiciyeyaasha

Cayrinta waxaa lagu gaari karaa datasifada ku taal badhan gudaha digniinta sida hoos ku cad:

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

ama badhan ka baxsan digniinta adoo isticmaalaya data-bs-targetsida hoos ku cad:

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

Ogsoonow in xidhitaanka digniinta ay ka saari doonto DOM.

Hababka

Waxaad ku abuuri kartaa tusaale digniin ah dhisaha digniinta, tusaale ahaan:

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

Tani waxay ka dhigaysaa digniin in la dhagaysto dhacdooyinka gujiska ah ee walxaha faraca leh ee leh data-bs-dismiss="alert"sifada. ( Looma baahna marka la isticmaalayo xogta-api si toos ah u bilaabay.)

Habka Sharaxaada
close Xidhaa digniinta adoo ka saaraya DOM Haddii fasalada .fadeiyo .showfasaladu ay ku jiraan curiyaha, digniintu way libdhi doontaa ka hor intaan la saarin.
dispose Waxay baabi'isaa digniinta curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)
getInstance Habka taagan ee kuu ogolaanaya inaad hesho tusaalaha digniinta ee la xidhiidha curiyaha DOM. Tusaale ahaan bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Habka taagan ee soo celiya tusaale digniin ah oo la xidhiidha curiyaha DOM ama abuura mid cusub haddii aan la bilaabin. Waxaad u isticmaali kartaa sidan bootstrap.Alert.getOrCreateInstance(element):.

Isticmaalka aasaasiga ah:

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

Dhacdooyinka

Bootstrap's alert plugin wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta digniinta.

Dhacdo Sharaxaada
close.bs.alert Dab isla markiiba marka closehabka tusaale ahaan la yiraahdo.
closed.bs.alert La eryo marka digniinta la xiro iyo kala-guurka CSS la dhammeeyay. 
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()
})