Comment implémenter la réactivité dans bootstrap

Avec la popularité des appareils mobiles, comment permettre aux utilisateurs de parcourir votre site Web via des appareils mobiles pour obtenir de bons effets visuels est devenu un problème inévitable. La conception Web réactive est un moyen efficace d’y parvenir.

Le responsive web design est une méthode qui permet aux utilisateurs d'obtenir de bons effets visuels lors de la navigation sur un site Web sur des appareils de différentes tailles. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Par exemple, vous parcourez d'abord un site Web sur un écran d'ordinateur, puis naviguez sur un smartphone. La taille de l'écran du smartphone est beaucoup plus petite que celle d'un smartphone. l'écran de l'ordinateur, mais vous ne ressentez aucune différence. L'expérience utilisateur des deux est presque la même, ce qui montre que ce site Web a fait du bon travail en matière de conception réactive.

Nous avons mis en place de la réactivité dans notre mise en page fluide et vous invitons à naviguer sur différentes tailles d'écran. Vous pouvez redimensionner votre navigateur avec l'extension Window Resize pour Chrome ou FireFox.

Fonctionnement de la conception Web réactive

Afin d'appliquer une conception Web réactive, vous devez créer un CSS contenant des styles qui s'adaptent à différentes tailles d'appareils. Une fois qu'une page est chargée sur un appareil spécifique à l'aide de diverses polices et techniques de développement Web telles que les requêtes multimédias, la taille de la fenêtre d'affichage de l'appareil est d'abord détectée et les styles spécifiques à l'appareil sont chargés.

Vous devez ajouter la ligne de code suivante dans la zone d'en-tête de la page Web :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

La balise méta de la fenêtre remplace la fenêtre par défaut et aide avec chargement des styles associés à une fenêtre spécifique.

l'attribut width définit la largeur de l'écran. Il contient une valeur telle que 320 pour 320 pixels, ou « largeur de l'appareil » pour indiquer au navigateur d'utiliser la résolution native.

La propriété initial-scale est l'échelle initiale de la fenêtre. Lorsqu'elle est définie sur 1.0, la largeur native de l'appareil sera rendue.

Bien sûr, vous devez ajouter le CSS responsive de Bootstrap, comme indiqué ci-dessous :

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

La réactivité de BootStrap repose sur son système de grille, en mettant en place différents contrôles, tels que col-(sm /md /ls/xl)-(1/2/3/4/5/6/7/8/9/10/11/12) pour obtenir différents effets de mise en page dans différentes zones d'affichage et obtenir une mise en page réactive.

Explication

Afin de rendre la mise en page plus réactive, Bootstrap fait trois choses :

1. Modifier la largeur des colonnes dans la grille. .

2. Chaque fois que cela est nécessaire, il utilise des éléments de pile au lieu d'éléments flottants. Si vous ne savez toujours pas ce qu'est un élément de pile, le formulaire suivant de w3.org peut vous aider : L'élément racine

(html) forme la racine du contexte de pile, et d'autres contextes de pile sont généré à partir d'éléments positionnés arbitrairement (y compris les éléments positionnés relativement, qui ont une valeur calculée de « z-index » plutôt que « auto »). Le contexte de pile n'est pas requis par rapport au bloc conteneur.

3. Restituez correctement les titres et le texte avec leurs dimensions.

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

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!