ବଟନ୍
ଏକାଧିକ ଆକାର, ରାଜ୍ୟ, ଏବଂ ଅଧିକ ପାଇଁ ସମର୍ଥନ ସହିତ ଫର୍ମ, ସଂଳାପ, ଏବଂ ଅଧିକ କାର୍ଯ୍ୟ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ର କଷ୍ଟମ୍ ବଟନ୍ ଶ yles ଳୀ ବ୍ୟବହାର କରନ୍ତୁ |
ଉଦାହରଣଗୁଡିକ
ବୁଟଷ୍ଟ୍ରାପରେ ଅନେକ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ବଟନ୍ ଶ yles ଳୀ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ପ୍ରତ୍ୟେକ ନିଜ ନିଜର ଅର୍ଥଗତ ଉଦ୍ଦେଶ୍ୟକୁ ସେବା କରୁଛନ୍ତି, ଅଧିକ ନିୟନ୍ତ୍ରଣ ପାଇଁ କିଛି ଅତିରିକ୍ତ ଫୋପାଡି ଦିଆଯାଇଛି |
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-only
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
ଟେକ୍ସଟ୍ ରାପିଙ୍ଗ୍ ଅକ୍ଷମ କରନ୍ତୁ |
ଯଦି ଆପଣ ବଟନ୍ ଟେକ୍ସଟ୍ ଗୁଡ଼ାଇ ରଖିବାକୁ ଚାହୁଁନାହାଁନ୍ତି, ତେବେ ଆପଣ .text-nowrap
ବଟନ୍ ରେ କ୍ଲାସ୍ ଯୋଡିପାରିବେ | ସାସ୍ ରେ, ଆପଣ $btn-white-space: nowrap
ପ୍ରତ୍ୟେକ ବଟନ୍ ପାଇଁ ଟେକ୍ସଟ୍ ରାପିଙ୍ଗ୍ ଅକ୍ଷମ କରିବାକୁ ସେଟ୍ କରିପାରିବେ |
ବଟନ୍ ଟ୍ୟାଗ୍ |
ଉପାଦାନଗୁଡିକ .btn
ସହିତ ବ୍ୟବହାର କରିବାକୁ ଶ୍ରେଣୀଗୁଡିକ ଡିଜାଇନ୍ କରାଯାଇଛି <button>
| ତଥାପି, ଆପଣ ଏହି ଶ୍ରେଣୀଗୁଡିକ <a>
କିମ୍ବା <input>
ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ (ଯଦିଓ କିଛି ବ୍ରାଉଜର୍ ସାମାନ୍ୟ ଭିନ୍ନ ରେଣ୍ଡରିଂ ପ୍ରୟୋଗ କରିପାରନ୍ତି) |
ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ବଟନ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରିବାବେଳେ <a>
ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠା ମଧ୍ୟରେ ନୂତନ ପୃଷ୍ଠାଗୁଡ଼ିକ କିମ୍ବା ବିଭାଗଗୁଡିକ ସହିତ ଲିଙ୍କ୍ କରିବା ପରିବର୍ତ୍ତେ ଇନ୍-ପେଜ୍ କାର୍ଯ୍ୟକାରିତାକୁ ଟ୍ରିଗର୍ କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ (ବିଷୟବସ୍ତୁ ନଷ୍ଟ ହେବା ପରି), ଏହି ଲିଙ୍କଗୁଡିକ role="button"
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ସେମାନଙ୍କର ଉଦ୍ଦେଶ୍ୟକୁ ଉପଯୁକ୍ତ ଭାବରେ ଜଣାଇବା ପାଇଁ ଦିଆଯିବା ଉଚିତ | ସ୍କ୍ରିନ୍ ପାଠକ |
ବାହ୍ୟରେଖା ବଟନ୍ଗୁଡ଼ିକ |
ଏକ ବଟନ୍ ର ଆବଶ୍ୟକତା, କିନ୍ତୁ ସେମାନେ ଆଣିଥିବା ଭାରି ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ନୁହେଁ କି? .btn-outline-*
ଯେକ any ଣସି ବଟନରେ ଥିବା ସମସ୍ତ ପୃଷ୍ଠପଟ ଚିତ୍ର ଏବଂ ରଙ୍ଗକୁ ହଟାଇବା ପାଇଁ ଡିଫଲ୍ଟ ମୋଡିଫାୟର୍ କ୍ଲାସଗୁଡିକ ସହିତ ବଦଳାନ୍ତୁ |
ଆକାରଗୁଡିକ |
ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଅତିରିକ୍ତ ଆକାର ପାଇଁ ଯୋଗ କରନ୍ତୁ .btn-lg
|.btn-sm
ଯୋଗକରି ବ୍ଲକ ସ୍ତରୀୟ ବଟନ୍ଗୁଡ଼ିକ ସୃଷ୍ଟି କରନ୍ତୁ - ଯାହା ପିତାମାତାଙ୍କ ସମ୍ପୂର୍ଣ୍ଣ ଓସାରକୁ ବିସ୍ତାର କରେ .btn-block
|
ସକ୍ରିୟ ଅବସ୍ଥା |
ସକ୍ରିୟ ଥିବାବେଳେ ବଟନ୍ଗୁଡ଼ିକ ଦବାଇ ଦେଖାଯିବ (ଏକ ଗା er ଼ ପୃଷ୍ଠଭୂମି, ଗା er ଼ ସୀମା, ଏବଂ ଇନ୍ସେଟ୍ ଛାୟା ସହିତ) | S ରେ ଏକ କ୍ଲାସ୍ ଯୋଡିବାର କ .ଣସି ଆବଶ୍ୟକତା ନାହିଁ <button>
ଯେହେତୁ ସେମାନେ ଏକ ଛଉ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତି | ତଥାପି, ତୁମେ ତଥାପି ସମାନ ସକ୍ରିୟ ଦୃଶ୍ୟକୁ ବାଧ୍ୟ କରିପାରିବ .active
(ଏବଂ aria-pressed="true"
ଗୁଣବତ୍ତା ଅନ୍ତର୍ଭୂକ୍ତ କର) ଯଦି ତୁମେ ରାଜ୍ୟକୁ ପ୍ରୋଗ୍ରାମିକ୍ ଭାବରେ ନକଲ କରିବାକୁ ପଡିବ |
ଅକ୍ଷମ ଅବସ୍ଥା |
ଯେକ any ଣସି ଉପାଦାନରେ disabled
ବୁଲିୟାନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡି ବଟନ୍ ଗୁଡିକ ନିଷ୍କ୍ରିୟ ଦେଖାଯାଏ |<button>
ଉପାଦାନ ବ୍ୟବହାର କରି ଅକ୍ଷମ ବଟନ୍ଗୁଡ଼ିକ <a>
ଟିକେ ଭିନ୍ନ ଆଚରଣ କରନ୍ତି:
<a>
s ଗୁଣକୁ ସମର୍ଥନ କରେ ନାହିଁ , ତେଣୁ ଏହାକୁ ଭିଜୁଆଲ୍ ଅକ୍ଷମ ଦେଖାଯିବା ପାଇଁdisabled
ତୁମକୁ ଶ୍ରେଣୀ ଯୋଡିବାକୁ ପଡିବ |.disabled
pointer-events
ସମସ୍ତ ଆଙ୍କର୍ ବଟନ୍ ଗୁଡିକ ଅକ୍ଷମ କରିବାକୁ କିଛି ଭବିଷ୍ୟତ-ଅନୁକୂଳ ଶ yles ଳୀ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି | ବ୍ରାଉଜର୍ ଗୁଡିକରେ ଯାହା ସେହି ସମ୍ପତ୍ତିକୁ ସମର୍ଥନ କରେ, ଆପଣ ଆଦ disabled ଅକ୍ଷମ କର୍ସର୍ ଦେଖିବେ ନାହିଁ |- ଅକ୍ଷମ ବଟନ୍ଗୁଡ଼ିକ
aria-disabled="true"
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଉପାଦାନର ସ୍ଥିତି ସୂଚାଇବା ପାଇଁ ଗୁଣ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ୍ |
ଲିଙ୍କ୍ କାର୍ଯ୍ୟକାରିତା ସଚେତନତା |
.disabled
କ୍ଲାସ୍ ଗୁଡିକର ଲିଙ୍କ୍ କାର୍ଯ୍ୟକାରିତାକୁ ଅକ୍ଷମ କରିବାକୁ ଚେଷ୍ଟା କରିବାକୁ ବ୍ୟବହାର କରେ , pointer-events: none
କିନ୍ତୁ <a>
ସେହି CSS ସମ୍ପତ୍ତି ଏପର୍ଯ୍ୟନ୍ତ ମାନକ ହୋଇନାହିଁ | ଏହା ସହିତ, ବ୍ରାଉଜରରେ ମଧ୍ୟ, ଯେଉଁମାନେ ସମର୍ଥନ କରନ୍ତି pointer-events: none
, କୀବୋର୍ଡ୍ ନେଭିଗେସନ୍ ପ୍ରଭାବିତ ହୋଇନଥାଏ, ଅର୍ଥାତ୍ ଦୃଶ୍ୟମାନ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନେ ଏହି ଲିଙ୍କଗୁଡ଼ିକୁ ସକ୍ରିୟ କରିବାକୁ ସକ୍ଷମ ହେବେ | ତେଣୁ ନିରାପଦ ରହିବାକୁ, tabindex="-1"
ଏହି ଲିଙ୍କଗୁଡ଼ିକରେ ଏକ ଗୁଣ ଯୋଡନ୍ତୁ (ସେମାନଙ୍କୁ କୀବୋର୍ଡ୍ ଫୋକସ୍ ଗ୍ରହଣ ନକରିବା ପାଇଁ) ଏବଂ ସେମାନଙ୍କର କାର୍ଯ୍ୟକାରିତାକୁ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ |
ବଟନ୍ ପ୍ଲଗଇନ୍ |
ବଟନ୍ ସହିତ ଅଧିକ କରନ୍ତୁ | ଟୁଲ୍ ବାର୍ ପରି ଅଧିକ ଉପାଦାନ ପାଇଁ କଣ୍ଟ୍ରୋଲ୍ ବଟନ୍ ଷ୍ଟେଟସ୍ କିମ୍ବା ବଟନ୍ ଗୋଷ୍ଠୀ ସୃଷ୍ଟି କରେ |
ଟୋଗଲ୍ ଦର୍ଶାଏ |
data-toggle="button"
ଏକ ବଟନ୍ ର active
ଅବସ୍ଥା ଟୋଗଲ୍ କରିବାକୁ ଯୋଡନ୍ତୁ | ଯଦି ଆପଣ ଏକ ବଟନ୍ ପ୍ରି-ଟୋଗଲ୍ କରୁଛନ୍ତି, ତେବେ ଆପଣ ନିଶ୍ଚିତ ଭାବରେ .active
କ୍ଲାସ୍ ଏବଂ aria-pressed="true"
କୁ ଯୋଗ କରିବେ <button>
|
ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ବଟନ୍ |
ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓ ଷ୍ଟାଇଲ୍ ବଟନ୍ ଟୋଗଲ୍ ଯୋଗାଇବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଶ yles ଳୀ .button
ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକରେ ପ୍ରୟୋଗ କରାଯାଇପାରିବ | ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ସେମାନଙ୍କର ଟୋଗଲ୍ ଆଚରଣକୁ ସକ୍ଷମ କରିବାକୁ ସେହି ପରିବର୍ତ୍ତିତ ବଟନ୍ଗୁଡ଼ିକୁ ଧାରଣ କରିଥିବା ଏକ <label>
ଯୋଡନ୍ତୁ ଏବଂ ଆପଣଙ୍କ ବଟନ୍ ମଧ୍ୟରେ s କୁ ଶ style ଳୀରେ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆପଣ ଏକକ ଇନପୁଟ୍-ଚାଳିତ ବଟନ୍ କିମ୍ବା ସେଗୁଡ଼ିକର ଗୋଷ୍ଠୀ ସୃଷ୍ଟି କରିପାରିବେ |data-toggle="buttons"
.btn-group
.btn-group-toggle
<input>
ଏହି ବଟନ୍ଗୁଡ଼ିକ ପାଇଁ ଯାଞ୍ଚ ହୋଇଥିବା ଅବସ୍ଥା କେବଳ ବଟନ୍ ରେ ଇଭେଣ୍ଟ ମାଧ୍ୟମରେ ଅପଡେଟ୍click
| ଯଦି ଆପଣ ଇନପୁଟ୍ ଅପଡେଟ୍ କରିବାକୁ ଅନ୍ୟ ଏକ ପଦ୍ଧତି ବ୍ୟବହାର କରନ୍ତି - ଯଥା, <input type="reset">
ଇନପୁଟ୍ ର checked
ସମ୍ପତ୍ତି ସହିତ କିମ୍ବା ମାନୁଆଲ୍ ପ୍ରୟୋଗ କରି - ଆପଣଙ୍କୁ ମାନୁଆଲ୍ ଟୋଗଲ୍ କରିବାକୁ .active
ପଡିବ <label>
|
.active
ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ପ୍ରି-ଚେକ୍ ହୋଇଥିବା ବଟନ୍ଗୁଡ଼ିକ ଆପଣଙ୍କୁ ଇନପୁଟ୍ ସହିତ କ୍ଲାସ୍ ମାନୁଆଲ୍ ଯୋଡିବା ଆବଶ୍ୟକ କରେ <label>
|
ପ୍ରଣାଳୀ
ପଦ୍ଧତି | ବର୍ଣ୍ଣନା |
---|---|
$().button('toggle') |
ଟୋଗଲ୍ ସ୍ଥିତିକୁ ଠେଲିଦିଏ | ଏହା ସକ୍ରିୟ ହୋଇଥିବା ବଟନ୍ କୁ ଦିଏ | |
$().button('dispose') |
ଏକ ଉପାଦାନର ବଟନ୍ ନଷ୍ଟ କରେ | |