Maison > Article > interface Web > Comment définir un positionnement fixe dans bootstrap
Comment définir un positionnement fixe dans bootstrap
- WBOYoriginal
- 2022-05-06 15:26:553198parcourir
Dans bootstrap, vous pouvez utiliser le plug-in Affix pour définir un positionnement fixe. Le plug-in peut corriger le positionnement de n'importe quel élément via les données d'attribut personnalisées. La syntaxe est "0213ae703cb031d516a4518c57a95e02".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version bootstrap 3.3.7, ordinateur DELL G3
Comment définir le positionnement fixe dans bootstrap
Positionnement fixe - Déclencheur déclaratif positionnement fixe
Affix le plug-in peut être utilisé sur n'importe quel élément. Pour un positionnement fixe, la méthode la plus simple consiste à le déclencher via les données d'attribut personnalisées. Il comprend principalement deux paramètres :
1. data-spy : affixe de valeur, indiquant que l'élément est fixe.
2. data-offset : Une valeur entière, telle que 90, signifie que les valeurs des éléments supérieur et inférieur sont toutes deux de 90 px. Elle comprend deux méthodes : data-offset-top et data-offset-bottom. .
data-offset-top est utilisé pour définir la distance de l'élément par rapport au haut. Par exemple, 90 signifie que l'élément est à 90 px du haut. Lorsque l'utilisateur fait glisser la barre de défilement vers le bas depuis le haut, lorsque la distance de défilement est supérieure à 90 px, l'élément affixe ne défilera plus et sera fixé en haut de. la fenêtre du navigateur.
data-offset-bottom est juste le contraire de data-offset-top.
L'utilisation spécifique est la suivante :
<div data-spy="affix" data-offset="90">affix元素</div>
Définissez séparément la méthode de valeur de décalage des données :
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
Notez que la surveillance du défilement doit être déclarée dans le corps.
<body data-spy="scroll" data-target="sidebarMenu">
Remarque, veuillez visualiser l'effet en mode écran large. D'après mes tests, en utilisant le style déclaratif, même si la valeur de data-offset-top est définie, elle ne sera pas valide. Vous devez définir une valeur supérieure pour l'affixe dans le style, qui est égale à la valeur de data-offset. -haut. Identique à data-offset-bottom.
Recommandations associées : Tutoriel bootstrap
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Quelle est la relation entre le bootstrap et less ?
- En combien de colonnes le bootstrap peut-il être divisé ?
- L’effet de médiation bootstrap dépend-il de la valeur p ?
- Quel est le principe de la rastérisation bootstrap ?
- Vous guidez étape par étape pour utiliser Bootstrap pour implémenter la disposition du flux en cascade