Comment afficher les résultats de bootstrap sur différents appareils

La conception réactive de Bootstrap utilise les requêtes multimédias pour ajuster la disposition de la page en fonction de la taille de l'écran de l'appareil, afin que les pages Web puissent être affichées élégamment sous différentes tailles. Les utilisateurs peuvent effectuer un contrôle plus granulaire via des requêtes multimédias personnalisées, telles que l'utilisation de différentes dispositions sous différentes tailles d'écran. Le code doit être testé, prévisualisé sur différents appareils et constamment ajusté pour un rendu optimal.

Bootstrap rendu sur différents appareils: ce que vous voyez et ce que vous voulez voir peut être différent

De nombreux novices seront confus à propos d'un problème lors de l'apprentissage de Bootstrap: le code que j'ai écrit a l'air bien sur l'ordinateur, mais pourquoi sont-ils gâchés au téléphone? Cet article parlera de ce problème qui rend les gens chauves et vous dira quelques conseils pour éviter de rester coincé. Après avoir lu cet article, vous comprendrez les idées fondamentales de la conception réactive et serez en mesure de tester avec compétence vos projets bootstrap sur divers appareils.

Le cœur de Bootstrap est une conception réactive, qui utilise les requêtes multimédias CSS pour ajuster la disposition de la page en fonction de la taille de l'écran de différents appareils. Pour le dire franchement, c'est pour permettre à votre page Web d'être affiché gracieusement sous différentes tailles d'écran. Mais «l'élégance» n'est pas générée automatiquement, vous devez comprendre son mécanisme afin de le contrôler vraiment.

Passons en revue les bases en premier. Bootstrap utilise un système de grille pour contrôler la disposition des éléments de page via container , row , col . Ces classes modifient leur largeur en fonction des modifications de la taille de l'écran, permettant une disposition réactive. Vous devez comprendre col-md-4 prend un quart de la largeur sur un écran moyen, mais sur un petit écran, il peut occuper toute la ligne. La clé est la requête multimédia, qui est comme une déclaration conditionnelle, en sélectionnant différents styles CSS en fonction de la taille de l'écran.

Jetons un coup d'œil à un exemple simple et expérimentons la magie réactive de Bootstrap:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div> </div></code>

Ce code affiche trois colonnes sur les écrans moyens et grands, mais sur les petits écrans, ces trois colonnes sont affichées verticalement, chacune occupant la ligne entière. Il s'agit du comportement par défaut de Bootstrap, qui s'adapte automatiquement à différentes tailles d'écran.

Mais ce n'est que l'utilisation la plus élémentaire. En pratique, vous pourriez avoir besoin de plus de contrôle granulaire. Par exemple, vous souhaiterez peut-être utiliser différentes mises en page pour différentes tailles d'écran, ou vous devez ajouter des styles supplémentaires à un appareil spécifique. Pour le moment, vous devez acquérir une compréhension approfondie du mécanisme de requête multimédia de bootstrap et apprendre à personnaliser la requête multimédia.

Pour un exemple plus avancé, supposons que vous souhaitiez afficher quatre colonnes sur un super grand écran, trois colonnes sur un grand écran, deux colonnes sur un écran moyen et une colonne sur un petit écran:

 <code class="html"><div class="container"> <div class="row"> <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">Column 1</div> <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">Column 2</div> <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">Column 3</div> <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">Column 4</div> </div> </div></code>

Ce code utilise pleinement les classes de colonnes de différentes tailles fournies par Bootstrap pour obtenir un contrôle de disposition plus flexible.

Bien sûr, écrire du code ne suffit pas. Vous devez tester votre code sur différents appareils. Le moyen le plus simple est de redimensionner la fenêtre du navigateur pour simuler différentes tailles d'écran. Les outils de développeur de Chrome offrent des capacités de simulation de périphériques très puissantes qui peuvent simuler les tailles d'écran, la densité de pixels et même les conditions de réseau de divers appareils. De plus, vous pouvez également utiliser des tests en temps réel, ce qui peut refléter de manière plus réaliste l'effet d'affichage de votre page Web sur différents appareils.

N'oubliez pas que la conception réactive n'est pas obtenue pendant la nuit et nécessite des tests et un ajustement constants. N'ayez pas peur de l'essayer. Ce n'est qu'en le pratiquant plus que vous pouvez vraiment maîtriser l'essence de Bootstrap et rendre votre page Web parfaitement présente sur n'importe quel appareil. Enfin, n'oubliez pas de vous concentrer sur la lisibilité et la maintenabilité de votre code, ce qui est crucial dans les grands projets. Une structure de code claire et facile à comprendre vous permet d'atteindre deux fois le résultat avec la moitié de l'effort pendant le débogage et la maintenance.

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!