កន្លែងដាក់
ប្រើកន្លែងដាក់ផ្ទុកសម្រាប់សមាសធាតុ ឬទំព័ររបស់អ្នក ដើម្បីបង្ហាញថាអ្វីមួយអាចនៅតែកំពុងផ្ទុក។
អំពី
កន្លែងដាក់អាចត្រូវបានប្រើដើម្បីបង្កើនបទពិសោធន៍នៃកម្មវិធីរបស់អ្នក។ ពួកវាត្រូវបានបង្កើតឡើងតែជាមួយ HTML និង CSS ប៉ុណ្ណោះ មានន័យថាអ្នកមិនត្រូវការ JavaScript ណាមួយដើម្បីបង្កើតវាទេ។ ទោះយ៉ាងណាក៏ដោយ អ្នកនឹងត្រូវការ JavaScript ផ្ទាល់ខ្លួនមួយចំនួន ដើម្បីបិទបើកលទ្ធភាពមើលឃើញរបស់ពួកគេ។ រូបរាង ពណ៌ និងទំហំរបស់ពួកគេអាចត្រូវបានប្ដូរតាមបំណងយ៉ាងងាយស្រួលជាមួយនឹងថ្នាក់ឧបករណ៍ប្រើប្រាស់របស់យើង។
ឧទាហរណ៍
ក្នុងឧទាហរណ៍ខាងក្រោម យើងយកសមាសធាតុកាតធម្មតា ហើយបង្កើតវាឡើងវិញជាមួយកន្លែងដាក់ដែលបានអនុវត្តដើម្បីបង្កើត "កាតផ្ទុក"។ ទំហំនិងសមាមាត្រគឺដូចគ្នារវាងទាំងពីរ។
ចំណងជើងកាត
អត្ថបទឧទាហរណ៍រហ័សមួយចំនួនដើម្បីបង្កើតលើចំណងជើងកាត និងបង្កើតជាភាគច្រើននៃមាតិការបស់កាត។
ទៅកន្លែងណាមួយ។<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" aria-hidden="true">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>
របៀបដែលវាដំណើរការ
បង្កើតកន្លែងដាក់ជាមួយ .placeholder
ថ្នាក់ និងថ្នាក់ជួរឈរក្រឡាចត្រង្គ (ឧ. .col-6
) ដើម្បីកំណត់ width
. ពួកគេអាចជំនួសអត្ថបទនៅក្នុងធាតុមួយ ឬត្រូវបានបន្ថែមជាថ្នាក់កែប្រែទៅសមាសភាគដែលមានស្រាប់។
យើងអនុវត្តរចនាប័ទ្មបន្ថែមទៅ .btn
s តាមរយៈ ::before
ដើម្បីធានាថា height
ត្រូវបានគោរព។ អ្នកអាចពង្រីកគំរូនេះសម្រាប់ស្ថានភាពផ្សេងទៀតតាមតម្រូវការ ឬបន្ថែម
ធាតុនៅក្នុងធាតុដើម្បីឆ្លុះបញ្ចាំងពីកម្ពស់ នៅពេលដែលអត្ថបទពិតប្រាកដត្រូវបានបង្ហាញនៅកន្លែងរបស់វា។
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
aria-hidden="true"
គ្រាន់តែបង្ហាញថាធាតុគួរតែត្រូវបានលាក់សម្រាប់អ្នកអានអេក្រង់។ ឥរិយាបទនៃ ការ
ផ្ទុក របស់កន្លែងដាក់អាស្រ័យលើរបៀបដែលអ្នកនិពន្ធនឹងប្រើរចនាប័ទ្មកន្លែងដាក់ របៀបដែលពួកគេមានគម្រោងធ្វើបច្ចុប្បន្នភាពអ្វីៗជាដើម។ កូដ JavaScript មួយចំនួនប្រហែលជាត្រូវការដើម្បី
ប្តូរ ស្ថានភាពនៃកន្លែងដាក់ និងជូនដំណឹងដល់អ្នកប្រើប្រាស់ AT អំពីការអាប់ដេត។
ទទឹង
អ្នកអាចផ្លាស់ប្តូរ width
តាមរយៈថ្នាក់ជួរឈរក្រឡាចត្រង្គ, ឧបករណ៍ប្រើប្រាស់ទទឹង, ឬរចនាប័ទ្មក្នុងបន្ទាត់។
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
ពណ៌
តាមលំនាំដើម placeholder
ការប្រើប្រាស់ currentColor
។ វាអាចត្រូវបានបដិសេធដោយពណ៌ផ្ទាល់ខ្លួន ឬថ្នាក់ឧបករណ៍ប្រើប្រាស់។
<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
ទំហំ
ទំហំរបស់ .placeholder
s គឺផ្អែកលើរចនាប័ទ្មវាយអក្សរនៃធាតុមេ។ ប្ដូរពួកវាតាមបំណងដោយប្រើឧបករណ៍កែប្រែទំហំ៖ .placeholder-lg
, .placeholder-sm
ឬ .placeholder-xs
.
<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>
ចលនា
ទីតាំងដាក់ចលនាជាមួយ .placeholder-glow
ឬ .placeholder-wave
ដើម្បីបង្ហាញឱ្យកាន់តែប្រសើរឡើងនូវការយល់ឃើញនៃអ្វីមួយដែល កំពុង ផ្ទុក យ៉ាងសកម្ម ។
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
សាស
អថេរ
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;