ቼኮች እና ሬዲዮዎች
ሙሉ በሙሉ በድጋሚ በተፃፈው የቼክ ክፍላችን ወጥ የሆነ የአሳሽ እና የመሳሪያ አቋራጭ አመልካች ሳጥኖችን እና ራዲዮዎችን ይፍጠሩ።
አቀራረብ
የአሳሽ ነባሪ አመልካች ሳጥኖች እና ራዲዮዎች በ እገዛ ይተካሉ .form-check
፣ የሁለቱም የግብአት አይነቶች ተከታታይ ክፍሎች የኤችቲኤምኤል አባላቶቻቸውን አቀማመጥ እና ባህሪ የሚያሻሽሉ፣ ይህም የበለጠ ማበጀት እና የአሳሽ ወጥነት አለው። አመልካች ሳጥኖች በአንድ ዝርዝር ውስጥ አንድ ወይም ብዙ አማራጮችን ለመምረጥ ሲሆኑ ራዲዮዎች ከብዙዎች አንድ ምርጫን ለመምረጥ ናቸው.
በመዋቅራዊ ደረጃ፣ የእኛ <input>
እና ሴቶቻችን ከውስጥ <label>
በተቃራኒው የወንድም እህት አካላት ናቸው ። እርስዎ መግለጽ ስላለብዎት እና ን ለማዛመድ ባህሪያት ይህ በመጠኑ የበለጠ የቃል ነው ። እንደ ወይም ለሁሉም ክልሎቻችን የወንድም እህት መራጭ () እንጠቀማለን ። ከክፍል ጋር ስንጣመር፣ በ ' ግዛት ላይ በመመስረት ለእያንዳንዱ ንጥል ነገር በቀላሉ ጽሁፍን መቅረጽ እንችላለን ።<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
በእጅ በጃቫስክሪፕት ሲቀናበሩ የውሸት ክፍልን መጠቀም ይችላሉ (ለመግለጽ ምንም የኤችቲኤምኤል አይነታ የለም)።
<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
የመቀያየር መቀየሪያን ለመስራት ክፍሉን ይጠቀማል። መቀየሪያዎች እንዲሁ ባህሪውን ይደግፋሉ 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;