ჩეკები და რადიოები
შექმენით თანმიმდევრული ბრაუზერისა და მოწყობილობების შორის მოსანიშნი ველები და რადიოები ჩვენი მთლიანად გადაწერილი შემოწმების კომპონენტით.
მიდგომა
ბრაუზერის ნაგულისხმევი ყუთები და რადიოები ჩანაცვლებულია .form-check
, კლასების სერიის დახმარებით ორივე შეყვანის ტიპისთვის, რომელიც აუმჯობესებს მათი HTML ელემენტების განლაგებასა და ქცევას, რაც უზრუნველყოფს უფრო მეტ პერსონალიზაციას და ბრაუზერის ჯვარედინი თანმიმდევრულობას. ჩამრთველი არის სიაში ერთი ან რამდენიმე ვარიანტის ასარჩევად, ხოლო რადიოები მრავალი ვარიანტიდან ერთის ასარჩევად.
სტრუქტურულად, ჩვენი <input>
s და <label>
s არის ძმური ელემენტები, განსხვავებით in- <input>
ისგან <label>
. ეს ოდნავ უფრო ვრცელია, რადგან თქვენ უნდა მიუთითოთ id
და for
ატრიბუტები <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
ფსევდო კლასი, როდესაც ხელით დაყენებულია JavaScript-ის საშუალებით (არ არის ხელმისაწვდომი 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;