ସତର୍କତା
ହାତଗଣତି ଉପଲବ୍ଧ ଏବଂ ନମନୀୟ ଆଲର୍ଟ ବାର୍ତ୍ତା ସହିତ ସାଧାରଣ ଉପଭୋକ୍ତା କାର୍ଯ୍ୟ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ମତାମତ ବାର୍ତ୍ତା ପ୍ରଦାନ କରନ୍ତୁ |
ଯେକ 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 ଉପାଦାନ ଧାରଣ କରିପାରେ |
ବହୁତ ବଢିଆ!
ହଁ, ଆପଣ ସଫଳତାର ସହିତ ଏହି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ସତର୍କ ବାର୍ତ୍ତା ପ read ନ୍ତି | ଏହି ଉଦାହରଣ ପାଠ୍ୟ ଟିକିଏ ଅଧିକ ସମୟ ଚାଲିବାକୁ ଯାଉଛି ଯାହା ଦ୍ you ାରା ଆପଣ ଦେଖିପାରିବେ ଯେ ଏହି ପ୍ରକାରର ବିଷୟବସ୍ତୁ ସହିତ ଏକ ଆଲର୍ଟ ମଧ୍ୟରେ ବ୍ୟବଧାନ କିପରି କାର୍ଯ୍ୟ କରେ |
ଯେତେବେଳେ ଆପଣ ଆବଶ୍ୟକ କରନ୍ତି, ଜିନିଷଗୁଡିକ ସୁନ୍ଦର ଏବଂ ପରିଷ୍କାର ରଖିବା ପାଇଁ ମାର୍ଜିନ୍ ୟୁଟିଲିଟି ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
<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">×</span>
</button>
</div>
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ଆଲର୍ଟ ରଦ୍ଦ କରିବାକୁ ସକ୍ଷମ କରନ୍ତୁ:
କିମ୍ବା ଉପରୋକ୍ତ ପରି ଆଲର୍ଟ ମଧ୍ୟରେ ଥିବାdata
ଏକ ବଟନ୍ ଉପରେ ଗୁଣ ସହିତ :
ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରିବା ଏହାକୁ DOM ରୁ ଅପସାରଣ କରିବ |
ପଦ୍ଧତି | ବର୍ଣ୍ଣନା |
---|---|
$().alert() |
ବଂଶଧର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ ଏକ ଆଲର୍ଟ ଶୁଣେ ଯାହାର data-dismiss="alert" ଗୁଣ ଅଛି | (ଡାଟା-ଆପିର ଅଟୋ-ପ୍ରାରମ୍ଭିକରଣ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ ନୁହେଁ |) |
$().alert('close') |
ଏହାକୁ DOM ରୁ ହଟାଇ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରେ | ଯଦି ଉପାଦାନରେ .fade ଏବଂ .show ଶ୍ରେଣୀଗୁଡିକ ଉପସ୍ଥିତ ଥାଏ, ତେବେ ଏହାକୁ ହଟାଇବା ପୂର୍ବରୁ ସତର୍କତା ଦୂର ହୋଇଯିବ | |
$().alert('dispose') |
ଏକ ଉପାଦାନର ସତର୍କତା ନଷ୍ଟ କରେ | |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଆଲର୍ଟ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣାକୁ ପ୍ରକାଶ କରିଥାଏ |
ଘଟଣା | ବର୍ଣ୍ଣନା |
---|---|
close.bs.alert |
close ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | |
closed.bs.alert |
ଆଲର୍ଟ ବନ୍ଦ ହୋଇଗଲେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) | |