pinterest linkedin behance copy

Flotter

Basculez les flotteurs sur n'importe quel élément, sur n'importe quel point d'arrêt, à l'aide de nos utilitaires flottants réactifs.

Aperçu

Ces classes utilitaires font flotter un élément vers la gauche ou la droite, ou désactivent le flottement, en fonction de la taille actuelle de la fenêtre d'affichage à l'aide de la CSS float propriété. !important est inclus pour éviter les problèmes de spécificité. Ceux-ci utilisent les mêmes points d'arrêt de fenêtre que notre système de grille. Veuillez noter que les utilitaires flottants n'ont aucun effet sur les éléments flexibles.

Démarrage flottant sur toutes les tailles de fenêtre

Extrémité flottante sur toutes les tailles de fenêtre

Ne flotte pas sur toutes les tailles de fenêtres
<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

Des variations réactives existent également pour chaque float valeur.

Démarrage flottant sur les fenêtres de taille SM (petites) ou plus larges

Démarrage flottant sur les fenêtres de taille MD (moyenne) ou plus large

Démarrage flottant sur les fenêtres de taille LG (grandes) ou plus larges

Démarrage flottant sur les fenêtres de taille XL (extra-large) ou plus larges

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

Voici toutes les classes de soutien :

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

Les utilitaires flottants sont déclarés dans notre API d'utilitaires au format scss/_utilities.scss. Apprenez à utiliser l'API des utilitaires.

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

© 2010-2024 QZYcodes by Quazerty.