ବଟନ୍

ଏକାଧିକ ଆକାର, ରାଜ୍ୟ, ଏବଂ ଅଧିକ ପାଇଁ ସମର୍ଥନ ସହିତ ଫର୍ମ, ସଂଳାପ, ଏବଂ ଅଧିକ କାର୍ଯ୍ୟ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ର କଷ୍ଟମ୍ ବଟନ୍ ଶ 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>

ବଟନ୍ ଟ୍ୟାଗ୍ |

ଉପାଦାନଗୁଡିକ .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 ଅକ୍ଷମ କର୍ସର୍ ଦେଖିବେ ନାହିଁ |
• ଅକ୍ଷମ ବଟନ୍ଗୁଡ଼ିକ aria-disabled="true"ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଉପାଦାନର ସ୍ଥିତି ସୂଚାଇବା ପାଇଁ ଗୁଣ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ୍ |

<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" autocomplete="off">
  Single toggle
</button>

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

ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓ ଷ୍ଟାଇଲ୍ ବଟନ୍ ଟୋଗଲ୍ ଯୋଗାଇବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଶ yles ଳୀ .buttonଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକରେ ପ୍ରୟୋଗ କରାଯାଇପାରିବ | ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ସେମାନଙ୍କର ଟୋଗଲ୍ ଆଚରଣକୁ ସକ୍ଷମ କରିବାକୁ ସେହି ପରିବର୍ତ୍ତିତ ବଟନ୍ଗୁଡ଼ିକୁ ଧାରଣ କରିଥିବା ଏକ <label>ଯୋଡନ୍ତୁ ଏବଂ ଆପଣଙ୍କ ବଟନ୍ ମଧ୍ୟରେ ଥିବା ଶ 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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

ପ୍ରଣାଳୀ