ប៊ូតុង

ប៊ូតុងបញ្ជាសកម្មភាពនៅក្នុងទំព័រដូចជា ការស្នើទម្រង់ ការបញ្ជូន និងការចុចដើម្បីទាញយកជាដើម។

មានជាទូទៅ

ឧទាហរណ៍

បុរេជម្រើស 

 
<button type="button" class="btn btn-primary cgds">បុរេជម្រើស</button>

ប្រភេទនៃប៊ូតុង

ប្រើប៊ូតុងណាមួយក្នុងចំណោមប៊ូតុងដែលមានស្រាប់ទាំងអស់នេះដើម្បីឱ្យ​​​កាន់តែមានភាពងាយស្រួល។ ប៊ូតុងខ្លះមានលក្ខណៈជាបន្ទាត់ស៊ុម។ ប៊ូតុងស៊ុមភ្លឺជាឧទាហរណ៍ (btn-outline-light) ទុកសម្រាប់ប្រើប្រាស់ពេលផ្ទាំងខាងក្រោយមានពណ៌ងងឹតដើម្បីរំលេចកម្រិតពណ៌។

 
<button type="button" class="btn btn-primary cgds">ប៊ូតុងគោល</button>
<button type="button" class="btn btn-secondary cgds">ប៊ូតុងរង</button>
<button type="button" class="btn btn-success cgds">ប៊ូតុងជោគជ័យ</button>
<button type="button" class="btn btn-danger cgds">ប៊ូតុងគ្រោះថ្នាក់</button>
<button type="button" class="btn btn-warning cgds">ប៊ូតុងការព្រមាន</button>
<button type="button" class="btn btn-info cgds">ប៊ូតុងប្រាប់ព័ត៍មាន</button>
<button type="button" class="btn btn-light cgds">ប៊ូតុងភ្លឺ</button>
<button type="button" class="btn btn-dark cgds">ប៊ូតុងងងឹត</button>
<button type="button" class="btn btn-outline-primary cgds">ប៊ូតុងគ្មានផ្ទៃគោល</button>
<button type="button" class="btn btn-outline-secondary cgds">ប៊ូតុងគ្មានផ្ទៃរង</button>
<button type="button" class="btn btn-outline-success cgds">ប៊ូតុងគ្មានផ្ទៃជោគជ័យ</button>
<button type="button" class="btn btn-outline-warning cgds">ប៊ូតុងគ្មានផ្ទៃព្រមាន</button>
<button type="button" class="btn btn-outline-danger cgds">ប៊ូតុងគ្មានផ្ទៃគ្រោះថ្នាក់</button>
<button type="button" class="btn btn-outline-info cgds">ប៊ូតុងគ្មានផ្ទៃប្រាប់ព័ត៍មាន</button>
<button type="button" class="btn btn-outline-light cgds">ប៊ូតុងគ្មានផ្ទៃភ្លឺ</button>
<button type="button" class="btn btn-outline-dark cgds">ប៊ូតុងគ្មានផ្ទៃងងឹត</button>

ទំហំ

ទំហំស្វ័យប្រវត្តិនៃប៊ូតុងគឺប៊ូតុងធំ។ ប្រសិនបើចង់ឪ្យវាមានទំហំតូចសូមប្រើ class ក្នុងរង្វង់ក្រចកនេះ (btn-sm)។

 
<button type="button" class="btn btn-primary btn-lg cgds">ប៊ូតុងធំ</button>
<button type="button" class="btn btn-primary btn-sm cgds">ប៊ូតុងតូច</button>

ប៊ូតុង Block

បង្ហាញជាមួយ Grid ដើម្បីបង្កើតជាប៊ូតុងដែលមានទំហំលាតពេញបណ្តោយ ឬដែលអាចហៅម្យ៉ាងទៀតថា ប៊ូតុងBlock។

 
<div class="d-grid gap-2">
  <button class="btn btn-primary btn-lg" type="button">ប៊ូតុង</button>
  <button class="btn btn-outline-dark btn-lg" type="button">ប៊ូតុង</button>
</div>

ប៊ូតុងដែលមិនអាចចុចបាន

ប្រើប្រាស់ class disabled ដើម្បីបង្កើតប៊ូតុងដែលមិនអាចចុចបាន។

 
<button disabled type="button" class="btn btn-primary cgds">ប៊ូតុងគោល</button>
<button disabled type="button" class="btn btn-secondary cgds">ប៊ូតុងរង</button>
<button disabled type="button" class="btn btn-outline-dark cgds">ប៊ូតុងគ្មានផ្ទៃ</button>

ប៊ូតុងមានសញ្ញា 

 
<button type="button" class="btn btn-primary cgds"><i class="bi bi-arrow-90deg-left"></i>ប៊ូតុងធំមានសញ្ញា</button>
<button type="button" class="btn btn-primary btn-sm cgds"><i class="bi bi-arrow-90deg-left"></i>ប៊ូតុងតូចមានសញ្ញា</button>

ធាតុផ្សំ

Button Anatomy
  1. រូបសញ្ញា (អាចដាក់ក៏បានអត់ក៏បាន)៖ សម្រាប់បង្ហាញពីមុខងាររបស់ប៊ូតុងនីមួយៗ។ ឧទារហរណ៍៖ សញ្ញាបូកបង្ហាញថាប៊ូតុងនេះសម្រាប់ការបន្ថែម ឬបង្កើត។
  2. ពាក្យសម្គាល់៖ សម្រាប់សរសេរប្រាប់អ្នកប្រើប្រាស់ពីគោលបំណងរបស់ប៊ូតុង។ ទំហំតូចធំរបស់អក្សរសម្គាល់អាចតម្រូវបាន។
  3. ប្រអប់ប៊ូតុង៖ ទំហំរបស់វាអាស្រ័យ និងត្រូវបានតម្រូវដោយស្វ័យប្រវត្តិទៅតាមទំហំជាក់ស្តែងរបស់ពាក្យសម្គាល់។

គម្លាត

Alert Spacing

គម្លាតក្នុងប៊ូតុង
ត្រូវរក្សាគម្លាតយ៉ាងហោចណាច់8pxនៅលើអ័ក្សឈររបស់ប៊ូតុង។
កម្ពស់
ប៊ូតុងធំ - 48px
ប៊ូតុងមធ្យម - 40px
ប៊ូតុងតូច - 32px

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

ប៊ូតុងគួរតែត្រូវបានប្រើប្រាស់នៅពេលដូចជា៖

  • ប៊ូតុងសម្រាប់ចុចដើម្បីបញ្ជូនទម្រង់បែបបទ។

ប៊ូតុងមិនគួរតែត្រូវបានប្រើប្រាស់នៅពេលដូចជា៖

  • ភ្ជាប់បញ្ជាប់នៃទំព័រមួយទៅកាន់ទំព័រផ្សងៗ។ ករណីនេះគួរតែប្រើជាអក្សរដែលមានបញ្ជាប់វិញ។

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

ប្រើប៊ូតុងគោលសម្រាប់សកម្មភាពដូចជា ការឆ្លងចូលទៅទំព័រផ្សេង ឬសម្រាប់ការដាក់បញ្ជូនទម្រង់
ធ្វើបែបនេះដើម្បីប្រាប់ឱ្យ​​​អ្នកប្រើប្រាស់ដឹងថានឹងមានសកម្មភាពមួយកើតឡើងពេលពួកគាត់ចុចប៊ូតុង។

ប្រើប៊ូតុងរាងជាស៊ុម ឬប៊ូតុងរងសម្រាប់សកម្មភាពបន្ទាប់បន្សំ
ធ្វើបែបនេះដើម្បីញែកអោយឃើញភាពខុសគ្នារវាងប៊ូតុងគោលសម្រាប់សកម្មភាពគោលចម្បង និងសំខាន់ៗ និងប៊ូតុងរងសម្រាប់សកម្មភាពបន្ទាប់បន្សំ។

ត្រូវធ្វើឱ្យ​​​ប៊ូតុងមើលទៅដូចជាប៊ូតុង និងមើលទៅហាក់ដូចជាអាចចុចបាន
ធានាថាប៊ូតុងដែលអាចចុចបានមានពណ៌ច្បាស់ និងមិនស្រអាប់មិនស្រមោលដូចប៊ូតុងដែលចុចមិនបាន។

កុំប្រើប្រាស់ប៊ូតុងច្រើនដងពេក
ប៊ូតុងគួរតែត្រូវបានប្រើប្រាស់សម្រាប់សកម្មភាពសំខាន់ៗប៉ុណ្ណោះ។ ឧទាហរណ៍៖ សម្រាប់ទម្រង់បែបបទមួយគួរតែប្រើប្រាស់ប៊ូតុងតែ៣គត់។

សរសេរពាក្យសម្គាល់ប៊ូតុងឱ្យ​​​ខ្លី
ពាក្យសម្គាល់ប៊ូតុងគួរតែជាពាក្យគន្លឹះខ្លីដើម្បីឱ្យ​​​អ្នកប្រើប្រាស់ងាយអាន ងាយយល់ នឹងងាយដឹងថានឹងមានអ្វីកើតឡើងនៅពេលដែលពួកគេចុចប៊ូតុង។ ឧទាហរណ៍៖ បញ្ជូន ផ្ញើ ទាញយក និងបន្ទាប់។

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

$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;
$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;
$btn-border-width:            $input-btn-border-width !default;
$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:        .65 !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color:              $link-color !default;
$btn-link-hover-color:        $link-hover-color !default;
$btn-link-disabled-color:     $gray-600 !default;
$btn-border-radius:           $border-radius !default;
$btn-border-radius-sm:        $border-radius-sm !default;
$btn-border-radius-lg:        $border-radius-lg !default;
$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$btn-hover-bg-shade-amount:       15% !default;
$btn-hover-bg-tint-amount:        15% !default;
$btn-hover-border-shade-amount:   20% !default;
$btn-hover-border-tint-amount:    10% !default;
$btn-active-bg-shade-amount:      20% !default;
$btn-active-bg-tint-amount:       20% !default;
$btn-active-border-shade-amount:  25% !default;
$btn-active-border-tint-amount:   10% !default;
Home
Previous version 1.0.3