Alertak
Eman erabiltzailearen ohiko ekintzetarako testuinguruko iritzi-mezuak alerta-mezu erabilgarri eta malgu gutxi batzuekin.
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 .
<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-hidden
klasearekin ezkutatuta dagoen testu gehigarria.
Zuzeneko adibidea
Egin klik beheko botoian alerta bat erakusteko (hasteko lerroko estiloekin ezkutatuta), gero baztertu (eta suntsitu) itxiera-botoiarekin.
<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:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
alert('Nice, you triggered this alert message!', 'success')
})
}
Estekaren kolorea
Erabili .alert-link
erabilgarritasun-klasea edozein alertaren barruan bat datozen koloretako estekak azkar emateko.
<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.
Ongi egina!
Aww, bai, ondo irakurri duzu alerta-mezu garrantzitsu hau. Testu adibide hau pixka bat gehiago luzatuko da, alerta baten barruko tarteak mota honetako edukiekin nola funtzionatzen duen ikus dezazun.
Behar duzun bakoitzean, ziurtatu marjina utilitateak erabiltzen dituzula gauzak ondo eta txukun mantentzeko.
<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.
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 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.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" 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" fill="currentColor" 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" fill="currentColor" 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" width="24" height="24" 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" width="24" height="24" 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" width="24" height="24" 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" width="24" height="24" 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-dismissible
klasea, 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
.fade
eta.show
klaseak gehitzen dituzula.
Hau ekintzan ikus dezakezu zuzeneko demo batekin:
<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
gertaera 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.
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
Nahasketa aldaera
$theme-colors
Gure abisuetarako testuinguru modifikatzaileen klaseak sortzeko konbinatuta erabiltzen da .
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
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
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return 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
Metodoa | Deskribapena |
---|---|
close |
Alerta bat ixten du DOMetik kenduta. Elementuan .fade eta .show klaseak 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, honela erabil dezakezu: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) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Gertaerak
Bootstrap-en alerta-pluginak gertaera batzuk erakusten ditu alerta-funtzionalitatean konektatzeko.
Gertaera | Deskribapena |
---|---|
close.bs.alert |
close Instantzia metodoari deitzen zaionean berehala pizten da. |
closed.bs.alert |
Alerta itxi eta CSS trantsizioak amaitu direnean piztu da. |
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// 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()
})