Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
Check
in English

Alertak

Eman erabiltzailearen ohiko ekintzetarako testuinguruko iritzi-mezuak alerta-mezu erabilgarri eta malgu gutxi batzuekin.

Orrialde honetan

Adibideak

Alertak eskuragarri daude edozein testu luzerako, baita aukerako ixteko botoia ere. Estilo egokia lortzeko, erabili behar diren zortzi testuinguru-klaseetako bat (adibidez, .alert-success). Lineako kaleratzea egiteko, erabili alertak JavaScript plugina .

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>
Laguntza-teknologiei esanahia ematea

Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .visually-hiddenklasearekin ezkutatuta dagoen testu gehigarria.

Zuzeneko adibidea

Egin klik beheko botoian alerta bat erakusteko (hasteko lerroko estiloekin ezkutatuta), gero baztertu (eta suntsitu) itxiera-botoiarekin.

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

JavaScript hau erabiltzen dugu gure zuzeneko alerta-demoa abiarazteko:

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

Erabili .alert-linkerabilgarritasun-klasea edozein alertaren barruan bat datozen koloretako estekak azkar emateko.

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>

Eduki gehigarriak

Alertak HTML elementu osagarriak ere izan ditzakete, hala nola goiburuak, paragrafoak eta zatitzaileak.

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>

Ikonoak

Era berean, flexbox utilitateak eta Bootstrap ikonoak erabil ditzakezu ikonoekin alertak sortzeko. Zure ikonoen eta edukiaren arabera, baliteke utilitate edo estilo pertsonalizatu gehiago gehitu nahi izatea.

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>

Ikono bat baino gehiago behar dituzu zure abisuetarako? Demagun Bootstrap ikono gehiago erabiltzea eta tokiko SVG sprite bat egitea ikono berdinak behin eta berriz erraz erreferentzia egiteko.

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>

Baztertuz

Alerta JavaScript plugina erabiliz, posible da edozein alerta linean baztertzea. Hona hemen nola:

  • Ziurtatu alerta-plugin-a edo konpilatutako Bootstrap JavaScript kargatu duzula.
  • Gehitu ixteko botoia eta .alert-dismissibleklasea, alertaren eskuinaldean betegarri gehigarria gehitzen duena eta ixteko botoia jartzen duena.
  • Itxi botoian, gehitu data-bs-dismiss="alert"atributua, eta horrek JavaScript funtzionaltasuna abiarazten du. Ziurtatu <button>elementua harekin erabiltzen duzula gailu guztietan portaera egokia izateko.
  • Baztertzean alertak animatzeko, ziurtatu .fadeeta .showklaseak gehitzen dituzula.

Hau ekintzan ikus dezakezu zuzeneko demo batekin:

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>
Alerta bat baztertzen denean, elementua orri-egituratik guztiz kentzen da. Teklatuaren erabiltzaile batek itxiera botoia erabiliz alerta baztertzen badu, bere arreta galduko da bat-batean eta, nabigatzailearen arabera, orriaren/dokumentuaren hasierara berrezarri. Hori dela eta, closed.bs.alertgertaera entzuten duen eta programazioz focus()orrialdeko kokapen egokiena ezartzen duen JavaScript gehigarria sartzea gomendatzen dugu. Fokua normalean fokurik jasotzen ez duen elementu ez-interaktibo batera mugitzeko asmoa baduzu, ziurtatu tabindex="-1"elementuari gehitzen duzula.

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren zati gisa, alertek CSS aldagai lokalak aktibatuta .alerterabiltzen dituzte denbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$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 aldagaiak

$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 nahasketa

$theme-colorsGure abisuetarako testuinguru modifikatzaileen klaseak sortzeko konbinatuta erabiltzen da .

@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 begizta

alert-variant()Mixin -arekin modifikatzaile-klaseak sortzen dituen begizta.

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

JavaScript portaera

Hasieratu

Hasieratu elementuak alerta gisa

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

Alerta bat baztertzeko helburu bakarrarekin, ez da beharrezkoa osagaia eskuz hasieratzea JS APIaren bidez. Erabiliz data-bs-dismiss="alert", osagaia automatikoki hasieratuko da eta behar bezala baztertuko da.

Ikusi abiarazleak atala xehetasun gehiago lortzeko.

Abiarazleak

Kaleratzea alertaren barruan dagoendata botoi baten atributuarekin lor daiteke, behean erakusten den moduan:

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

edo alertatik kanpokodata-bs-target botoi batean behean erakusten den moduan erabiliz :

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

Kontuan izan alerta bat ixteak DOMetik kenduko duela.

Metodoak

Alerta-instantzia bat sor dezakezu alerta-eraikitzailearekin, adibidez:

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

Horrek alerta bat entzuten du data-bs-dismiss="alert"atributua duten ondorengo elementuetan klik-gertaerak. (Ez da beharrezkoa data-api-ren hasierako automatikoki erabiltzean.)

Metodoa Deskribapena
close Alerta bat ixten du DOMetik kenduta. Elementuan .fadeeta .showklaseak badaude, alerta desagertuko da kendu aurretik.
dispose Elementu baten alerta suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu)
getInstance Metodo estatikoa DOM elementu bati lotutako alerta instantzia lortzeko aukera ematen duena. Adibidez: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Metodo estatikoa, DOM elementu bati lotutako alerta-instantzia bat itzultzen duena edo berri bat sortzen duena hasieratu ez bazen. Honela erabil dezakezu: bootstrap.Alert.getOrCreateInstance(element).

Oinarrizko erabilera:

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

Gertaerak

Bootstrap-en alerta-pluginak gertaera batzuk erakusten ditu alerta-funtzionalitatean konektatzeko.

Gertaera Deskribapena
close.bs.alert closeInstantzia metodoari deitzen zaionean berehala pizten da.
closed.bs.alert Alerta itxi eta CSS trantsizioak amaitu direnean piztu da. 
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()
})