Kuelea

Geuza kuelea kwenye kipengele chochote, kwenye sehemu yoyote ya kukatiza, kwa kutumia huduma zetu za kuelea zinazojibu.

Katika ukurasa huu

Muhtasari

Madarasa haya ya matumizi huelea kipengee kushoto au kulia, au kuzima kipengele cha kuelea, kulingana na ukubwa wa sasa wa kituo cha kutazama kwa kutumia kipengele cha CSSfloat . !importantimejumuishwa ili kuepuka masuala maalum. Hizi hutumia viingilio sawa vya sehemu ya kutazama kama mfumo wetu wa gridi ya taifa. Tafadhali fahamu kuwa huduma za kuelea hazina athari kwa vipengee vinavyobadilikabadilika.

Kuelea kuanza kwa ukubwa wote viewport

Mwisho wa kuelea kwenye saizi zote za kituo cha kutazama

Usielee kwenye saizi zote za kituo cha kutazama

html

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Msikivu

Tofauti za kuitikia pia zipo kwa kila floatthamani.

Kuelea kuanza kwenye vituo vya kutazama vya ukubwa wa SM (ndogo) au pana

Kuelea kuanza kwenye tovuti za kutazama za ukubwa wa MD (wa kati) au pana

Kuelea kuanza kwenye vituo vya kutazama vya ukubwa wa LG (kubwa) au pana

Kuelea kuanza kwenye vituo vya kutazama vya ukubwa wa XL (kubwa zaidi) au pana

html

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Hapa kuna madarasa yote ya usaidizi:

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

API ya Huduma

Huduma za kuelea zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss. Jifunze jinsi ya kutumia API ya huduma.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),