ቼኮች እና ሬዲዮዎች

ሙሉ በሙሉ በድጋሚ በተፃፈው የቼክ ክፍላችን ወጥ የሆነ የአሳሽ እና የመሳሪያ አቋራጭ አመልካች ሳጥኖችን እና ራዲዮዎችን ይፍጠሩ።

በዚህ ገጽ ላይ

አቀራረብ

የአሳሽ ነባሪ አመልካች ሳጥኖች እና ራዲዮዎች በ እገዛ ይተካሉ .form-check፣ የሁለቱም የግብአት አይነቶች ተከታታይ ክፍሎች የኤችቲኤምኤል አባላቶቻቸውን አቀማመጥ እና ባህሪ የሚያሻሽሉ፣ ይህም የበለጠ ማበጀት እና የአሳሽ ወጥነት አለው። አመልካች ሳጥኖች በአንድ ዝርዝር ውስጥ አንድ ወይም ብዙ አማራጮችን ለመምረጥ ሲሆኑ ራዲዮዎች ከብዙዎች አንድ ምርጫን ለመምረጥ ናቸው.

በመዋቅራዊ ደረጃ፣ የእኛ <input>እና ሴቶቻችን ከውስጥ <label>በተቃራኒው የወንድም እህት አካላት ናቸው ። እርስዎ መግለጽ ስላለብዎት እና ን ለማዛመድ ባህሪያት ይህ በመጠኑ የበለጠ የቃል ነው ። እንደ ወይም ለሁሉም ክልሎቻችን የወንድም እህት መራጭ () እንጠቀማለን ። ከክፍል ጋር ስንጣመር፣ በ ' ግዛት ላይ በመመስረት ለእያንዳንዱ ንጥል ነገር በቀላሉ ጽሁፍን መቅረጽ እንችላለን ።<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

<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>ዎች የግብአቱን ሁኔታ ለማመልከት ከቀላል ቀለም ጋር እንዲመሳሰሉ በራስ-ሰር በቅጥ ይዘጋጃሉ።

የማይታወቅ አመልካች ሳጥን ተሰናክሏል።

አመልካች ሳጥን ተሰናክሏል።

ምልክት የተደረገበት አመልካች ሳጥን ተሰናክሏል።

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.

3 (የተሰናከለ)

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>

3 (የተሰናከለ)

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;