Alerts
Praebere contextuales feedback nuntios pro usuario actuum typicorum cum paucis nuntiis promptorum et flexibilium erectorum.
Exempla
Artes in promptu sunt ad cuiuslibet textus longitudinis, necnon ad conjunctionem proximam libitum. Ad propriam phrasim, uti una ex octo classibus contextualis (eg, ) requiritur . .alert-success
Pro inline dimissione, utere in summis JavaScript plugin .
<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>
Deferre significatio technologiae adiuvandae
Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .visually-hidden
genere.
Vivamus exemplum
Preme pyga infra ut stylum (abditum cum stylis inlineis incipere), dimitte (et destrue) eam cum constructo in proxima conjunctione.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Utimur in sequentibus JavaScript ad trigger intenti demo vivant nostram:
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')
})
}
Link color
Classis utilitate utere .alert-link
ut cito adaptare nexus coloratos in quibusvis intenti.
<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>
Additional content
Alerts etiam elementa HTML additamenta continere possunt sicut capita, paragraphos et divisores.
Bene factum!
Aww yeah, feliciter hoc nuntium intentum magnum lege. Hoc exemplum textum paulo longiorem futurum est ut videre potes quomodo intra intenti opera cum huiusmodi contenti spacia perspicias.
Quotiens opus est, scito margine utilitatum ad res conservandas lepida et luculenta uti.
<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>
Icones
Similiter, flexbox utilitatibus uti potes et Icones Bootstrap ad summis cum iconibus creare. Secundum icones tuas et argumenta plus utilitatis vel styli consuetudinis addere velis.
<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>
Plus quam una icon pro summis montibus opus est? Pluribus Bootstrap Iconibus adhibitis considera ac spiritu SVG locali similem fieri, ut facile easdem icones saepe referat.
<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>
dimissis
Plugin utens intento JavaScript, possibile est aliquem intentum inlineare. Ecce quomodo:
- Vide plugin intenti te onustum vel JavaScript Bootstrap compilavit.
- Bullam arctam et genus adde
.alert-dismissible
, quod addit additamentum ad ius intenti et positionem clausulam bullam. - In proxima conjunctione,
data-bs-dismiss="alert"
attributum adde, quod JavaScript functionality efficit. Fac uti<button>
elementum cum eo ad mores per omnes machinas. - Animas erectas dimittentes, certas
.fade
ac.show
classes addere.
Hoc in actu videre potes cum demo vivam:
<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
eventum audit et programmatice
focus()
ad aptissimum locum in pagina ponit. Si vis movere focus ad elementum non-interactive quod normaliter umbilicum non recipit, fac
tabindex="-1"
elementum addere.
Sass
Variabilium
$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
Variae mixin
Adhibetur in compositione cum $theme-colors
creare contextual modifier classes pro summis montibus nostris.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
alert-variant()
Loop, qui cum mixin generat determinatiuum asses.
// 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 mores
Initialize
Initialize elementa in summis
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Ad hoc solum propositum erecti dimittendi, necesse non est tincidunt elementum manuale per JS API initialize. Utendo data-bs-dismiss="alert"
, elementum automatice initialized et rite dimittatur.
Vide sectionem triggers pro magis details.
Triggers
Dimissio fieri potest cum data
attributo in pyga intra intenti ut infra demonstratum est:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
aut in puga pyga extra intenti utendo, data-bs-target
ut infra demonstratum est;
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Nota quod clausula evigilans removebit a dom.
Methodi
Methodus | Descriptio |
---|---|
close |
Claudit erectum a dom. Si classes .fade et partes .show insunt, intenti deficiant antequam removeatur. |
dispose |
Elementum destruit intentus. (Recondita removet data in dom elementum) |
getInstance |
Methodus stabilis, quae te permittit ut instantia in elementum dom coniungitur intenti, eo uti potes:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Methodus stabilis quae reddit instantiam erectam elemento DOM coniunctam vel novam creans in casu non initialized erat. Hoc uti potes:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Events
Bootstrap plugin vigilans paucas eventus exponit pro hamo in ad functionem intenti.
Eventus | Descriptio |
---|---|
close.bs.alert |
Ignes statim cum close instantia methodus appellatur. |
closed.bs.alert |
Accensus est cum intentus clausus est et transitus CSS expleverunt. |
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()
})