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

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

ئومۇمىي چۈشەنچە

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

بارلىق كۆرۈنۈش چوڭلۇقىدا لەيلىمە باشلاش

بارلىق كۆرۈنۈش چوڭلۇقىدا لەيلىمە ئاياغ

بارلىق كۆرۈنۈش چوڭلۇقىدا لەيلەپ يۈرمەڭ
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>

Responsive

floatھەر بىر قىممەت ئۈچۈن مەسئۇلىيەتچان ئۆزگىرىشلەرمۇ مەۋجۇت .

چوڭ كىچىك تىپتىكى SM (كىچىك) ياكى تېخىمۇ كەڭ بولغان مەنزىرىلىك رايونلاردا لەيلىمە باشلاش

چوڭ تىپتىكى MD (ئوتتۇراھال) ياكى تېخىمۇ كەڭ بولغان مەنزىرىلىك رايونلاردا لەيلىمە باشلاش

چوڭ تىپتىكى LG (چوڭ) ياكى تېخىمۇ كەڭ بولغان كۆرۈنۈش مەنزىرىلىك رايونىدا لەيلىمە باشلاش

چوڭ تىپتىكى XL (چوڭ-كىچىك) ياكى تېخىمۇ كەڭ بولغان كۆرۈنۈش مەنزىرىلىك رايونىدا لەيلىمە باشلاش

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>

بۇ يەردە بارلىق قوللاش دەرسلىرى بار:

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

Utilities API

لەيلىمە مۇلازىمەتلەر بىزنىڭ API دىكى ئاممىۋى مۇلازىمەتلىرىمىزدە ئېلان قىلىندى scss/_utilities.scss. API نى قانداق ئىشلىتىشنى ئۆگىنىۋېلىڭ.

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