in English
ቼክን ሬድዮታትን
ምሉእ ብምሉእ ዳግማይ ዝተጻሕፈ ናይ ምፍታሽ ክፍሊና ንዘይተለዋወጠ መስቀላዊ-ብራውዘርን መስቀላዊ-መሳርሕን ምልክት ሳጹናትን ሬድዮታትን ምፍጣር።
ኣብዚ ገጽ
ቅረብ
ናይ መርበብ ሓበሬታ ነባሪ ሳጹናት ምልክትን ሬድዮታትን ብሓገዝ ናይ .form-check፣ ተኸታታሊ ክፍልታት ንኽልቲኦም ዓይነታት ምእታው ንኣቀማምጣን ባህርን ናይ HTML ባእታታቶም ዘመሓይሽ፣ ዝዓበየ ምምዕርራይን መስቀላዊ ቅኑዕነት መርበብ ሓበሬታን ዝህቡ ይትክኡ። ሳጹናት ምልክት ኣብ ሓደ ዝርዝር ሓደ ወይ ሓያሎ ኣማራጺታት ንምምራጽ ክኸውን ከሎ፡ ሬድዮታት ድማ ካብ ብዙሓት ሓደ ኣማራጺ ንምምራጽ ዝሕግዙ እዮም።
ብኣቃውማ፡ ናትና <input>sን <label>sን ኣንጻር ሓደ <input>ኣብ ውሽጢ a <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="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>ሬድዮታት
<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ክላስ ተጠቒሙ ንሓደ ቶግል ስዊች ንምቕራብ ይጥቀመሉ። 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-reverseሳጹናትካ፡ ሬድዮታትካን መቐየሪታትካን ኣብቲ ናይ መቐየሪ ክፍሊ ኣብ ኣንጻር ወገን ኣቐምጦም ።
<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). ንዝርዝር ሓበሬታ ኣብቲ ናይ ቅጥዕታት ሓፈሻዊ ትሕዝቶ ተበጻሕነት ክፍሊ ርአ።
<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>ብዓይኒ፡ እዞም ናይ ምልክት ሳጹን ምቕያር መጠወቒታት ምስቶም ናይ መጠወቒ ተወሰኽቲ ምቕያር መጠወቒታት
ተመሳሳሊ እዮም
። ይኹን እምበር፡ ብሓገዝቲ ቴክኖሎጂታት ብዝተፈላለየ መንገዲ ይመሓላለፉ: እቶም ናይ ምልክት ሳጹን ቶግልስ ብኣንበብቲ ስክሪን “ተመዝጊቦም”/“ዘይተመርመሩ” (ምኽንያቱ፡ ዋላ’ኳ መልክዖም እንተሃለዉ፡ ብመሰረቱ ጌና ሳጹናት ምልክት ስለ ዝኾኑ)፡ እቶም ናይ መጠወቒ ፕላግ-ኢን ዝቕይሩ መጠወቒታት ግን ከምኡ ክኾኑ እዮም። “button”/“button pressed” ተባሂሉ ይእወጅ። ኣብ መንጎ እዞም ክልተ ኣገባባት ዝግበር ምርጫ ኣብቲ እትፈጥሮ ዘለኻ ዓይነት ምቕያር ዝምርኮስ ክኸውን እዩ፣ ከምኡ’ውን እቲ ምቕያር ከም ሳጹን ምልክት ወይ ከም ጭቡጥ መጠወቒ ክእወጅ ከሎ ንተጠቀምቲ ትርጉም ክህልዎ ድዩ ኣይህልዎን።
ናይ ሬድዮ መቐያየሪ መጠወቒታት
<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 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;