Qu'est-ce que le bootstrap réactif

Dans bootstrap, la réactivité signifie que la même page a des mises en page différentes sous différentes tailles d'écran et peut être compatible avec des appareils de différentes résolutions. La conception Web réactive permet aux utilisateurs de parcourir le site Web sur des appareils de différentes tailles pour obtenir une bonne expérience visuelle. L'effet peut être obtenu en utilisant un système de grille et en divisant une rangée en 12 grilles.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version bootstrap 5, ordinateur DELL G3

Qu'est-ce que le bootstrap responsive

La mise en page responsive signifie que la même page a différentes mises en page dans différentes tailles d'écran et peut être compatible avec différents appareils de résolution

La méthode de développement traditionnelle consiste à développer un ensemble pour PC et un autre ensemble pour téléphone mobile. Cependant, lors de l'utilisation d'une mise en page réactive, un seul ensemble suffit. L'inconvénient est que le CSS est relativement lourd.

Mise en œuvre : en vous appuyant sur le système de grille, en divisant une ligne en 12 grilles de manière égale, vous pouvez spécifier le nombre de grilles qu'un élément occupe

Qu'est-ce que la conception Web réactive

La conception Web réactive est un système qui permet aux utilisateurs de naviguer à travers différentes tailles. Des moyens d'obtenir de bons visuels lorsque vous parcourez des sites Web sur votre appareil. Par exemple, vous parcourez d'abord un site Web sur un écran d'ordinateur, puis sur un smartphone. La taille de l'écran du smartphone est beaucoup plus petite que celle de l'écran de l'ordinateur, mais vous ne ressentez aucune différence. . Cela montre que le site Web fait un excellent travail en matière de conception réactive.

Nous avons implémenté la réactivité dans nos exemples de mise en page fluide et vous invitons à les parcourir sur différentes tailles d'écran. Vous pouvez redimensionner votre navigateur avec l'extension Window Resize pour Chrome ou FireFox.

Comment fonctionne la conception Web réactive

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

Étude approfondie du CSS pour la conception Web réactive

Nous découvrirons les nuances de la façon dont la « conception réactive » est obtenue en étudiant « bootstrap-responsive.css ». Avant cela, 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 à charger les styles liés à la 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é d'échelle initiale est l'échelle initiale de la fenêtre. Lorsqu'elle est définie sur 1.0, la largeur native du périphérique est restituée.

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

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

Maintenant, si vous recherchez le fichier CSS réactif, vous constaterez qu'après quelques déclarations publiques (de la ligne numéro 10 à 22), il y a divers champs commençant par « @media ». Voici comment écrire des styles qui fonctionnent sur une variété d’appareils.

La première zone commence par « @media (max-width : 480px) » et définit les styles pour les appareils d'une largeur maximale de 480 pixels.

La deuxième zone commence par « @media (max-width : 767px) » et définit les styles pour les appareils d'une largeur maximale de 767 pixels.

La troisième zone commence par « @media (min-width : 768px) et (max-width : 979px) » pour définir les styles pour les appareils avec une largeur minimale de 768 pixels et une largeur maximale de 979 pixels.

La zone suivante consiste à styliser l'appareil avec une largeur maximale de 979 pixels. Cela commence donc par « @media (max-width : 979px) ».

Les deux dernières zones commencent respectivement par « @media (min-width : 980px) » et « @media (min-width : 1200px) ». La première consiste à définir des styles pour les appareils d'une largeur minimale de 980 pixels, et ce dernier consiste à définir des styles pour les appareils d'une largeur minimale de 1 200 pixels.

Ainsi, la fonction de base de cette feuille de style est de déterminer le style à utiliser en fonction de la largeur maximale et de la largeur minimale de l'appareil en utilisant les attributs « min-width » et « max-width ».

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!