in English
Float
Toggle بىزنىڭ ئىنكاسچان لەيلىمە ئەسلىھەلىرىمىزنى ئىشلىتىپ ھەر قانداق ئېلېمېنت ، ھەر قانداق بۆسۈش ئېغىزىدا لەيلەيدۇ.
بۇ بەتتە
ئومۇمىي چۈشەنچە
بۇ پايدىلىق دەرسلەر CSS float
خاسلىقىنى ئىشلىتىپ نۆۋەتتىكى كۆرۈنۈش چوڭلۇقىغا ئاساسەن ، سول ياكى ئوڭغا ئېلېمېنت لەيلەيدۇ ياكى لەيلىتىشنى چەكلەيدۇ . !important
كونكرېت مەسىلىلەردىن ساقلىنىش ئۈچۈن ئۆز ئىچىگە ئالىدۇ. بۇلار تور سىستېمىسىغا ئوخشاش كۆرۈش نۇقتىسىنى ئىشلىتىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، لەيلىمە دېتاللارنىڭ ئەۋرىشىم تۈرلەرگە ھېچقانداق تەسىرى يوق.
بارلىق كۆرۈنۈش چوڭلۇقىدا لەيلىمە باشلاش
بارلىق كۆرۈنۈش چوڭلۇقىدا لەيلىمە ئاياغ
بارلىق كۆرۈنۈش چوڭلۇقىدا لەيلەپ يۈرمەڭ
<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 (چوڭ-كىچىك) ياكى تېخىمۇ كەڭ بولغان كۆرۈنۈش مەنزىرىلىك رايونىدا لەيلىمە باشلاش
<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,
)
),