ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
in English

ବଟନ୍

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

ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .visually-hiddenଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |

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

ଯଦି ଆପଣ ବଟନ୍ ଟେକ୍ସଟ୍ ଗୁଡ଼ାଇ ରଖିବାକୁ ଚାହୁଁନାହାଁନ୍ତି, ତେବେ ଆପଣ .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>
କେତେକ ବଟନ୍ ଶ yles ଳୀଗୁଡ଼ିକ ଅପେକ୍ଷାକୃତ ହାଲୁକା ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ବ୍ୟବହାର କରନ୍ତି, ଏବଂ ଯଥେଷ୍ଟ ବିପରୀତତା ପାଇବା ପାଇଁ କେବଳ ଅନ୍ଧାର ପୃଷ୍ଠଭୂମିରେ ବ୍ୟବହାର କରାଯିବା ଉଚିତ |

ଆକାରଗୁଡିକ |

ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଅତିରିକ୍ତ ଆକାର ପାଇଁ ଯୋଗ କରନ୍ତୁ .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>

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

ଯେକ any ଣସି ଉପାଦାନରେ disabledବୁଲିୟାନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡି ବଟନ୍ ଗୁଡିକ ନିଷ୍କ୍ରିୟ ଦେଖାଯାଏ | <button>ଅକ୍ଷମ ବଟନ୍ ଗୁଡିକ pointer-events: noneପ୍ରୟୋଗ ହୋଇଛି, ହୋଭର ଏବଂ ସକ୍ରିୟ ସ୍ଥିତିକୁ ଟ୍ରିଗରରୁ ରକ୍ଷା କରିଥାଏ |

<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 ଳୀ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି |
  • ବ୍ୟବହାର କରୁଥିବା ଅକ୍ଷମ ବଟନ୍ଗୁଡ଼ିକ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଉପାଦାନର ସ୍ଥିତି ସୂଚାଇବା ପାଇଁ ଗୁଣ <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>

ବଟନ୍ଗୁଡ଼ିକୁ ଅବରୋଧ କରନ୍ତୁ |

ଆମର ପ୍ରଦର୍ଶନ ଏବଂ ଫାଙ୍କା ଉପଯୋଗିତାଗୁଡ଼ିକର ମିଶ୍ରଣ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ 4 ପରି ଫୁଲ୍ ଓସାରର “ବ୍ଲକ୍ ବଟନ୍” ର ପ୍ରତିକ୍ରିୟାଶୀଳ ଷ୍ଟାକ ସୃଷ୍ଟି କରନ୍ତୁ | ବଟନ୍ ନିର୍ଦ୍ଦିଷ୍ଟ ଶ୍ରେଣୀ ବଦଳରେ ଉପଯୋଗିତା ବ୍ୟବହାର କରି, ବ୍ୟବଧାନ, ଶ୍ରେଣୀବଦ୍ଧତା ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ଆଚରଣ ଉପରେ ଆମର ଅଧିକ ନିୟନ୍ତ୍ରଣ ଅଛି |

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ଏଠାରେ ଆମେ ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ ସୃଷ୍ଟି କରୁ, mdବ୍ରେକପଏଣ୍ଟ ପର୍ଯ୍ୟନ୍ତ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ୍ ହୋଇଥିବା ବଟନ୍ ଠାରୁ ଆରମ୍ଭ କରି, ଯେଉଁଠାରେ ଶ୍ରେଣୀକୁ .d-md-blockବଦଳାଇଥାଏ .d-grid, ଏହିପରି gap-2ଉପଯୋଗିତାକୁ ବର୍ଜନ କରେ | ସେଗୁଡିକ ପରିବର୍ତ୍ତନ ଦେଖିବା ପାଇଁ ଆପଣଙ୍କର ବ୍ରାଉଜର୍ ର ଆକାର ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଓସାର ଶ୍ରେଣୀ ସହିତ ତୁମେ ତୁମର ବ୍ଲକ ବଟନ୍ଗୁଡ଼ିକର ଓସାରକୁ ସଜାଡି ପାରିବ | ଉଦାହରଣ ସ୍ୱରୂପ, ଅଧା ଓସାର “ବ୍ଲକ ବଟନ୍” ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ .col-6| ଏହାକୁ ମଧ୍ୟ ଭୂସମାନ୍ତର ଭାବରେ କେନ୍ଦ୍ର କରନ୍ତୁ .mx-auto|

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ଭୂସମାନ୍ତର ସମୟରେ ବଟନ୍ଗୁଡ଼ିକର ଆଲାଇନ୍ମେଣ୍ଟ ଆଡଜଷ୍ଟ କରିବାକୁ ଅତିରିକ୍ତ ୟୁଟିଲିଟି ବ୍ୟବହାର କରାଯାଇପାରିବ | ଏଠାରେ ଆମେ ଆମର ପୂର୍ବ ପ୍ରତିକ୍ରିୟାଶୀଳ ଉଦାହରଣ ନେଇଛୁ ଏବଂ ବଟନ୍ଗୁଡ଼ିକୁ ଡାହାଣ ଆଲାଇନ୍ କରିବା ପାଇଁ ବଟନ୍ ଉପରେ କିଛି ଫ୍ଲେକ୍ସ ୟୁଟିଲିଟି ଏବଂ ଏକ ମାର୍ଜିନ୍ ୟୁଟିଲିଟି ଯୋଡିଛୁ ଯେତେବେଳେ ସେମାନେ ଆଉ ଷ୍ଟାକ୍ ହୋଇନାହାଁନ୍ତି |

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

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

ବଟନ୍ ପ୍ଲଗଇନ୍ ଆପଣଙ୍କୁ ଟୋଗଲ୍ ବଟନ୍ ସରଳ / ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦିଏ |

ଭିଜୁଆଲ୍, ଏହି ଟୋଗଲ୍ ବଟନ୍ଗୁଡ଼ିକ ଚେକ୍ ବକ୍ସ ଟୋଗଲ୍ ବଟନ୍ ସହିତ ସମାନ | ତଥାପି, ସହାୟକ ଟେକ୍ନୋଲୋଜି ଦ୍ୱାରା ସେମାନଙ୍କୁ ଭିନ୍ନ ଭାବରେ ପଠାଯାଇଥାଏ: ଚେକ୍ ବକ୍ସ ଟୋଗଲ୍ଗୁଡ଼ିକୁ ସ୍କ୍ରିନ ପାଠକମାନଙ୍କ ଦ୍ୱାରା “ଚେକ୍” / “ଚେକ୍ ହୋଇନାହିଁ” ଭାବରେ ଘୋଷଣା କରାଯିବ (ଯେହେତୁ, ସେମାନଙ୍କର ଦୃଶ୍ୟ ସତ୍ତ୍ they େ, ସେମାନେ ମ still ଳିକ ଭାବରେ ଚେକ୍ ବକ୍ସ ଅଟନ୍ତି), ଯେତେବେଳେ କି ଏହି ଟୋଗଲ୍ ବଟନ୍ ଗୁଡିକ ଘୋଷଣା କରାଯିବ | “ବଟନ୍” / “ବଟନ୍ ଦବାଗଲା” | ଏହି ଦୁଇଟି ଆଭିମୁଖ୍ୟ ମଧ୍ୟରେ ପସନ୍ଦ ଆପଣ ସୃଷ୍ଟି କରୁଥିବା ଟୋଗଲ୍ ପ୍ରକାର ଉପରେ ନିର୍ଭର କରିବ, ଏବଂ ଚେକ୍ ବକ୍ସ ଭାବରେ କିମ୍ବା ପ୍ରକୃତ ବଟନ୍ ଭାବରେ ଘୋଷିତ ହେବାବେଳେ ଟୋଗଲ୍ ଉପଭୋକ୍ତାମାନଙ୍କ ପାଇଁ କିଛି ଅର୍ଥ ଦେବ କି ନାହିଁ ତାହା ଉପରେ ନିର୍ଭର କରିବ |

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

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

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

ପ୍ରଣାଳୀ

ଆପଣ ବଟନ୍ କନଷ୍ଟ୍ରକ୍ଟର୍ ସହିତ ଏକ ବଟନ୍ ଉଦାହରଣ ସୃଷ୍ଟି କରିପାରିବେ, ଉଦାହରଣ ସ୍ୱରୂପ:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
ପଦ୍ଧତି ବର୍ଣ୍ଣନା
toggle ଟୋଗଲ୍ ସ୍ଥିତିକୁ ଠେଲିଦିଏ | ଏହା ସକ୍ରିୟ ହୋଇଥିବା ବଟନ୍ କୁ ଦିଏ |
dispose ଏକ ଉପାଦାନର ବଟନ୍ ନଷ୍ଟ କରେ | (DOM ଉପାଦାନରେ ଗଚ୍ଛିତ ତଥ୍ୟ ଅପସାରଣ କରେ)
getInstance ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ବଟନ୍ ଉଦାହରଣ ପାଇବାକୁ ଅନୁମତି ଦିଏ, ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ:bootstrap.Button.getInstance(element)
getOrCreateInstance ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଏକ ବଟନ୍ ଉଦାହରଣ ଫେରସ୍ତ କରେ କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରେ | ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ:bootstrap.Button.getOrCreateInstance(element)

ଉଦାହରଣ ସ୍ୱରୂପ, ସମସ୍ତ ବଟନ୍ ଟୋଗଲ୍ କରିବାକୁ |

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

ସାସ୍ |

ଭେରିଏବଲ୍ |

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

ମିକ୍ସନ୍ସ |

ବଟନ୍ ପାଇଁ ତିନୋଟି ମିକ୍ସନ୍ ଅଛି: ବଟନ୍ ଏବଂ ବଟନ୍ ବାହ୍ୟରେଖା ଭାରିଆଣ୍ଟ ମିକ୍ସିନ୍ (ଉଭୟ ଉପରେ ଆଧାରିତ $theme-colors), ଏବଂ ଏକ ବଟନ୍ ସାଇଜ୍ ମିକ୍ସିନ୍ |

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }
}
@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

ଲୁପ୍ |

$theme-colorsବଟନ୍ ପ୍ରକାରଗୁଡିକ (ନିୟମିତ ଏବଂ ବାହ୍ୟରେଖା ବଟନ୍ ପାଇଁ) ମୋଡିଫାୟାର୍ କ୍ଲାସ୍ ସୃଷ୍ଟି କରିବାକୁ ଆମର ମାନଚିତ୍ର ସହିତ ସେମାନଙ୍କର ନିଜସ୍ୱ ମିଶ୍ରଣ ବ୍ୟବହାର କରେ scss/_buttons.scss|

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}