எச்சரிக்கைகள்
கிடைக்கக்கூடிய மற்றும் நெகிழ்வான எச்சரிக்கைச் செய்திகளுடன் வழக்கமான பயனர் செயல்களுக்கான சூழல் சார்ந்த கருத்துச் செய்திகளை வழங்கவும்.
உரையின் எந்த நீளத்திற்கும் விழிப்பூட்டல்கள் கிடைக்கின்றன, அத்துடன் விருப்பமான நிராகரிப்பு பொத்தான். சரியான ஸ்டைலிங்கிற்கு, தேவைப்படும் எட்டு சூழ்நிலை வகுப்புகளில் ஒன்றைப் பயன்படுத்தவும் (எ.கா., .alert-success
). இன்லைன் நீக்கத்திற்கு, விழிப்பூட்டல்களைப் பயன்படுத்தவும் jQuery சொருகி .
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>
உதவி தொழில்நுட்பங்களுக்கு அர்த்தத்தை வெளிப்படுத்துதல்
பொருளைச் சேர்க்க வண்ணத்தைப் பயன்படுத்துவது ஒரு காட்சிக் குறிப்பை மட்டுமே வழங்குகிறது, இது ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்குத் தெரிவிக்கப்படாது. வண்ணத்தால் குறிக்கப்படும் தகவல் உள்ளடக்கத்திலிருந்தே (எ.கா. புலப்படும் உரை) தெளிவாக இருப்பதை உறுதிசெய்யவும் அல்லது .sr-only
வகுப்பில் மறைக்கப்பட்ட கூடுதல் உரை போன்ற மாற்று வழிகளில் சேர்க்கப்பட்டுள்ளது.
.alert-link
எந்தவொரு விழிப்பூட்டலிலும் பொருந்தக்கூடிய வண்ண இணைப்புகளை விரைவாக வழங்க பயன்பாட்டு வகுப்பைப் பயன்படுத்தவும் .
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
எச்சரிக்கைகள் தலைப்புகள், பத்திகள் மற்றும் வகுப்பிகள் போன்ற கூடுதல் HTML கூறுகளையும் கொண்டிருக்கலாம்.
சபாஷ்!
அடடா, இந்த முக்கியமான எச்சரிக்கை செய்தியை நீங்கள் வெற்றிகரமாகப் படித்தீர்கள். இந்த எடுத்துக்காட்டு உரை சிறிது நீளமாக இயங்கும், இதன் மூலம் விழிப்பூட்டலில் உள்ள இடைவெளி இந்த வகையான உள்ளடக்கத்துடன் எவ்வாறு செயல்படுகிறது என்பதை நீங்கள் பார்க்கலாம்.
உங்களுக்குத் தேவைப்படும் போதெல்லாம், விஷயங்களை அழகாகவும் நேர்த்தியாகவும் வைத்திருக்க விளிம்பு பயன்பாடுகளைப் பயன்படுத்துவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
எச்சரிக்கை ஜாவாஸ்கிரிப்ட் செருகுநிரலைப் பயன்படுத்தி, எந்த எச்சரிக்கை இன்லைனையும் நிராகரிக்க முடியும். எப்படி என்பது இங்கே:
- விழிப்பூட்டல் செருகுநிரல் அல்லது தொகுக்கப்பட்ட பூட்ஸ்டார்ப் ஜாவாஸ்கிரிப்டை ஏற்றியுள்ளீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
- நீங்கள் எங்கள் ஜாவாஸ்கிரிப்டை மூலத்திலிருந்து உருவாக்கினால், அதற்கு
util.js
. தொகுக்கப்பட்ட பதிப்பில் இது அடங்கும். - டிஸ்மிஸ் பட்டன் மற்றும் கிளாஸைச் சேர்க்கவும்
.alert-dismissible
, இது விழிப்பூட்டலின் வலதுபுறத்தில் கூடுதல் திணிப்பைச் சேர்த்து.close
பொத்தானை நிலைநிறுத்துகிறது. - டிஸ்மிஸ் பட்டனில்,
data-dismiss="alert"
ஜாவாஸ்கிரிப்ட் செயல்பாட்டைத் தூண்டும் பண்புக்கூறைச் சேர்க்கவும்.<button>
எல்லா சாதனங்களிலும் சரியான நடத்தைக்கு உறுப்பை அதனுடன் பயன்படுத்துவதை உறுதிசெய்யவும் . - விழிப்பூட்டல்களை நிராகரிக்கும்போது அவற்றை அனிமேட் செய்ய,
.fade
மற்றும்.show
வகுப்புகளைச் சேர்க்க மறக்காதீர்கள்.
லைவ் டெமோ மூலம் இதை செயலில் காணலாம்:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
ஜாவாஸ்கிரிப்ட் மூலம் விழிப்பூட்டலை நிராகரிப்பதை இயக்கு:
அல்லது மேலே காட்டப்பட்டுள்ளபடி , விழிப்பூட்டலில் உள்ளdata
பொத்தானின் பண்புகளுடன் :
எச்சரிக்கையை மூடுவது DOM இலிருந்து அகற்றப்படும் என்பதை நினைவில் கொள்ளவும்.
முறை | விளக்கம் |
---|---|
$().alert() |
data-dismiss="alert" பண்புக்கூறு கொண்ட சந்ததி கூறுகளில் கிளிக் நிகழ்வுகளுக்கு விழிப்பூட்டலைக் கேட்க வைக்கிறது. (data-api இன் தானியங்கு-தொடக்கத்தைப் பயன்படுத்தும் போது அவசியமில்லை.) |
$().alert('close') |
DOM இலிருந்து அகற்றுவதன் மூலம் எச்சரிக்கையை மூடுகிறது. .fade உறுப்பில் மற்றும் வகுப்புகள் இருந்தால், .show அது அகற்றப்படுவதற்கு முன்பு எச்சரிக்கை மறைந்துவிடும். |
$().alert('dispose') |
ஒரு உறுப்பு விழிப்பூட்டலை அழிக்கிறது. |
பூட்ஸ்டார்ப்பின் விழிப்பூட்டல் செருகுநிரலானது, எச்சரிக்கை செயல்பாட்டில் இணைக்கும் சில நிகழ்வுகளை வெளிப்படுத்துகிறது.
நிகழ்வு | விளக்கம் |
---|---|
close.bs.alert |
close நிகழ்வு முறை என்று அழைக்கப்படும் போது இந்த நிகழ்வு உடனடியாக சுடுகிறது . |
closed.bs.alert |
விழிப்பூட்டல் மூடப்பட்டவுடன் இந்த நிகழ்வு நீக்கப்படும் (CSS மாற்றங்கள் முடியும் வரை காத்திருக்கும்). |