চেক আৰু ৰেডিঅ’

আমাৰ সম্পূৰ্ণৰূপে পুনৰ লিখা পৰীক্ষাসমূহ উপাদানৰ সৈতে সামঞ্জস্যপূৰ্ণ ক্ৰছ-ব্ৰাউজাৰ আৰু ক্ৰছ-ডিভাইচ চেকবক্স আৰু ৰেডিঅ'সমূহ সৃষ্টি কৰক।

এই পৃষ্ঠাত

পদ্ধতি

ব্ৰাউজাৰ অবিকল্পিত চেকবক্স আৰু ৰেডিঅ'সমূহক ৰ সহায়ত সলনি কৰা হয় .form-check, দুয়োটা ইনপুট ধৰণৰ বাবে এটা শ্ৰেণীৰ শৃংখলা যি সিহতৰ HTML উপাদানসমূহৰ পৰিকল্পনা আৰু আচৰণ উন্নত কৰে, যি অধিক স্বনিৰ্বাচন আৰু ক্ৰছ ব্ৰাউজাৰ সামঞ্জস্যতা প্ৰদান কৰে। চেকবাকচসমূহ এটা তালিকাত এটা বা কেইবাটাও বিকল্প নিৰ্ব্বাচন কৰাৰ বাবে, ৰেডিঅ'সমূহ বহুতৰ পৰা এটা বিকল্প নিৰ্ব্বাচন কৰাৰ বাবে।

গাঁথনিগতভাৱে, আমাৰ <input>s আৰু s এটা ভিতৰৰ এটাৰ <label>বিপৰীতে ভাই-ভনী উপাদান । এইটো অলপ বেছি শব্দৰ কাৰণ আপুনি আৰু ৰ সৈতে সম্পৰ্কিত কৰিবলে আৰু বৈশিষ্ট্যসমূহ ধাৰ্য্য কৰিব লাগিব । আমি আমাৰ সকলো ৰাজ্যৰ বাবে ভাই-ভনী নিৰ্বাচক ( ) ব্যৱহাৰ কৰো , যেনে বা . ক্লাছৰ সৈতে সংযুক্ত কৰিলে আমি 's অৱস্থাৰ ওপৰত ভিত্তি কৰি প্ৰতিটো বস্তুৰ বাবে লিখাটো সহজেই ষ্টাইল কৰিব পাৰো ।<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

আমাৰ পৰীক্ষাসমূহে নিৰীক্ষণ কৰা বা অনিৰ্দিষ্ট অৱস্থাসমূহ সূচাবলৈ স্বনিৰ্বাচিত বুটষ্ট্ৰেপ আইকনসমূহ ব্যৱহাৰ কৰে।

চেক কৰে

অবিকল্পিত চেকবক্স

চেকবক্স নিৰ্বাচন কৰা হৈছে

html

<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 স্বয়ংক্ৰিয়ভাৱে এটা পাতল ৰঙৰ সৈতে মিলাবলৈ শৈলী কৰা হয় ইনপুটৰ অৱস্থা সূচনা কৰাত সহায় কৰিবলে।

অনিৰ্দিষ্ট চেকবাক্স নিষ্ক্ৰিয় কৰা হৈছে

নিষ্ক্ৰিয় কৰা চেকবাক্স

নিষ্ক্ৰিয় কৰা হৈছে চেকবক্স

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<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>

ৰেডিঅ'

অবিকল্পিত ৰেডিঅ'

অবিকল্পিতভাৱে পৰীক্ষা কৰা ৰেডিঅ'

html

<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>

অক্ষম হোৱা

নিষ্ক্ৰিয় ৰেডিঅ'

নিষ্ক্ৰিয় কৰা পৰীক্ষা কৰা ৰেডিঅ'

html

<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চুইচসমূহেও বৈশিষ্ট্যটো সমৰ্থন কৰে ।

অবিকল্পিত চুইচ চেকবক্স ইনপুট

চুইচ চেকবক্স ইনপুট পৰীক্ষা কৰা হৈছে

চুইচ চেকবক্স ইনপুট নিষ্ক্ৰিয় কৰা হৈছে

নিষ্ক্ৰিয় কৰা হৈছে নিৰীক্ষণ কৰা চুইচ চেকবক্স ইনপুট

html

<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>

অবিকল্পিত (ষ্টেক কৰা)

অবিকল্পিতভাৱে, যিকোনো সংখ্যক চেকবাক্স আৰু ৰেডিঅ'সমূহ যি তাৎক্ষণিক ভাই-ভনী উলম্বভাৱে ষ্টেক কৰা হব আৰু উপযুক্তভাৱে ৰ সৈতে ব্যৱধান কৰা হব .form-check।

অবিকল্পিত চেকবক্স

নিষ্ক্ৰিয় কৰা চেকবাক্স

html

<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>

অবিকল্পিত ৰেডিঅ'

দ্বিতীয় অবিকল্পিত ৰেডিঅ'

নিষ্ক্ৰিয় ৰেডিঅ'

html

<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যিকোনো ত যোগ কৰি গোট কৰক .form-check।

১

২

৩ (অক্ষম)

html

<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>

১

২

৩ (অক্ষম)

html

<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-reverseপৰিবৰ্তক শ্ৰেণীৰ সৈতে বিপৰীত ফালে ৰাখক।

উলটি চেকবক্স

ৰিভাৰ্ছ চেকবক্স নিষ্ক্ৰিয় কৰা হৈছে

ৰিভাৰ্ছ চুইচ চেকবক্স ইনপুট

html

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

লেবেল অবিহনে

চেকবাক্স আৰু ৰেডিঅ'সমূহৰ বাবে ৰেপিং বাদ দিয়ক .form-checkযাৰ কোনো লেবেল লিখনী নাই। সহায়ক প্ৰযুক্তিসমূহৰ বাবে এতিয়াও কোনো ধৰণৰ অভিগম্য নাম প্ৰদান কৰিবলৈ মনত ৰাখিব (উদাহৰণস্বৰূপ, ব্যৱহাৰ কৰা aria-label)। বিৱৰণৰ বাবে প্ৰপত্ৰসমূহৰ অভাৰভিউ অভিগম্যতা অংশ চাওক।

html

<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নহয় শৈলীসমূহ ব্যৱহাৰ .form-check-labelকৰি বুটামৰ দৰে চেকবাকচসমূহ আৰু ৰেডিঅ' বুটামসমূহ সৃষ্টি কৰক । <label>এই টগল বুটামসমূহক প্ৰয়োজন হ'লে এটা বুটাম গোটত অধিক গোট কৰিব পাৰি।

চেকবক্স টগল বুটামসমূহ

একক টগল

html

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

পৰীক্ষা কৰা হৈছে

html

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

অক্ষম হোৱা

html

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

দৃশ্যমানভাৱে, এই চেকবাক্স টগল বুটামসমূহ বুটাম প্লাগইন টগল বুটামসমূহৰ সৈতে একে । কিন্তু, সহায়ক প্ৰযুক্তিৰ দ্বাৰা ইয়াক বেলেগ ধৰণে প্ৰেৰণ কৰা হয়: চেকবক্স টগলসমূহ স্ক্ৰীণ ৰিডাৰসকলে “পৰীক্ষা কৰা”/“পৰীক্ষা কৰা হোৱা নাই” বুলি ঘোষণা কৰিব (যিহেতু, ইয়াৰ ৰূপ সত্ত্বেও, ইহঁত মৌলিকভাৱে এতিয়াও চেকবক্স), আনহাতে বুটাম প্লাগইন টগল বুটামসমূহ হ’ব “বুটাম”/“বুটাম টিপিলে” হিচাপে ঘোষণা কৰা হৈছে। এই দুটা পদ্ধতিৰ মাজৰ পছন্দ আপুনি সৃষ্টি কৰা টগলৰ ধৰণৰ ওপৰত নিৰ্ভৰ কৰিব, আৰু এটা চেকবাকচ হিচাপে বা এটা প্ৰকৃত বুটাম হিচাপে ঘোষণা কৰাৰ সময়ত টগলে ব্যৱহাৰকাৰীসকলৰ বাবে যুক্তিযুক্ত হ'ব নে নহয়।

ৰেডিঅ' টগল বুটাম

পৰীক্ষা কৰা হৈছে ৰেডিঅ' অক্ষম হোৱা ৰেডিঅ'

html

<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>

ৰূপৰেখাযুক্ত শৈলীসমূহ

ৰ বিভিন্ন ভিন্নতা .btn, যেনে বিভিন্ন ৰূপৰেখা শৈলীসমূহত, সমৰ্থিত।

একক টগল
পৰীক্ষা কৰা হৈছে
সফলতা ৰেডিঅ' পৰীক্ষা কৰা হৈছে বিপদ ৰেডিঅ'

html

<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 10 3 3 6-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;