ការជូនដំណឹង
ផ្តល់សារមតិកែលម្អតាមបរិបទសម្រាប់សកម្មភាពអ្នកប្រើប្រាស់ធម្មតា ជាមួយនឹងសារដាស់តឿនដែលមាន និងអាចបត់បែនបាន។
ការដាស់តឿនមានសម្រាប់ប្រវែងអត្ថបទណាមួយ ក៏ដូចជាប៊ូតុងបិទជាជម្រើស។ សម្រាប់រចនាប័ទ្មត្រឹមត្រូវ សូមប្រើថ្នាក់បរិបទមួយក្នុងចំណោម ថ្នាក់បរិបទ ដែលត្រូវការ ទាំងប្រាំបី (ឧទាហរណ៍ .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>ដោយប្រើកម្មវិធីជំនួយ JavaScript ដាស់តឿន វាអាចច្រានចោលការជូនដំណឹងណាមួយនៅក្នុងជួរ។ នេះជារបៀប៖
- ត្រូវប្រាកដថាអ្នកបានផ្ទុកកម្មវិធីជំនួយការជូនដំណឹង ឬ Bootstrap JavaScript ដែលបានចងក្រង។
- ប្រសិនបើអ្នកកំពុងបង្កើត JavaScript របស់យើងពីប្រភព វា ទាមទារ
util.js. កំណែដែលបានចងក្រងរួមមាននេះ។ - បន្ថែមប៊ូតុងបិទ និង
.alert-dismissibleថ្នាក់ ដែលបន្ថែមបន្ទះបន្ថែមនៅខាងស្តាំនៃការជូនដំណឹង និងដាក់ទីតាំង.closeប៊ូតុង។ - នៅលើប៊ូតុងបិទ សូមបន្ថែម
data-dismiss="alert"គុណលក្ខណៈ ដែលបង្កឱ្យមានមុខងារ JavaScript ។ ត្រូវប្រាកដថាប្រើ<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>បើកការច្រានចោលការជូនដំណឹងតាមរយៈ JavaScript៖
$('.alert').alert()ឬជាមួយ dataគុណលក្ខណៈនៅលើប៊ូតុងមួយ នៅក្នុងការជូនដំណឹង ដូចដែលបានបង្ហាញខាងលើ៖
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>ចំណាំថាការបិទការជូនដំណឹងនឹងលុបវាចេញពី DOM ។
| វិធីសាស្រ្ត | ការពិពណ៌នា |
|---|---|
$().alert() |
ធ្វើឱ្យការដាស់តឿនស្តាប់សម្រាប់ព្រឹត្តិការណ៍ចុចនៅលើធាតុបន្តពូជដែលមាន data-dismiss="alert"គុណលក្ខណៈ។ (មិនចាំបាច់នៅពេលប្រើការចាប់ផ្តើមស្វ័យប្រវត្តិរបស់ data-api ។ ) |
$().alert('close') |
បិទការជូនដំណឹងដោយយកវាចេញពី DOM ។ ប្រសិនបើ ថ្នាក់ .fadeនិង .showថ្នាក់មានវត្តមាននៅលើធាតុ នោះការជូនដំណឹងនឹងរលត់មុនពេលវាត្រូវបានយកចេញ។ |
$().alert('dispose') |
បំផ្លាញការជូនដំណឹងរបស់ធាតុមួយ។ |
$(".alert").alert('close')កម្មវិធីជំនួយការជូនដំណឹងរបស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារជូនដំណឹង។
| ព្រឹត្តិការណ៍ | ការពិពណ៌នា |
|---|---|
close.bs.alert |
ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល closeវិធីសាស្ត្រ instance ត្រូវបានហៅ។ |
closed.bs.alert |
ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលការជូនដំណឹងត្រូវបានបិទ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS បញ្ចប់)។ |
$('#myAlert').on('closed.bs.alert', function () {
// do something…
})