Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

Batmadan yüzmek

Duyarlı kayan nokta yardımcı programlarımızı kullanarak herhangi bir öğede, herhangi bir kesme noktasında kayan nokta arasında geçiş yapın.

genel bakış

Bu yardımcı program sınıfları, CSS floatözelliğini kullanarak geçerli görüntü alanı boyutuna bağlı olarak bir öğeyi sola veya sağa kaydırır veya kayan özelliği devre dışı bırakır . !importantözgüllük sorunlarından kaçınmak için dahil edilmiştir. Bunlar, ızgara sistemimizle aynı görünüm alanı kesme noktalarını kullanır. Float yardımcı programlarının esnek öğeler üzerinde hiçbir etkisi olmadığını lütfen unutmayın.

Tüm görüntü alanı boyutlarında kayan başlangıç

Tüm görüntü alanı boyutlarında kayan uç

Tüm görüntü alanı boyutlarında yüzmeyin
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>

Duyarlı

floatHer değer için duyarlı varyasyonlar da mevcuttur .

SM (küçük) veya daha geniş görünüm pencerelerinde kayan başlangıç

MD (orta) veya daha geniş görünüm pencerelerinde kayan başlangıç

LG (büyük) veya daha geniş görünüm pencerelerinde kayan başlangıç

XL (ekstra büyük) veya daha geniş görünüm pencerelerinde kayan başlangıç

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>

İşte tüm destek sınıfları:

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

küstah

Yardımcı Programlar API'sı

Float yardımcı programları, scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

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