চেক আৰু ৰেডিঅ’
আমাৰ সম্পূৰ্ণৰূপে পুনৰ লিখা পৰীক্ষাসমূহ উপাদানৰ সৈতে সামঞ্জস্যপূৰ্ণ ক্ৰছ-ব্ৰাউজাৰ আৰু ক্ৰছ-ডিভাইচ চেকবক্স আৰু ৰেডিঅ'সমূহ সৃষ্টি কৰক।
পদ্ধতি
ব্ৰাউজাৰ অবিকল্পিত চেকবক্স আৰু ৰেডিঅ'সমূহক ৰ সহায়ত সলনি কৰা হয় .form-check
, দুয়োটা ইনপুট ধৰণৰ বাবে এটা শ্ৰেণীৰ শৃংখলা যি সিহতৰ HTML উপাদানসমূহৰ পৰিকল্পনা আৰু আচৰণ উন্নত কৰে, যি অধিক স্বনিৰ্বাচন আৰু ক্ৰছ ব্ৰাউজাৰ সামঞ্জস্যতা প্ৰদান কৰে। চেকবাক্সসমূহ এটা তালিকাত এটা বা কেইবাটাও বিকল্প নিৰ্ব্বাচন কৰাৰ বাবে, ৰেডিঅ'সমূহ বহুতৰ পৰা এটা বিকল্প নিৰ্ব্বাচন কৰাৰ বাবে।
গাঁথনিগতভাৱে, আমাৰ <input>
s আৰু s এটা ভিতৰৰ এটাৰ <label>
বিপৰীতে ভাই-ভনী উপাদান । এইটো অলপ বেছি শব্দৰ কাৰণ আপুনি আৰু ৰ সৈতে সম্পৰ্কিত কৰিবলে আৰু বৈশিষ্ট্যসমূহ ধাৰ্য্য কৰিব লাগিব । আমি আমাৰ সকলো ৰাজ্যৰ বাবে ভাই-ভনী নিৰ্বাচক ( ) ব্যৱহাৰ কৰো , যেনে বা . ক্লাছৰ সৈতে সংযুক্ত কৰিলে আমি 's অৱস্থাৰ ওপৰত ভিত্তি কৰি প্ৰতিটো বস্তুৰ বাবে লিখাটো সহজেই ষ্টাইল কৰিব পাৰো ।<input>
<label>
id
for
<input>
<label>
~
<input>
:checked
:disabled
.form-check-label
<input>
আমাৰ পৰীক্ষাসমূহে নিৰীক্ষণ কৰা বা অনিৰ্দিষ্ট অৱস্থাসমূহ সূচাবলৈ স্বনিৰ্বাচিত বুটষ্ট্ৰেপ আইকনসমূহ ব্যৱহাৰ কৰে।
চেক কৰে
<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 বৈশিষ্ট্য নাই)।
<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
এটা টগল চুইচ ৰেণ্ডাৰ কৰিবলৈ শ্ৰেণীটো ব্যৱহাৰ কৰে। disabled
চুইচসমূহেও বৈশিষ্ট্যটো সমৰ্থন কৰে ।
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" 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" 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" 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" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
অবিকল্পিত (ষ্টেক কৰা)
অবিকল্পিতভাৱে, যিকোনো সংখ্যক চেকবাক্স আৰু ৰেডিঅ'সমূহ যি তাৎক্ষণিক ভাই-ভনী উলম্বভাৱে ষ্টেক কৰা হব আৰু উপযুক্তভাৱে ৰ সৈতে ব্যৱধান কৰা হব .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
যিকোনো ত যোগ কৰি একেটা অনুভূমিক শাৰীত চেকবাক্স বা ৰেডিঅ'সমূহ গোট কৰক .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
যাৰ কোনো লেবেল লিখনী নাই। সহায়ক প্ৰযুক্তিসমূহৰ বাবে এতিয়াও কোনো ধৰণৰ অভিগম্য নাম প্ৰদান কৰিবলৈ মনত ৰাখিব (উদাহৰণস্বৰূপ, ব্যৱহাৰ কৰা 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
নহয় শৈলীসমূহ ব্যৱহাৰ .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>
ৰেডিঅ' টগল বুটাম
<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
, যেনে বিভিন্ন ৰূপৰেখা শৈলীসমূহত, সমৰ্থিত।
<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;