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

ଯାଞ୍ଚ ଏବଂ ରେଡିଓ |

ଆମର ସଂପୂର୍ଣ୍ଣ ପୁନ r ଲିଖିତ ଚେକ୍ ଉପାଦାନ ସହିତ କ୍ରମାଗତ କ୍ରସ୍ ବ୍ରାଉଜର୍ ଏବଂ କ୍ରସ୍-ଡିଭାଇସ୍ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ସୃଷ୍ଟି କରନ୍ତୁ |

ଉପାୟ

ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓଗୁଡ଼ିକ ସାହାଯ୍ୟରେ ପ୍ରତିସ୍ଥାପିତ ହୋଇଛି .form-check, ଉଭୟ ଇନପୁଟ୍ ପ୍ରକାର ପାଇଁ ଏକ ଶ୍ରେଣୀ ଯାହାକି ସେମାନଙ୍କର HTML ଉପାଦାନଗୁଡ଼ିକର ଲେଆଉଟ୍ ଏବଂ ଆଚରଣକୁ ଉନ୍ନତ କରିଥାଏ, ଯାହା ଅଧିକ କଷ୍ଟମାଇଜେସନ୍ ଏବଂ କ୍ରସ୍ ବ୍ରାଉଜର୍ ସ୍ଥିରତା ପ୍ରଦାନ କରିଥାଏ | ଚେକ୍ ବକ୍ସଗୁଡିକ ଏକ ତାଲିକାରେ ଗୋଟିଏ କିମ୍ବା ଅନେକ ବିକଳ୍ପ ବାଛିବା ପାଇଁ, ଯେତେବେଳେ କି ରେଡିଓଗୁଡ଼ିକ ଅନେକଙ୍କ ମଧ୍ୟରୁ ଗୋଟିଏ ବିକଳ୍ପ ବାଛିବା ପାଇଁ |

ଗଠନମୂଳକ ଭାବରେ, ଆମର <input>s ଏବଂ <label>s ଭାଇଭାଇନ୍ ଉପାଦାନ, a <input>ଭିତରେ ଥିବା ବିପରୀତ <label>| ଏହା ସାମାନ୍ୟ ଅଧିକ ଭର୍ସବୋଜ୍ ଅଟେ ଯେହେତୁ ଆପଣ idଏବଂ ଆମେ ଆମର ସମସ୍ତ ରାଜ୍ୟ ପାଇଁ ଭାଇଭାଇନ୍ ସିଲେକ୍ଟର୍ ( ) ବ୍ୟବହାର କରୁ , ଯେପରି କି । ଯେତେବେଳେ କ୍ଲାସ୍ ସହିତ ମିଳିତ ହୁଏ , ଆମେ ସ୍ଥିତିକୁ ଆଧାର କରି ପ୍ରତ୍ୟେକ ଆଇଟମ୍ ପାଇଁ ଟେକ୍ସଟ୍କୁ ସହଜରେ ଷ୍ଟାଇଲ୍ କରିପାରିବା |for<input><label>~<input>:checked:disabled.form-check-label<input>

ଚେକ୍ କିମ୍ବା ଅନିର୍ଦ୍ଦିଷ୍ଟ ସ୍ଥିତିକୁ ସୂଚାଇବା ପାଇଁ ଆମର ଚେକ୍ କଷ୍ଟମ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ଆଇକନ୍ ବ୍ୟବହାର କରେ |

ଯା cks ୍ଚ

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

ଅନିର୍ଦ୍ଦିଷ୍ଟ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ମାନୁଆଲୀ ସେଟ୍ ହେବାବେଳେ ଚେକ୍ ବକ୍ସଗୁଡ଼ିକ ଛଉ ଶ୍ରେଣୀକୁ ବ୍ୟବହାର କରିପାରିବ :indeterminate(ଏହାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବା ପାଇଁ କ HTML ଣସି HTML ଗୁଣ ନାହିଁ) |

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

ଅକ୍ଷମ

ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ disabledଏବଂ ସଂପୃକ୍ତ <label>s ଗୁଡିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ହାଲୁକା ରଙ୍ଗ ସହିତ ମେଳ ହେବା ପାଇଁ ଇନପୁଟ୍ ସ୍ଥିତିକୁ ସୂଚାଇବାରେ ସାହାଯ୍ୟ କରେ |

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

ରେଡିଓ

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

ଅକ୍ଷମ

ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ disabledଏବଂ ସଂପୃକ୍ତ <label>s ଗୁଡିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ହାଲୁକା ରଙ୍ଗ ସହିତ ମେଳ ହେବା ପାଇଁ ଇନପୁଟ୍ ସ୍ଥିତିକୁ ସୂଚାଇବାରେ ସାହାଯ୍ୟ କରେ |

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

ସୁଇଚ୍

ଏକ ସୁଇଚ୍ ରେ ଏକ କଷ୍ଟମ୍ ଚେକ୍ ବକ୍ସର ମାର୍କଅପ୍ ଅଛି କିନ୍ତୁ .form-switchଟୋଗଲ୍ ସୁଇଚ୍ ରେଣ୍ଡର୍ କରିବାକୁ ଶ୍ରେଣୀ ବ୍ୟବହାର କରେ | role="switch"ଏହି ଭୂମିକାକୁ ସମର୍ଥନ କରୁଥିବା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାକୁ ନିୟନ୍ତ୍ରଣର ପ୍ରକୃତିକୁ ଅଧିକ ସଠିକ୍ ଭାବରେ ଜଣାଇବାକୁ ବ୍ୟବହାର କରିବାକୁ ଚିନ୍ତା କର | ପୁରାତନ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାରେ, ଏହାକୁ ଏକ ନିୟମିତ ଚେକ୍ ବକ୍ସ ଭାବରେ ଏକ ଫଲବ୍ୟାକ୍ ଭାବରେ ଘୋଷଣା କରାଯିବ | ସୁଇଚ୍ ଗୁଡିକ ମଧ୍ୟ disabledଆଟ୍ରିବ୍ୟୁଟ୍ କୁ ସମର୍ଥନ କରେ |

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

ଡିଫଲ୍ଟ (ଷ୍ଟାକ୍ଡ୍)

ଡିଫଲ୍ଟ ଭାବରେ, ଯେକ any ଣସି ସଂଖ୍ୟକ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ଯାହା ତୁରନ୍ତ ଭାଇଭଉଣୀ, ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ୍ ହୋଇ ଉପଯୁକ୍ତ ଭାବରେ ବ୍ୟବହୃତ ହେବ .form-check|

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

କ୍ରମରେ

.form-check-inlineଯେକ any ଣସି ଯୋଗ କରି ସମାନ ଭୂସମାନ୍ତର ଧାଡିରେ ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓ ଗ୍ରୁପ୍ କରନ୍ତୁ .form-check|

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

ଲେବଲ୍ ବିନା |

.form-checkଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ପାଇଁ ଗୁଡ଼ିକୁ ଛାଡିଦିଅ, ଯାହାର କ label ଣସି ଲେବଲ୍ ପାଠ୍ୟ ନାହିଁ | ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା (ଉଦାହରଣ ସ୍ୱରୂପ, ବ୍ୟବହାର aria-label) ପାଇଁ ତଥାପି କିଛି ଉପଲବ୍ଧ ନାମ ପ୍ରଦାନ କରିବାକୁ ମନେରଖ | ବିବରଣୀ ପାଇଁ ଫର୍ମ ସମୀକ୍ଷା ସମୀକ୍ଷା ଆକ୍ସେସିବିଲିଟି ବିଭାଗ ଦେଖନ୍ତୁ |

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

ବଟନ୍ ଟୋଗଲ୍ କରନ୍ତୁ |

.btnଉପାଦାନ ଅପେକ୍ଷା ଶ yles ଳୀ ବ୍ୟବହାର କରି ବଟନ୍ ପରି ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ବଟନ୍ ସୃଷ୍ଟି .form-check-labelକରନ୍ତୁ <label>| ଯଦି ଆବଶ୍ୟକ ହୁଏ ତେବେ ଏହି ଟୋଗଲ୍ ବଟନ୍ଗୁଡ଼ିକୁ ଏକ ବଟନ୍ ଗ୍ରୁପ୍ ରେ ଗ୍ରୁପ୍ କରାଯାଇପାରିବ |

ଚେକ୍ ବକ୍ସ ଟୋଗଲ୍ ବଟନ୍ |

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
ଭିଜୁଆଲ୍, ଏହି ଚେକ୍ ବକ୍ସ ଟୋଗଲ୍ ବଟନ୍ଗୁଡ଼ିକ ବଟନ୍ ପ୍ଲଗଇନ୍ ଟୋଗଲ୍ ବଟନ୍ ସହିତ ସମାନ | ତଥାପି, ସେମାନଙ୍କୁ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଦ୍ differ ାରା ଭିନ୍ନ ଭାବରେ ପଠାଯାଏ: ଚେକ୍ ବକ୍ସ ଟୋଗଲ୍ଗୁଡ଼ିକୁ ସ୍କ୍ରିନ ପାଠକମାନଙ୍କ ଦ୍ୱାରା “ଚେକ୍” / “ଚେକ୍ ହୋଇନଥାଏ” ଭାବରେ ଘୋଷଣା କରାଯିବ (ଯେହେତୁ, ସେମାନଙ୍କର ଦୃଶ୍ୟ ସତ୍ତ୍ they େ, ସେମାନେ ମ still ଳିକ ଭାବରେ ଚେକ୍ ବକ୍ସ ଅଟନ୍ତି), ଯେଉଁଠାରେ ବଟନ୍ ପ୍ଲଗଇନ୍ ଟୋଗଲ୍ ବଟନ୍ଗୁଡ଼ିକ ରହିବ | “ବଟନ୍” / “ବଟନ୍ ପ୍ରେସ୍” ଭାବରେ ଘୋଷିତ | ଏହି ଦୁଇଟି ଆଭିମୁଖ୍ୟ ମଧ୍ୟରେ ପସନ୍ଦ ଆପଣ ସୃଷ୍ଟି କରୁଥିବା ଟୋଗଲ୍ ପ୍ରକାର ଉପରେ ନିର୍ଭର କରିବ, ଏବଂ ଚେକ୍ ବକ୍ସ ଭାବରେ କିମ୍ବା ପ୍ରକୃତ ବଟନ୍ ଭାବରେ ଘୋଷିତ ହେବାବେଳେ ଟୋଗଲ୍ ଉପଭୋକ୍ତାମାନଙ୍କ ପାଇଁ କିଛି ଅର୍ଥ ଦେବ କି ନାହିଁ ତାହା ଉପରେ ନିର୍ଭର କରିବ |

ରେଡିଓ ଟୋଗଲ୍ ବଟନ୍ |

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

ବର୍ଣ୍ଣିତ ଶ yles ଳୀଗୁଡିକ |

ବିଭିନ୍ନ ପ୍ରକାରର .btnଶ yles ଳୀରେ ବିଭିନ୍ନ ପ୍ରକାରର ସମର୍ଥିତ |



<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

ସାସ୍ |

ଭେରିଏବଲ୍ |

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 1px solid rgba($black, .25);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;