Bootstrap Alert

Hazırlayan: Esma Karaca

Bootstrap alerts nedir ve nasıl kullanılır?

Boostrap 4 alert sınıfları ile amacınıza uygun mesaj içeriklerinizi gösterebilirsiniz.

Örneğin kayıt işleminden sonra işlemin başarılı olduğunu söylemek için yeşil zemin rengine sahip bir alert kutusu ya da bir hata mesajını göstermek için kırmızı zemin rengine sahip bir alert kutusu kullanabilirsiniz.

Alert kutularını oluşturmak için .alert sınıfından sonra .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, .alert-dark sınıflarından birini kullanabilirsiniz.

<h2>Alerts</h2>

<strong>Success!</strong>This alert box indicates a successful or positive action.

</div>

<strong>Info!</strong>This alert box indicates a neutral informative change or action.

</div>

<strong>Warning!</strong> This alert box indicates a warning that might need attention.

</div>

<strong>Danger!</strong> This alert box indicates a dangerous or potentially negative action.

</div>

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

Alert kutusu içinde bir link oluşturmak için .alert-link sınıfını kullanabiliriz.

<strong>Holy guacamole!</strong> You should check in on some of those fields below.

</button>

</div>

Kullanıcının alert kutusunu kapatması için bir icon ekleyebiliriz.

Page updated

Report abuse