twitter-bootstrap
चेतावनी

टिप्पणियों

अलर्ट प्रकार

कुछ अन्य बूटस्ट्रैप घटकों जैसे कि बटन के विपरीत, अलर्ट default या primary स्टाइल के साथ नहीं आते हैं, क्योंकि वे उपयोगकर्ता को एक विशिष्ट तरीके से सचेत करने के लिए हैं।

<div class="alert alert-success" role="alert">
    Some action was completed successfully
</div>
<div class="alert alert-info" role="alert">
    Here is some information. Just FYI.
</div>
<div class="alert alert-warning" role="alert">
    Careful! You're about to do something dangerous.
</div>
<div class="alert alert-danger" role="alert">
    An error (or something dangerous) happened!
</div>

मूल उदाहरण सचेत करें

<div class="container">
  <h2>Alerts</h2>
  <div class="alert alert-success">
    <strong>Success!</strong>
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong>
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> All foelds are required
  </div>
  <div class="alert alert-danger">
    The username is required and can't be empty
  </div>
</div>

एनिमेटेड अलर्ट

.fade और .in वर्ग अलर्ट संदेश को बंद करते समय एक लुप्त होती प्रभाव जोड़ता है।

<div class="alert alert-success fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success!</strong> This is a good example!
</div>

अस्वीकार्य अलर्ट

अलर्ट को बंद करने की कार्यक्षमता देने के लिए, हमें अपने नजदीकी बटन में data-dismiss="alert" जोड़ना होगा।

<div class="alert alert-info alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    Sphinx of black quartz, judge my vow
</div>

.alert-dismissible और .close वर्गों वैकल्पिक, स्टाइलिंग के लिए उपयोगी होते हैं।

अलर्ट में रंग लिंक

किसी भी अलर्ट के अंदर लिंक के लिए जल्दी से एक मेल रंग प्रदान करने के लिए, हम .alert-link उपयोगिता वर्ग का उपयोग कर सकते हैं।

<div class="alert alert-success">
    You have won! Click <a href="#" class="alert-link">here</a> to claim your prize ...
</div>

<div class="alert alert-info">
    You might want to check <a href="#"  class="alert-link">this</a> instead.
</div>

<div class="alert alert-warning">
    You are running out of coins. Buy more <a href="#" class="alert-link">here</a>.
</div>

<div class="alert alert-danger">
    Something went wrong. You can try <a href="#" class="alert-link">again</a> or ...
</div>