ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

ቼኮች እና ሬዲዮዎች

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

አቀራረብ

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

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

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

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

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

ነባሪ (የተቆለለ)

በነባሪ፣ የቅርብ ወንድም ወይም እህት የሆኑ ማንኛውም የአመልካች ሳጥኖች እና ራዲዮዎች በአቀባዊ ይደረደራሉ እና በትክክል ከ ጋር ይያያዛሉ .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;