ئورۇن ئىگىلىرى

ھەققىدە

ئورۇن ئىگىلىرى سىزنىڭ ئىلتىماسىڭىزنىڭ تەجرىبىسىنى ئاشۇرۇشقا ئىشلىتىلىدۇ. ئۇلار پەقەت 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 ئارقىلىق قوشۇمچە ئۇسلۇب قوللىنىمىز . ئېھتىياجغا ئاساسەن باشقا ئەھۋاللارغا قارىتا بۇ ئەندىزىنى ئۇزارتالايسىز ياكى ئەمەلىي تېكىست ئۇنىڭ ئورنىغا بوي ئېگىزلىكىنى ئەكس ئەتتۈرىدىغان ئېلېمېنت ئىچىگە قوشسىڭىز بولىدۇ.::beforeheight 

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

كەڭلىك

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>

Sizing

S نىڭ چوڭ-كىچىكلىكى .placeholderئانا ئېلېمېنتنىڭ باسما ئۇسلۇبىنى ئاساس قىلىدۇ. چوڭ- كىچىك ئۆزگەرتكۈچلەر بىلەن ئۇلارنى خاسلاشتۇرۇڭ: .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>

Animation

ئاكتىپ يۈكلەنگەن نەرسىگە .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>

Sass

ئۆزگەرگۈچى مىقدار

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;