ቼክን ሬድዮታትን
ምሉእ ብምሉእ ዳግማይ ዝተጻሕፈ ናይ ምፍታሽ ክፍሊና ንዘይተለዋወጠ መስቀላዊ-ብራውዘርን መስቀላዊ-መሳርሕን ምልክት ሳጹናትን ሬድዮታትን ምፍጣር።
ቅረብ
ናይ መርበብ ሓበሬታ ነባሪ ሳጹናት ምልክትን ሬድዮታትን ብሓገዝ ናይ .form-check
፣ ተኸታታሊ ክፍልታት ንኽልቲኦም ዓይነታት ምእታው ንኣቀማምጣን ባህርን ናይ HTML ባእታታቶም ዘመሓይሽ፣ ዝዓበየ ምምዕርራይን መስቀላዊ ቅኑዕነት መርበብ ሓበሬታን ዝህቡ ይትክኡ። ሳጹናት ምልክት ኣብ ሓደ ዝርዝር ሓደ ወይ ሓያሎ ኣማራጺታት ንምምራጽ ክኸውን ከሎ፡ ሬድዮታት ድማ ካብ ብዙሓት ሓደ ኣማራጺ ንምምራጽ ዝሕግዙ እዮም።
ብመዋቕራዊ መዳይ፡ ናትና <input>
sን <label>
sን ኣንጻር ሓደ <input>
ኣብ ውሽጢ ሓደ ፡ ኣሕዋት ባእታታት እዮም <label>
። እዚ ቁሩብ ዝያዳ ቃላት ዝመልኦ እዩ ምኽንያቱ ክትገልጾን ባህርያትን ክትገልጾ ኣለካ id
ነቲ and for
ንምትእስሳር . ንኹለን ግዝኣታትና ናይ ሓው መምረጺ ( ) ንጥቀም ፣ ከም ወይ . ምስቲ ክፍሊ ምስ እንውሃሃድ፡ ንነፍሲ ወከፍ ኣቕሓ ዝኸውን ጽሑፍ ብቐሊሉ ብመሰረት 's state ክንቅይሮ ንኽእል።<input>
<label>
~
<input>
:checked
:disabled
.form-check-label
<input>
ናትና ምፍታሽ ዝተፈተሹ ወይ ዘይተወሰኑ ኩነታት ንምምልካት ብሕታዊ ናይ Bootstrap ምልክታት ይጥቀሙ።
ምፍታሽ
<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;