BS4 ogohlantirishlar (alerts)
Bootstrap 4 ogohlantirishlari (alerts)
Bootstrap 4 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="close" va data-dismiss="alert" ni qo‘shing (uni bosganingizda ogohlantirish bloki yo‘qoladi).
Misol
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
O‘zingiz sinab ko‘ring »
Maslahat: × (×) — yopish tugmalari uchun "x" harfidan ko‘ra afzal ko‘riladigan belgi bo‘lib, HTML obyekti (entity) hisoblanadi.
Barcha HTML obyektlari (entities) ro‘yxati uchun HTML Entities ma’lumotnomamizga tashrif buyuring.
Animatsiyali ogohlantirishlar
.fade va .show klasslari ogohlantirish xabarini yopishda asta-sekin yo‘qolish (fade) effektini qo‘shadi:
Bootstrap 4 Alert bo‘yicha to‘liq ma’lumotnoma
Barcha alert parametrlari, metodlari va hodisalari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap 4 JS Alert ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!