Source

ସତର୍କତା

ହାତଗଣତି ଉପଲବ୍ଧ ଏବଂ ନମନୀୟ ଆଲର୍ଟ ବାର୍ତ୍ତା ସହିତ ସାଧାରଣ ଉପଭୋକ୍ତା କାର୍ଯ୍ୟ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ମତାମତ ବାର୍ତ୍ତା ପ୍ରଦାନ କରନ୍ତୁ |

ଉଦାହରଣଗୁଡିକ

ଯେକ any ଣସି ଲମ୍ବା ପାଠ୍ୟ ପାଇଁ ଆଲର୍ଟ ଉପଲବ୍ଧ, ଏବଂ ଏକ ଇଚ୍ଛାଧୀନ ବହିଷ୍କାର ବଟନ୍ | ସଠିକ୍ ଶ yl ଳୀ ପାଇଁ, ଆଠଟି ଆବଶ୍ୟକୀୟ ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀ ମଧ୍ୟରୁ ଗୋଟିଏ ବ୍ୟବହାର କରନ୍ତୁ (ଯଥା, .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ଯେକ any ଣସି ଆଲର୍ଟ ମଧ୍ୟରେ ଶୀଘ୍ର ମେଳୁଥିବା ରଙ୍ଗୀନ ଲିଙ୍କ୍ ପ୍ରଦାନ କରିବାକୁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |

<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>

ବରଖାସ୍ତ

ଆଲର୍ଟ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରି ଯେକ any ଣସି ଆଲର୍ଟ ଇନଲାଇନକୁ ବରଖାସ୍ତ କରିବା ସମ୍ଭବ ଅଟେ | ଏଠାରେ କିପରି ଅଛି:

  • ନିଶ୍ଚିତ ହୁଅନ୍ତୁ ଯେ ଆପଣ ଆଲର୍ଟ ପ୍ଲଗଇନ୍, କିମ୍ବା ସଙ୍କଳିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ଲୋଡ୍ କରିଛନ୍ତି |
  • ଯଦି ଆପଣ ଉତ୍ସରୁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ନିର୍ମାଣ କରୁଛନ୍ତି, ଏହା ଆବଶ୍ୟକ କରେ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">&times;</span>
  </button>
</div>

ଜାଭାସ୍କ୍ରିପ୍ଟ ଆଚରଣ |

ଟ୍ରିଗର୍ସ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ଆଲର୍ଟ ରଦ୍ଦ କରିବାକୁ ସକ୍ଷମ କରନ୍ତୁ:

$('.alert').alert()

କିମ୍ବା ଉପରୋକ୍ତ ପରି ଆଲର୍ଟ ମଧ୍ୟରେ ଥିବାdata ଏକ ବଟନ୍ ଉପରେ ଗୁଣ ସହିତ :

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରିବା ଏହାକୁ DOM ରୁ ଅପସାରଣ କରିବ |

ପ୍ରଣାଳୀ

ପଦ୍ଧତି ବର୍ଣ୍ଣନା
$().alert() ବଂଶଧର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ ଏକ ଆଲର୍ଟ ଶୁଣେ ଯାହାର data-dismiss="alert"ଗୁଣ ଅଛି | (ଡାଟା-ଆପିର ଅଟୋ-ପ୍ରାରମ୍ଭିକରଣ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ ନୁହେଁ |)
$().alert('close') ଏହାକୁ DOM ରୁ ହଟାଇ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରେ | ଯଦି ଉପାଦାନରେ .fadeଏବଂ .showଶ୍ରେଣୀଗୁଡିକ ଉପସ୍ଥିତ ଥାଏ, ତେବେ ଏହାକୁ ହଟାଇବା ପୂର୍ବରୁ ସତର୍କତା ଦୂର ହୋଇଯିବ |
$().alert('dispose') ଏକ ଉପାଦାନର ସତର୍କତା ନଷ୍ଟ କରେ |
$(".alert").alert('close')

ଘଟଣା

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଆଲର୍ଟ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣାକୁ ପ୍ରକାଶ କରିଥାଏ |

ଘଟଣା ବର୍ଣ୍ଣନା
close.bs.alert closeଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ |
closed.bs.alert ଆଲର୍ଟ ବନ୍ଦ ହୋଇଗଲେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) |
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})