मूठभर उपलब्ध आणि लवचिक इशारा संदेशांसह विशिष्ट वापरकर्त्याच्या क्रियांसाठी संदर्भित अभिप्राय संदेश प्रदान करा.
उदाहरणे
कोणत्याही लांबीच्या मजकुरासाठी, तसेच पर्यायी डिसमिस बटणासाठी सूचना उपलब्ध आहेत. योग्य शैलीसाठी, आठ आवश्यक संदर्भ वर्गांपैकी एक वापरा (उदा., .alert-success). इनलाइन डिसमिससाठी, अलर्ट jQuery प्लगइन वापरा .
एक साधी प्राथमिक सूचना—ते तपासा!
एक साधी दुय्यम सूचना—ते तपासा!
एक साधी यश सूचना—ते पहा!
एक साधी धोक्याची सूचना—ते पहा!
एक साधी चेतावणी चेतावणी—ते तपासा!
एक साधी माहिती सूचना—ते तपासा!
एक साधी प्रकाश सूचना—ते तपासा!
एक साधी गडद सूचना—ते तपासा!
सहाय्यक तंत्रज्ञानाचा अर्थ सांगणे
अर्थ जोडण्यासाठी रंग वापरणे केवळ एक दृश्य संकेत प्रदान करते, जे सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांना - जसे की स्क्रीन वाचकांपर्यंत पोहोचवले जाणार नाही. याची खात्री करा की रंगाने दर्शविलेली माहिती एकतर सामग्रीमधूनच स्पष्ट आहे (उदा. दृश्यमान मजकूर), किंवा पर्यायी माध्यमांद्वारे समाविष्ट केली आहे, जसे की .sr-onlyवर्गात लपवलेला अतिरिक्त मजकूर.
लिंक रंग
.alert-linkकोणत्याही अलर्टमध्ये त्वरीत जुळणारे रंगीत दुवे प्रदान करण्यासाठी उपयुक्तता वर्ग वापरा .
उदाहरणाच्या लिंकसह
एक साधी प्राथमिक सूचना
. तुम्हाला आवडत असल्यास त्यावर क्लिक करा.
उदाहरणाच्या दुव्यासह
एक साधी दुय्यम सूचना
. तुम्हाला आवडत असल्यास त्यावर क्लिक करा.
उदाहरणाच्या दुव्यासह
एक साधी धोक्याची सूचना
. तुम्हाला आवडत असल्यास त्यावर क्लिक करा.
उदाहरणाच्या दुव्यासह
एक साधी चेतावणी इशारा
. तुम्हाला आवडत असल्यास त्यावर क्लिक करा.
उदाहरणाच्या दुव्यासह
एक साधी माहिती सूचना
. तुम्हाला आवडत असल्यास त्यावर क्लिक करा.
उदाहरणाच्या दुव्यासह
एक साधी प्रकाश सूचना
. तुम्हाला आवडत असल्यास त्यावर क्लिक करा.
उदाहरणाच्या दुव्यासह
एक साधा गडद इशारा
. तुम्हाला आवडत असल्यास त्यावर क्लिक करा.
अतिरिक्त सामग्री
सूचनांमध्ये हेडिंग, परिच्छेद आणि विभाजक यांसारखे अतिरिक्त HTML घटक देखील असू शकतात.
शाब्बास!
अरे हो, तुम्ही हा महत्त्वाचा इशारा संदेश यशस्वीरीत्या वाचला. हा उदाहरण मजकूर थोडा जास्त काळ चालणार आहे जेणेकरून तुम्ही या प्रकारच्या सामग्रीसह अलर्टमधील अंतर कसे कार्य करते ते पाहू शकता.
जेव्हा तुम्हाला आवश्यक असेल तेव्हा गोष्टी छान आणि नीटनेटका ठेवण्यासाठी मार्जिन युटिलिटीज वापरण्याची खात्री करा.
डिसमिस करत आहे
अलर्ट JavaScript प्लगइन वापरून, कोणतीही सूचना इनलाइन डिसमिस करणे शक्य आहे. कसे ते येथे आहे:
तुम्ही अलर्ट प्लगइन किंवा संकलित बूटस्ट्रॅप JavaScript लोड केले असल्याची खात्री करा.
जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहेutil.js . संकलित आवृत्तीमध्ये हे समाविष्ट आहे.
डिसमिस बटण आणि .alert-dismissibleवर्ग जोडा, जे अलर्टच्या उजवीकडे अतिरिक्त पॅडिंग जोडते आणि .closeबटण ठेवते.
डिसमिस बटणावर, data-dismiss="alert"विशेषता जोडा, जी JavaScript कार्यक्षमता ट्रिगर करते. <button>सर्व डिव्हाइसेसवर योग्य वर्तनासाठी त्याच्यासह घटक वापरण्याची खात्री करा .
अलर्ट डिसमिस करताना अॅनिमेट करण्यासाठी, .fadeआणि .showवर्ग जोडण्याची खात्री करा.
तुम्ही हे थेट डेमोसह कृतीत पाहू शकता:
पवित्र guacamole! तुम्ही खालीलपैकी काही फील्डवर चेक इन केले पाहिजे.
JavaScript वर्तन
ट्रिगर
JavaScript द्वारे अलर्ट डिसमिस करणे सक्षम करा:
किंवा वर दर्शविल्याप्रमाणे, अलर्टमधीलdata बटणावरील गुणधर्मांसह :
लक्षात ठेवा की सूचना बंद केल्याने ती DOM मधून काढून टाकली जाईल.
पद्धती
पद्धत
वर्णन
$().alert()
data-dismiss="alert"विशेषता असलेल्या वंशज घटकांवरील क्लिक इव्हेंटसाठी अलर्ट ऐकते . (डेटा-एपीआयचे ऑटो-इनिशियलायझेशन वापरताना आवश्यक नाही.)
$().alert('close')
DOM मधून अॅलर्ट काढून टाकून बंद करते. .fadeघटकावर आणि वर्ग उपस्थित असल्यास .show, ते काढून टाकण्यापूर्वी अलर्ट कमी होईल.
$().alert('dispose')
घटकाचा इशारा नष्ट करते.
कार्यक्रम
बूटस्ट्रॅप चे अॅलर्ट प्लगइन अॅलर्ट फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करते.
कार्यक्रम
वर्णन
close.bs.alert
closeजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
closed.bs.alert
जेव्हा इशारा बंद केला जातो तेव्हा हा कार्यक्रम उडवला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).