ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

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

زاپچاسلىرىڭىز ياكى بەتلىرىڭىزگە يۈك قاچىلايدىغان ئورۇنلارنى ئىشلىتىڭ ، بىر نەرسە يەنىلا يۈكلىنىۋاتىدۇ.

بۇ بەتتە

ھەققىدە

ئورۇن ئىگىلىرى سىزنىڭ ئىلتىماسىڭىزنىڭ تەجرىبىسىنى ئاشۇرۇشقا ئىشلىتىلىدۇ. ئۇلار پەقەت HTML ۋە CSS بىلەنلا ياسالغان ، يەنى ئۇلارنى قۇرۇش ئۈچۈن ھېچقانداق JavaScript لازىم ئەمەس. ئۇلارنىڭ كۆرۈنۈشىنى ئۆزگەرتىش ئۈچۈن سىز بىر قىسىم خاس JavaScript غا ئېھتىياجلىق بولىسىز. ئۇلارنىڭ تاشقى قىياپىتى ، رەڭگى ۋە چوڭ-كىچىكلىكىنى بىزنىڭ دەرسلىكلىرىمىز بىلەن ئاسانلا خاسلاشتۇرغىلى بولىدۇ.

مىسال

تۆۋەندىكى مىسالدا ، بىز تىپىك كارتا زاپچاسلىرىنى ئېلىپ ، «يۈك كارتىسى» قۇرۇش ئۈچۈن قوللىنىلغان ئورۇن ئىگىلىرى بىلەن قايتا ھاسىل قىلىمىز. چوڭلۇقى ۋە نىسبىتى ئىككىسىنىڭ ئوخشاشلىقى.

Placeholder
كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

بىر يەرگە بېرىڭ 
<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&nbsp;

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

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;