ប្រអប់គ្រីស

សម្រាប់ប្រើប្រាស់នៅពេលអ្នកចង់ឱ្យអ្នកប្រើប្រាស់អាចរើសយកជម្រើសលើសពីមួយចេញពីក្រុម។

មានជាទូទៅ

ឧទាហរណ៍

មានស្លាក

បុរេជម្រើស

សកម្ម

អសកម្ម

      
    
         
<div class="row">
  <div class="col">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkboxDefault" />
      <label class="form-check-label" for="checkboxDefault">
        បុរេជម្រើស
      </label>
    </div>
  </div>
  <div class="col">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkboxActive" checked />
      <label class="form-check-label" for="checkboxActive">
        សកម្ម
      </label>
    </div>
  </div>
  <div class="col">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="checkboxDisabled" disabled />
      <label class="form-check-label" for="checkboxDisabled">
        អសកម្ម
      </label>
    </div>
  </div>
</div>

        

គ្មានស្លាក

ស្លាក

ប្រអប់គ្រីស

      
    
         
<h5>ស្លាក</h5>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkbox1" />
  <label class="form-check-label" for="checkbox1"> ប្រអប់គ្រីស </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkbox2" />
  <label class="form-check-label" for="checkbox2"> ប្រអប់គ្រីស </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkbox3" />
  <label class="form-check-label" for="checkbox3"> ប្រអប់គ្រីស </label>
</div>

        

ធាតុផ្សំ

ប្រអប់គ្រីស៖ អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់អាចជ្រើសរើសឬដកការជ្រើសរើសពីប្រអប់ណាមួយ។
ជម្រើស៖ ប្រាប់អ្នកប្រើប្រាស់ឱ្យដឹងថាជម្រើសដែលប្រអប់ផ្តល់ឱ្យគឺជាជម្រើសអ្វី។

គម្លាត

នៅក្នុងប្រអប់គ្រីសមួយ
រក្សាគម្លាតយ៉ាងតិច 16px នៃគម្លាតនៅអ័ក្សដេកចន្លោះរវាងប្រអប់និងជម្រើស។

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

ប្រអប់គ្រីសគួរប្រើប្រាស់នៅពេល៖

ពេលអ្នកចង់ឱ្យអ្នកប្រើប្រាស់អាចរើសយកជម្រើសលើសពីមួយចេញពីជម្រើសមួយក្រុមដែលអ្នកផ្តល់ឱ្យពួកគាត់។
ពេលអ្នកតម្រូវឱ្យអ្នកប្រើប្រាស់អាចមើលឃើញជម្រើសទាំងអស់ក្នុងពេលតែមួយ។

ប្រអប់គ្រីសមិនគួរប្រើប្រាស់នៅពេល៖

ពេលអ្នកតម្រូវឱ្យអ្នកជ្រើសរើសអាចរើសយកបានជម្រើសតែមួយគត់។

គោលការណ៍ណែនាំនៃការរចនា

សរសេរជម្រើសទាំងអស់ដោយតម្រៀបពីលើចុះក្រោម
យើងណែនាំឱ្យអ្នកតម្រៀបវាពីលើចុះក្រោម ពីព្រោះការតម្រៀបពីឆ្វេងទៅស្តាំអាចធ្វើឱ្យអ្នកប្រើប្រាស់យល់ច្រឡំ និងពិបាកមើល ពិបាកបែងចែកថាប្រអប់មួយណាត្រូវនឹងជម្រើសមួយណា។

សរសេរជម្រើសឱ្យមានប្រសិទ្ធិភាព
ជម្រើសត្រូវសរសេរយ៉ាងណាឱ្យច្បាស់ៗ ងាយយល់។

តម្រៀបជម្រើសតាមលំដាប់លំដោយត្រឹមត្រូវ និងសមហេតុផល
ត្រូវតម្រៀបជម្រើសឱ្យមានលក្ខណៈសមហេតុផល និងស៊ីចង្វាក់គ្នាដើម្បីឱ្យអ្នកប្រើប្រាស់ងាយស្រួលក្នុងការស្វែងរកជម្រើសដែលពួកគាត់ចង់បាន។

រក្សាគម្លាតធំល្មម
គម្លាតរវាងប្រអប់ និងជម្រើសគួរតែរក្សាទុកចន្លោះធំល្មមសម្រាប់ឱ្យអ្នកប្រើប្រាស់ទូរស័ព្ទដៃចុចត្រូវប្រអប់។

ខ្នាតសម្រាប់រចនា

$form-check-input-width: 1.125em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: $form-check-input-width+.5em !default;
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
$form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24'
                                                                 height='24' fill='#{$form-check-input-checked-color}' viewBox='0 0 16 16'>
  <path
    d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z' />
</svg>") !default;
$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>") !default;
$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$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>") !default;
$form-check-input-disabled-opacity: .5 !default;
$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-check-inline-margin-end: 1rem !default;