BS5 ogohlantirishlar (alerts)
Ogohlantirishlar (alerts)
Bootstrap 5 oldindan tayyorlangan ogohlantirish xabarlarini yaratishning oson usulini taqdim etadi:
Ogohlantirishlar .alert klassi va undan keyin keladigan .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light yoki .alert-dark kontekstual klasslaridan biri yordamida yaratiladi:
Misol
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
O‘zingiz sinab ko‘ring »
Ogohlantirishdagi havolalar
"Mos rangdagi havolalar" hosil qilish uchun ogohlantirish bloki ichidagi har qanday havolaga .alert-link klassini qo‘shing:
Misol
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
O‘zingiz sinab ko‘ring »
Ogohlantirishlarni yopish
Ogohlantirish xabarini yopish uchun ogohlantirish konteyneriga .alert-dismissible klassini qo‘shing. So‘ngra havola yoki tugma elementiga class="btn-close" va data-bs-dismiss="alert" ni qo‘shing (uni bosganingizda ogohlantirish bloki yo‘qoladi).
Misol
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
O‘zingiz sinab ko‘ring »
Animatsiyali ogohlantirishlar
.fade va .show klasslari ogohlantirish xabarini yopishda asta-sekin yo‘qolish (fade) effektini qo‘shadi:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!