Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
Check

Düşünjeli ýüzýän kömekçi enjamlarymyzy ulanyp, islendik elementde, islendik nokatda ýüzýär.

Gysgaça syn

Bu peýdaly synplar, CSS floathäsiýetini ulanyp, häzirki görnüş ululygyna esaslanyp, bir elementi çepe ýa-da saga süýşürýär ýa-da ýüzmegi öçürýär . !importantaýratynlyk meselelerinden gaça durmak üçin girizilýär. Bular gözenek ulgamymyz bilen birmeňzeş nokatlary ulanýarlar. Floüzýän enjamlaryň flex elementlere täsiriniň ýokdugyna üns bermegiňizi haýyş edýäris.

Loüzüji ähli görnüş ululyklarynda başlaýar

Viewhli görnüş ölçeglerinde ýüzmek

Viewhli görnüş ölçeglerinde ýüzmäň
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>

Jogapkärçilikli

floatHer bir baha üçin jogap üýtgeýjileri hem bar .

Floüzýän SM (kiçi) ýa-da has giň görnüşlerde ýüzmek

Floüzme MD (orta) ýa-da has giň görnüşdäki görnüşlerde başlaýar

“LG” (uly) ýa-da has giň görnüşdäki görnüşlerde ýüzmek

Floüzüli XL ölçegli (has uly) ýa-da has giň görnüşlerde ýüzmek

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>

Goldaw sapaklarynyň hemmesi:

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

Loüzýän kömekçi enjamlar, biziň hyzmatlarymyz API-de yglan edilýär scss/_utilities.scss. Utilities API-ni nähili ulanmalydygyny öwreniň.

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