BS5 ogohlantirishlar (alerts)


ULASHISH

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

Success! This alert box could indicate a successful or positive action.

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:

Misol

<div class="alert alert-danger alert-dismissible fade show">
O‘zingiz sinab ko‘ring »


W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!