ប៊ូតុងមូល

ពេលអ្នកចង់បង្ហាញជម្រើសមួយឱ្យអ្នកប្រើប្រាស់ឃើញ និងអនុញ្ញាតឱ្យជ្រើសរើសយកបានតែមួយគត់ប៉ុណ្ណោះ។

មានជាទូទៅ

ឧទាហរណ៍

គ្មានស្លាក

បុរេជម្រើស

សកម្ម

អសកម្ម

      
    
         
<div class="row">
  <div class="col">
    <div class="form-check">
      <input class="form-check-input" type="radio" value="" id="radioDefault" />
      <label class="form-check-label" for="radioDefault">
        បុរេជម្រើស
      </label>
    </div>
  </div>
  <div class="col">
    <div class="form-check">
      <input class="form-check-input" type="radio" value="" id="radioActive" checked />
      <label class="form-check-label" for="radioActive">
        សកម្ម
      </label>
    </div>
  </div>
  <div class="col">
    <div class="form-check">
      <input class="form-check-input" type="radio" value="" id="radioDisabled" disabled />
      <label class="form-check-label" for="radioDisabled">
        អសកម្ម
      </label>
    </div>
  </div>
</div>

        

មានស្លាក

ស្លាក

ជម្រើសទី១

ជម្រើសទី២

ជម្រើសទី៣

      
    
         
<h5>ស្លាក</h5>
<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">
    ជម្រើសទី១
  </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">
    ជម្រើសទី២
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3">
  <label class="form-check-label" for="exampleRadios3">
    ជម្រើសទី៣
  </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;