fanairana
Manomeza hafatra tamberin'andraikitra amin'ny teny manodidina ho an'ny hetsika mahazatra ataon'ny mpampiasa miaraka amin'ireo hafatra fanairana azo ampiasaina sy mora azo.
OHATRA
Ny fanairana dia misy amin'ny halavan'ny lahatsoratra rehetra, ary koa ny bokotra akaiky. Mba hanaovana endrika araka ny tokony ho izy dia ampiasao ny iray amin'ireo kilasy valo ilaina.alert-success
amin'ny teny manodidina (oh, ). Ho an'ny fandroahana an-tserasera, ampiasao ny plugin JavaScript fanairana .
<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>
Fampitaovana ny dikan'ny teknôlôjia manampy
Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .visually-hidden
kilasy.
Loko rohy
Ampiasao ny .alert-link
kilasin'ny utility mba hanomezana rohy miloko mifanandrify haingana ao anatin'ny fanairana rehetra.
<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>
Votoaty fanampiny
Ny fampandrenesana dia mety ahitana singa HTML fanampiny toy ny lohateny, fehintsoratra ary fizarana.
Vita tsara!
Eny, namaky soa aman-tsara ity hafatra fanairana manan-danja ity ianao. Ity lahatsoratra ohatra ity dia handeha lavitra kely mba hahitanao ny fomba fiasan'ny elanelana ao anatin'ny fanairana amin'ity karazana atiny ity.
Isaky ny mila izany ianao dia tandremo tsara ny mampiasa fitaovana margin mba hitazonana zavatra tsara sy milamina.
<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>
sary Masina
Toy izany koa, azonao atao ny mampiasa fitaovana flexbox sy kisary Bootstrap mba hamoronana fanairana miaraka amin'ny kisary. Miankina amin'ny kisary sy ny atiny, azonao atao ny manampy fitaovana fanampiny na fomba fanao mahazatra.
<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>
Mila kisary mihoatra ny iray ho an'ny fanairanao? Eritrereto ny fampiasana kisary Bootstrap bebe kokoa ary manao sprite SVG eo an-toerana toy izany mba hanondro mora foana ireo kisary mitovy.
<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>
nandefa
Amin'ny alàlan'ny plugin JavaScript alert, azo atao ny manilika ny fampandrenesana rehetra. Toy izao ny fomba:
- Ataovy azo antoka fa nampiditra ny plugin fanairana ianao, na ny JavaScript Bootstrap natambatra.
- Manampia bokotra akaiky sy ny
.alert-dismissible
kilasy, izay manampy padding fanampiny eo ankavanan'ny fanairana ary mametraka ny bokotra akaiky. - Ao amin'ny bokotra akaiky, ampio ny
data-bs-dismiss="alert"
toetra, izay miteraka ny fampiasa JavaScript. Ataovy azo antoka ny fampiasana ilay<button>
singa miaraka aminy mba hahazoana fitondran-tena mety amin'ny fitaovana rehetra. - Mba hanamafisana ny fanairana rehefa manilika azy ireo, ataovy azo antoka fa ampio ny
.fade
sy.show
kilasy.
Azonao atao ny mahita an'ity hetsika ity miaraka amin'ny demo mivantana:
<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
hetsika ary mametraka
focus()
amin'ny programa amin'ny toerana mety indrindra amin'ny pejy. Raha mikasa ny hamindra ny fifantohana amin'ny singa iray tsy mifanentana izay matetika tsy mahazo fifantohana ianao, dia ataovy izay hanampiana
tabindex="-1"
ilay singa.
Sass
hiovaova
$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
Variant mixin
Ampiasaina miaraka amin'ny $theme-colors
famoronana kilasy modifier contextual ho an'ny fanairanay.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
manome fitoerana
Loop izay mamorona kilasy modifier miaraka amin'ny alert-variant()
mixin.
// 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);
}
}
Fihetsika JavaScript
Niteraka
Alefaso ny fandroahana fanairana amin'ny alàlan'ny JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Na miaraka amin'ny data
toetra eo amin'ny bokotra iray ao anatin'ny fanairana , araka ny aseho etsy ambony:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Mariho fa ny fanakatonana fanairana dia hanala azy amin'ny DOM.
fomba
Azonao atao ny mamorona ohatra fanairana miaraka amin'ny mpanamboatra fanairana, ohatra:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Izany dia mahatonga ny fanairana mihaino ny hetsika kitihina amin'ny singa taranaka manana ny data-bs-dismiss="alert"
toetra. (Tsy ilaina amin'ny fampiasana ny fanombohana mandeha ho azy ny data-api.)
FOMBA | Description |
---|---|
close |
Manakatona fanairana amin'ny fanesorana azy amin'ny DOM. Raha misy ny .fade and .show classes ao amin'ilay singa, dia hanjavona ny fanairana alohan'ny hanesorana azy. |
dispose |
Manimba ny fanairana singa iray. (Esory ny angona voatahiry amin'ny singa DOM) |
getInstance |
Fomba static izay ahafahanao mahazo ny ohatra fanairana mifandray amin'ny singa DOM, azonao ampiasaina toy izao:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Fomba static izay mamerina ohatra fanairana mifandray amin'ny singa DOM na mamorona vaovao raha toa ka tsy natomboka izany. Azonao atao ny mampiasa azy toy izao:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
zava-mitranga
Ny plugin fanairana an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampiasa mailo.
Event | Description |
---|---|
close.bs.alert |
Mirehitra avy hatrany rehefa close antsoina ny fomba fiasa. |
closed.bs.alert |
Voaroaka rehefa nakatona ny fanairana ary vita ny fifindrana CSS. |
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()
})