Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS ogohlantirishlar

ULASHISH

Ogohlantirishlar (alerts)

Bootstrap oldindan tayyorlangan ogohlantirish xabarlarini yaratishning oson usulini taqdim etadi:

× Success! This alert box indicates a successful or positive action.
× Info! This alert box indicates a neutral informative change or action.
× Warning! This alert box indicates a warning that might need attention.
× Danger! This alert box indicates a dangerous or potentially negative action.

Ogohlantirishlar .alert klassi va undan keyin keladigan to‘rtta kontekstual klass — .alert-success, .alert-info, .alert-warning yoki .alert-danger dan biri yordamida yaratiladi:

Misol

<div class="alert alert-success">   <strong>Success!</strong> Indicates a successful or positive action. </div> <div class="alert alert-info">   <strong>Info!</strong> Indicates a neutral informative change or action. </div> <div class="alert alert-warning">   <strong>Warning!</strong> Indicates a warning that might need attention. </div> <div class="alert alert-danger">   <strong>Danger!</strong> Indicates a dangerous or potentially negative 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:

Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.

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

× Meni yopish uchun o‘ng tomondagi "x" belgisini bosing.

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">   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>   <strong>Success!</strong> Indicates a successful or positive action. </div>
O‘zingiz sinab ko‘ring »

aria-* atributi va &times; haqida izoh

Ekran o‘quvchi dasturlardan foydalanadigan odamlar uchun qulaylikni (accessibility) oshirish maqsadida yopish tugmasini yaratishda aria-label="close" atributini qo‘shishingiz kerak.

&times; (×) — HTML obyekti (entity) bo‘lib, yopish tugmalari uchun "x" harfidan ko‘ra afzal ko‘riladigan belgidir.
Barcha HTML obyektlari ro‘yxati uchun HTML Entities ma’lumotnomamizga tashrif buyuring.

Animatsiyali ogohlantirishlar

× Meni yopish uchun o‘ng tomondagi "x" belgisini bosing. Men asta-sekin yo‘qolaman ("fade").

.fade va .in klasslari ogohlantirish xabarini yopishda asta-sekin yo‘qolish (fade) effektini qo‘shadi:

Misol

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

Mashqlar yordamida o‘zingizni sinang

Mashq:

Muvaffaqiyatli harakat natijasini ko‘rsatish uchun Bootstrap’ning "alert" klassini qo‘shing.

<div class="">
  Success!
</div>

Mashqni boshlash

Bootstrap ogohlantirishlari bo‘yicha to‘liq ma’lumotnoma

Ogohlantirishlarning barcha parametrlari (options), metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Alert ma’lumotnomamizga o‘ting.

Bilasizmi?

W3.CSS — Bootstrap’ga ajoyib muqobil.

W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish