Le bootstrap est-il réactif ?

Si vous souhaitez en savoir plus sur le bootstrap, vous pouvez cliquer sur : Tutoriel Bootstrap

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

La conception Web réactive est une méthode qui permet aux utilisateurs d'obtenir de bons effets visuels lors de la navigation sur le site Web à travers des appareils de différentes tailles. Par exemple, vous parcourez d'abord un site Web sur un écran d'ordinateur, puis vous le parcourez 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 entre les deux. presque pareil, ce qui signifie que le site Web fait un excellent travail en matière de conception réactive.

Comment fonctionne la conception de sites Web réactifs ?

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.

Plongez-vous dans CSS pour une conception Web réactive ?

Nous apprendrons comment le "responsive design" implémente les nuances 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 :

La balise méta de la fenêtre remplace la fenêtre par défaut et aide à charger le style lié à la fenêtre.

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 de l'appareil sera rendue.

Bien sûr, vous devez ajouter le CSS réactif de Bootstrap, comme ceci :

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

Maintenant, si vous recherchez le fichier CSS réactif, vous find , après quelques déclarations publiques (des lignes 10 à 22), il existe différentes zones 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, commençant par '@media (min-width: 768px) et (max-width: 979px)', définit les styles pour les appareils avec une largeur minimale de 768 pixels et une largeur maximale de 979 pixels.

La zone suivante consiste à styliser les appareils 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 sert à définir le style pour les appareils avec une largeur minimale de 980 pixels, et la seconde est pour les appareils avec une largeur minimale de 980 pixels. largeur minimale de 1 200 pixels. Définir le style.

Par conséquent, 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 ».

Explication

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

1 . Modification de 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 de tous les éléments positionnés (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. Rendre correctement le titre et la taille du texte.

Développez plus rapidement des mises en page adaptées aux mobiles.

Bootstrap propose plusieurs classes utiles pour développer des mises en page adaptées aux mobiles. Ces classes peuvent être vues sur « responsive.less ».

.visible-phone, visible sur les téléphones d'une largeur de 767 px et moins, masqué sur les tablettes d'une largeur de 979 px à 768 px, masqué sur les ordinateurs de bureau, ce qui est la valeur par défaut.

.visible-tablet, masqué sur les téléphones mobiles d'une largeur de 767px et moins, visible sur les tablettes d'une largeur de 979px à 768px, masqué sur le bureau, ce qui est la valeur par défaut.

.visible-desktop, masqué à la vue sur les téléphones d'une largeur de 767 px et inférieure, masqué à la vue sur les tablettes de 979 px à 768 px, visible sur le bureau, ce qui est la valeur par défaut.

.hidden-phone, masqué sur les téléphones d'une largeur de 767px et moins, visible sur les tablettes de 979px à 768px, visible sur les ordinateurs de bureau, c'est la valeur par défaut.

.hidden-tablet, visible sur les téléphones d'une largeur de 767px et moins, masqué sur les tablettes de 979px à 768px, visible sur le bureau, ce qui est la valeur par défaut.

.hidden-desktop, visible sur les téléphones mobiles d'une largeur de 767px et moins, visible sur les tablettes d'une largeur de 979px à 768px, masqué sur le bureau, ce qui est la valeur par défaut.

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!