ବଟନ୍

ଏକାଧିକ ଆକାର, ରାଜ୍ୟ, ଏବଂ ଅଧିକ ପାଇଁ ସମର୍ଥନ ସହିତ ଫର୍ମ, ସଂଳାପ, ଏବଂ ଅଧିକ କାର୍ଯ୍ୟ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ର କଷ୍ଟମ୍ ବଟନ୍ ଶ yles ଳୀ ବ୍ୟବହାର କରନ୍ତୁ |

ଉଦାହରଣଗୁଡିକ

ବୁଟଷ୍ଟ୍ରାପରେ ଅନେକ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ବଟନ୍ ଶ yles ଳୀ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ପ୍ରତ୍ୟେକ ନିଜ ନିଜର ଅର୍ଥଗତ ଉଦ୍ଦେଶ୍ୟକୁ ସେବା କରୁଛନ୍ତି, ଅଧିକ ନିୟନ୍ତ୍ରଣ ପାଇଁ କିଛି ଅତିରିକ୍ତ ଫୋପାଡି ଦିଆଯାଇଛି |

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

ଟେକ୍ସଟ୍ ରାପିଙ୍ଗ୍ ଅକ୍ଷମ କରନ୍ତୁ |

ଯଦି ଆପଣ ବଟନ୍ ଟେକ୍ସଟ୍ ଗୁଡ଼ାଇ ରଖିବାକୁ ଚାହୁଁନାହାଁନ୍ତି, ତେବେ ଆପଣ .text-nowrapବଟନ୍ ରେ କ୍ଲାସ୍ ଯୋଡିପାରିବେ | ସାସ୍ ରେ, ଆପଣ $btn-white-space: nowrapପ୍ରତ୍ୟେକ ବଟନ୍ ପାଇଁ ଟେକ୍ସଟ୍ ରାପିଙ୍ଗ୍ ଅକ୍ଷମ କରିବାକୁ ସେଟ୍ କରିପାରିବେ |

ବଟନ୍ ଟ୍ୟାଗ୍ |

ଉପାଦାନଗୁଡିକ .btnସହିତ ବ୍ୟବହାର କରିବାକୁ ଶ୍ରେଣୀଗୁଡିକ ଡିଜାଇନ୍ କରାଯାଇଛି <button>| ତଥାପି, ଆପଣ ଏହି ଶ୍ରେଣୀଗୁଡିକ <a>କିମ୍ବା <input>ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ (ଯଦିଓ କିଛି ବ୍ରାଉଜର୍ ସାମାନ୍ୟ ଭିନ୍ନ ରେଣ୍ଡରିଂ ପ୍ରୟୋଗ କରିପାରନ୍ତି) |

ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ବଟନ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରିବାବେଳେ <a>ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠା ମଧ୍ୟରେ ନୂତନ ପୃଷ୍ଠାଗୁଡ଼ିକ କିମ୍ବା ବିଭାଗଗୁଡିକ ସହିତ ଲିଙ୍କ୍ କରିବା ପରିବର୍ତ୍ତେ ଇନ୍-ପେଜ୍ କାର୍ଯ୍ୟକାରିତାକୁ ଟ୍ରିଗର୍ କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ (ବିଷୟବସ୍ତୁ ନଷ୍ଟ ହେବା ପରି), ଏହି ଲିଙ୍କଗୁଡିକ role="button"ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ସେମାନଙ୍କର ଉଦ୍ଦେଶ୍ୟକୁ ଉପଯୁକ୍ତ ଭାବରେ ଜଣାଇବା ପାଇଁ ଦିଆଯିବା ଉଚିତ | ସ୍କ୍ରିନ୍ ପାଠକ |

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ବାହ୍ୟରେଖା ବଟନ୍ଗୁଡ଼ିକ |

ଏକ ବଟନ୍ ର ଆବଶ୍ୟକତା, କିନ୍ତୁ ସେମାନେ ଆଣିଥିବା ଭାରି ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ନୁହେଁ କି? .btn-outline-*ଯେକ any ଣସି ବଟନରେ ଥିବା ସମସ୍ତ ପୃଷ୍ଠପଟ ଚିତ୍ର ଏବଂ ରଙ୍ଗକୁ ହଟାଇବା ପାଇଁ ଡିଫଲ୍ଟ ମୋଡିଫାୟର କ୍ଲାସଗୁଡିକ ସହିତ ବଦଳାନ୍ତୁ |

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ଆକାରଗୁଡିକ |

ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଅତିରିକ୍ତ ଆକାର ପାଇଁ ଯୋଗ କରନ୍ତୁ .btn-lg|.btn-sm

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

ଯୋଗକରି ବ୍ଲକ ସ୍ତରୀୟ ବଟନ୍ଗୁଡ଼ିକ ସୃଷ୍ଟି କରନ୍ତୁ - ଯାହା ପିତାମାତାଙ୍କ ସମ୍ପୂର୍ଣ୍ଣ ଓସାରକୁ ବିସ୍ତାର କରେ .btn-block|

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

ସକ୍ରିୟ ଅବସ୍ଥା |

ଏକ ଗା er ଼ ପୃଷ୍ଠଭୂମି, ଗା er ଼ ସୀମା ସହିତ ସକ୍ରିୟ ଥିବାବେଳେ ବଟନ୍ଗୁଡ଼ିକ ଦବାଇ ଦେଖାଯିବ, ଏବଂ ଯେତେବେଳେ ଛାୟା ସକ୍ଷମ ହେବ, ଏକ ଇନସେଟ ଛାୟା | S ରେ ଏକ କ୍ଲାସ୍ ଯୋଡିବାର କ .ଣସି ଆବଶ୍ୟକତା ନାହିଁ <button>ଯେହେତୁ ସେମାନେ ଏକ ଛଉ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତି | ତଥାପି, ତୁମେ ତଥାପି ସମାନ ସକ୍ରିୟ ଦୃଶ୍ୟକୁ ବାଧ୍ୟ କରିପାରିବ .active(ଏବଂ aria-pressed=“true”ଗୁଣବତ୍ତା ଅନ୍ତର୍ଭୂକ୍ତ କର) ଯଦି ତୁମେ ରାଜ୍ୟକୁ ପ୍ରୋଗ୍ରାମିକ୍ ଭାବରେ ନକଲ କରିବାକୁ ପଡିବ |

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

ଅକ୍ଷମ ଅବସ୍ଥା |

ଯେକ any ଣସି ଉପାଦାନରେ disabledବୁଲିୟାନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡି ବଟନ୍ ଗୁଡିକ ନିଷ୍କ୍ରିୟ ଦେଖାଯାଏ |<button>

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

ଉପାଦାନ ବ୍ୟବହାର କରି ଅକ୍ଷମ ବଟନ୍ଗୁଡ଼ିକ <a>ଟିକେ ଭିନ୍ନ ଆଚରଣ କରନ୍ତି:

• <a>s ଗୁଣକୁ ସମର୍ଥନ କରେ ନାହିଁ , ତେଣୁ ଏହାକୁ ଭିଜୁଆଲ୍ ଅକ୍ଷମ ଦେଖାଯିବା ପାଇଁ disabledତୁମକୁ ଶ୍ରେଣୀ ଯୋଡିବାକୁ ପଡିବ |.disabled
• pointer-eventsସମସ୍ତ ଆଙ୍କର୍ ବଟନ୍ ଗୁଡିକ ଅକ୍ଷମ କରିବାକୁ କିଛି ଭବିଷ୍ୟତ-ଅନୁକୂଳ ଶ yles ଳୀ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି | ବ୍ରାଉଜର୍ ଗୁଡିକରେ ଯାହା ସେହି ସମ୍ପତ୍ତିକୁ ସମର୍ଥନ କରେ, ଆପଣ ଆଦ disabled ଅକ୍ଷମ କର୍ସର୍ ଦେଖିବେ ନାହିଁ |
• ବ୍ୟବହାର କରୁଥିବା ଅକ୍ଷମ ବଟନ୍ଗୁଡ଼ିକ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଉପାଦାନର ସ୍ଥିତି ସୂଚାଇବା ପାଇଁ ଗୁଣ <a>ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ |aria-disabled="true"
• ବ୍ୟବହାର କରୁଥିବା ଅକ୍ଷମ ବଟନ୍ଗୁଡ଼ିକ ଗୁଣବତ୍ତା ଅନ୍ତର୍ଭୂକ୍ତ କରିବା <a> ଉଚିତ୍ ନୁହେଁhref |

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

ଲିଙ୍କ୍ କାର୍ଯ୍ୟକାରିତା ସଚେତନତା |

hrefମାମଲାଗୁଡ଼ିକୁ କଭର୍ କରିବାକୁ ଯେଉଁଠାରେ ଆପଣଙ୍କୁ ଏକ ଅକ୍ଷମ ଲିଙ୍କରେ ଆଟ୍ରିବ୍ୟୁଟ୍ ରଖିବାକୁ ପଡିବ , s ର ଲିଙ୍କ୍ କାର୍ଯ୍ୟକାରିତାକୁ ଅକ୍ଷମ କରିବାକୁ ଚେଷ୍ଟା କରିବାକୁ .disabledଶ୍ରେଣୀ ବ୍ୟବହାର କରେ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏହି CSS ସମ୍ପତ୍ତି HTML ପାଇଁ ଏପର୍ଯ୍ୟନ୍ତ ମାନକ ହୋଇନାହିଁ, କିନ୍ତୁ ସମସ୍ତ ଆଧୁନିକ ବ୍ରାଉଜର୍ ଏହାକୁ ସମର୍ଥନ କରନ୍ତି | ଏହା ସହିତ, ବ୍ରାଉଜରରେ ମଧ୍ୟ, ଯେଉଁମାନେ ସମର୍ଥନ କରନ୍ତି , କୀବୋର୍ଡ୍ ନେଭିଗେସନ୍ ପ୍ରଭାବିତ ହୋଇନଥାଏ, ଅର୍ଥାତ୍ ଦୃଶ୍ୟମାନ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନେ ଏହି ଲିଙ୍କଗୁଡ଼ିକୁ ସକ୍ରିୟ କରିବାକୁ ସକ୍ଷମ ହେବେ | ତେଣୁ ନିରାପଦ ରହିବାକୁ, ଏହା ସହିତ , ଏହି ଲିଙ୍କଗୁଡ଼ିକରେ ଏକ ଗୁଣ ମଧ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ, ସେମାନଙ୍କୁ କୀବୋର୍ଡ୍ ଫୋକସ୍ ଗ୍ରହଣ ନକରିବା ପାଇଁ, ଏବଂ ସେମାନଙ୍କର କାର୍ଯ୍ୟକାରିତାକୁ ଅକ୍ଷମ କରିବା ପାଇଁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ |pointer-events: none<a>pointer-events: nonearia-disabled="true"tabindex="-1"

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ବଟନ୍ ପ୍ଲଗଇନ୍ |

ବଟନ୍ ସହିତ ଅଧିକ କରନ୍ତୁ | ଟୁଲ୍ ବାର୍ ପରି ଅଧିକ ଉପାଦାନ ପାଇଁ କଣ୍ଟ୍ରୋଲ୍ ବଟନ୍ ଷ୍ଟେଟସ୍ କିମ୍ବା ବଟନ୍ ଗୋଷ୍ଠୀ ସୃଷ୍ଟି କରେ |

ଟୋଗଲ୍ ଦର୍ଶାଏ |

data-toggle="button"ଏକ ବଟନ୍ ର activeଅବସ୍ଥା ଟୋଗଲ୍ କରିବାକୁ ଯୋଡନ୍ତୁ | ଯଦି ଆପଣ ଏକ ବଟନ୍ ପ୍ରି-ଟୋଗଲ୍ କରୁଛନ୍ତି, ତେବେ ଆପଣ ନିଶ୍ଚିତ ଭାବରେ .activeକ୍ଲାସ୍ ଏବଂ aria-pressed="true" କୁ ଯୋଗ କରିବେ <button>|

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ବଟନ୍ |

ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓ ଷ୍ଟାଇଲ୍ ବଟନ୍ ଟୋଗଲ୍ ଯୋଗାଇବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଶ yles ଳୀ .buttonଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକରେ ପ୍ରୟୋଗ କରାଯାଇପାରିବ | ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ସେମାନଙ୍କର ଟୋଗଲ୍ ଆଚରଣକୁ ସକ୍ଷମ କରିବାକୁ ସେହି ପରିବର୍ତ୍ତିତ ବଟନ୍ଗୁଡ଼ିକୁ ଧାରଣ କରିଥିବା ଏକ <label>ଯୋଡନ୍ତୁ ଏବଂ ଆପଣଙ୍କ ବଟନ୍ ମଧ୍ୟରେ s କୁ ଶ style ଳୀରେ ଯୋଡନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆପଣ ଏକକ ଇନପୁଟ୍-ଚାଳିତ ବଟନ୍ କିମ୍ବା ସେଗୁଡ଼ିକର ଗୋଷ୍ଠୀ ସୃଷ୍ଟି କରିପାରିବେ |data-toggle="buttons".btn-group.btn-group-toggle<input>

ଏହି ବଟନ୍ଗୁଡ଼ିକ ପାଇଁ ଯାଞ୍ଚ ହୋଇଥିବା ଅବସ୍ଥା କେବଳ ବଟନ୍ ରେ ଇଭେଣ୍ଟ ମାଧ୍ୟମରେ ଅପଡେଟ୍click | ଯଦି ଆପଣ ଇନପୁଟ୍ ଅପଡେଟ୍ କରିବାକୁ ଅନ୍ୟ ଏକ ପଦ୍ଧତି ବ୍ୟବହାର କରନ୍ତି - ଯଥା, <input type="reset">ଇନପୁଟ୍ ର checkedସମ୍ପତ୍ତି ସହିତ କିମ୍ବା ମାନୁଆଲ୍ ପ୍ରୟୋଗ କରି - ଆପଣଙ୍କୁ ମାନୁଆଲ୍ ଟୋଗଲ୍ କରିବାକୁ .activeପଡିବ <label>|

.activeଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ପ୍ରି-ଚେକ୍ ହୋଇଥିବା ବଟନ୍ଗୁଡ଼ିକ ଆପଣଙ୍କୁ ଇନପୁଟ୍ ସହିତ କ୍ଲାସ୍ ମାନୁଆଲ୍ ଯୋଡିବା ଆବଶ୍ୟକ କରେ <label>|

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

ପ୍ରଣାଳୀ