កន្លែងដាក់

ប្រើកន្លែងដាក់ផ្ទុកសម្រាប់សមាសធាតុ ឬទំព័ររបស់អ្នក ដើម្បីបង្ហាញថាអ្វីមួយអាចនៅតែកំពុងផ្ទុក។

នៅលើទំព័រនេះ។

អំពី

កន្លែងដាក់អាចត្រូវបានប្រើដើម្បីបង្កើនបទពិសោធន៍នៃកម្មវិធីរបស់អ្នក។ ពួកវាត្រូវបានបង្កើតឡើងតែជាមួយ 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. ពួកគេអាចជំនួសអត្ថបទនៅក្នុងធាតុមួយ ឬត្រូវបានបន្ថែមជាថ្នាក់កែប្រែទៅសមាសភាគដែលមានស្រាប់។

យើងអនុវត្តរចនាប័ទ្មបន្ថែមទៅ .btns តាមរយៈ ::beforeដើម្បីធានាថា heightត្រូវបានគោរព។ អ្នកអាចពង្រីកគំរូនេះសម្រាប់ស្ថានភាពផ្សេងទៀតតាមតម្រូវការ ឬបន្ថែម  ធាតុនៅក្នុងធាតុដើម្បីឆ្លុះបញ្ចាំងពីកម្ពស់ នៅពេលដែលអត្ថបទពិតប្រាកដត្រូវបានបង្ហាញនៅកន្លែងរបស់វា។

html

<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តាមរយៈថ្នាក់ជួរឈរក្រឡាចត្រង្គ, ឧបករណ៍ប្រើប្រាស់ទទឹង, ឬរចនាប័ទ្មក្នុងបន្ទាត់។

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

ពណ៌

តាមលំនាំដើម placeholderការប្រើប្រាស់ currentColor។ វាអាចត្រូវបានបដិសេធដោយពណ៌ផ្ទាល់ខ្លួន ឬថ្នាក់ឧបករណ៍ប្រើប្រាស់។

html

<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>

ទំហំ

ទំហំរបស់ .placeholders គឺផ្អែកលើរចនាប័ទ្មវាយអក្សរនៃធាតុមេ។ ប្ដូរពួកវាតាមបំណងដោយប្រើឧបករណ៍កែប្រែទំហំ៖ .placeholder-lg, .placeholder-smឬ .placeholder-xs.

html

<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ដើម្បីបង្ហាញឱ្យកាន់តែប្រសើរឡើងនូវការយល់ឃើញនៃអ្វីមួយដែល កំពុង ផ្ទុក យ៉ាងសកម្ម ។

html

<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;