Bied contextuele feedbackberichten voor typische gebruikersacties met een handvol beschikbare en flexibele waarschuwingsberichten.
Voorbeelden
Waarschuwingen zijn beschikbaar voor elke lengte van de tekst, evenals een optionele sluitknop. Gebruik voor de juiste styling een van de acht vereiste contextuele klassen (bijv. .alert-success). Gebruik voor inline ontslag de jQuery-plug-in voor waarschuwingen .
Een eenvoudige primaire waarschuwing - bekijk het!
Een eenvoudige secundaire waarschuwing - bekijk het!
Een eenvoudige succeswaarschuwing - bekijk het!
Een eenvoudige gevarenwaarschuwing - bekijk het!
Een eenvoudige waarschuwing - check it out!
Een eenvoudige info-waarschuwing - bekijk het!
Een eenvoudige lichtwaarschuwing - check it out!
Een eenvoudige donkere waarschuwing - bekijk het!
Betekenis overbrengen aan ondersteunende technologieën
Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .sr-onlyklasse.
Link kleur
Gebruik de .alert-linkutility-klasse om snel bijpassende gekleurde links te geven binnen een alert.
Een eenvoudige primaire waarschuwing met
een voorbeeldlink . Klik erop als je wilt.
Een eenvoudige secundaire waarschuwing met
een voorbeeldlink . Klik erop als je wilt.
Een eenvoudige succeswaarschuwing met
een voorbeeldlink . Klik erop als je wilt.
Een eenvoudige gevarenwaarschuwing met
een voorbeeldlink . Klik erop als je wilt.
Een eenvoudige waarschuwing met
een voorbeeldlink . Klik erop als je wilt.
Een eenvoudige info-alert met
een voorbeeldlink . Klik erop als je wilt.
Een eenvoudige lichtwaarschuwing met
een voorbeeldlink . Klik erop als je wilt.
Een eenvoudige donkere waarschuwing met
een voorbeeldlink . Klik erop als je wilt.
Extra content
Waarschuwingen kunnen ook extra HTML-elementen bevatten, zoals koppen, alinea's en scheidingslijnen.
Goed gedaan!
Aww ja, je hebt dit belangrijke waarschuwingsbericht met succes gelezen. Deze voorbeeldtekst wordt iets langer zodat u kunt zien hoe de spatiëring binnen een waarschuwing werkt met dit soort inhoud.
Zorg ervoor dat u, wanneer dat nodig is, margehulpprogramma's gebruikt om de zaken netjes en opgeruimd te houden.
afwijzen
Met behulp van de waarschuwing JavaScript-plug-in is het mogelijk om elke waarschuwing inline te sluiten. Hier is hoe:
Zorg ervoor dat u de waarschuwingsplug-in of het gecompileerde Bootstrap JavaScript hebt geladen.
Als u ons JavaScript vanaf de bron bouwt, isutil.js . De gecompileerde versie bevat dit.
Voeg een sluitknop en de .alert-dismissibleklasse toe, die extra opvulling rechts van de waarschuwing toevoegt en de .closeknop positioneert.
Voeg op de sluitknop het data-dismiss="alert"kenmerk toe, dat de JavaScript-functionaliteit activeert. Zorg ervoor dat u het <button>element ermee gebruikt voor correct gedrag op alle apparaten.
Als u waarschuwingen wilt animeren wanneer u ze verwijdert, moet u de klassen .fadeen toevoegen..show
Je kunt dit in actie zien met een live demo:
Heilige guacamole! U moet enkele van de onderstaande velden inchecken.
JavaScript-gedrag
Triggers
Afwijzing van een waarschuwing via JavaScript inschakelen:
Of met dataattributen op een knop binnen de alert , zoals hierboven aangetoond:
Houd er rekening mee dat als u een waarschuwing sluit, deze uit de DOM wordt verwijderd.
Methoden:
Methode
Beschrijving
$().alert()
Laat een alert luisteren naar klikgebeurtenissen op onderliggende elementen die het data-dismiss="alert"attribuut hebben. (Niet nodig bij gebruik van de automatische initialisatie van de data-api.)
$().alert('close')
Sluit een waarschuwing door deze uit de DOM te verwijderen. Als de klassen .fadeen .showaanwezig zijn op het element, verdwijnt de waarschuwing voordat deze wordt verwijderd.
$().alert('dispose')
Vernietigt de waarschuwing van een element.
Evenementen
De waarschuwingsplug-in van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op de waarschuwingsfunctionaliteit.
Evenement
Beschrijving
close.bs.alert
Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de closeinstantiemethode wordt aangeroepen.
closed.bs.alert
Deze gebeurtenis wordt geactiveerd wanneer de waarschuwing is gesloten (wacht tot de CSS-overgangen zijn voltooid).