in English

चेक र रेडियो

हाम्रो पूर्ण रूपमा पुन: लेखिएको चेक कम्पोनेन्टको साथ लगातार क्रस-ब्राउजर र क्रस-यन्त्र चेकबक्सहरू र रेडियोहरू सिर्जना गर्नुहोस्।

यस पृष्ठमा

दृष्टिकोण

ब्राउजर पूर्वनिर्धारित चेकबक्सहरू र रेडियोहरू को मद्दतले प्रतिस्थापन गरिन्छ .form-check, दुबै इनपुट प्रकारहरूको लागि कक्षाहरूको एक श्रृंखला जसले तिनीहरूको HTML तत्वहरूको रूपरेखा र व्यवहारलाई सुधार गर्दछ, जसले अधिक अनुकूलन र क्रस ब्राउजर स्थिरता प्रदान गर्दछ। चेकबक्सहरू सूचीमा एक वा धेरै विकल्पहरू चयन गर्नका लागि हुन्, जबकि रेडियोहरू धेरैबाट एउटा विकल्प चयन गर्नका लागि हुन्।

संरचनात्मक रूपमा, हाम्रा <input>s र <label>s भाइबहिनी तत्वहरू हुन् जुन एक <input>भित्रको विपरित हो <label>। यो अलि बढी verbose छ किनकि तपाईंले निर्दिष्ट गर्नु पर्छ idर र forसम्बन्धित गर्नका लागि विशेषताहरू । हामी हाम्रा सबै राज्यहरू जस्तै वा . क्लाससँग जोड्दा, हामी सजिलैसँग प्रत्येक वस्तुको लागि ' स्टेट'को आधारमा पाठ शैली बनाउन सक्छौं।<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 विशेषता छैन)।

अनिश्चित चेकबक्स

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सम्बन्धित s स्वचालित रूपमा स्टाइल गरिएको छ।<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।

१

२

३ (असक्षम)

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>

१

२

३ (असक्षम)

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;