Bootstrap Design adaptatif

Introduction

Ce tutoriel explique comment appliquer la conception responsive dans les mises en page web. Dans ce cours, vous découvrirez la conception web responsive. Avec l'omniprésence des appareils mobiles, comment offrir aux utilisateurs une bonne expérience visuelle lorsqu'ils naviguent sur votre site web depuis un appareil mobile est devenu un problème incontournable. La conception web responsive est une méthode efficace pour atteindre cet objectif.

Qu'est-ce que la conception web responsive

La conception web responsive est une méthode qui permet aux utilisateurs d'obtenir une bonne expérience visuelle lorsqu'ils naviguent sur un site web sur des appareils de tailles diverses. Par exemple, vous consultez d'abord un site web sur un écran d'ordinateur, puis sur un smartphone. L'écran du smartphone est bien plus petit que l'écran d'ordinateur, mais vous ne remarquez aucune différence ; l'expérience utilisateur des deux est presque identique. Cela montre que le site web réussit très bien en matière de conception responsive.

Nous avons déjà, dans notreappliquéet vous invitons à naviguer à différentes tailles d'écran. Vous pouvez utiliser leChromeouFireFoxextension de redimensionnement de fenêtre pour ajuster le navigateur.

Cliquez ici pour voir。

Comment fonctionne la conception web responsive

Pour appliquer la conception web responsive, vous devez créer un CSS qui contient des styles adaptés à diverses tailles d'appareils. Une fois la page chargée sur un appareil spécifique, la page utilise diverses polices et technologies de développement web, telles que les media queries. À ce moment, la taille du viewport de l'appareil est d'abord détectée, puis les styles spécifiques à l'appareil sont chargés.

Un examen plus approfondi du CSS de la conception web responsive

Nous allons étudier 'bootstrap-responsive.css' pour comprendre comment la « conception responsive » produit des différences subtiles. Avant cela, vous devez ajouter la ligne de code suivante à la section head de votre page web :

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

La balise meta viewport remplace le viewport par défaut et aide à charger les styles liés au viewport spécifique.

widthL'attribut définit la largeur de l'écran. Il contient une valeur, telle que 320, ce qui signifie 320 pixels, ou une valeur de 'device-width', qui indique au navigateur d'utiliser la résolution d'origine.

initial-scaleL'attribut est l'échelle initiale du viewport. Lorsqu'il est défini sur 1.0, il affichera la largeur d'origine de l'appareil.

Bien sûr, vous devez ajouter le CSS responsive de Bootstrap, comme suit :

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

Maintenant, si vous regardez le fichier CSS responsive, vous constaterez qu'après quelques déclarations communes (des lignes 10 à 22), il y a diverses'@media'sections qui commencent par. C'est ainsi que l'on écrit des styles qui s'appliquent à divers appareils.

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

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

La troisième section commence par '@media (min-width: 768px) and (max-width: 979px)' et définit des styles pour les appareils d'une largeur minimale de 768 pixels et d'une largeur maximale de 979 pixels.

La section suivante définit des styles pour les appareils d'une largeur maximale de 979 pixels. Elle commence donc par '@media (max-width: 979px)'.

Les deux dernières sections commencent respectivement par '@media (min-width: 980px)' et '@media (min-width: 1200px)'. La première définit des styles pour les appareils d'une largeur minimale de 980 pixels, et la seconde définit des styles pour les appareils d'une largeur minimale de 1200 pixels.

Ainsi, l'effet de base de cette feuille de style est que, en utilisant les attributs 'min-width' et 'max-width', elle détermine les styles à utiliser en fonction des largeurs maximale et minimale de l'appareil.

Explication

Pour rendre la mise en page plus responsive, Bootstrap fait trois choses :

1. Modification des largeurs des colonnes de la grille.

2. Lorsque c'est nécessaire, il utilise des éléments d'empilement au lieu d'éléments flottants. Si vous ne savez toujours pas clairement ce que sont les éléments d'empilement, le formulaire suivant de w3.org peut vous aider :

L'élément racine (html) forme la racine du contexte d'empilement. Les autres contextes d'empilement sont générés par tout élément positionné (y compris les éléments positionnés relativement avec une valeur calculée de 'z-index' différente de 'auto'). Les contextes d'empilement ne sont pas nécessairement relatifs au bloc conteneur.

3. Pour afficher correctement les titres et le texte, leurs tailles.

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

Bootstrap dispose de plusieurs classes pratiques pour développer des mises en page adaptées aux mobiles. Ces classes peuvent être vues dans 'responsive.less'.

.visible-phone, visible sur les téléphones d'une largeur de 767px et moins, masqué sur les tablettes entre 979px et 768px, masqué sur les ordinateurs de bureau ; il s'agit du comportement par défaut.

.visible-tablet, masqué sur les téléphones d'une largeur de 767px et moins, visible sur les tablettes entre 979px et 768px, masqué sur les ordinateurs de bureau ; il s'agit du comportement par défaut.

.visible-desktop, masqué sur les téléphones d'une largeur de 767px et moins, masqué sur les tablettes entre 979px et 768px, visible sur les ordinateurs de bureau ; il s'agit du comportement par défaut.

.hidden-phone, masqué sur les téléphones d'une largeur de 767px et moins, visible sur les tablettes entre 979px et 768px, visible sur les ordinateurs de bureau ; il s'agit du comportement par défaut.

.hidden-tablet, visible sur les téléphones d'une largeur de 767px et moins, masqué sur les tablettes entre 979px et 768px, visible sur les ordinateurs de bureau ; il s'agit du comportement par défaut.

.hidden-desktop, visible sur les téléphones d'une largeur de 767px et moins, visible sur les tablettes entre 979px et 768px, masqué sur les ordinateurs de bureau ; il s'agit du comportement par défaut.

Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.

Autres extensions